Scribd
Upload
21 views9 pages

Untitled 1

The document is an HTML template for a luxury beauty products website named 'Cosmitique'. It includes styles and layout for various sections such as a header, hero section, features, product categories, and testimonials. The design emphasizes a modern aesthetic with a focus on user experience and responsive design.

Uploaded by

zakariae.rezine
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
21 views9 pages

Untitled 1

The document is an HTML template for a luxury beauty products website named 'Cosmitique'. It includes styles and layout for various sections such as a header, hero section, features, product categories, and testimonials. The design emphasizes a modern aesthetic with a focus on user experience and responsive design.

Uploaded by

zakariae.rezine
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cosmitique | Luxury Beauty Products</title>
<style>
:root {
--primary: #ff6b81;
--secondary: #f9f1f3;
--text: #333333;
--light: #ffffff;
--accent: #a675a1;
--dark-accent: #7e5283;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Helvetica Neue', Arial, sans-serif;
}

body {
color: var(--text);
background-color: var(--light);
}

header {
background-color: var(--light);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
position: fixed;
width: 100%;
z-index: 100;
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 5%;
max-width: 1200px;
margin: 0 auto;
}

.logo {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary);
letter-spacing: 1px;
}

.nav-links {
display: flex;
list-style: none;
}

.nav-links li {
margin-left: 2rem;
}

.nav-links a {
text-decoration: none;
color: var(--text);
font-weight: 500;
transition: color 0.3s;
}

.nav-links a:hover {
color: var(--primary);
}

.mobile-menu-btn {
display: none;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--text);
}

.hero {
height: 100vh;
display: flex;
align-items: center;
background-color: var(--secondary);
padding: 0 5%;
position: relative;
overflow: hidden;
}

.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255,107,129,0.1) 0%,
rgba(166,117,161,0.1) 100%);
z-index: 1;
}

.hero-content {
max-width: 1200px;
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 2;
}

.hero-text {
flex: 1;
padding-right: 2rem;
}
.hero-text h1 {
font-size: 3rem;
margin-bottom: 1.5rem;
line-height: 1.2;
}

.hero-text p {
font-size: 1.1rem;
margin-bottom: 2rem;
line-height: 1.6;
color: #666;
}

.btn {
display: inline-block;
background-color: var(--primary);
color: white;
padding: 0.8rem 2rem;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
}

.btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(255, 107, 129, 0.3);
}

.btn-secondary {
background-color: transparent;
border: 2px solid var(--primary);
color: var(--primary);
margin-left: 1rem;
}

.btn-secondary:hover {
background-color: var(--primary);
color: white;
}

.hero-image {
flex: 1;
text-align: center;
}

.hero-image img {
width: 100%;
max-width: 500px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.features {
padding: 5rem 5%;
max-width: 1200px;
margin: 0 auto;
}
.section-title {
text-align: center;
margin-bottom: 3rem;
}

.section-title h2 {
font-size: 2.2rem;
margin-bottom: 1rem;
position: relative;
display: inline-block;
}

.section-title h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 3px;
background-color: var(--primary);
}

.section-title p {
color: #666;
max-width: 600px;
margin: 0 auto;
}

.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}

.feature-card {
background-color: var(--light);
border-radius: 10px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s;
border-top: 4px solid transparent;
}

.feature-card:hover {
transform: translateY(-10px);
border-top: 4px solid var(--primary);
}

.feature-icon {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 1.5rem;
}

.feature-card h3 {
margin-bottom: 1rem;
font-size: 1.3rem;
}

.feature-card p {
color: #666;
line-height: 1.6;
}

.products {
padding: 5rem 5%;
background-color: var(--secondary);
}

.product-categories {
max-width: 1200px;
margin: 0 auto 2rem auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}

.category-btn {
padding: 0.5rem 1.5rem;
background-color: transparent;
border: 2px solid var(--primary);
color: var(--primary);
border-radius: 30px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
}

.[Link] {
background-color: var(--primary);
color: white;
}

.category-btn:hover {
background-color: var(--primary);
color: white;
}

.product-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}

.product-card {
background-color: var(--light);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s;
position: relative;
}
.product-tag {
position: absolute;
top: 1rem;
right: 1rem;
background-color: var(--primary);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}

.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.product-image {
height: 250px;
background-color: #f9f9f9;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.product-image img {
max-width: 100%;
max-height: 100%;
transition: transform 0.5s;
}

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


transform: scale(1.05);
}

.product-info {
padding: 1.5rem;
}

.product-info h3 {
margin-bottom: 0.5rem;
font-size: 1.2rem;
}

.product-info p {
color: #666;
margin-bottom: 1rem;
font-size: 0.9rem;
line-height: 1.5;
}

.product-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.rating {
color: #FFD700;
font-size: 0.9rem;
}

.price {
font-weight: 700;
color: var(--primary);
font-size: 1.2rem;
}

.old-price {
text-decoration: line-through;
color: #999;
font-size: 0.9rem;
margin-right: 0.5rem;
}

.product-actions {
display: flex;
justify-content: space-between;
align-items: center;
}

.add-to-cart {
display: inline-block;
background-color: var(--primary);
color: white;
padding: 0.5rem 1rem;
border-radius: 30px;
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.3s;
flex-grow: 1;
text-align: center;
}

.add-to-cart:hover {
background-color: #ff4d67;
transform: translateY(-2px);
}

.wishlist-btn {
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border-radius: 50%;
border: 1px solid #ddd;
background-color: transparent;
margin-left: 0.5rem;
cursor: pointer;
transition: all 0.3s;
color: #666;
}

.wishlist-btn:hover {
background-color: var(--primary);
color: white;
border-color: var(--primary);
}

.best-seller {
background-color: var(--accent);
}

.new-arrival {
background-color: #2ecc71;
}

.sale {
background-color: #e74c3c;
}

.about-us {
padding: 5rem 5%;
background-color: var(--light);
}

.about-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
align-items: center;
}

.about-image {
overflow: hidden;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-image img {
width: 100%;
height: auto;
display: block;
}

.about-content h2 {
font-size: 2.2rem;
margin-bottom: 1.5rem;
position: relative;
}

.about-content h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 70px;
height: 3px;
background-color: var(--primary);
}
.about-content p {
margin-bottom: 1.5rem;
line-height: 1.7;
color: #666;
}

.signature {
font-family: 'Brush Script MT', cursive;
font-size: 2rem;
color: var(--primary);
margin-top: 1rem;
}

.testimonials {
padding: 5rem 5%;
max-width: 1200px;
margin: 0 auto;
}

You might also like