Page de destination – Soins de la peau

2,597 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 July 2025

Changeur de thème en mode sombre avec stockage local

10 December 2025

Code HTML du jeu aléatoire de football 1

28 August 2025

Exemple d'onglets CSS : mise en page HTML simple

HTML

<!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>

CSS