Un código de adonis1887

1320 adonis1887

Abrir en el editor Publica tu código

Recomendado

26 March 2024

Sitio web de información

12 June 2025

Calculadora de impuestos de Robux

19 September 2023

Animación de texto al desplazarse

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>

Un código de adonis1887

Recomendado

Sitio web de información

Calculadora de impuestos de Robux

Animación de texto al desplazarse

HTML

CSS

JS

Recomendado

Sitio web de información

Calculadora de impuestos de Robux

Animación de texto al desplazarse

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS