GlowBeauty Website Creation - 28/03/2026 18:49 EDT
Budget: $20,000 – $50,000 USD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GlowBeauty - Premium Makeup Collection</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- Header -->
<header class="header">
<nav class="navbar">
<div class="nav-container">
<div class="logo">
<h2><i class="fas fa-spa"></i> GlowBeauty</h2>
</div>
<ul class="nav-menu">
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="nav-icons">
<i class="fas fa-search"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-shopping-cart"> <span class="cart-count">0</span></i>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
</header>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<h1>Discover Your Perfect Glow</h1>
<p>Premium makeup that enhances your natural beauty</p>
<button class="cta-btn">Shop Now</button>
</div>
<div class="hero-image">
<img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Makeup Model">
</div>
</section>
<!-- Products Section -->
<section id="products" class="products">
<div class="container">
<h2 class="section-title">Featured Products</h2>
<div class="products-grid">
<div class="product-card">
<img src="https://images.unsplash.com/photo-1581229870529-27c4a7a82c1b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Lipstick">
<div class="product-info">
<h3>Velvet Matte Lipstick</h3>
<p class="price">$24.99</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<span>4.9 (127)</span>
</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<div class="product-card">
<img src="https://images.unsplash.com/photo-1608252042648-e7bb4e848d0f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Foundation">
<div class="product-info">
<h3>Luminous Foundation</h3>
<p class="price">$39.99</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span>4.8 (89)</span>
</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<div class="product-card">
<img src="https://images.unsplash.com/photo-1615215268929-627a758ac65d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Eyeshadow">
<div class="product-info">
<h3>Prism Eyeshadow Palette</h3>
<p class="price">$49.99</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<span>5.0 (156)</span>
</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<div class="product-card">
<img src="https://images.unsplash.com/photo-1587014611670-f1ad6c98b0a9?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Blush">
<div class="product-info">
<h3>Rose Glow Blush</h3>
<p class="price">$29.99</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<span>4.9 (203)</span>
</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about">
<div class="container">
<div class="about-content">
<div class="about-text">
<h2>Why Choose GlowBeauty?</h2>
<p>We're passionate about creating makeup that celebrates every skin tone and enhances your natural beauty. Our products are cruelty-free, long-lasting, and made with premium ingredients.</p>
<div class="features">
<div class="feature">
<i class="fas fa-shipping-fast"></i>
<h4>Free Shipping</h4>
<p>Orders over $50</p>
</div>
<div class="feature">
<i class="fas fa-undo"></i>
<h4>30-Day Returns</h4>
<p>Hassle-free returns</p>
</div>
<div class="feature">
<i class="fas fa-shield-alt"></i>
<h4>Secure Checkout</h4>
<p>100% safe transactions</p>
</div>
</div>
</div>
<div class="about-image">
<img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="About Us">
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="contact" class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>GlowBeauty</h3>
<p>Premium makeup for every glow.</p>
<div class="social-links">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-tiktok"></i></a>
<a href="#"><i class="fab fa-pinterest"></i></a>
</div>
</div>
<div class="footer-section">
<h4>Quick Links</h4>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#products">Shop</a></li>
<li><a href="#about">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Customer Care</h4>
<ul>
<li><a href="#">Shipping Info</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Newsletter</h4>
<p>Subscribe for exclusive offers!</p>
<div class="newsletter">
<input type="email" placeholder="Enter your email">
<button>Subscribe</button>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 GlowBeauty. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Cart Modal -->
<div class="cart-modal" id="cartModal">
<div class="cart-content">
<div class="cart-header">
<h3>Shopping Cart</h3>
<span class="close-cart">×</span>
</div>
<div class="cart-items" id
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GlowBeauty - Premium Makeup Collection</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- Header -->
<header class="header">
<nav class="navbar">
<div class="nav-container">
<div class="logo">
<h2><i class="fas fa-spa"></i> GlowBeauty</h2>
</div>
<ul class="nav-menu">
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="nav-icons">
<i class="fas fa-search"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-shopping-cart"> <span class="cart-count">0</span></i>
</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
</header>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<h1>Discover Your Perfect Glow</h1>
<p>Premium makeup that enhances your natural beauty</p>
<button class="cta-btn">Shop Now</button>
</div>
<div class="hero-image">
<img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Makeup Model">
</div>
</section>
<!-- Products Section -->
<section id="products" class="products">
<div class="container">
<h2 class="section-title">Featured Products</h2>
<div class="products-grid">
<div class="product-card">
<img src="https://images.unsplash.com/photo-1581229870529-27c4a7a82c1b?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Lipstick">
<div class="product-info">
<h3>Velvet Matte Lipstick</h3>
<p class="price">$24.99</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<span>4.9 (127)</span>
</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<div class="product-card">
<img src="https://images.unsplash.com/photo-1608252042648-e7bb4e848d0f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Foundation">
<div class="product-info">
<h3>Luminous Foundation</h3>
<p class="price">$39.99</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span>4.8 (89)</span>
</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<div class="product-card">
<img src="https://images.unsplash.com/photo-1615215268929-627a758ac65d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Eyeshadow">
<div class="product-info">
<h3>Prism Eyeshadow Palette</h3>
<p class="price">$49.99</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<span>5.0 (156)</span>
</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<div class="product-card">
<img src="https://images.unsplash.com/photo-1587014611670-f1ad6c98b0a9?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Blush">
<div class="product-info">
<h3>Rose Glow Blush</h3>
<p class="price">$29.99</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<span>4.9 (203)</span>
</div>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about">
<div class="container">
<div class="about-content">
<div class="about-text">
<h2>Why Choose GlowBeauty?</h2>
<p>We're passionate about creating makeup that celebrates every skin tone and enhances your natural beauty. Our products are cruelty-free, long-lasting, and made with premium ingredients.</p>
<div class="features">
<div class="feature">
<i class="fas fa-shipping-fast"></i>
<h4>Free Shipping</h4>
<p>Orders over $50</p>
</div>
<div class="feature">
<i class="fas fa-undo"></i>
<h4>30-Day Returns</h4>
<p>Hassle-free returns</p>
</div>
<div class="feature">
<i class="fas fa-shield-alt"></i>
<h4>Secure Checkout</h4>
<p>100% safe transactions</p>
</div>
</div>
</div>
<div class="about-image">
<img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="About Us">
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="contact" class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>GlowBeauty</h3>
<p>Premium makeup for every glow.</p>
<div class="social-links">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-tiktok"></i></a>
<a href="#"><i class="fab fa-pinterest"></i></a>
</div>
</div>
<div class="footer-section">
<h4>Quick Links</h4>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#products">Shop</a></li>
<li><a href="#about">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Customer Care</h4>
<ul>
<li><a href="#">Shipping Info</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Newsletter</h4>
<p>Subscribe for exclusive offers!</p>
<div class="newsletter">
<input type="email" placeholder="Enter your email">
<button>Subscribe</button>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 GlowBeauty. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Cart Modal -->
<div class="cart-modal" id="cartModal">
<div class="cart-content">
<div class="cart-header">
<h3>Shopping Cart</h3>
<span class="close-cart">×</span>
</div>
<div class="cart-items" id