लैंडिंग पेज - त्वचा की देखभाल

1956 Andev.web

अनुशंसित

23 March 2023

तुर्की ब्लॉग और पॉडकास्ट HTML टेम्पलेट

29 August 2024

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luxe Skincare</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Poppins', sans-serif;
            background-color: #fff;
            color: #333;
            line-height: 1.6;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

header {
            background-color: rgba(255, 255, 255, 0.9);
            position: fixed;
            width: 100%;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

.logo {
            font-size: 24px;
            font-weight: 700;
        }

.cart-icon {
            font-size: 24px;
            cursor: pointer;
            position: relative;
        }

.cart-count {
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: #ff4757;
            color: #fff;
            border-radius: 50%;
            padding: 2px 6px;
            font-size: 12px;
        }

.hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

.hero-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

.hero-content {
            background-color: rgba(255, 255, 255, 0.8);
            padding: 40px;
            border-radius: 10px;
        }

.hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s forwards;
        }

.hero p {
            font-size: 18px;
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s 0.5s forwards;
        }

.btn {
            display: inline-block;
            background-color: #333;
            color: #fff;
            padding: 12px 24px;
            border-radius: 30px;
            text-decoration: none;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s 1s forwards;
        }

.btn:hover {
            background-color: #555;
        }

@keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.products {
            padding: 80px 0;
            background-color: #f9f9f9;
        }

.products h2 {
            text-align: center;
            font-size: 36px;
            margin-bottom: 40px;
        }

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

.product-card {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s ease;
        }

.product-card:hover {
            transform: translateY(-10px);
        }

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

.product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.product-info {
            padding: 20px;
        }

.product-title {
            font-size: 18px;
            margin-bottom: 10px;
        }

.product-price {
            font-weight: 600;
            margin-bottom: 15px;
        }

.add-to-cart {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.add-to-cart:hover {
            background-color: #555;
        }

.cart {
            position: fixed;
            top: 0;
            right: -300px;
            width: 300px;
            height: 100vh;
            background-color: #fff;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
            transition: right 0.3s ease;
            z-index: 1001;
        }

.cart.open {
            right: 0;
        }

.cart-header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            font-size: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.close-cart {
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
        }

.cart-items {
            padding: 20px;
            max-height: calc(100vh - 180px);
            overflow-y: auto;
        }

.cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

.cart-item-info {
            flex-grow: 1;
        }

.cart-item-title {
            font-size: 16px;
            margin-bottom: 5px;
        }

.cart-item-price {
            font-weight: 600;
        }

.cart-item-remove {
            background: none;
            border: none;
            color: #ff4757;
            cursor: pointer;
        }

.cart-total {
            padding: 20px;
            font-size: 18px;
            font-weight: 600;
            text-align: right;
            border-top: 1px solid #eee;
        }

@media (max-width: 768px) {
            .hero h1 {
                font-size: 36px;
            }

.hero p {
                font-size: 16px;
            }

.product-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
        }
    </style>
</head>
<body>
    <header>
        <nav class="container">
            <div class="logo">Luxe Skincare</div>
            <div class="cart-icon" id="cartIcon">???? <span class="cart-count">0</span></div>
        </nav>
    </header>

<main>
        <section class="hero">
            <video class="hero-video" autoplay loop muted playsinline>
                <source src="https://videos.pexels.com/video-files/4153588/4153588-uhd_2732_1440_25fps.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <div class="hero-content">
                <h1>Discover Your Natural Beauty</h1>
                <p>High-quality skincare products for radiant skin</p>
                <a href="#products" class="btn">Shop Now</a>
            </div>
        </section>

<section id="products" class="products">
            <div class="container">
                <h2>Our Products</h2>
                <div class="product-grid" id="productGrid"></div>
            </div>
        </section>
    </main>

<div class="cart" id="cart">
        <div class="cart-header">
            <span>Shopping Cart</span>
            <button class="close-cart" id="closeCart">×</button>
        </div>
        <div class="cart-items" id="cartItems"></div>
        <div class="cart-total" id="cartTotal">Total: $0</div>
    </div>

const cart = [];
        const productGrid = document.getElementById('productGrid');
        const cartIcon = document.getElementById('cartIcon');
        const cartElement = document.getElementById('cart');
        const closeCart = document.getElementById('closeCart');
        const cartItems = document.getElementById('cartItems');
        const cartTotal = document.getElementById('cartTotal');
        const cartCount = document.querySelector('.cart-count');

function renderProducts() {
            productGrid.innerHTML = products.map(product => `
                <div class="product-card">
                    <div class="product-image">
                        <img src="${product.image}" alt="${product.name}">
                    </div>
                    <div class="product-info">
                        <h3 class="product-title">${product.name}</h3>
                        <p class="product-price">$${product.price}</p>
                        <button class="add-to-cart" data-id="${product.id}">Add to Cart</button>
                    </div>
                </div>
            `).join('');

document.querySelectorAll('.add-to-cart').forEach(button => {
                button.addEventListener('click', addToCart);
            });
        }

updateCart();
            animateCartIcon();
        }

function updateCart() {
            cartItems.innerHTML = cart.map(item => `
                <div class="cart-item">
                    <div class="cart-item-info">
                        <h4 class="cart-item-title">${item.name}</h4>
                        <p class="cart-item-price">$${item.price} x ${item.quantity}</p>
                    </div>
                    <button class="cart-item-remove" data-id="${item.id}">×</button>
                </div>
            `).join('');

const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
            cartTotal.textContent = `Total: $${total}`;
            cartCount.textContent = cart.reduce((sum, item) => sum + item.quantity, 0);

document.querySelectorAll('.cart-item-remove').forEach(button => {
                button.addEventListener('click', removeFromCart);
            });
        }

function animateCartIcon() {
            cartIcon.style.transform = 'scale(1.2)';
            setTimeout(() => {
                cartIcon.style.transform = 'scale(1)';
            }, 200);
        }

cartIcon.addEventListener('click', () => {
            cartElement.classList.add('open');
        });

closeCart.addEventListener('click', () => {
            cartElement.classList.remove('open');
        });

renderProducts();
    </script>
</body>
</html>

लैंडिंग पेज - त्वचा की देखभाल

अनुशंसित

रिस्पॉन्सिव एफएक्यू पेज

तुर्की ब्लॉग और पॉडकास्ट HTML टेम्पलेट

404 पेज पैरालैक्स के साथ

HTML

CSS

JS

अनुशंसित

रिस्पॉन्सिव एफएक्यू पेज

तुर्की ब्लॉग और पॉडकास्ट HTML टेम्पलेट

404 पेज पैरालैक्स के साथ

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS