Réaliser un template e-commerce

Introduction

Reproduire ces maquettes en HTML / CSS en y intégrant des images, des fonts, des couleurs,.... de votre choix. Je vous laisse libre de vendre ce que vous voulez sur votre e-commerce, j'ai déjà eu droit à un service de momification, des voyages interstellaires, du poison pour taupes, des trucs pour gauchers, des cubes, etc... étonnez-moi ! :)

Important : vous trouverez des exemples de réalisations (fait par d'autres élèves) en images et en vidéos en bas de la page.

Page d'accueil

Cette page est la page d'accueil de votre e-commerce, faites en sorte de coller au plus près des contraintes de la maquette :

• vous pouvez utiliser la libraire "bouton" fourni dans les cours pour votre bouton "Espace client" (ou en trouver une autre si vous le souhaitez).
  
• respectez les dimensionnement "full-width" (100%) et "conteneur" (1170px)
• le paragraphe de texte et le footer sont des mix entre les dimensions full-width et conteneur
• faire un effort de présentation (couleur, images, texte, etc...)

Page catégorie de produits

Cette page est la page qui s'affiche lorsqu'un utilisateur clique sur une de vos catégories. 

Elle comprend, en plus des élément déjà présent sur la page d'accueil :

• un champ de recherche (pour trouver des produits plus facilement)
• une liste de produit appartenant à cette catégorie
• une liste vers les autres catégories de votre site

Inutile de faire une page par catégorie, nous ne travaillons que sur le template. Faites en sorte que tous les liens présents dans cette page soit gérés (pas de 404), qu'il y ai un retour à l'accueil aisé, et que le formulaire de recherche pointe bien vers le stub http://cda2019.webboy.fr/send_form.php.

Pour ceux qui ne l'ont pas encore tester, utiliser la librairie "flexboxgrid" pour votre liste de produits.

Page produit

Cette page sera le template de vos pages produit. C'est la que l'utilisateur arrivera quand il cliquera sur un de vos produits.

Exemples

Page d'accueil

Vidéo