Melweb #4
Description
<title>Serene - Beauty & Wellness</title>
<style>
:root {
--primary-color: #8B7355;
--secondary-color: #F5F5F5;
--accent-color: #D4B896;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #fefefe;
}
.navbar-brand {
font-size: 1.8rem;
font-weight: 300;
letter-spacing: 2px;
}
.hero-section {
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url('https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3') center/cover;
height: 70vh;
color: white;
display: flex;
align-items: center;
}
.product-card {
transition: transform 0.3s ease;
border: none;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.product-card:hover {
transform: translateY(-5px);
}
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-primary:hover {
background-color: #7a6348;
border-color: #7a6348;
}
.category-card {
height: 200px;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
position: relative;
overflow: hidden;
}
.category-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
transition: background 0.3s ease;
}
.category-card:hover::before {
background: rgba(0,0,0,0.2);
}
.category-card h3 {
position: relative;
z-index: 1;
}
footer {
background-color: #2c2c2c;
color: white;
}
</style>
<!-- Hero Section -->
<section class="hero-section">
<div class="container text-center">
<h1 class="display-4 mb-4">Discover Your Inner Serenity</h1>
<p class="lead mb-4">Premium beauty and wellness products crafted with natural ingredients</p>
<a href="#" class="btn btn-primary btn-lg">Shop Now</a>
</div>
</section>
<!-- Categories Section -->
<section class="py-5">
<div class="container">
<h2 class="text-center mb-5">Shop By Category</h2>
<div class="row g-4">
<div class="col-md-4">
<a href="#" class="category-card rounded" style="background-image: url('https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3')">
<h3>Skincare</h3>
</a>
</div>
<div class="col-md-4">
<a href="#" class="category-card rounded" style="background-image: url('https://images.unsplash.com/photo-1526045478516-99145907023c?ixlib=rb-4.0.3')">
<h3>Makeup</h3>
</a>
</div>
<div class="col-md-4">
<a href="#" class="category-card rounded" style="background-image: url('https://images.unsplash.com/photo-1595341888016-a392ef81b7de?ixlib=rb-4.0.3')">
<h3>Wellness</h3>
</a>
</div>
</div>
</div>
</section>
<!-- Featured Products -->
<section class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-5">Featured Products</h2>
<div class="row g-4">
<!-- Product 1 -->
<div class="col-lg-3 col-md-6">
<div class="card product-card h-100">
<img src="https://images.unsplash.com/photo-1556228579-4a5c9c6c13e9?ixlib=rb-4.0.3" class="card-img-top" alt="Serene Facial Oil">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Serene Facial Oil</h5>
<p class="card-text">Nourishing blend of organic oils for radiant skin</p>
<div class="mt-auto">
<p class="h5 text-primary">$42.00</p>
<a href="#" class="btn btn-primary w-100">Add to Cart</a>
</div>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="col-lg-3 col-md-6">
<div class="card product-card h-100">
<img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3" class="card-img-top" alt="Calming Face Mask">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Calming Face Mask</h5>
<p class="card-text">Soothing clay mask for sensitive skin</p>
<div class="mt-auto">
<p class="h5 text-primary">$28.00</p>
<a href="#" class="btn btn-primary w-100">Add to Cart</a>
</div>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="col-lg-3 col-md-6">
<div class="card product-card h-100">
<img src="https://images.unsplash.com/photo-1556228453-4ef2d6c1e1cc?ixlib=rb-4.0.3" class="card-img-top" alt="Essential Serum">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Essential Serum</h5>
<p class="card-text">Anti-aging serum with vitamin C</p>
<div class="mt-auto">
<p class="h5 text-primary">$56.00</p>
<a href="#" class="btn btn-primary w-100">Add to Cart</a>
</div>
</div>
</div>
</div>
<!-- Product 4 -->
<div class="col-lg-3 col-md-6">
<div class="card product-card h-100">
<img src="https://images.unsplash.com/photo-1608248543803-ba4f8c70ae0b?ixlib=rb-4.0.3" class="card-img-top" alt="Body Lotion">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Hydrating Body Lotion</h5>
<p class="card-text">24-hour moisture with shea butter</p>
<div class="mt-auto">
<p class="h5 text-primary">$32.00</p>
<a href="#" class="btn btn-primary w-100">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 text-center">
<h3>Join the Serene Community</h3>
<p>Subscribe to receive updates on new products and exclusive offers</p>
<div class="input-group mb-3">
<input type="email" class="form-control" placeholder="Your email address">
<button class="btn btn-primary" type="button">Subscribe</button>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-5">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4">
<h4>SERENE</h4>
<p>Premium beauty and wellness products crafted with natural ingredients for your serene lifestyle.</p>
<div class="social-links">
<a href="#" class="text-white me-3"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-white me-3"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-white me-3"><i class="fab fa-pinterest"></i></a>
</div>
</div>
<div class="col-lg-2 col-md-6 mb-4">
<h5>Shop</h5>
<ul class="list-unstyled">
<li><a href="#" class="text-white text-decoration-none">Skincare</a></li>
<li><a href="#" class="text-white text-decoration-none">Makeup</a></li>
<li><a href="#" class="text-white text-decoration-none">Wellness</a></li>
<li><a href="#" class="text-white text-decoration-none">Gift Sets</a></li>
</ul>
</div>
<div class="col-lg-2 col-md-6 mb-4">
<h5>Help</h5>
<ul class="list-unstyled">
<li><a href="#" class="text-white text-decoration-none">Contact Us</a></li>
<li><a href="#" class="text-white text-decoration-none">Shipping</a></li>
<li><a href="#" class="text-white text-decoration-none">Returns</a></li>
<li><a href="#" class="text-white text-decoration-none">FAQ</a></li>
</ul>
</div>
<div class="col-lg-4 mb-4">
<h5>Contact Info</h5>
<ul class="list-unstyled">
<li><i class="fas fa-map-marker-alt me-2"></i> 123 Beauty Street, City</li>
<li><i class="fas fa-phone me-2"></i> (555) 123-4567</li>
<li><i class="fas fa-envelope me-2"></i> info@serene.com</li>
</ul>
</div>
</div>
<hr class="bg-white">
<div class="text-center pt-3">
<p>© 2023 Serene. All rights reserved.</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>