Page de destination - Boutique

1961 Andev.web

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

23 September 2025

Extrait d'animation de chargement en chute CSS

31 July 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TrendyWear - Urban Style</title>
    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Permanent Marker', cursive;
            background-color: #1a202c;
            color: white;
            line-height: 1.6;
        }

header {
            background-color: black;
            padding: 1rem;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

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

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-size: 1.5rem;
            font-weight: bold;
        }

.cart-button {
            background-color: white;
            color: black;
            border: none;
            padding: 0.5rem 1.5rem;
            margin-right: 1rem;
            border-radius: 9999px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

.cart-button:hover {
            transform: scale(1.05);
        }

.cart-button:active {
            transform: scale(0.95);
        }

.offer-banner {
            background-color: #ecc94b;
            color: black;
            padding: 0.5rem;
            font-weight: bold;
            overflow: hidden;
            white-space: nowrap;
        }

.offer-text {
            display: inline-block;
            animation: marquee 20s linear infinite;
        }

@keyframes marquee {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }

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

.hero-content {
            position: relative;
            z-index: 1;
        }

.hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

.hero p {
            font-size: 1.25rem;
            margin-bottom: 2rem;
        }

.cta-button {
            background-color: white;
            color: black;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 9999px;
            font-size: 1.25rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

.cta-button:hover {
            transform: scale(1.05);
        }

.cta-button:active {
            transform: scale(0.95);
        }

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

.hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

.products {
            padding: 4rem 0;
        }

.products h2 {
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 2rem;
        }

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

@media (min-width: 768px) {
            .product-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

.product-card {
            background-color: #2d3748;
            border-radius: 0.5rem;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

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

.product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

.product-card:hover .product-image {
            transform: scale(1.05);
        }

.product-info {
            padding: 1rem;
        }

.product-name {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
        }

.product-price {
            color: #ecc94b;
            margin-bottom: 1rem;
        }

.product-size {
            margin-bottom: 1rem;
        }

.product-size select {
            width: 100%;
            padding: 0.5rem;
            background-color: #4a5568;
            color: white;
            border: 1px solid #4a5568;
            border-radius: 0.25rem;
        }

.add-to-cart {
            width: 100%;
            background-color: #ecc94b;
            color: black;
            border: none;
            padding: 0.5rem;
            border-radius: 9999px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

.add-to-cart:hover {
            background-color: #d69e2e;
            transform: scale(1.05);
        }

.add-to-cart:active {
            transform: scale(0.95);
        }

.cart-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }

.cart-content {
            background-color: #2d3748;
            padding: 2rem;
            border-radius: 0.5rem;
            max-width: 500px;
            width: 90%;
        }

.cart-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

.cart-items {
            margin-bottom: 1rem;
        }

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

.cart-item-info h3 {
            font-size: 1rem;
            margin-bottom: 0.25rem;
        }

.cart-item-info p {
            font-size: 0.875rem;
            color: #a0aec0;
        }

.remove-item {
            background: none;
            border: none;
            color: #e53e3e;
            cursor: pointer;
            font-size: 1.25rem;
            transition: transform 0.3s ease;
        }

.remove-item:hover {
            transform: scale(1.1);
        }

.cart-total {
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }

.cart-buttons {
            display: flex;
            gap: 1rem;
        }

.cart-button {
            padding: 0.75rem;
            border: none;
            border-radius: 9999px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

.order-button {
            background-color: #48bb78;
            color: white;
        }

.order-button:hover {
            background-color: #38a169;
        }

.close-button {
            background-color: #4a5568;
            color: white;
        }

.close-button:hover {
            background-color: #2d3748;
        }

.cart-button:hover {
            transform: scale(1.05);
        }

.cart-button:active {
            transform: scale(0.95);
        }

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

.hero p {
                font-size: 1rem;
            }

.cta-button {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <header>
        <nav class="container">
            <div class="logo">TrendyWear</div>
            <button class="cart-button" id="cartButton">???? Cart (0)</button>
        </nav>
    </header>

<div class="offer-banner">
        <div class="offer-text">???? Offer: 20% off storewide with code STREET20 ????</div>
    </div>

<section class="hero">
        <div class="hero-overlay"></div>
        <video class="hero-video" autoplay loop muted playsinline>
            <source src="https://videos.pexels.com/video-files/6121230/6121230-uhd_2732_1440_25fps.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="hero-content">
            <h1>Urban Style Without Limits</h1>
            <p>Discover the collection that defines the streets</p>
            <button class="cta-button" id="ctaButton">View Products</button>
        </div>
    </section>

<section class="products container" id="productsSection">
        <h2>Our Urban Collection</h2>
        <div class="product-grid" id="productGrid"></div>
    </section>

<div class="cart-modal" id="cartModal">
        <div class="cart-content">
            <h2 class="cart-title">Shopping Cart</h2>
            <div id="cartItems" class="cart-items"></div>
            <div id="cartTotal" class="cart-total"></div>
            <div class="cart-buttons">
                <button class="cart-button order-button" id="orderButton">Order via WhatsApp</button>
                <button class="cart-button close-button" id="closeCartButton">Close</button>
            </div>
        </div>
    </div>

let cart = [];

function renderProducts() {
            const productGrid = document.getElementById('productGrid');
            productGrid.innerHTML = products.map(product => `
                <div class="product-card">
                    <img src="${product.image}" alt="${product.name}" class="product-image">
                    <div class="product-info">
                        <h3 class="product-name">${product.name}</h3>
                        <p class="product-price">$${product.price.toFixed(2)}</p>
                        <div class="product-size">
                            <select id="size-${product.id}">
                                <option value="">Select size</option>
                                ${product.sizes.map(size => `<option value="${size}">${size}</option>`).join('')}
                            </select>
                        </div>
                        <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);
            });
        }

function addToCart(event) {
            const productId = parseInt(event.target.getAttribute('data-id'));
            const product = products.find(p => p.id === productId);
            const sizeSelect = document.getElementById(`size-${productId}`);
            const selectedSize = sizeSelect.value;

if (!selectedSize) {
                alert('Please select a size');
                return;
            }

const existingItem = cart.find(item => item.id === productId && item.selectedSize === selectedSize);

if (existingItem) {
                existingItem.quantity += 1;
            } else {
                cart.push({ ...product, quantity: 1, selectedSize });
            }

updateCartButton();
            event.target.classList.add('added');
            event.target.textContent = 'Added!';
            setTimeout(() => {
                event.target.classList.remove('added');
                event.target.textContent = 'Add to Cart';
            }, 1000);
        }

function updateCartButton() {
            const cartButton = document.getElementById('cartButton');
            const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
            cartButton.textContent = `???? Cart (${totalItems})`;
        }

function renderCart() {
            const cartItems = document.getElementById('cartItems');
            const cartTotal = document.getElementById('cartTotal');

if (cart.length === 0) {
                cartItems.innerHTML = '<p>Your cart is empty</p>';
                cartTotal.textContent = 'Total: $0.00';
                return;
            }

cartItems.innerHTML = cart.map(item => `
                <div class="cart-item">
                    <div class="cart-item-info">
                        <h3>${item.name}</h3>
                        <p>Size: ${item.selectedSize}, Quantity: ${item.quantity}</p>
                    </div>
                    <div>
                        <p>$${(item.price * item.quantity).toFixed(2)}</p>
                        <button class="remove-item" data-id="${item.id}" data-size="${item.selectedSize}">❌</button>
                    </div>
                </div>
            `).join('');

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

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

function removeFromCart(event) {
            const productId = parseInt(event.target.getAttribute('data-id'));
            const productSize = event.target.getAttribute('data-size');
            cart = cart.filter(item => !(item.id === productId && item.selectedSize === productSize));
            updateCartButton();
            renderCart();
        }

document.addEventListener('DOMContentLoaded', () => {
            renderProducts();

const cartButton = document.getElementById('cartButton');
            const cartModal = document.getElementById('cartModal');
            const closeCartButton = document.getElementById('closeCartButton');
            const orderButton = document.getElementById('orderButton');
            const ctaButton = document.getElementById('ctaButton');

cartButton.addEventListener('click', () => {
                cartModal.style.display = 'flex';
                renderCart();
            });

closeCartButton.addEventListener('click', () => {
                cartModal.style.display = 'none';
            });

orderButton.addEventListener('click', sendOrderToWhatsApp);

ctaButton.addEventListener('click', () => {
                document.getElementById('productsSection').scrollIntoView({ behavior: 'smooth' });
            });

window.addEventListener('click', (event) => {
                if (event.target === cartModal) {
                    cartModal.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>

Page de destination - Boutique

Recommandé

Extrait d'animation de chargement en chute CSS

Le chuchoteur de codes

Un code de Mikeykun

HTML

CSS

JS

Recommandé

Extrait d'animation de chargement en chute CSS

Le chuchoteur de codes

Un code de Mikeykun

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS