Pagina di destinazione - Negozio

1173 Andev.web

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Consigliato

28 June 2025

Modello HTML della pagina di errore 404

17 July 2025

Modulo di registrazione per l'accesso con rotazione 3D HTML CSS

18 June 2025

Modello di modulo di accesso HTML

HTML

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

Consigliato

Modello HTML della pagina di errore 404

Modulo di registrazione per l'accesso con rotazione 3D HTML CSS

Modello di modulo di accesso HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS