HTML-Vorlage für E-Commerce-Sneaker-Shop

807 Mikeykun

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

HTML-Vorlage für E-Commerce-Sneaker-Shop

Empfohlen

23 August 2025

HTML-Vorlage für Webdesign, digitale Erlebnisse und Podcasts

28 August 2025

Beispiel für CSS-Tabs: Einfaches HTML-Layout

4 November 2024

Homepage für eine Portfolio-Site

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/index.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
</head>
<body>
    <header>
        <div class="band">
            <h1>Reductions des prix a 30% sur votre premier achat</h1>
        </div>
      <nav>
        <div class="logo">
           <span>MIKEY-SHOP</span>
        </div>

</nav>
      <div class="hero">
        
        <div class="container">
            <img src="https://julescustomizedkicks.com/cdn/shop/files/custom-nike-air-force-1-sneaker-khaki-417717_grande.jpg?v=1711897951" alt="">
            <img src="https://athena-clothing.de/cdn/shop/products/air-force-1-custom-sneaker-splash-rot-784483.jpg?v=1677963282" alt="">
        </div>
      </div>
      <div class="content">
        <p>Decouvez nos offres exclusive</p>
        <button>Voir nos offres</button>
      </div>
    </header>

<section>
    <div class="title">
        <h1>Produits</h1>
    </div>
   </section> 
   <section>
   <div class="product-container">

<div class="product">
           <img src="https://balenciaga.dam.kering.com/asset/5ba973bf-1f3e-42c2-81c5-07843b88b314/Thumbnail/Thumbnail_Men_Speed_617239W2DB21015_2000x2000.jpg" alt="">
           <h2 id="name">Men's Sneakers Balenciaga</h2>
           <p id="price">64$</p>
           <button add-to-cart>Ajouter au panier</button>
        </div>

<div class="product">
           <img src="https://rukminim2.flixcart.com/image/480/640/xif0q/shoe/q/s/n/-original-imah25hq9y8t3ukf.jpeg?q=90" alt="">
           <h2 id="name">ADIDAS Runesy M Running Shoes</h2>
           <p id="price">64$</p>
           <button add-to-cart>Ajouter au panier</button>
        </div>

<div class="product">
           <img src="https://static.nike.com/a/images/t_prod_pc/w_960,c_limit,q_auto,f_auto/cf49b90d-5327-4c91-80e6-11757b5a164e/air-jordan-5-fire-red-black-tongue-hq7978-101-release-date.jpg" alt="">
           <h2 id="name">sneakers & apparel SG. Nike</h2>
           <p id="price">64$</p>
           <button add-to-cart>Ajouter au panier</button>
        </div>

</div>
   </section>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

body{
    background: rgb(251, 247, 247);
      overflow-x: hidden; }

}

.band{
    color: white;
    background-color: blueviolet;
    height: 30px ;

}

.band h1{
    padding: 10px;
    font: 1em sans-serif;
    text-align: center;
}

.logo{
    font-family: sans-serif;
    font-size: large;
    text-align: center;
    padding: 30px;

}

nav{
    height: 80px;
    background-color: rgb(251, 251, 251)
}
.hero{
    height: 400px;
    background-color: white;
    display: flex;
}

.hero .container{
display: flex;
height: 98%;
width: 100%;

}

.container img{
    width: 100%;
}

.content{
    align-items: center;
    display: flex;
    flex-direction: column;
    color: white;
    font-family: sans-serif;
    font-size: 40px;
    margin-top: -200px;
}

.content button{
height: 40px;
width: 150px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background-color: white;
color: black;
border:none;
border-radius: 3px;
}

.title{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:130px;
}

.title h1{
    font-family: sans-serif;
    font-size: 25px;
    margin-bottom: 50px;
}

.product{
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    height: 320px;
    width: 200px;
    flex-direction: column;
    display: flex;
}
.product img{
    height: 200px;
}
.product button{
    height: 50px;
    width: 200px;
    background-color: rgb(51, 47, 47);
    color: #ffffff;
    border: none;

}
.product h2{
margin-top: 20px;
color: rgb(0, 0, 0);
font-family: sans-serif;
font-size: 15px;
margin-bottom: 20px;
text-align: center;

}
.product p{
    font-family: sans-serif;
    font-size: 15px;
    position: relative;
    color: rgb(0, 0, 0);
    left: 160px;
    
}

.product-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.product {
    margin: 10px;
}

Empfohlen

HTML-Vorlage für Webdesign, digitale Erlebnisse und Podcasts

Beispiel für CSS-Tabs: Einfaches HTML-Layout

Homepage für eine Portfolio-Site

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS