Nike Air Force 1 Shop – Online-Shop

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

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

};

Nike Air Force 1 Shop – Online-Shop

Empfohlen

Ein Code von bachir123

Ein Code von smartfunction186

Ein Code von smartarray391

HTML

CSS

JS

Empfohlen

Ein Code von bachir123

Ein Code von smartfunction186

Ein Code von smartarray391

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS