Vous allez reproduire une maquette en utilisant bootstrap
- Mettre en pratique vos connaissances d'intégration html/css/bootstrap
Vous devez écrire le code HTML (index.html) et de CSS (ccs/custom.css) pour reproduire la charte graphique jointe à l’identique. Ajoutez les fichiers nécessaires (bootstrap).
Vos références sont les fichiers maquette*.jpg
Votre template HTML contiendra plusieurs parties dans l'ordre :
- 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
Le menu sera composé des rubriques suivantes:
- 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="#")
Le menu apparait seulement lorsqu'on clique sur l'icone "bars".
Pour afficher les icônes qui ne sont pas présentent dans les images, vous utiliserez Font Awesome et Typicons. (https://fontawesome.com/) (http://www.typicons.com/)
Polices d'écritures :
- 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
Vous rendrez un repo github contenant tous les fichiers du projet. N’hésitez pas à rendre un travail incomplet même si vous avez eu l’un ou l’autre blocage.