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

981 Mikeykun

Abrir en el editor Video Publica tu código

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

Recomendado

21 August 2024

Luz de lámpara

19 October 2024

Código de barra de navegación HTML CSS

23 November 2024

Efecto de desplazamiento de icono

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

Recomendado

Luz de lámpara

Código de barra de navegación HTML CSS

Efecto de desplazamiento de icono

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS