Design a website for online shop of perfume.

<!DOCTYPE html>

<head>

<title>L’Essence | Luxury Perfumes</title>

<!– Google Fonts –>

<!– FontAwesome for Icons –>

<style>

/* — CSS VARIABLES & RESET — */

:root {

–primary-color: #0F172A; /* Deep Midnight Blue */

–accent-color: #D4AF37; /* Gold */

–bg-color: #F9F9F9; /* Cream */

–white: #FFFFFF;

–text-dark: #333333;

–text-light: #666666;

–font-serif: ‘Playfair Display’, serif;

–font-sans: ‘Montserrat’, sans-serif;

–transition: all 0.3s ease;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: var(–font-sans);

background-color: var(–bg-color);

color: var(–text-dark);

line-height: 1.6;

}

a { text-decoration: none; color: inherit; }

ul { list-style: none; }

img { max-width: 100%; display: block; }

/* — UTILITY CLASSES — */

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 20px;

}

.btn {

display: inline-block;

padding: 12px 30px;

font-size: 0.9rem;

text-transform: uppercase;

letter-spacing: 1px;

font-weight: 600;

cursor: pointer;

transition: var(–transition);

border: none;

}

.btn-primary {

background-color: var(–primary-color);

color: var(–white);

border: 1px solid var(–primary-color);

}

.btn-primary:hover {

background-color: var(–accent-color);

border-color: var(–accent-color);

}

.btn-outline {

background-color: transparent;

color: var(–primary-color);

border: 1px solid var(–primary-color);

}

.btn-outline:hover {

background-color: var(–primary-color);

color: var(–white);

}

/* — HEADER & NAVIGATION — */

header {

background-color: var(–white);

box-shadow: 0 2px 10px rgba(0,0,0,0.05);

position: sticky;

top: 0;

z-index: 1000;

}

.nav-container {

display: flex;

justify-content: space-between;

align-items: center;

height: 80px;

}

.logo {

font-family: var(–font-serif);

font-size: 1.8rem;

font-weight: 700;

color: var(–primary-color);

letter-spacing: 1px;

}

.nav-links {

display: flex;

gap: 30px;

}

.nav-links a {

font-size: 0.9rem;

text-transform: uppercase;

letter-spacing: 1px;

color: var(–text-dark);

transition: var(–transition);

}

.nav-links a:hover {

color: var(–accent-color);

}

.nav-icons {

display: flex;

gap: 20px;

font-size: 1.2rem;

cursor: pointer;

}

/* Mobile Menu Toggle */

.menu-toggle { display: none; }

/* — HERO SECTION — */

.hero {

height: 85vh;

background: linear-gradient(rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.4)), url(‘https://images.unsplash.com/photo-1595435934249-5df7ed86e1c0?q=80&w=1932&auto=format&fit=crop’);

background-size: cover;

background-position: center;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

color: var(–white);

}

.hero-content h1 {

font-family: var(–font-serif);

font-size: 3.5rem;

margin-bottom: 20px;

font-style: italic;

}

.hero-content p {

font-size: 1.2rem;

margin-bottom: 30px;

font-weight: 300;

}

/* — CATEGORIES SECTION — */

.categories {

padding: 80px 0;

text-align: center;

}

.section-title {

font-family: var(–font-serif);

font-size: 2.5rem;

color: var(–primary-color);

margin-bottom: 10px;

}

.section-subtitle {

color: var(–accent-color);

text-transform: uppercase;

letter-spacing: 2px;

font-size: 0.9rem;

margin-bottom: 50px;

display: block;

}

.category-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 30px;

}

.category-card {

position: relative;

overflow: hidden;

height: 300px;

}

.category-card img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.5s ease;

}

.category-card:hover img {

transform: scale(1.1);

}

.category-info {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

padding: 20px;

background: linear-gradient(transparent, rgba(0,0,0,0.7));

color: var(–white);

}

.category-info h3 {

font-family: var(–font-serif);

font-size: 1.5rem;

}

/* — PRODUCT SHOWCASE — */

.products {

background-color: var(–white);

padding: 80px 0;

}

.product-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

gap: 40px;

}

.product-card {

text-align: center;

group: hover;

}

.product-image-container {

position: relative;

background-color: #f4f4f4;

height: 350px;

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 20px;

overflow: hidden;

}

.product-image-container img {

width: 80%;

transition: var(–transition);

filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));

}

.product-card:hover .product-image-container img {

transform: scale(1.05) rotate(-5deg);

}

.product-actions {

position: absolute;

bottom: -50px;

width: 100%;

display: flex;

justify-content: center;

gap: 10px;

transition: var(–transition);

}

.product-card:hover .product-actions {

bottom: 20px;

}

.action-btn {

width: 40px;

height: 40px;

background-color: var(–white);

border: 1px solid #ddd;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

transition: var(–transition);

box-shadow: 0 4px 6px rgba(0,0,0,0.05);

}

.action-btn:hover {

background-color: var(–primary-color);

color: var(–white);

border-color: var(–primary-color);

}

.product-details h3 {

font-family: var(–font-serif);

font-size: 1.2rem;

color: var(–primary-color);

}

.product-brand {

font-size: 0.8rem;

color: var(–text-light);

text-transform: uppercase;

margin-bottom: 5px;

}

.product-price {

font-weight: 600;

color: var(–accent-color);

}

/* — PRODUCT DETAIL PREVIEW (Visual Accord) — */

.scent-notes {

margin-top: 15px;

display: flex;

justify-content: center;

gap: 5px;

}

.note-tag {

font-size: 0.7rem;

background-color: #f0f0f0;

padding: 4px 8px;

border-radius: 20px;

color: #555;

}

/* — DISCOVERY SET BANNER — */

.discovery-banner {

background-color: var(–primary-color);

color: var(–white);

padding: 60px 0;

text-align: center;

display: flex;

align-items: center;

justify-content: space-between;

flex-wrap: wrap;

}

.discovery-text {

text-align: left;

max-width: 600px;

}

.discovery-text h2 {

font-family: var(–font-serif);

font-size: 2.5rem;

margin-bottom: 15px;

}

.discovery-text p {

margin-bottom: 20px;

opacity: 0.9;

}

/* — FOOTER — */

footer {

background-color: #0b1120;

color: #aaa;

padding: 60px 0 20px;

}

.footer-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 40px;

margin-bottom: 40px;

}

.footer-col h4 {

color: var(–white);

font-family: var(–font-serif);

margin-bottom: 20px;

font-size: 1.2rem;

}

.footer-col ul li {

margin-bottom: 10px;

}

.footer-col ul li a:hover {

color: var(–accent-color);

}

.social-links a {

margin-right: 15px;

font-size: 1.2rem;

}

.copyright {

text-align: center;

border-top: 1px solid #1f2937;

padding-top: 20px;

font-size: 0.8rem;

}

/* — MEDIA QUERIES — */

@media (max-width: 768px) {

.nav-links { display: none; }

.menu-toggle { display: block; font-size: 1.5rem; }

.hero-content h1 { font-size: 2.5rem; }

.discovery-banner { justify-content: center; text-align: center; }

.discovery-text { text-align: center; margin-bottom: 20px; }

}

</style>

</head>

<body>

<!– Navigation –>

</div>

<a href=”#” class=”logo”>L’Essence.</a>

<a href=”#”>Women</a>

<a href=”#”>Discovery Sets</a>

<a href=”#”>Our Story</a>

</nav>

</div>

</header>

<!– Hero Section –>

<h1>Find Your Signature Scent</h1>

<p>Curated luxury fragrances from the world’s most exclusive houses.</p>

<a href=”#shop” class=”btn btn-primary”>Explore Collection</a>

</div>

</section>

<!– Categories –>

<span class=”section-subtitle”>Curated For You</span>

<h2 class=”section-title”>Shop by Category</h2>

Women Perfume

<h3>Feminine</h3>

</div>

Men Perfume

<h3>Masculine</h3>

</div>

Unisex Perfume

<h3>Unisex</h3>

</div>

</section>

<!– Featured Products –>

<span class=”section-subtitle”>Best Sellers</span>

<h2 class=”section-title”>The Collection</h2>

</div>

<!– Product 1 –>

Perfume Bottle

</div>

<div class=”product-brand”>Chanel</div>

<h3>Gabrielle Essence</h3>

<span class=”note-tag”>Floral</span>

<span class=”note-tag”>Jasmine</span>

</div>

</div>

<!– Product 2 –>

Perfume Bottle

</div>

<h3>Sauvage Elixir</h3>

<span class=”note-tag”>Spicy</span>

<span class=”note-tag”>Amber</span>

</div>

<div class=”product-price”>$160.00

Requirements:

WRITE MY PAPER

Design a website for online shop of perfume.

Comments

Leave a Reply Cancel reply