Introduction

Vous allez reproduire une maquette en utilisant bootstrap

Objectifs

• Mettre en pratique vos connaissances d'intégration html/css/bootstrap

Consignes

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

Spécifications minimales

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

Bonus

• 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

Rendu

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.