−Table des matières

HTML - Structuration de page

1. About us

  • Reproduire le document ci-dessous (web-arena-about-us.html associé à la feuille de style web-arena.css).
  • Intégrer fontawesome-web pour les icônes
  • Utiliser les ressources sur le drive
  • Respecter les caractéristiques du modèle (police à utiliser font-family: montserrat,sans-serif)
  • Structurer la page sématiquement sans ajouter d'éléments inutiles et veillez à la validation W3C

2. Blog

A lire : Disposition en colonnes

  • Reproduire le document ci-dessous (web-arena-blog.html associé à la feuille de style web-arena.css).
  • Intégrer fontawesome-web pour les icônes
  • Utiliser les ressources sur le drive
  • Respecter les caractéristiques du modèle (police à utiliser font-family: montserrat,sans-serif)
  • Structurer la page sémantiquement sans ajouter d'éléments inutiles et veillez à la validation W3C

Structuration de page

Solution élégante pour la structuration de page classique en header/main/footer utilisant les flexboxes (source : Stackoverlow):

Structure HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
  
main {
  flex: 1;
}