Loja online Nike Air Force 1

Abrir no Editor Video Publique Seu Código

Recomendado

8 December 2024

Um código por smartfunction186

9 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 smartfunction186

Site da loja de calçados

Um código por Landingpage1

HTML

CSS

JS

Recomendado

Um código por smartfunction186

Site da loja de calçados

Um código por Landingpage1

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS