<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>J'Asia Moodboard</title> <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@400&display=swap" rel="stylesheet"> <link rel="stylesheet" href="styles.css"> </head> <body> <header>J'Asia Moodboard</header> <nav> <a onclick="showTab('home')">2025</a> <a onclick="showTab('contact')">Contact</a> </nav>

<!-- Home Section -->
<section id="home" class="tab-content active">
    <div class="gallery">
        <img src="https://assets.onecompiler.app/432cjmd4m/434bkjbfv/premium_photo-1702599183511-04c684bc1fad.avif" alt="Image 1">
        <img src="https://assets.onecompiler.app/432cjmd4m/434bkjbfv/premium_photo-1675727579542-ad785e1cee41.avif" alt="Image 2">
        <img src="https://assets.onecompiler.app/432cjmd4m/434bkjbfv/istockphoto-2060984408-612x612.webp" alt="Image 3">
        <img src="https://assets.onecompiler.app/432cjmd4m/434bkjbfv/premium_photo-1681494711931-8efcb94ce9a0.avif" alt="Image 4">
        <img src="https://assets.onecompiler.app/432cjmd4m/434bkjbfv/marten-bjork-wGu1pzDSm3g-unsplash.jpg" alt="Image 5">
        <img src="https://assets.onecompiler.app/432cjmd4m/434bkjbfv/thought-catalog-fnztlIb52gU-unsplash.jpg" alt="Image 6">
       <img src="https://assets.onecompiler.app/432cjmd4m/434bkjbfv/igor-omilaev-M7iMdnG4R_g-unsplash.jpg" alt="Image 7">
       <img src="https://assets.onecompiler.app/432cjmd4m/434bkjbfv/IMG_4165.jpg" alt="Image 8">


    </div>
</section>

<section id="contact" class="tab-content"> <h2>Contact Me</h2> <form action="https://formspree.io/f/xnnqyrpr" method="POST"> <label for="name">Your Name:</label> <input type="text" id="name" name="name" placeholder="Enter your name" required>

    <label for="email">Your Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email" required>

    <label for="message">Your Message:</label>
    <textarea id="message" name="message" rows="5" placeholder="Enter your message here" required></textarea>

    <button type="submit">Send</button>
</form>
<p id="form-message"></p>

</section>

<footer>
     
</footer>

<script src="script.js"></script>

</body> </html> /* General Styles */ body { font-family: 'Oxygen', sans-serif; background-color: white; color: #8bd6d6; margin: 0; padding: 0; }

header {
background-color: #ffc3a0;
padding: 20px;
text-align: center;
font-size: 5rem;
font-family: 'Dk Lemon Yellow Sun', sans-serif;
color: white;
}

nav {
display: flex;
justify-content: center;
margin-top: 10px;
}

nav a {
text-decoration: none;
margin: 0 15px;
color: #8bd6d6;
font-size: 1.2rem;
transition: color 0.3s;
cursor: pointer;
}

nav a:hover {
color: #ffc3a0;
}

/* Tab Content */
.tab-content {
display: none;
padding: 20px;
}

.tab-content.active {
display: block;
}

/* Gallery */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
}

.gallery img {
width: 100%;
height: auto;
border: 2px solid #8bd6d6;
border-radius: 10px;
transition: transform 0.3s;
}

.gallery img:hover {
transform: scale(1.05);
}

/* Contact Form */
form label, form input, form textarea {
display: block;
margin: 10px 0;
width: 100%;
max-width: 500px;
}

form input, form textarea {
padding: 10px;
border: 2px solid #ffc3a0;
border-radius: 5px;
}

form button {
padding: 10px 20px;
background-color: #ffc3a0;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

form button:hover {
background-color: #8bd6d6;
}

footer {
background-color: #8bd6d6;
padding: 10px;
text-align: center;
color: white;
margin-top: auto; /* Pushes the footer to the bottom */
}

moodboard {

position: relative;
width: 100%;
height: 500px; /* Adjust to your desired size */
overflow: hidden; /* Ensure images don't overflow outside the container */

}

.photo {
position: absolute;
width: 500px; /* Adjust based on your preferred photo size /
height: 500px; / Adjust based on your preferred photo size */
background-size: cover;
background-position: center;
border-radius: 10px;
transition: transform 0.5s ease;
}

.photo:hover {
transform: scale(2.0);
}