Page de destination - Boutique

Ouvrir dans l'éditeur Publiez votre code

Recommandé

21 October 2024

Carte de remplissage en survol

25 May 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é

Carte de remplissage en survol

Un code par Liamgilles76

carte d'identité en Angola

HTML

CSS

JS

Recommandé

Carte de remplissage en survol

Un code par Liamgilles76

carte d'identité en Angola

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS