Modelo HTML de loja de tênis para comércio eletrônico

982 Mikeykun

Abrir no Editor Video Publique Seu Código

Modelo HTML de loja de tênis para comércio eletrônico

Recomendado

21 July 2025

Entrada de upload de arquivo com ícone SVG

21 July 2025

Formulário de login HTML com fundo geométrico

10 December 2025

Demonstração de física ragdoll em HTML5: Playground do Matter.js

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

Entrada de upload de arquivo com ícone SVG

Formulário de login HTML com fundo geométrico

Demonstração de física ragdoll em HTML5: Playground do Matter.js

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS