Modèle HTML pour boutique de baskets en ligne

975 Mikeykun

Ouvrir dans l'éditeur Video Publiez votre code

Modèle HTML pour boutique de baskets en ligne

Recommandé

26 February 2025

Un code par securearray494

21 July 2025

Entrée de téléchargement de fichier avec icône SVG

14 May 2025

Téléchargez la carte de Minecraft et plus

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

Recommandé

Un code par securearray494

Entrée de téléchargement de fichier avec icône SVG

Téléchargez la carte de Minecraft et plus

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS