OBJECTIFS :

• Écrire votre deuxième page web en html et
• Réviser les balises de bases étudiées dans l’intro au html et dans la partie 2
• Apprendre à ajouter des images en html et en background css

Consignes :

1. Récolte et création des ressources
   1. Chercher 3 de vos morceaux préférés ainsi que leur pochette d’album
      Ajuster la taille des images pour qu’elle fasse 400×400
   2. Choisir 2 couleurs (une pour le texte et lien une pour le fond)
   3. Chercher un pattern de fond pour le header p.ex sur le site toptal.com
   4. Dans illustrator écrire votre nom avec une police qui vous plaît. Vectoriser le texte et éventuellement ajouter un picto vectoriel dans ce header.
      Exporter en SVG
2. Concevoir le html selon les images ci-dessous
3. Vous travaillerez sur vs-code. Initialiser le projet selon l’exercice précédent
   • Dans le dossier Sites créez un nouveau autre dossier ex3-prenom
   • Glissez ce dossier dans VS-code
4. Vous ne devez coder dans un premier temps que l’html, selon le découpage #1

1. Une fois l’html écrit ajouter une feuille de style
   1. Nouveau fichier dans vs-code (choisir css) ajouter le code css ci-dessous et l’enregistrer sous style.css
   2. Dans l’index.html la fin du <head> lié cette feuille de style en tapant link+tab et en changeant l’attribut href pour qu’il pointe vers votre nouveau fichier css
   3. Ajuster le code css avec vos couleurs.
   4. Ajouter le pattern en background du header
   5. Changer la couleur des liens et supprimer le soulignement
   6. … s’il vous reste du temps faire du fine tuning 🙂
   7. Créez un zip du dossier ex3-prenom et envoyez ce zip à hello@mi-ca.ch

html,body{ /* reset css + police sans serif */
  font-family: sans-serif; /* police sans serif utilisee */
  margin: 0; /* supprime les marges par défaut du navigateur */
  box-sizing: border-box; /* modèle de boite avec les bordures */
  scroll-behavior: smooth!important; /* scroll progressif pour les ancres */
  font-size: 16px;
}

h1,
header img,
svg{
  text-align: center; /* centre le texte */
  display: block; /* force le svg en block */
  margin-left: auto; /* centre les balises */
  margin-right: auto; /* centre les balises
  width: min(28rem,90%); /* taille min à 28rem ou 90% */
}
h1{
  font-size: 1.3em; /* ajuste la taille du h1 */
  font-weight: normal; /* enlève le bold */
  margin-top: 0; /* annule la marge */
  text-transform: uppercase; /* en majuscule */
}
main{
  margin-top: 5vw; /* marge en haut pour la partie principale */
  max-width:900px; /* largeur max */
  margin-left: auto; /* centre */
  margin-right: auto; /* centre */
  display: flex; /* positionnement flex pour les enfants */
  flex-wrap:wrap; /* passeront à la ligne si pas assez de place */
  gap:1em; /* espacement entre les éléments */
}
figure{ 
  margin: 0; /* pas de marges */
  flex-basis:calc(33.32% - .7em); /* largeur de l'enfant flex 33% - 7.em */
}
figure img{
  max-width:100%; /* image forcée à 100% */
}