Pagina di destinazione - Rolex

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

15 October 2024

Slider di carte animate espandibili

3 May 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rolex - Timeless Luxury Watches</title>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@300;400;600;700&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Montserrat', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            overflow-x: hidden;
        }
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

header {
            background-color: rgba(0, 0, 0, 0.8);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            transition: all 0.5s ease;
        }
        header.scrolled {
            background-color: rgba(0, 0, 0, 0.95);
        }
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 50px;
            transition: all 0.5s ease;
        }
        .logo img {
            height: 40px;
            transition: all 0.5s ease;
        }
        header.scrolled .logo img {
            height: 30px;
        }
        .nav-links {
            display: flex;
            gap: 40px;
        }
        .nav-links a {
            text-decoration: none;
            color: #fff;
            font-weight: 600;
            transition: all 0.3s ease;
            position: relative;
            padding: 5px 0;
        }
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #d4af37;
            transition: width 0.3s ease;
        }
        .nav-links a:hover::after {
            width: 100%;
        }
        .hero {
            background: linear-gradient(135deg, #000, #333);
            padding: 180px 0 100px;
            overflow: hidden;
            color: #fff;
            position: relative;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('https://www.rolex.com/content/dam/rolex-58/homepage/homepage-share-image.jpg') no-repeat center center;
            background-size: cover;
            opacity: 0.2;
            z-index: 0;
        }
        .hero-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 1;
        }
        .hero-text {
            max-width: 600px;
        }
        .hero-image {
            position: relative;
            width: 100%;
            max-width: 500px;
        }
        .hero-image img {
            width: 100%;
            height: auto;
            filter: drop-shadow(0 10px 20px rgba(212, 175, 55, 0.3));
        }
        .badge {
            display: inline-block;
            background-color: #d4af37;
            color: #000;
            padding: 5px 15px;
            border-radius: 25px;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        h1 {
            font-family: 'Cormorant', serif;
            font-size: 4rem;
            margin-bottom: 20px;
            line-height: 1.2;
            background: linear-gradient(45deg, #d4af37, #fff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            opacity: 0;
            transform: translateY(50px);
            animation: fadeInUp 1s forwards 0.5s;
        }
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            color: #ccc;
            opacity: 0;
            transform: translateY(50px);
            animation: fadeInUp 1s forwards 0.7s;
        }
        .btn {
            display: inline-block;
            background-color: #d4af37;
            color: #000;
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            opacity: 0;
            transform: translateY(50px);
            animation: fadeInUp 1s forwards 0.9s;
        }
        .btn:hover {
            background-color: #c4a030;
            transform: translateY(-3px);
            box-shadow: 0 6px 8px rgba(0,0,0,0.2);
        }
        .btn-outline {
            background-color: transparent;
            border: 2px solid #d4af37;
            color: #d4af37;
        }
        .btn-outline:hover {
            background-color: #d4af37;
            color: #000;
        }

.features {
            padding: 100px 0;
            background-color: #fff;
        }
        .features h2 {
            text-align: center;
            margin-bottom: 60px;
            font-size: 3rem;
            color: #333;
            font-family: 'Cormorant', serif;
        }
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
        }
        .feature-card {
            background-color: #fff;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.5s ease;
            opacity: 0;
            transform: translateY(50px);
        }
        .feature-card.appear {
            opacity: 1;
            transform: translateY(0);
        }
        .feature-card:hover {
            transform: translateY(-10px) scale(1.03);
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        }
        .feature-image {
            height: 200px;
            overflow: hidden;
        }
        .feature-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .feature-card:hover .feature-image img {
            transform: scale(1.1);
        }
        .feature-content {
            padding: 30px;
        }
        .feature-content h3 {
            margin-bottom: 15px;
            font-size: 1.5rem;
            color: #d4af37;
            font-family: 'Cormorant', serif;
        }
        .feature-content p {
            color: #666;
        }

.purchase {
            background-color: #f9f9f9;
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }
        .purchase::before {
            content: '';
            position: absolute;
            top: -50px;
            left: -50px;
            width: 100px;
            height: 100px;
            background-color: #d4af37;
            border-radius: 50%;
            opacity: 0.1;
        }
        .purchase::after {
            content: '';
            position: absolute;
            bottom: -50px;
            right: -50px;
            width: 150px;
            height: 150px;
            background-color: #d4af37;
            border-radius: 50%;
            opacity: 0.1;
        }
        .purchase-content {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 1;
        }
        .purchase-card {
            background-color: #fff;
            border-radius: 15px;
            padding: 40px;
            margin-top: 40px;
            box-shadow: 0 15px 50px rgba(0,0,0,0.1);
            transition: all 0.5s ease;
        }
        .purchase-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
        }
        .quantity-selector {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin-bottom: 30px;
        }
        .quantity-btn {
            background-color: #f0f0f0;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .quantity-btn:hover {
            background-color: #d4af37;
            color: #fff;
        }
        #quantity {
            font-size: 1.2rem;
            width: 60px;
            text-align: center;
            border: 2px solid #f0f0f0;
            border-radius: 25px;
            padding: 5px;
        }
        .purchase-info {
            margin-bottom: 30px;
        }
        .purchase-info p {
            margin-bottom: 10px;
            color: #666;
        }

.cart-icon {
            position: relative;
            cursor: pointer;
        }
        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: #d4af37;
            color: #000;
            font-size: 0.8rem;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cart-modal {
            display: none;
            position: fixed;
            top: 80px;
            right: 20px;
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            padding: 30px;
            width: 350px;
            max-width: 90vw;
            z-index: 1000;
        }
        .cart-modal h3 {
            margin-bottom: 20px;
            color: #d4af37;
            font-family: 'Cormorant', serif;
        }
        .cart-item {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
        }
        .cart-item img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 10px;
        }
        .cart-item-info h4 {
            margin-bottom: 5px;
            color: #333;
        }
        .cart-item-info p {
            color: #666;
        }

@media (max-width: 768px) {
            .hero-content {
                flex-direction: column;
            }
            .hero-image {
                order: -1;
                margin-bottom: 30px;
            }
            h1 {
                font-size: 3rem;
            }
            .feature-grid {
                grid-template-columns: 1fr;
            }
            nav {
                padding: 15px 20px;
            }
            .nav-links {
                display: none;
            }
            .mobile-menu-btn {
                display: block;
            }
        }

@media (min-width: 769px) {
            .hero-content {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
            .hero-text {
                text-align: left;
            }
            .mobile-menu-btn {
                display: none;
            }
        }

.mobile-menu-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #fff;
        }

.mobile-menu {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.95);
            z-index: 1001;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

.mobile-menu a {
            color: #fff;
            font-size: 1.5rem;
            margin: 20px 0;
            text-decoration: none;
        }

.close-menu-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            color: #fff;
            font-size: 2rem;
            cursor: pointer;
        }

@keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }

.floating {
            animation: float 6s ease-in-out infinite;
        }

@keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

.pulsing {
            animation: pulse 3s infinite;
        }

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

@keyframes shimmer {
            0% { background-position: -1000px 0; }
            100% { background-position: 1000px 0; }
        }

.shimmer {
            background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
            background-size: 1000px 100%;
            animation: shimmer 2s infinite linear;
        }
    </style>
</head>
<body>
    <header id="header">
        <nav class="container">
            <div class="logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Logo_da_Rolex.png/2560px-Logo_da_Rolex.png" alt="Rolex Logo">
            </div>
            <div class="nav-links">
                <a href="#features">Features</a>
                <a href="#purchase">Buy</a>
                <a href="#" class="cart-icon">
                    ????
                    <span class="cart-count" id="cartCount">0</span>
                </a>
            </div>
            <button class="mobile-menu-btn">☰</button>
        </nav>
    </header>

<div class="mobile-menu">
        <button class="close-menu-btn">×</button>
        <a href="#features">Features</a>
        <a href="#purchase">Buy</a>
        <a href="#" class="cart-icon">
            ????
            <span class="cart-count" id="mobileCartCount">0</span>
        </a>
    </div>

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <div class="hero-text">
                    <span class="badge pulsing">New</span>
                    <h1>Rolex Daytona</h1>
                    <p>Timeless elegance meets precision engineering</p>
                    <div style="margin-top: 30px;">
                        <a href="#features" class="btn">Explore</a>
                        <a href="#" class="btn btn-outline" style="margin-left: 15px;">View specifications</a>
                    </div>
                </div>
                <div class="hero-image">
                    <img src="https://goldcenter.com.co/img-rolex/watches-models/m126518ln-0012-drp-upright-bba-with-shadow-landscape.webp" alt="Rolex Daytona" class="floating">
                </div>
            </div>
        </div>
    </section>

<section id="features" class="features">
        <div class="container">
            <h2>Featured Characteristics</h2>
            <div class="feature-grid">
                <div class="feature-card">
                    <div class="feature-image">
                        <img src="https://media.rolex.com/image/upload/q_auto:eco/f_auto/t_v7-grid/c_limit,w_2440/v1/catalogue/2024/upright-bba-with-shadow/m126720vtnr-0001" alt="Precision Movement">
                    </div>
                    <div class="feature-content">
                        <h3>Precision Movement</h3>
                        <p>Calibre 4130, self-winding mechanical chronograph movement</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-image">
                        <img src="https://media.rolex.com/image/upload/q_auto:eco/f_auto/t_v7-grid/c_limit,w_2440/v1/catalogue/2024/upright-bba-with-shadow/m228398tbr-0042" alt="Oyster Case">
                    </div>
                    <div class="feature-content">
                        <h3>Oyster Case</h3>
                        <p>Waterproof to a depth of 100 metres / 330 feet</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-image">
                        <img src="https://media.rolex.com/image/upload/q_auto:eco/f_auto/t_v7-grid/c_limit,w_2440/v1/catalogue/2024/upright-bba-with-shadow/m126603-0001" alt="Cerachrom Bezel">
                    </div>
                    <div class="feature-content">
                        <h3>Cerachrom Bezel</h3>
                        <p>Scratch-proof and corrosion-resistant ceramic bezel</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-image">
                        <img src="https://glauser.vteximg.com.br/arquivos/m278343rbr-0016_modelpage_front_facing_landscape.png?v=638172970482430000" alt="Chronograph">
                    </div>
                    <div class="feature-content">
                        <h3>Chronograph</h3>
                        <p>Precise timekeeping with 1/8 second accuracy</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="purchase" class="purchase">
        <div class="container">
            <div class="purchase-content">
                <h2>Get Your Rolex Daytona</h2>
                <p>Starting from $13,150 USD</p>
                <div class="purchase-card">
                    <div class="quantity-selector">
                        <button class="quantity-btn" id="decreaseQuantity">-</button>
                        <input type="number" id="quantity" value="1" min="1" max="5">
                        <button class="quantity-btn" id="increaseQuantity">+</button>
                    </div>
                    <div class="purchase-info">
                        <p>✓ Free shipping worldwide</p>
                        <p>✓ 5-year international guarantee</p>
                        <p>✓ Certified authentic Rolex timepiece</p>
                    </div>
                    <a href="#" class="btn" id="addToCart">Add to cart</a>
                </div>
            </div>
        </div>
    </section>

<div class="cart-modal" id="cartModal">
        <h3>Shopping Cart</h3>
        <div id="cartItems"></div>
        <a href="#" class="btn" id="checkout">Proceed to checkout</a>
    </div>

function updateCartCount() {
            cartCountElement.textContent = cartCount;
            mobileCartCountElement.textContent = cartCount;
        }

function updateCartModal() {
            cartItems.innerHTML = `
                <div class="cart-item">
                    <img src="https://goldcenter.com.co/img-rolex/watches-models/m126518ln-0012-drp-upright-bba-with-shadow-landscape.webp" alt="Rolex Daytona">
                    <div class="cart-item-info">
                        <h4>Rolex Daytona</h4>
                        <p>Quantity: ${cartCount}</p>
                    </div>
                </div>
            `;
        }

addToCartBtn.addEventListener('click', (e) => {
            e.preventDefault();
            const quantity = parseInt(quantityInput.value);
            cartCount += quantity;
            updateCartCount();
            updateCartModal();
            cartModal.style.display = 'block';
        });

document.querySelector('.cart-icon').addEventListener('click', (e) => {
            e.preventDefault();
            cartModal.style.display = cartModal.style.display === 'none' ? 'block' : 'none';
        });

decreaseQuantityBtn.addEventListener('click', () => {
            if (quantityInput.value > 1) {
                quantityInput.value = parseInt(quantityInput.value) - 1;
            }
        });

increaseQuantityBtn.addEventListener('click', () => {
            if (quantityInput.value < 5) {
                quantityInput.value = parseInt(quantityInput.value) + 1;
            }
        });

mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.style.display = 'flex';
        });

closeMenuBtn.addEventListener('click', () => {
            mobileMenu.style.display = 'none';
        });

const fadeElems = document.querySelectorAll('.feature-card');
        const appearOptions = {
            threshold: 0,
            rootMargin: "0px 0px -100px 0px"
        };

fadeElems.forEach(elem => {
            appearOnScroll.observe(elem);
        });

Pagina di destinazione - Rolex

Consigliato

Barra di navigazione blu

Slider di carte animate espandibili

Un codice di webleb

HTML

CSS

JS

Consigliato

Barra di navigazione blu

Slider di carte animate espandibili

Un codice di webleb

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS