OBJECTIFS :

• Écrire votre première page web en html et
• Apprendre et comprendre les balises de base étudiées dans l’intro au html et dans la partie 2

Consignes :

1. Concevoir le html selon les images ci-dessous
2. Vous travaillerez sur vs-code. Initialiser le projet selon la vidéo
   • Dans le finder créez un dossier dans vos dossier départ nommé sites
   • Dans ce dossier créez un autre dossier ex2-prenom
   • Glissez ce dossier dans VS-code
3. Vous ne devez faire que l’html, les css sont fournies. Copiez-collez l’entier des lignes css ci-dessous.
4. Si il vous reste du temps vous pouvez analyser le fichier css, et essayer de changer des valeurs enregistrer le fichiers css et regarder les changements
5. Créez un zip du dossier ex2-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 */
}
body{ /* on cible la balise body */
  background: #424243; /* couleur de fond */
  color: #ddd; /* couleur du texte */
  font-size: max(18px,1.2vw); /* taille de police minimum 18px maximum 1,2 viewport width = largeur de l'écran visible */
}

header h1 strong{ /* cible les gras dans les titre h1 dans les header */
  color: #F26CA7; /* défini la couleur du texte */
}

a{ /* cible tous les liens */
  color: #efefef; /* défini la couleur du texte */
}
header { /* cible le(s) header */
  text-align: center; /* align le contenu textuel au centre */
}


header nav a{ /* cible tous les liens qui sont dans les nav qui sont dans les header */
  display: inline-block; /* modèle hybride (pour mettre des padding) */
  margin-right: 0.8em; /* marge à droite */
  margin-bottom:.8em; /* marge en bas */
  padding: 0.2em; /* marge interne partout (haut droite bas gauche) */
  background: #F26CA7; /* couleur de fond */
  border-radius:.3em; /* arrondis des bords */
  text-decoration: none; /* pas de soulignement. */
}

header h1, /* cible les h1 dans les header ET */
header nav, /* cible les nav dans les header ET */
section p, /* cible les p dans les section  ET FINALEMENT*/
section h2{ /* cible les h2 dans les section */
  max-width:70rem; /* défini un largeur maxi à 70rem */
  margin-left: auto; /* pousse au max à gauche */
  margin-right: auto; /* pousse au max à droite == centré */
}


section{ /* cible toutes les sections */
  background: #464646; /* défini un fond de couleur */
  padding: .8em 1.5em; /* marges intérieur 0.8 en haut et bas & 1.5 à gauche et droite */
  margin: 2em 0; /* marge extérieur de 2em haut bas et 0 gauche droite */
}

section p span{ /* cible les span dans les p dans les sections */
  display: inline-block; /* modèle hybride */
  background-color: #888; /* fond de couleur */
  color: #333; /* couleur du texte */
  border-radius:.2em; /* arrondis des bords */
  padding: 0 .2em; /* marges intérieures 0↑↓ .2em →← */
  opacity: 0.6; /* transparence */
}


footer{ /* cible tous les footer */
  font-size: 0.6em; /* ajuste la taille de police */
  text-align: right; /* align à droite */
  padding: 0 1em; /* marges intérieures 0↑↓ 1em →← */
}

Découpage :