Página de destino - Rolex

864 Andev.web

Abrir no Editor Publique Seu Código Precisa de um site?

Recomendado

22 June 2025

Modelo HTML do painel de administração

17 April 2025

Um código de Mete Han

17 July 2025

Formulário de inscrição/cadastro rotativo em árabe (Glassmorphic)

HTML

<!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);
        });

Página de destino - Rolex

Recomendado

Modelo HTML do painel de administração

Um código de Mete Han

Formulário de inscrição/cadastro rotativo em árabe (Glassmorphic)

HTML

CSS

JS

Recomendado

Modelo HTML do painel de administração

Um código de Mete Han

Formulário de inscrição/cadastro rotativo em árabe (Glassmorphic)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS