Vous allez reproduire une maquette en utilisant tailwind
- Mettre en pratique vos connaissances d'intégration html/css/tailwind
Vous devez écrire le code HTML (index.html) et de CSS (ccs/custom.css) pour reproduire les maquettes jointes à l’identique.
Vos références sont les fichiers maquette*.jpg
- un header ayant pour id ‘home’
- une section ayant pour id ‘features’, contenant la seconde partie et son contenu
- une section ayant pour id ‘about’, contenant la troisième partie et son contenu
- une section ayant pour id ‘blog’, contenant la quatrième partie et son contenu
- une section ayant pour id ‘history’, contenant la cinquième partie et son contenu
- une section ayant pour id ‘photos’, contenant la sixième partie et son contenu
- une section ayant pour class ‘partenaires’, contenant la septième partie et son contenu
- une section ayant pour id ‘contact’, contenant la huitième partie et son contenu
- un footer
➡️ De manière générale, prêtez une attention particulière à la Sémantique : Semantics
Home(href="#home") 🏠Features(href="#features") ⭐About me(href="#about") 👤My Blog(href="#blog") 📝My history(href="#history") 📜Look my Photos(href="#photos") 📷Get in Touch!(href="#contact") ✉️Download(href="#") ⬇️
➡️ Pour afficher les icônes qui ne sont pas présentent dans les images, vous utiliserez Font Awesome, Typicons ou Flaticons :
- Rokkit pour les titrages : https://fonts.google.com/selection?query=rokkit&selection.family=Rokkitt
- Roboto pour les paragraphes : https://fonts.google.com/selection?query=robot&selection.family=Roboto
- Créer la fonctionnalité 'back-to-top' : quand on clique sur la flèche, faire remonter au début de la page 🔝
- Faire disparaitre le menu lorsqu'on clique hors de la zone menu 🚪