Untuk membuat website gallery keluarga yang rapi dan bagus, saya akan merancang:
1. Layout modern dengan navigation header dan hero section
2. Gallery foto keluarga dengan grid responsive
3. Bagian untuk cerita/momen spesial keluarga
4. Footer dengan kontak dan informasi
5. Menggunakan warna-warna hangat dan elemen visual yang mengundang nostalgia
6. Desain yang fully responsive untuk semua perangkat
7. Efek hover dan animasi halus untuk pengalaman interaktif
`family-gallery.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Family Memories Gallery</title>
<style>
:root {
--primary: #6c4d82;
--secondary: #f6b352;
--light: #f5f5f5;
--dark: #333;
--accent: #e67e22;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--light);
color: var(--dark);
line-height: 1.6;
}
header {
background: linear-gradient(135deg, var(--primary), #8d6fa3);
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);
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
display: flex;
align-items: center;
}
.logo img {
height: 40px;
margin-right: 10px;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}
.nav-links a:hover {
color: var(--secondary);
}
.nav-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: var(--secondary);
bottom: -5px;
left: 0;
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
.hero {
height: 100vh;
background-color: var(--primary);
background-image:
url('https://placehold.co/1920x1080'),
linear-gradient(135deg, var(--primary), #8d6fa3);
background-size: cover;
background-blend-mode: overlay;
background-position: center;
color: white;
display: flex;
align-items: center;
text-align: center;
position: relative;
margin-top: 70px;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
background-color: rgba(0,0,0,0.5);
border-radius: 10px;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
font-weight: 700;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.btn {
display: inline-block;
background-color: var(--secondary);
color: var(--dark);
padding: 0.8rem 1.8rem;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: white;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
section {
padding: 5rem 0;
}
.section-title {
text-align: center;
margin-bottom: 3rem;
position: relative;
}
.section-title h2 {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 1rem;
}
.section-title::after {
content: '';
display: block;
width: 80px;
height: 4px;
background-color: var(--secondary);
margin: 0 auto;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.gallery-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.gallery-item img {
width: 100%;
height: 300px;
object-fit: cover;
transition: all 0.5s ease;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-item-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: white;
padding: 1rem;
transform: translateY(100%);
transition: all 0.3s ease;
}
.gallery-item:hover .gallery-item-caption {
transform: translateY(0);
}
.family-moments {
background-color: #f9f9f9;
}
.moments-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.moment-card {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.moment-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.moment-image {
height: 250px;
overflow: hidden;
}
.moment-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.moment-card:hover .moment-image img {
transform: scale(1.1);
}
.moment-content {
padding: 1.5rem;
}
.moment-content h3 {
color: var(--primary);
margin-bottom: 0.5rem;
font-size: 1.3rem;
}
.moment-content .date {
color: var(--accent);
font-size: 0.9rem;
margin-bottom: 1rem;
display: block;
}
.cta {
background: linear-gradient(135deg, var(--primary), #8d6fa3);
color: white;
text-align: center;
}
.cta h2 {
margin-bottom: 2rem;
}
footer {
background-color: var(--dark);
color: white;
padding: 3rem 0 1.5rem;
text-align: center;
}
.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-bottom: 2rem;
}
.footer-section {
flex: 1;
min-width: 300px;
margin-bottom: 1.5rem;
}
.footer-section h3 {
margin-bottom: 1.5rem;
position: relative;
color: var(--secondary);
}
.footer-section h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 2px;
background-color: var(--secondary);
}
.footer-section p, .footer-section a {
margin-bottom: 1rem;
display: block;
color: #ddd;
text-decoration: none;
}
.footer-section a:hover {
color: var(--secondary);
}
.social-links {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 1rem;
}
.social-links a {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255,255,255,0.1);
color: white;
text-align: center;
line-height: 40px;
transition: all 0.3s ease;
}
.social-links a:hover {
background-color: var(--secondary);
color: var(--dark);
transform: translateY(-5px);
}
.copyright {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 1.5rem;
font-size: 0.9rem;
}
/* Responsive styles */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero h1 {
font-size: 2.2rem;
}
.hero p {
font-size: 1rem;
}
.section-title h2 {
font-size: 2rem;
}
.gallery {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
/* Animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade {
animation: fadeIn 1s ease forwards;
}
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1s; }
</style>
</head>
<body>
<header>
<div class="container">
<nav>
<div class="logo">
<img src="https://placehold.co/40" alt="Family tree logo with heart-shaped leaves and roots representing family connections">
<span>Family Gallery</span>
</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#moments">Moments</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="hero" id="home">
<div class="hero-content animate-fade">
<h1>Our Family Memories</h1>
<p>A collection of precious moments that make our family story unique and beautiful. Every picture tells a story of love, laughter, and togetherness.</p>
<a href="#gallery" class="btn">View Gallery</a>
</div>
</section>
<section id="gallery">
<div class="container">
<div class="section-title">
<h2>Family Gallery</h2>
<p>Cherished memories through the years</p>
</div>
<div class="gallery">
<div class="gallery-item animate-fade delay-1">
<img src="https://placehold.co/600x400" alt="Family portrait in a sunflower field, grandparents, parents and children smiling in matching outfits">
<div class="gallery-item-caption">
<h3>Annual Family Portrait 2023</h3>
<p>Sunflower Field</p>
</div>
</div>
<div class="gallery-item animate-fade delay-2">
<img src="https://placehold.co/600x400" alt="Beach vacation with sandcastle building competition, sunset in the background">
<div class="gallery-item-caption">
<h3>Summer Vacation</h3>
<p>Bali, 2022</p>
</div>
</div>
<div class="gallery-item animate-fade delay-3">
<img src="https://placehold.co/600x400" alt="Christmas morning in matching pajamas, kids opening presents under a beautifully decorated tree">
<div class="gallery-item-caption">
<h3>Christmas Morning</h3>
<p>Home, 2021</p>
</div>
</div>
<div class="gallery-item animate-fade delay-4">
<img src="https://placehold.co/600x400" alt="Big family reunion with three generations gathered around a long dinner table in grandma's garden">
<div class="gallery-item-caption">
<h3>Family Reunion</h3>
<p>Grandma's 80th Birthday</p>
</div>
</div>
<div class="gallery-item animate-fade delay-5">
<img src="https://placehold.co/600x400" alt="Father teaching son to ride bicycle in the park, autumn leaves falling around them">
<div class="gallery-item-caption">
<h3>First Bicycle Ride</h3>
<p>Spring 2020</p>
</div>
</div>
<div class="gallery-item animate-fade delay-1">
<img src="https://placehold.co/600x400" alt="Traditional family cultural celebration with colorful costumes and dances in grandparents' village">
<div class="gallery-item-caption">
<h3>Cultural Festival</h3>
<p>2019</p>
</div>
</div>
<div class="gallery-item animate-fade delay-2">
<img src="https://placehold.co/600x400" alt="Parents graduation day with young children holding their diploma cases proudly at the university courtyard">
<div class="gallery-item-caption">
<h3>Graduation Day</h3>
<p>University Courtyard</p>
</div>
</div>
<div class="gallery-item animate-fade delay-3">
<img src="https://placehold.co/600x400" alt="Baby's first birthday cake smash, entire family laughing as cake covers baby's face and hands">
<div class="gallery-item-caption">
<h3>First Birthday</h3>
<p>Sarah Turns One</p>
</div>
</div>
<div class="gallery-item animate-fade delay-4">
<img src="https://placehold.co/600x400" alt="Mother-daughter baking day in a flour-dusted kitchen with cookies shaped like hearts and stars">
<div class="gallery-item-caption">
<h3>Baking Day</h3>
<p>Special Cookies</p>
</div>
</div>
</div>
</div>
</section>
<section class="family-moments" id="moments">
<div class="container">
<div class="section-title">
<h2>Special Moments</h2>
<p>Stories behind our favorite memories</p>
</div>
<div class="moments-grid">
<div class="moment-card animate-fade delay-1">
<div class="moment-image">
<img src="https://placehold.co/800x500" alt="Family camping trip by a lake with tents and campfire, first night under the stars">
</div>
<div class="moment-content">
<h3>Our First Camping Trip</h3>
<span class="date">June 15-17, 2022</span>
<p>Three days of laughter, fishing, and storytelling around the campfire. We learned how resilient our kids are when we got caught in that unexpected rain!</p>
</div>
</div>
<div class="moment-card animate-fade delay-2">
<div class="moment-image">
<img src="https://placehold.co/800x500" alt="Grandparents' golden anniversary surrounded by children and grandchildren in a decorated hall">
</div>
<div class="moment-content">
<h3>Grandparents' 50th Anniversary</h3>
<span class="date">April 5, 2021</span>
<p>Celebrating five decades of love, with hidden poems and gifts from each family member that made them cry happy tears.</p>
</div>
</div>
<div class="moment-card animate-fade delay-3">
<div class="moment-image">
<img src="https://placehold.co/800x500" alt="Family creating a vegetable garden together, kids planting seeds and watering plants">
</div>
<div class="moment-content">
<h3>Planting Our Family Garden</h3>
<span class="date">March 2020</span>
<p>The pandemic project that grew into our favorite family tradition. Each child had their own patch, and seeing their pride during harvest was priceless.</p>
</div>
</div>
</div>
</div>
</section>
<section class="cta animate-fade">
<div class="container">
<h2>Want to create your own family gallery?</h2>
<p>Preserve your precious moments forever</p>
<a href="#contact" class="btn">Contact Us</a>
</div>
</section>
<footer id="contact">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>About Us</h3>
<p>We are the Johnson family - preserving our story one memory at a time since 2008.</p>
<p>"Family is not an important thing. It's everything."</p>
</div>
<div class="footer-section">
<h3>Contact Info</h3>
<p>familygallery@example.com</p>
<p>+1 (555) 123-4567</p>
<p>123 Family Lane, Hometown</p>
</div>
<div class="footer-section">
<h3>Follow Us</h3>
<div class="social-links">
<a href="#">F</a>
<a href="#">I</a>
<a href="#">T</a>
<a href="#">Y</a>
</div>
</div>
</div>
<div class="copyright">
<p>© 2023 Family Gallery. All precious moments preserved.</p>
</div>
</div>
</footer>
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add active class to navigation on scroll
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-links a');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.scrollY >= (sectionTop - 300)) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
// Lazy loading for images
const images = document.querySelectorAll('img');
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src || img.src;
observer.unobserve(img);
}
});
});
images.forEach(img => {
observer.observe(img);
});
}
</script>
</body>
</html>
```
</create_file
🎨 **Generating images based on descriptions...**
✅ **Images generated successfully! Here's your updated content:**
`family-gallery.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Family Memories Gallery</title>
<style>
:root {
--primary: #6c4d82;
--secondary: #f6b352;
--light: #f5f5f5;
--dark: #333;
--accent: #e67e22;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--light);
color: var(--dark);
line-height: 1.6;
}
header {
background: linear-gradient(135deg, var(--primary), #8d6fa3);
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);
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
display: flex;
align-items: center;
}
.logo img {
height: 40px;
margin-right: 10px;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}
.nav-links a:hover {
color: var(--secondary);
}
.nav-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: var(--secondary);
bottom: -5px;
left: 0;
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
.hero {
height: 100vh;
background-color: var(--primary);
background-image:
url('https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/ad5c443a-329d-4f81-914e-99e0eaffded8.png'),
linear-gradient(135deg, var(--primary), #8d6fa3);
background-size: cover;
background-blend-mode: overlay;
background-position: center;
color: white;
display: flex;
align-items: center;
text-align: center;
position: relative;
margin-top: 70px;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
background-color: rgba(0,0,0,0.5);
border-radius: 10px;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
font-weight: 700;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.btn {
display: inline-block;
background-color: var(--secondary);
color: var(--dark);
padding: 0.8rem 1.8rem;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: white;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
section {
padding: 5rem 0;
}
.section-title {
text-align: center;
margin-bottom: 3rem;
position: relative;
}
.section-title h2 {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 1rem;
}
.section-title::after {
content: '';
display: block;
width: 80px;
height: 4px;
background-color: var(--secondary);
margin: 0 auto;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.gallery-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.gallery-item img {
width: 100%;
height: 300px;
object-fit: cover;
transition: all 0.5s ease;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-item-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: white;
padding: 1rem;
transform: translateY(100%);
transition: all 0.3s ease;
}
.gallery-item:hover .gallery-item-caption {
transform: translateY(0);
}
.family-moments {
background-color: #f9f9f9;
}
.moments-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.moment-card {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.moment-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.moment-image {
height: 250px;
overflow: hidden;
}
.moment-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.moment-card:hover .moment-image img {
transform: scale(1.1);
}
.moment-content {
padding: 1.5rem;
}
.moment-content h3 {
color: var(--primary);
margin-bottom: 0.5rem;
font-size: 1.3rem;
}
.moment-content .date {
color: var(--accent);
font-size: 0.9rem;
margin-bottom: 1rem;
display: block;
}
.cta {
background: linear-gradient(135deg, var(--primary), #8d6fa3);
color: white;
text-align: center;
}
.cta h2 {
margin-bottom: 2rem;
}
footer {
background-color: var(--dark);
color: white;
padding: 3rem 0 1.5rem;
text-align: center;
}
.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-bottom: 2rem;
}
.footer-section {
flex: 1;
min-width: 300px;
margin-bottom: 1.5rem;
}
.footer-section h3 {
margin-bottom: 1.5rem;
position: relative;
color: var(--secondary);
}
.footer-section h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 2px;
background-color: var(--secondary);
}
.footer-section p, .footer-section a {
margin-bottom: 1rem;
display: block;
color: #ddd;
text-decoration: none;
}
.footer-section a:hover {
color: var(--secondary);
}
.social-links {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 1rem;
}
.social-links a {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255,255,255,0.1);
color: white;
text-align: center;
line-height: 40px;
transition: all 0.3s ease;
}
.social-links a:hover {
background-color: var(--secondary);
color: var(--dark);
transform: translateY(-5px);
}
.copyright {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 1.5rem;
font-size: 0.9rem;
}
/* Responsive styles */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero h1 {
font-size: 2.2rem;
}
.hero p {
font-size: 1rem;
}
.section-title h2 {
font-size: 2rem;
}
.gallery {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
/* Animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade {
animation: fadeIn 1s ease forwards;
}
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1s; }
</style>
</head>
<body>
<header>
<div class="container">
<nav>
<div class="logo">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/6f1b419f-32f0-44bb-87d8-c0718b021973.png" alt="Family tree logo with heart-shaped leaves and roots representing family connections">
<span>Family Gallery</span>
</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#moments">Moments</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section class="hero" id="home">
<div class="hero-content animate-fade">
<h1>Our Family Memories</h1>
<p>A collection of precious moments that make our family story unique and beautiful. Every picture tells a story of love, laughter, and togetherness.</p>
<a href="#gallery" class="btn">View Gallery</a>
</div>
</section>
<section id="gallery">
<div class="container">
<div class="section-title">
<h2>Family Gallery</h2>
<p>Cherished memories through the years</p>
</div>
<div class="gallery">
<div class="gallery-item animate-fade delay-1">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/516ced20-9b32-4f1d-90aa-36e7e386ce70.png" alt="Family portrait in a sunflower field, grandparents, parents and children smiling in matching outfits">
<div class="gallery-item-caption">
<h3>Annual Family Portrait 2023</h3>
<p>Sunflower Field</p>
</div>
</div>
<div class="gallery-item animate-fade delay-2">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/5b0eaf31-4708-4f47-bcb7-3859db9fcb75.png" alt="Beach vacation with sandcastle building competition, sunset in the background">
<div class="gallery-item-caption">
<h3>Summer Vacation</h3>
<p>Bali, 2022</p>
</div>
</div>
<div class="gallery-item animate-fade delay-3">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/512d26b6-4b13-4fde-b160-1ee488d03d6a.png" alt="Christmas morning in matching pajamas, kids opening presents under a beautifully decorated tree">
<div class="gallery-item-caption">
<h3>Christmas Morning</h3>
<p>Home, 2021</p>
</div>
</div>
<div class="gallery-item animate-fade delay-4">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/968fb59e-137f-4b70-bb48-981e9947bba3.png" alt="Big family reunion with three generations gathered around a long dinner table in grandma's garden">
<div class="gallery-item-caption">
<h3>Family Reunion</h3>
<p>Grandma's 80th Birthday</p>
</div>
</div>
<div class="gallery-item animate-fade delay-5">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/540fc038-6e2f-4a5a-8c10-d628c9a7bb00.png" alt="Father teaching son to ride bicycle in the park, autumn leaves falling around them">
<div class="gallery-item-caption">
<h3>First Bicycle Ride</h3>
<p>Spring 2020</p>
</div>
</div>
<div class="gallery-item animate-fade delay-1">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/2dd2d3a0-7b69-4f19-abd7-f0f8da6acdc3.png" alt="Traditional family cultural celebration with colorful costumes and dances in grandparents' village">
<div class="gallery-item-caption">
<h3>Cultural Festival</h3>
<p>2019</p>
</div>
</div>
<div class="gallery-item animate-fade delay-2">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/350bea44-288e-45df-a2da-db1200eb3a20.png" alt="Parents graduation day with young children holding their diploma cases proudly at the university courtyard">
<div class="gallery-item-caption">
<h3>Graduation Day</h3>
<p>University Courtyard</p>
</div>
</div>
<div class="gallery-item animate-fade delay-3">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/5e613ead-7f7a-4534-bc2f-918d1674fa0e.png" alt="Baby's first birthday cake smash, entire family laughing as cake covers baby's face and hands">
<div class="gallery-item-caption">
<h3>First Birthday</h3>
<p>Sarah Turns One</p>
</div>
</div>
<div class="gallery-item animate-fade delay-4">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/64429fea-161a-4918-8c6d-6496f5a65548.png" alt="Mother-daughter baking day in a flour-dusted kitchen with cookies shaped like hearts and stars">
<div class="gallery-item-caption">
<h3>Baking Day</h3>
<p>Special Cookies</p>
</div>
</div>
</div>
</div>
</section>
<section class="family-moments" id="moments">
<div class="container">
<div class="section-title">
<h2>Special Moments</h2>
<p>Stories behind our favorite memories</p>
</div>
<div class="moments-grid">
<div class="moment-card animate-fade delay-1">
<div class="moment-image">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/14654b06-4005-44eb-a222-32ee5c3a74ce.png" alt="Family camping trip by a lake with tents and campfire, first night under the stars">
</div>
<div class="moment-content">
<h3>Our First Camping Trip</h3>
<span class="date">June 15-17, 2022</span>
<p>Three days of laughter, fishing, and storytelling around the campfire. We learned how resilient our kids are when we got caught in that unexpected rain!</p>
</div>
</div>
<div class="moment-card animate-fade delay-2">
<div class="moment-image">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/cd61f5bb-f935-4175-a2df-94a417549910.png" alt="Grandparents' golden anniversary surrounded by children and grandchildren in a decorated hall">
</div>
<div class="moment-content">
<h3>Grandparents' 50th Anniversary</h3>
<span class="date">April 5, 2021</span>
<p>Celebrating five decades of love, with hidden poems and gifts from each family member that made them cry happy tears.</p>
</div>
</div>
<div class="moment-card animate-fade delay-3">
<div class="moment-image">
<img src="https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/1d9a8faf-e7e5-4ed5-a9ec-1877ed7f1f99.png" alt="Family creating a vegetable garden together, kids planting seeds and watering plants">
</div>
<div class="moment-content">
<h3>Planting Our Family Garden</h3>
<span class="date">March 2020</span>
<p>The pandemic project that grew into our favorite family tradition. Each child had their own patch, and seeing their pride during harvest was priceless.</p>
</div>
</div>
</div>
</div>
</section>
<section class="cta animate-fade">
<div class="container">
<h2>Want to create your own family gallery?</h2>
<p>Preserve your precious moments forever</p>
<a href="#contact" class="btn">Contact Us</a>
</div>
</section>
<footer id="contact">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>About Us</h3>
<p>We are the Johnson family - preserving our story one memory at a time since 2008.</p>
<p>"Family is not an important thing. It's everything."</p>
</div>
<div class="footer-section">
<h3>Contact Info</h3>
<p>familygallery@example.com</p>
<p>+1 (555) 123-4567</p>
<p>123 Family Lane, Hometown</p>
</div>
<div class="footer-section">
<h3>Follow Us</h3>
<div class="social-links">
<a href="#">F</a>
<a href="#">I</a>
<a href="#">T</a>
<a href="#">Y</a>
</div>
</div>
</div>
<div class="copyright">
<p>© 2023 Family Gallery. All precious moments preserved.</p>
</div>
</div>
</footer>
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add active class to navigation on scroll
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('.nav-links a');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.scrollY >= (sectionTop - 300)) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === `#${current}`) {
link.classList.add('active');
}
});
});
// Lazy loading for images
const images = document.querySelectorAll('img');
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src || img.src;
observer.unobserve(img);
}
});
});
images.forEach(img => {
observer.observe(img);
});
}
</script>
</body>
</html>
```
Komentar
Posting Komentar