Coding Website
Uploaded by
Ginanjar have a limitCoding Website
Uploaded by
Ginanjar have a limit```html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Hidup Sehat - Edukasi Gaya Hidup dan Makanan Sehat</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.0.0-beta3/css/all.min.css">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
body {
background-color: #f8f9fa;
color: #333;
line-height: 1.6;
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
header {
background-color: #4CAF50;
color: white;
padding: 1rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
.logo {
font-size: 1.8rem;
font-weight: bold;
display: flex;
align-items: center;
}
.logo i {
margin-right: 10px;
nav ul {
display: flex;
list-style: none;
nav ul li {
margin-left: 20px;
nav ul li a {
color: white;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
nav ul li a:hover {
color: #e8f5e9;
border-bottom: 2px solid #e8f5e9;
padding-bottom: 5px;
}
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?
ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
text-align: center;
color: white;
.hero-content {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
animation: fadeInDown 1s ease;
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
animation: fadeInUp 1s ease;
.btn {
display: inline-block;
background-color: #4CAF50;
color: white;
padding: 12px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1rem;
animation: fadeInUp 1.2s ease;
.btn:hover {
background-color: #45a049;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
section {
padding: 80px 0;
}
.section-title {
text-align: center;
margin-bottom: 50px;
font-size: 2.5rem;
color: #333;
position: relative;
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background-color: #4CAF50;
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.feature-card {
background-color: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
.feature-img {
height: 200px;
overflow: hidden;
.feature-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
.feature-card:hover .feature-img img {
transform: scale(1.1);
.feature-content {
padding: 20px;
.feature-content h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: #333;
.feature-content p {
color: #666;
margin-bottom: 20px;
.about {
background-color: #f1f8e9;
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.about-text h2 {
font-size: 2.5rem;
margin-bottom: 20px;
color: #333;
.about-text p {
margin-bottom: 20px;
color: #555;
.about-img {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
.about-img img {
width: 100%;
height: auto;
display: block;
.food-categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 50px;
.category-card {
background-color: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
transition: all 0.3s ease;
.category-card:hover {
transform: translateY(-10px);
.category-icon {
height: 120px;
display: flex;
align-items: center;
justify-content: center;
background-color: #e8f5e9;
.category-icon i {
font-size: 3rem;
color: #4CAF50;
.category-content {
padding: 20px;
.category-content h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #333;
.tips-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
.tip-card {
background-color: white;
border-radius: 10px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
position: relative;
}
.tip-card::before {
content: '"';
position: absolute;
top: 10px;
left: 15px;
font-size: 4rem;
color: #e8f5e9;
font-family: serif;
.tip-card h3 {
font-size: 1.3rem;
margin-bottom: 15px;
color: #333;
padding-left: 20px;
.tip-card p {
color: #555;
padding-left: 20px;
.contact {
background-color: #e8f5e9;
}
.contact-form {
max-width: 600px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
.form-group {
margin-bottom: 20px;
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #333;
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
.form-group textarea {
resize: vertical;
min-height: 150px;
footer {
background-color: #333;
color: white;
padding: 50px 0 20px;
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 30px;
.footer-column h3 {
font-size: 1.5rem;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.footer-column h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background-color: #4CAF50;
.footer-column p,
.footer-column li {
margin-bottom: 10px;
color: #ddd;
.footer-column ul {
list-style: none;
.footer-column ul li a {
color: #ddd;
text-decoration: none;
transition: all 0.3s ease;
}
.footer-column ul li a:hover {
color: #4CAF50;
padding-left: 5px;
.social-links {
display: flex;
margin-top: 20px;
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
margin-right: 10px;
color: white;
transition: all 0.3s ease;
.social-links a:hover {
background-color: #4CAF50;
transform: translateY(-3px);
}
.copyright {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #aaa;
font-size: 0.9rem;
.menu-toggle {
display: none;
font-size: 1.5rem;
cursor: pointer;
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
to {
opacity: 1;
transform: translateY(0);
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
to {
opacity: 1;
transform: translateY(0);
@media (max-width: 768px) {
.menu-toggle {
display: block;
nav ul {
position: absolute;
top: 70px;
left: 0;
width: 100%;
background-color: #4CAF50;
flex-direction: column;
align-items: center;
padding: 20px 0;
display: none;
}
nav ul.active {
display: flex;
nav ul li {
margin: 10px 0;
.hero h1 {
font-size: 2rem;
.hero p {
font-size: 1rem;
.about-content {
grid-template-columns: 1fr;
.section-title {
font-size: 2rem;
</style>
</head>
<body>
<header>
<div class="container header-container">
<div class="logo">
<i class="fas fa-leaf"></i>
<span>Hidup Sehat</span>
</div>
<nav>
<ul>
<li><a href="#home">Beranda</a></li>
<li><a href="#about">Tentang</a></li>
<li><a href="#lifestyle">Gaya Hidup</a></li>
<li><a href="#food">Makanan Sehat</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
</nav>
</div>
</header>
<section id="home" class="hero">
<div class="hero-content">
<h1>Hidup Sehat, Hidup Bahagia</h1>
<p>Temukan panduan lengkap tentang gaya hidup sehat dan
makanan bergizi untuk kualitas hidup yang lebih baik</p>
<a href="#about" class="btn">Mulai Sekarang</a>
</div>
</section>
<section id="about" class="about">
<div class="container">
<h2 class="section-title">Tentang Kami</h2>
<div class="about-content">
<div class="about-text">
<h2>Mengapa Hidup Sehat Itu Penting?</h2>
<p>Hidup sehat bukan hanya tentang makanan yang Anda
makan, tetapi juga tentang gaya hidup yang Anda jalani. Di Hidup Sehat,
kami percaya bahwa setiap orang berhak untuk memiliki akses terhadap
informasi yang akurat dan dapat diandalkan tentang kesehatan.</p>
<p>Misi kami adalah memberikan edukasi komprehensif
tentang gaya hidup sehat dan nutrisi yang tepat, sehingga Anda dapat
membuat keputusan yang tepat untuk kesehatan Anda dan keluarga.</p>
<a href="#lifestyle" class="btn">Pelajari Lebih Lanjut</a>
</div>
<div class="about-img">
<img src="https://images.unsplash.com/photo-1571019613454-
1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
alt="Gaya Hidup Sehat">
</div>
</div>
</div>
</section>
<section id="lifestyle" class="lifestyle">
<div class="container">
<h2 class="section-title">Gaya Hidup Sehat</h2>
<div class="features">
<div class="feature-card">
<div class="feature-img">
<img src="https://images.unsplash.com/photo-
1518611012118-696072aa579a?ixlib=rb-
1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Olahraga">
</div>
<div class="feature-content">
<h3>Olahraga Teratur</h3>
<p>Olahraga adalah kunci untuk menjaga kesehatan fisik
dan mental. Lakukan olahraga minimal 30 menit setiap hari untuk
meningkatkan kebugaran dan mengurangi risiko penyakit.</p>
</div>
</div>
<div class="feature-card">
<div class="feature-img">
<img src="https://images.unsplash.com/photo-
1516975080664-ed2fc6a32937?ixlib=rb-
1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Tidur">
</div>
<div class="feature-content">
<h3>Tidur Berkualitas</h3>
<p>Tidur yang cukup dan berkualitas sangat penting untuk
pemulihan tubuh dan pikiran. Usahakan untuk tidur 7-8 jam setiap malam
untuk menjaga kesehatan optimal.</p>
</div>
</div>
<div class="feature-card">
<div class="feature-img">
<img src="https://images.unsplash.com/photo-
1506126613408-cca07d5b1561?ixlib=rb-
1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Stress">
</div>
<div class="feature-content">
<h3>Kelola Stres</h3>
<p>Stres yang tidak terkelola dapat berdampak negatif pada
kesehatan. Pelajari teknik relaksasi seperti meditasi, yoga, atau hobi yang
menyenangkan untuk mengurangi stres.</p>
</div>
</div>
</div>
<div class="tips-container">
<div class="tip-card">
<h3>Minum Air Putih yang Cukup</h3>
<p>Tubuh manusia terdiri dari sekitar 60% air, sehingga
penting untuk menjaga hidrasi dengan minum setidaknya 8 gelas air putih
setiap hari.</p>
</div>
<div class="tip-card">
<h3>Hindari Kebiasaan Merokok</h3>
<p>Merokok adalah salah satu penyebab utama berbagai
penyakit serius seperti kanker, penyakit jantung, dan stroke. Berhenti
merokok adalah keputusan terbaik untuk kesehatan Anda.</p>
</div>
<div class="tip-card">
<h3>Batasi Konsumsi Alkohol</h3>
<p>Konsumsi alkohol yang berlebihan dapat merusak hati,
meningkatkan tekanan darah, dan meningkatkan risiko berbagai penyakit.
Batasi atau hindari konsumsi alkohol untuk kesehatan yang lebih baik.</p>
</div>
</div>
</div>
</section>
<section id="food" class="food">
<div class="container">
<h2 class="section-title">Makanan Sehat</h2>
<div class="food-categories">
<div class="category-card">
<div class="category-icon">
<i class="fas fa-apple-alt"></i>
</div>
<div class="category-content">
<h3>Buah-buahan</h3>
<p>Kaya akan vitamin, mineral, dan serat yang penting
untuk kesehatan. Konsumsi berbagai jenis buah setiap hari untuk
mendapatkan nutrisi yang beragam.</p>
</div>
</div>
<div class="category-card">
<div class="category-icon">
<i class="fas fa-carrot"></i>
</div>
<div class="category-content">
<h3>Sayuran</h3>
<p>Sumber penting serat, vitamin, dan mineral. Sayuran
hijau seperti bayam dan brokoli sangat kaya akan nutrisi yang bermanfaat
bagi tubuh.</p>
</div>
</div>
<div class="category-card">
<div class="category-icon">
<i class="fas fa-fish"></i>
</div>
<div class="category-content">
<h3>Protein</h3>
<p>Penting untuk pertumbuhan dan perbaikan jaringan
tubuh. Pilih sumber protein sehat seperti ikan, daging tanpa lemak, kacang-
kacangan, dan tahu.</p>
</div>
</div>
<div class="category-card">
<div class="category-icon">
<i class="fas fa-bread-slice"></i>
</div>
<div class="category-content">
<h3>Karbohidrat Kompleks</h3>
<p>Sumber energi utama bagi tubuh. Pilih karbohidrat
kompleks seperti nasi merah, roti gandum, dan oatmeal yang memberikan
energi tahan lama.</p>
</div>
</div>
</div>
<div class="tips-container">
<div class="tip-card">
<h3>Kurangi Garam dan Gula</h3>
<p>Konsumsi garam dan gula yang berlebihan dapat
meningkatkan risiko hipertensi, diabetes, dan penyakit jantung. Batasi
asupan garam kurang dari 5 gram per hari dan gula tambahan.</p>
</div>
<div class="tip-card">
<h3>Pilih Lemak Sehat</h3>
<p>Tidak semua lemak buruk. Lemak tak jenuh seperti yang
terdapat dalam alpukat, kacang-kacangan, dan minyak zaitun sebenarnya
baik untuk kesehatan jantung.</p>
</div>
<div class="tip-card">
<h3>Makan dengan Porsi Seimbang</h3>
<p>Terapkan prinsip "isi setengah piring Anda dengan sayuran
dan buah, seperempat dengan protein, dan seperempat dengan karbohidrat"
untuk mendapatkan nutrisi yang seimbang.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">Hubungi Kami</h2>
<div class="contact-form">
<form id="contactForm">
<div class="form-group">
<label for="name">Nama Lengkap</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="subject">Subjek</label>
<input type="text" id="subject" name="subject" required>
</div>
<div class="form-group">
<label for="message">Pesan</label>
<textarea id="message" name="message"
required></textarea>
</div>
<button type="submit" class="btn">Kirim Pesan</button>
</form>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>Hidup Sehat</h3>
<p>Platform edukasi tentang gaya hidup sehat dan makanan
bergizi untuk kualitas hidup yang lebih baik.</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h3>Menu Cepat</h3>
<ul>
<li><a href="#home">Beranda</a></li>
<li><a href="#about">Tentang Kami</a></li>
<li><a href="#lifestyle">Gaya Hidup Sehat</a></li>
<li><a href="#food">Makanan Sehat</a></li>
<li><a href="#contact">Kontak</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Informasi</h3>
<ul>
<li><a href="#">Kebijakan Privasi</a></li>
<li><a href="#">Syarat & Ketentuan</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Kontak</h3>
<p><i class="fas fa-map-marker-alt"></i> Jl. Sehat No. 123,
Jakarta</p>
<p><i class="fas fa-phone"></i> +62 21 1234 5678</p>
<p><i class="fas fa-envelope"></i>
[email protected]</p>
</div>
</div>
<div class="copyright">
<p>© 2025 Hidup Sehat. Hak Cipta Dilindungi.</p>
</div>
</div>
</footer>
<script>
// Menu toggle untuk mobile
document.querySelector('.menu-toggle').addEventListener('click',
function() {
document.querySelector('nav ul').classList.toggle('active');
});
// Smooth scrolling untuk navigasi
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('nav ul').classList.remove('active');
const target = document.querySelector(this.getAttribute('href'));
if (target) {
window.scrollTo({
top: target.offsetTop - 70,
behavior: 'smooth'
});
});
});
// Form submission
document.getElementById('contactForm').addEventListener('submit',
function(e) {
e.preventDefault();
// Get form values
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const subject = document.getElementById('subject').value;
const message = document.getElementById('message').value;
// Simple validation
if (name && email && subject && message) {
// Create success message
const successMessage = document.createElement('div');
successMessage.style.backgroundColor = '#4CAF50';
successMessage.style.color = 'white';
successMessage.style.padding = '15px';
successMessage.style.borderRadius = '5px';
successMessage.style.marginTop = '20px';
successMessage.style.textAlign = 'center';
successMessage.textContent = 'Terima kasih! Pesan Anda telah
berhasil dikirim.';
// Add success message to form
this.appendChild(successMessage);
// Reset form
this.reset();
// Remove success message after 5 seconds
setTimeout(() => {
successMessage.remove();
}, 5000);
});
// Add scroll effect to header
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 100) {
header.style.backgroundColor = 'rgba(76, 175, 80, 0.95)';
header.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
} else {
header.style.backgroundColor = '#4CAF50';
header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
});
</script>
</body>
</html>
```
You might also like
- Have You Eaten A Good Morning Ma For The Course RegistrationNo ratings yetHave You Eaten A Good Morning Ma For The Course Registration19 pages
- People Who Are in The Same Area As A Working On EarlierNo ratings yetPeople Who Are in The Same Area As A Working On Earlier20 pages
