Un code par adonis1887

1977 adonis1887

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

28 May 2025

9007199254740992 Code source HTML du jeu

11 December 2024

<!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 code par adonis1887

Recommandé

Ouverture du parchemin

9007199254740992 Code source HTML du jeu

Un code par staticcloud996

HTML

CSS

JS

Recommandé

Ouverture du parchemin

9007199254740992 Code source HTML du jeu

Un code par staticcloud996

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS