Loja online Nike Air Force 1

Abrir no Editor Publique Seu Código

Recomendado

24 March 2025

<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;
    }

};

Loja online Nike Air Force 1

Recomendado

Um código por smartarray391

Um código por bachir123

Efeito de pairar no ícone

HTML

CSS

JS

Recomendado

Um código por smartarray391

Um código por bachir123

Efeito de pairar no ícone

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS