Scribd
Importer
39 vues6 pages

Site

Le document présente un exemple de code HTML pour une maquette simple d'un site web e-commerce, incluant des sections comme la navigation, la bannière, les produits en vedette et le pied de page. Le code est conçu pour être responsive, s'adaptant aux écrans mobiles. Des instructions sont fournies pour copier, enregistrer et afficher le fichier dans un navigateur.

Transféré par

Placide Mulangua
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

Thèmes abordés

  • section prix,
  • section navigation,
  • styles,
  • bannière,
  • section boutons,
  • éléments de page,
  • section panier,
  • media queries,
  • section promotions,
  • section contact
39 vues6 pages

Site

Le document présente un exemple de code HTML pour une maquette simple d'un site web e-commerce, incluant des sections comme la navigation, la bannière, les produits en vedette et le pied de page. Le code est conçu pour être responsive, s'adaptant aux écrans mobiles. Des instructions sont fournies pour copier, enregistrer et afficher le fichier dans un navigateur.

Transféré par

Placide Mulangua
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

Thèmes abordés

  • section prix,
  • section navigation,
  • styles,
  • bannière,
  • section boutons,
  • éléments de page,
  • section panier,
  • media queries,
  • section promotions,
  • section contact

Voici un exemple de code HTML pour une maquette simple d'un site web e-commerce.

Ce code inclut
des sections essentielles comme la navigation, la bannière, les produits en vedette, et le pied de page. Il
est également responsive pour s'adapter aux écrans mobiles.

```html

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Site E-Commerce</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

box-sizing: border-box;

header {

background: #333;

color: white;

padding: 10px 20px;

text-align: center;

nav {

margin: 20px 0;
}

nav a {

color: white;

margin: 0 15px;

text-decoration: none;

.banner {

background: url('https://via.placeholder.com/1200x400') no-repeat center center;

background-size: cover;

height: 400px;

display: flex;

align-items: center;

justify-content: center;

color: white;

font-size: 2em;

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);

.products {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

padding: 20px;

.product {

border: 1px solid #ccc;


border-radius: 5px;

margin: 10px;

padding: 10px;

width: calc(33% - 40px);

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

text-align: center;

.product img {

max-width: 100%;

height: auto;

.footer {

background: #333;

color: white;

text-align: center;

padding: 20px;

position: relative;

bottom: 0;

width: 100%;

@media (max-width: 768px) {

.product {

width: calc(50% - 40px);

}
@media (max-width: 480px) {

.product {

width: 100%;

</style>

</head>

<body>

<header>

<h1>Mon E-Commerce</h1>

<nav>

<a href="#">Accueil</a>

<a href="#">Produits</a>

<a href="#">Promotions</a>

<a href="#">Mon compte</a>

<a href="#">Panier</a>

</nav>

</header>

<div class="banner">

Bienvenue dans notre boutique en ligne !

</div>

<section class="products">
<div class="product">

<img src="https://via.placeholder.com/150" alt="Produit 1">

<h2>Produit 1</h2>

<p>Prix : 20€</p>

<button>Ajouter au panier</button>

</div>

<div class="product">

<img src="https://via.placeholder.com/150" alt="Produit 2">

<h2>Produit 2</h2>

<p>Prix : 30€</p>

<button>Ajouter au panier</button>

</div>

<div class="product">

<img src="https://via.placeholder.com/150" alt="Produit 3">

<h2>Produit 3</h2>

<p>Prix : 25€</p>

<button>Ajouter au panier</button>

</div>

</section>

<footer class="footer">

<p>Contactez-nous | Suivez-nous sur les réseaux sociaux</p>

</footer>

</body>
</html>

```

### Instructions

1. **Copiez le code ci-dessus** : Ouvrez un éditeur de texte ou un IDE comme Visual Studio Code.

2. **Collez le code** : Créez un nouveau fichier et collez-y le code.

3. **Enregistrez le fichier** : Par exemple, sous le nom `index.html`.

4. **Ouvrez dans un navigateur** : Double-cliquez sur le fichier pour l'afficher dans votre navigateur.

Cela vous donnera une maquette de base pour un site e-commerce. Vous pouvez personnaliser les
images, les textes et les styles selon vos besoins.

Vous aimerez peut-être aussi