Pagina di destinazione - Apple

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

Consigliato

10 June 2025

Caselle di controllo per spada laser di Star Wars CSS3 puro

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>iPhone 16 Pro - Apple</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
        }

:root {
            --primary: #2997ff;
            --hover: #0077ed;
            --background: #000000;
            --text: #f5f5f7;
        }

body {
            background-color: var(--background);
            color: var(--text);
            overflow-x: hidden;
            line-height: 1.47059;
            font-weight: 400;
            letter-spacing: -.022em;
        }

.header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 44px;
            background: rgba(22, 22, 23, 0.8);
            backdrop-filter: saturate(180%) blur(20px);
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.nav {
            display: flex;
            gap: 2.5rem;
            align-items: center;
            max-width: 980px;
            margin: 0 auto;
            padding: 0 22px;
        }

.nav a {
            color: var(--text);
            text-decoration: none;
            font-size: 12px;
            opacity: 0.8;
            transition: opacity 0.3s;
        }

.nav a:hover {
            opacity: 1;
        }

.hero {
            padding-top: 44px;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            position: relative;
            overflow: hidden;
            background: #000;
        }

.hero-content {
            text-align: center;
            padding-top: 50px;
            position: relative;
            z-index: 1;
            width: 100%;
        }

.hero h1 {
            font-size: 56px;
            line-height: 1.07143;
            font-weight: 600;
            letter-spacing: -.005em;
            margin-bottom: 6px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 1s forwards;
        }

.hero p {
            font-size: 28px;
            line-height: 1.10722;
            font-weight: 400;
            letter-spacing: .004em;
            margin-bottom: 0.5em;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 1s 0.2s forwards;
        }

.hero-image {
            width: 100%;
            height: calc(100vh - 200px);
            position: relative;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 1s 0.4s forwards;
            overflow: hidden;
        }

.hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

.cta-buttons {
            display: flex;
            gap: 35px;
            justify-content: center;
            margin-top: 1.6em;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 1s 0.6s forwards;
        }

.button {
            font-size: 21px;
            line-height: 1.381;
            font-weight: 400;
            letter-spacing: .011em;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }

.button-primary {
            color: var(--primary);
        }

.button-primary:hover {
            text-decoration: underline;
        }

.button-primary::after {
            content: ">";
            margin-left: 0.5em;
            font-family: 'SF Pro Icons';
        }

.products {
            background: #fbfbfd;
            color: #1d1d1f;
            padding: 100px 0;
        }

.products-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 980px;
            margin: 0 auto;
            padding: 0 22px;
        }

.product-card {
            background: white;
            border-radius: 18px;
            padding: 30px;
            text-align: center;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            transform: translateY(30px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }

.product-card.animate {
            animation: fadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

.product-card:hover {
            transform: scale(1.02);
        }

.product-card img {
            width: 100%;
            height: 200px;
            object-fit: contain;
            margin-bottom: 35px;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

.product-card h3 {
            font-size: 24px;
            line-height: 1.16667;
            font-weight: 600;
            letter-spacing: .009em;
            margin-bottom: 8px;
        }

.product-card p {
            font-size: 14px;
            line-height: 1.42859;
            font-weight: 400;
            letter-spacing: -.016em;
            color: #86868b;
            margin-bottom: 12px;
        }

.product-card .price {
            font-size: 17px;
            line-height: 1.23536;
            font-weight: 400;
            letter-spacing: -.022em;
            margin-bottom: 20px;
        }

.buy-button {
            background: var(--primary);
            color: white;
            padding: 8px 16px;
            border-radius: 980px;
            font-size: 12px;
            line-height: 1.33337;
            font-weight: 400;
            letter-spacing: -.01em;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s;
        }

.buy-button:hover {
            background: var(--hover);
        }

.footer {
            background: #f5f5f7;
            color: #86868b;
            padding: 40px 0;
            font-size: 12px;
        }

.footer-content {
            max-width: 980px;
            margin: 0 auto;
            padding: 0 22px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.footer-links {
            display: flex;
            gap: 20px;
        }

.footer-links a {
            color: #515154;
            text-decoration: none;
            transition: color 0.3s;
        }

.footer-links a:hover {
            color: #000;
        }

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

@media (max-width: 1068px) {
            .hero h1 {
                font-size: 48px;
            }

.hero p {
                font-size: 24px;
            }

.button {
                font-size: 19px;
            }

.products-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

@media (max-width: 734px) {
            .hero h1 {
                font-size: 40px;
            }

.hero p {
                font-size: 19px;
            }

.button {
                font-size: 17px;
            }

.products-grid {
                grid-template-columns: 1fr;
            }

.nav {
                gap: 1rem;
            }

.hero-image {
                height: calc(100vh - 300px);
            }

.footer-content {
                flex-direction: column;
                gap: 20px;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <nav class="nav">
            <a href="#" class="logo">
                <svg height="44" viewBox="0 0 14 44" width="14" xmlns="http://www.w3.org/2000/svg">
                    <path d="m13.0729 17.6825a3.61 3.61 0 0 0 -1.7248 3.0365 3.5132 3.5132 0 0 0 2.1379 3.2223 8.394 8.394 0 0 1 -1.0948 2.2618c-.6816.9812-1.3943 1.9623-2.4787 1.9623s-1.3633-.63-2.613-.63c-1.2187 0-1.6525.6507-2.644.6507s-1.6834-.9089-2.4787-2.0243a9.7842 9.7842 0 0 1 -1.6628-5.2776c0-3.0984 2.014-4.7405 3.9969-4.7405 1.0535 0 1.9314.6919 2.5924.6919.63 0 1.6112-.7333 2.8092-.7333a3.7579 3.7579 0 0 1 3.1604 1.5802zm-3.7284-2.8918a3.5615 3.5615 0 0 0 .8469-2.22 1.5353 1.5353 0 0 0 -.031-.32 3.5686 3.5686 0 0 0 -2.3445 1.2084 3.4629 3.4629 0 0 0 -.8779 2.1585 1.419 1.419 0 0 0 .031.2892 1.19 1.19 0 0 0 .2169.0207 3.0935 3.0935 0 0 0 2.1586-1.1368z" fill="currentColor"/>
                </svg>
            </a>
            <a href="#">Store</a>
            <a href="#">Mac</a>
            <a href="#">iPad</a>
            <a href="#">iPhone</a>
            <a href="#">Watch</a>
            <a href="#">Vision</a>
            <a href="#">AirPods</a>
        </nav>
    </header>

<section class="hero">
        <div class="hero-content">
            <h1>iPhone 16 Pro Max</h1>
            <p>Titanium. So strong. So light. So Pro.</p>
            <div class="hero-image">
                <img src="https://www.apple.com/v/iphone-16-pro/c/images/overview/media-card/highlights_apple_intelligence_endframe__esdley4zqkya_xlarge.jpg" alt="iPhone 16 Pro">
            </div>
        </div>
    </section>

<section class="products">
        <div class="products-grid">
            <div class="product-card">
                <img src="https://itechcolombia.co/wp-content/uploads/2024/09/233664-233669-233674-iphone-16-ultramarine.webp" alt="iPhone 16">
                <h3>iPhone 16</h3>
                <p>The most powerful iPhone ever.</p>
                <p class="price">From $999</p>
                <a href="#" class="buy-button">Buy</a>
            </div>
            <div class="product-card">
                <img src="https://d1erhn8sljv386.cloudfront.net/k59w083BQadPW6HmRvP3LcVSSt0=/fit-in/1000x1000/filters:format(webp)/https://s3.amazonaws.com/lmbucket0/media/product/t-mobile-apple-iphone-16-pro-frontimage-white-titanium.png" alt="iPhone 16 Pro">
                <h3>iPhone 16 Pro</h3>
                <p>A total powerhouse.</p>
                <p class="price">From $799</p>
                <a href="#" class="buy-button">Buy</a>
            </div>
            <div class="product-card">
                <img src="https://itechcolombia.co/wp-content/uploads/2024/09/233709-233717-iphone-16-pro-max-desert.webp" alt="iPhone 16 Pro Max">
                <h3>iPhone 16 Pro Max</h3>
                <p>As amazing as ever.</p>
                <p class="price">From $699</p>
                <a href="#" class="buy-button">Buy</a>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="footer-content">
            <p>© 2024 Apple Inc. All rights reserved.</p>
            <div class="footer-links">
                <a href="#">Privacy Policy</a>
                <a href="#">Terms of Use</a>
                <a href="#">Sales and Refunds</a>
                <a href="#">Legal</a>
                <a href="#">Site Map</a>
            </div>
        </div>
    </footer>

cards.forEach(card => observer.observe(card));

// Parallax effect on hero image
        const heroImage = document.querySelector('.hero-image img');
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            if (heroImage && scrolled < window.innerHeight) {
                heroImage.style.transform = `scale(${1 + scrolled * 0.0005}) translateY(${scrolled * 0.5}px)`;
            }
        });
    </script>
</body>
</html>

Pagina di destinazione - Apple

Consigliato

Un codice di Mete

Caselle di controllo per spada laser di Star Wars CSS3 puro

Clone di Pinterest

HTML

CSS

JS

Consigliato

Un codice di Mete

Caselle di controllo per spada laser di Star Wars CSS3 puro

Clone di Pinterest

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS