Um código por adonis1887

1361 adonis1887

Abrir no Editor Publique Seu Código

Recomendado

30 March 2025

Um código por ytr3d3

1 December 2024

Um código por robustvariable23

3 June 2025

Um Código por alejandrokundrah

HTML

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

Um código por adonis1887

Recomendado

Um código por ytr3d3

Um código por robustvariable23

Um Código por alejandrokundrah

HTML

CSS

JS

Recomendado

Um código por ytr3d3

Um código por robustvariable23

Um Código por alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS