Vous allez reproduire une maquette relativement basique en utilisant les media queries
- Mettre en pratique vos connaissances de responsive design et notamment les media queries
Vous devez écrire le code HTML (index.html) et de CSS (custom.css) pour reproduire la charte graphique jointe à l’identique. Tous les fichiers nécessaires vous sont fournis. Vous n’avez ni besoin d’en ajouter, ni d’en supprimer.
Votre référence est le fichier screenshot.png
Votre template HTML contiendra plusieurs parties dans l'ordre :
- une barre de navigation
- un jumbotron ayant pour id ‘home’, contenant la première partie et son contenu
- une div ayant pour id ‘who’, contenant la seconde partie et son contenu
- une div ayant pour id ‘get-involved’, contenant la troisième partie et son contenu
- un footer
- une div ayant pour id 'back-to-top’ et contenant la flèche permettant de remonter au jumbotron
Votre site doit être responsive. Vous devrez redimensionner/replacer certaines choses. Voir les screenshot-max1199.png, screenshot-max991.png et screenshot-max767.png
Pour l’affichage sur smartphone (max-width: 767px), votre barre de navigation ne doit afficher que le logo et une icône pour accéder au menu.
Pour afficher les icônes qui ne sont pas présentent dans les images, vous utiliserez Font Awesome (http://fortawesome.github.io/Font-Awesome/) qui est déjà intégré au projet.
- Faire apparaître/disparaitre la barre de navigation au clique lors l'affichage sur smartphone.
- Créer la fonctionnalité 'back-to-top' : quand on clique sur la flèche, faire remonter au début de la page
N’hésitez pas à rendre un travail incomplet même si vous avez eu l’un ou l’autre blocage, il y a des points à prendre partout...
Vous rendrez un repo github contenant tous les fichiers du projet.
Si vous avez réaliser des bonus libres, indiquez-nous ce que vous avez fait dans un fichier bonus.txt que vous ajouterez dans votre fichier zip.
Attention, les bonus ne seront évalués que si vous avez au moins 80% des points sur les spécifications minimales.