Pour créer une page responsive les media-queries c'est bien mais c'est long à mettre en place. Heureusement, il existe des outils pour vous simplifier la vie ! Comme par exemple le framework Twitter Bootstrap
- Installer Twitter Bootstrap dans son projet
- Rendre une page responsive grâce à Twitter Bootstrap
- Comprendre le système de grid
- Utiliser les composants front les plus répandus proposer par bootstrap (responsive menu, glyphicons, buttons, etc.)
Vous devez reproduire les templates qui se trouvent dans le dossier templates. Une page html par template. N'hésitez pas à utiliser abondamment la documentation bootstrap.
Note : Pour inclure bootstrap dans vos pages, privéligiez le CDN.
Pour faire le petit smiley vous utiliserez la police d'icône Font Awesome.
Pour se faire :
- Inclure la font dans votre html entre les balises
<head>...</head>:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">- Code du smiley à placer à l'endroit où vous voulez :
<i class="far fa-smile"></i>
