Plantilla HTML para tienda de zapatillas de deporte de comercio electrónico

1,361 Mikeykun

Abrir en el editor Publica tu código

Plantilla HTML para tienda de zapatillas de deporte de comercio electrónico

Recomendado

15 October 2025

Código HTML JavaScript del juego de adivinanzas

6 May 2026

camino de escape 2

3 October 2025

Fragmento de animación de carga de CSS

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