Tienda online de Nike Air Force 1

1,607 Primes

Abrir en el editor Publica tu código

Recomendado

22 May 2025

Deslizadores de tres figuras 3D

17 July 2024

Plantilla de sitio web de cartera HTML 2024

17 March 2026

Hermanos del béisbol

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PRIME OS</title> 
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <a href="#" class="logo">SHOP</a>
        <nav>
            <a href="#macos">SHOP</a>
        </nav>
    </header>

<section class="shop-section" id="macos">
        <h2>SHOP</h2>
        <div class="card-list">
            <div class="card">
                <div class="card-inner">
                    <img src="https://i.postimg.cc/bvH1ss7K/AIR-FORCE-1-07.png" alt="Nike Air Force 1 '07">
                    <h3>Nike Air Force 1 '07</h3>
                    <ul>
                        <li>• Color: White/White</li>
                        <li>• Upper: Leather</li>
                        <li>• Sole: Rubber</li>
                        <li>• Iconic city sneaker</li>
                    </ul>
                    <div><b>9.99$</b></div>
                    <a href="#" class="btn">BUY</a>
                </div>
            </div>
            <div class="card">
                <div class="card-inner">
                    <img src="https://i.postimg.cc/QCV74SFB/AIR-FORCE-1-07-1.png" alt="Nike Air Force 1 '07 Black">
                    <h3>Nike Air Force 1 '07 Black</h3>
                    <ul>
                        <li>• Color: Black/Black</li>
                        <li>• Upper: Leather</li>
                        <li>• Air-cushioned sole</li>
                        <li>• Durable and stylish</li>
                    </ul>
                    <div><b>29.99$</b></div>
                    <a href="#" class="btn">BUY</a>
                </div>
            </div>
            <div class="card">
                <div class="card-inner">
                    <img src="https://i.postimg.cc/gcB8X97Y/AIR-FORCE-1-LE-GS.png" alt="Nike Air Force 1 LE GS">
                    <h3>Nike Air Force 1 LE GS</h3>
                    <ul>
                        <li>• Color: White</li>
                        <li>• Size: Grade School (GS)</li>
                        <li>• Classic silhouette</li>
                        <li>• Lightweight cushioning</li>
                    </ul>
                    <div><b>9.99$</b></div>
                    <a href="#" class="btn">BUY</a>
                </div>
            </div>
            <div class="card">
                <div class="card-inner">
                    <img src="https://i.postimg.cc/Nf9TRJhZ/NIKE-AIR-FORCE-1-07-LV8.png" alt="Nike Air Force 1 '07 LV8 Sequoia">
                    <h3>Nike Air Force 1 '07 LV8</h3>
                    <ul>
                        <li>• Color: Sequoia/Light Orewood</li>
                        <li>• Material: Leather/Textile</li>
                        <li>• Limited edition</li>
                        <li>• Standout design</li>
                    </ul>
                    <div><b>19.99$</b></div>
                    <a href="#" class="btn">BUY</a>
                </div>
            </div>
        </div>
        <br><br><br>
    </section>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
    color: #e0e0e0;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 46, 99, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

@media (max-width: 600px) {
    body {
        background: -webkit-linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
        background-color: #191927;
    }
}

/* === HEADER === */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 9%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(12px);
    background: rgba(10, 10, 10, 0.4);
    border-bottom: 1px solid rgba(255, 46, 99, 0.2);
    animation: slideDown 0.8s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

to {
        transform: translateY(0);
    }
}

.logo {
    font-size: 3.2rem;
    font-weight: 800;
    background: linear-gradient(45deg, #ff2e63, #ff6b9d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    position: relative;
}

.logo::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(45deg, #ff2e63, #ff6b9d);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.logo:hover::after {
    width: 100%;
}

nav a {
    font-size: 1.8rem;
    color: #ccc;
    margin-left: 4rem;
    font-weight: 500;
    position: relative;
    padding: 0.5rem 0;
}

nav a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #ff2e63;
    transform: translateX(-50%);
    transition: width 0.4s ease;
    border-radius: 1px;
}

nav a:hover,
nav a.active {
    color: #ff2e63;
}

nav a:hover::before,
nav a.active::before {
    width: 100%;
}

section {
    min-height: 100vh;
    padding: 12rem 9% 6rem;
}

.home {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10rem;
}

.home-content {
    max-width: 600px;
}

.home-content h1 {
    font-size: 6.5rem;
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(45deg, #fff, #ff6b9d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
}

.home-content h1 span {
    color: #ff2e63;
}

.home-content h3 {
    font-size: 3.8rem;
    font-weight: 700;
    color: #ff2e63;
    margin-bottom: 1.5rem;
}

.home-content p {
    font-size: 1.7rem;
    line-height: 1.8;
    color: #aaa;
    margin-bottom: 3rem;
}

.btn {
    display: inline-block;
    padding: 1.2rem 3rem;
    background: linear-gradient(45deg, #ff2e63, #ff6b9d);
    color: white;
    font-size: 1.7rem;
    font-weight: 600;
    border-radius: 50px;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 8px 25px rgba(255, 46, 99, 0.3);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.7s;
    z-index: -1;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(255, 46, 99, 0.5);
}

.shop-section {
    padding: 10rem 9% 8rem;
    background: rgba(20, 20, 30, 0.6);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 46, 99, 0.2);
}

.shop-section h2 {
    font-size: 4rem;
    font-weight: 800;
    text-align: center;
    background: linear-gradient(45deg, #ff2e63, #ff9a9e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6rem;
    letter-spacing: 2px;
    position: relative;
}

.shop-section h2::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: linear-gradient(45deg, #ff2e63, #ff6b9d);
    border-radius: 2px;
}

.card-list {
    display: flex;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
    perspective: 1500px;
}

.card {
    position: relative;
    width: 340px;
    height: 480px;
    transform-style: preserve-3d;
    perspective: 1500px;
    cursor: pointer;
}

.card-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 30, 40, 0.85);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 46, 99, 0.3);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    text-align: center;
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.card:hover .card-inner {
    transform: rotateX(10deg) rotateY(10deg) translateZ(10px) scale(1.04);
    box-shadow: 0 40px 80px rgba(255, 46, 99, 0.35), 0 0 60px rgba(255, 46, 99, 0.25);
    border-color: #ff2e63;
}

.card img {
    width: 160px;
    margin-bottom: 2rem;
    filter: drop-shadow(0 0 20px rgba(255, 46, 99, 0.4));
    transition: all 0.6s ease;
    transform: translateZ(30px);
}

.card:hover img {
    transform: translateZ(70px) scale(1.2) rotate(10deg);
}

.card h3 {
    font-size: 2.3rem;
    color: #fff;
    font-weight: 700;
    margin-bottom: 1.5rem;
    background: linear-gradient(45deg, #fff, #ff9a9e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateZ(20px);
}

.card ul {
    list-style: none;
    text-align: left;
    margin: 2rem 0;
    font-size: 1.5rem;
    color: #ccc;
    line-height: 1.9;
    transform: translateZ(15px);
}

.card ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

.card ul li::before {
    content: '>';
    color: #ff2e63;
    position: absolute;
    left: 0;
    font-weight: bold;
}

.card > div b {
    font-size: 2rem;
    color: #ff2e63;
    font-weight: 700;
    display: block;
    margin: 2rem 0;
    text-shadow: 0 0 15px rgba(255, 46, 99, 0.6);
    transform: translateZ(25px);
}

.card .btn {
    background: transparent;
    color: #ff2e63;
    border: 2px solid #ff2e63;
    padding: 1rem 2.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
    transform: translateZ(30px);
    position: relative;
    z-index: 3;
}

.card .btn:hover {
    background: #ff2e63;
    color: white;
    transform: translateZ(40px) translateY(-3px) scale(1.05);
    box-shadow: 0 0 25px rgba(255, 46, 99, 0.7);
}
@media (max-width: 1700px) {
     .card-list {
          display: flex;
          gap: 8em;
          justify-content: center;
          flex-wrap: wrap;
          perspective: 1500px;
      }
}

@media (max-width: 600px) {
    .card-inner {
        backdrop-filter: none !important;
        background: rgba(30, 30, 40, 0.95) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
    }

.modal-left {
        flex-direction: column;
    }

.card:hover .card-inner {
        transform: translateY(-8px) scale(1.02) !important;
        box-shadow: 0 20px 40px rgba(255, 46, 99, 0.25) !important;
    }

.card img {
        transform: translateZ(0) !important;
    }

.card:hover img {
        transform: scale(1.1) !important;
    }

.card,
    .card-inner {
        transform-style: flat !important;
    }

.card-list {
        gap: 9rem !important;
        padding: 0 1rem;
    }

.card {
        width: calc(100vw - 4rem);
        max-width: 340px;
        margin: 0 auto;
    }

};