Crée l’intégration du site depuis le projet figma:

Source maquette figma ( trouvée sur les templates gratuits de la communauté). Se trouve dans *Atelier/WEB/Exercices/HTML-CSS/15_Figma-vers-HTML*

https://www.figma.com/file/VY5lH4OdbmFcR1NVPLrxP5/Landing-Page-Free-Template-(Ecommerce)-(Community)?type=design&mode=design&t=M3lvnszYOztAtEGT-7

Structure

1ʳᵉ étape, crée un dossier pour le projet : l’organisation des fichiers est libre bien sûr voici la mienne.

/FIG-versHTML/(dos)
/Src/ (dos) 
/SITE/ (dos)
   - index.html 
	 - assests/ (dos) 
		   - images/ (dos)
		   - js/ (dos)
					- script.js
		   - css/ (dos)
          - styles.css
			 - fonts/ (dos)

2023-08-03 16_44_09-site - Visual Studio Code.png

Depuis Figma, le mode Développeur est disponible pour nous aider à préparer notre intégration.

2023-08-04 08_30_13-Landing Page Free Template (Ecommerce) (Community) - Figma.png

Création des premiers fichiers du projet

/* --- ||  étape 1   Reset CSS  ||  --- */

/* simplifie la taille */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Supprimer les espaces par défaut /
/ Forcer le style du texte via le style plutôt que les éléments */

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Styles de l'agent utilisateur pour le mode sombre */

html {
  color-scheme: dark light;
}

/* min body height */

body {
  min-height: 100vh;
}

/* responsive images/videos */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}