Pagina di destinazione del Samsung Galaxy S24 Ultra

511 chielvis1

Apri nell'Editor Pubblica il Tuo Codice

Pagina di destinazione del Samsung Galaxy S24 Ultra

Consigliato

16 October 2025

Schermata di caricamento animata CSS con effetto codice

16 September 2025

Flusso di dati di animazione del cuore HTML

10 October 2025

Struttura HTML del contenitore di animazione CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Samsung Galaxy S24 Ultra - Experience the Future</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Roboto', sans-serif;
            line-height: 1.6;
            color: #333;
            overflow-x: hidden;
        }
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        header {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            transition: all 0.3s ease;
        }
        header.scrolled {
            padding: 10px 0;
        }
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        .logo img {
            height: 30px;
            transition: all 0.3s ease;
        }
        .nav-links {
            display: flex;
            gap: 30px;
        }
        .nav-links a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        .nav-links a:hover {
            color: #1428a0;
        }
        .hero {
            background: linear-gradient(135deg, #e7f0fd, #ffffff);
            padding: 120px 0 60px;
            overflow: hidden;
        }
        .hero-content {
            display: flex;
            align-items: center;
            gap: 60px;
        }
        .hero-text {
            flex: 1;
        }
        .hero-image {
            flex: 1;
            text-align: center;
        }
        .hero-image img {
            max-width: 100%;
            height: auto;
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
            transition: transform 0.5s ease;
        }
        .hero-image img:hover {
            transform: scale(1.05) rotate(2deg);
        }
        .badge {
            display: inline-block;
            background-color: #1428a0;
            color: #fff;
            padding: 5px 15px;
            border-radius: 25px;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 20px;
        }
        h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            color: #666;
        }
        .btn {
            display: inline-block;
            background-color: #1428a0;
            color: #fff;
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn:hover {
            background-color: #0f1f7a;
            transform: translateY(-3px);
        }
        .btn-outline {
            background-color: transparent;
            border: 2px solid #1428a0;
            color: #1428a0;
        }
        .btn-outline:hover {
            background-color: #1428a0;
            color: #fff;
        }
        .features {
            padding: 100px 0;
            background-color: #fff;
        }
        .features h2 {
            text-align: center;
            margin-bottom: 60px;
            font-size: 2.5rem;
            color: #333;
        }
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
        }
        .feature-card {
            background-color: #f8f9fa;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        }
        .feature-content {
            padding: 30px;
        }
        .feature-content h3 {
            margin-bottom: 15px;
            font-size: 1.5rem;
            color: #1428a0;
        }
        .feature-content p {
            color: #666;
        }
        .purchase {
            background-color: #f8f9fa;
            padding: 100px 0;
        }
        .purchase-content {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
        }
        .purchase-card {
            background-color: #fff;
            border-radius: 15px;
            padding: 40px;
            margin-top: 40px;
            box-shadow: 0 15px 50px rgba(0,0,0,0.1);
        }
        .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: #1428a0;
            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: #1428a0;
            color: #fff;
            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: #1428a0;
        }
        .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;
            }
            h1 {
                font-size: 2rem;
            }
            .feature-grid {
                grid-template-columns: 1fr;
            }
            .nav-links {
                display: none;
            }
        }
    </style>
</head>
<body>
    <header id="header">
        <nav class="container">
            <div class="logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Samsung_Galaxy_Logo.png" alt="Samsung Logo">
            </div>
            <div class="nav-links">
                <a href="#features">Features</a>
                <a href="#purchase">Buy Now</a>
                <div class="cart-icon" id="cartIcon">
                    ????
                    <span class="cart-count" id="cartCount">0</span>
                </div>
            </div>
        </nav>
    </header>

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <div class="hero-text">
                    <span class="badge">New</span>
                    <h1>Samsung Galaxy S24 Ultra</h1>
                    <p>Experience the future of mobile technology with AI-powered innovation</p>
                    <div>
                        <a href="#features" class="btn">Explore Features</a>
                        <a href="#" class="btn btn-outline" style="margin-left: 15px;">View Specs</a>
                    </div>
                </div>
                <div class="hero-image">
                    <img src="https://images.samsung.com/is/image/samsung/p6pim/co/2401/gallery/co-galaxy-s24-s928-sm-s928bztultc-539325480?$650_519_PNG$" alt="Samsung Galaxy S24 Ultra">
                </div>
            </div>
        </div>
    </section>

<section id="features" class="features">
        <div class="container">
            <h2>Key Features</h2>
            <div class="feature-grid">
                <div class="feature-card">
                    <div class="feature-content">
                        <h3>AI-Powered Camera</h3>
                        <p>Capture stunning photos and videos with advanced AI enhancements</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-content">
                        <h3>S Pen Included</h3>
                        <p>Write, draw, and navigate with precision using the built-in S Pen</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-content">
                        <h3>Powerful Performance</h3>
                        <p>Experience lightning-fast speeds with the latest processor</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-content">
                        <h3>All-Day Battery</h3>
                        <p>Stay connected longer with intelligent battery management</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-content">
                        <h3>5G Connectivity</h3>
                        <p>Enjoy ultra-fast download and streaming speeds</p>
                    </div>
                </div>
                <div class="feature-card">
                    <div class="feature-content">
                        <h3>Durable Design</h3>
                        <p>Protected by Corning® Gorilla® Glass Victus® 2</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="purchase" class="purchase">
        <div class="container">
            <div class="purchase-content">
                <h2>Get Your Galaxy S24 Ultra</h2>
                <p>Starting from $1,299 or $54.12/mo for 24 mo</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="10">
                        <button class="quantity-btn" id="increaseQuantity">+</button>
                    </div>
                    <div class="purchase-info">
                        <p>✓ Free shipping</p>
                        <p>✓ 24-month financing available</p>
                        <p>✓ Samsung official warranty</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>

// Smooth scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

// Cart functionality
        let cartCount = 0;
        const cartCountElement = document.getElementById('cartCount');
        const cartModal = document.getElementById('cartModal');
        const cartItems = document.getElementById('cartItems');
        const addToCartBtn = document.getElementById('addToCart');
        const quantityInput = document.getElementById('quantity');
        const decreaseQuantityBtn = document.getElementById('decreaseQuantity');
        const increaseQuantityBtn = document.getElementById('increaseQuantity');
        const cartIcon = document.getElementById('cartIcon');

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

function updateCartModal() {
            cartItems.innerHTML = `
                <div class="cart-item">
                    <img src="https://images.samsung.com/is/image/samsung/p6pim/co/2401/gallery/co-galaxy-s24-s928-sm-s928bztultc-539325480?$650_519_PNG$" alt="Galaxy S24 Ultra">
                    <div class="cart-item-info">
                        <h4>Samsung Galaxy S24 Ultra</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';
        });

cartIcon.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 < 10) {
                quantityInput.value = parseInt(quantityInput.value) + 1;
            }
        });
    </script>
</body>
</html>

Consigliato

Schermata di caricamento animata CSS con effetto codice

Flusso di dati di animazione del cuore HTML

Struttura HTML del contenitore di animazione CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS