TD Cards Bootstrap

Partie 1 :

1. Récupérer sur votre disque le fichier TDCardsBootstrap_Enonce.html.

2. On souhaite avoir un affichage responsif s'adaptant automatiquement à la taille de la
fenêtre du navigateur et se comportant comme suit (voir figure ci-dessous) :

Partie Header :

Dans l'entête de la page web TDCardsBootstrap.html, ajoutez une barre de navigation en

respectant la mise en forme suivante :
 la couleur de fond de la barre de navigation est claire avec un texte sombre,
 le titre "Navbar" disparaît pour les tailles de fenêtres supérieures ou égales à 992px,
 les textes du menu sont en majuscules,
 le nom du site est mis en évidence,
 les liens de la barre de navigation sont placés à droite.
 les liens de navigation sont remplacés par un bouton pour les tailles de fenêtres
inférieures à 768px. Ces liens n’apparaîtront que lorsqu’on clique sur le bouton,
 la barre de navigation reste fixe en haut de la fenêtre du navigateur même lorsque
l'utilisateur effectue un défilement vertical (scroll) dans la page.

Partie Section

1. Première section
 Les titres sont centrés.
 Le titre de niveau 2 est en gras, avec des marges externes en haut et en bas de 3rem
(correspondant à la valeur 5) et une marge interne en haut de 3rem.
 Le titre de niveau 3 a une marge externe en haut de 0.5rem (correspondant à la valeur
2) et une marge externe en bas de 1.5rem (correspondant à la valeur 4).
 Le lien "Visit us" a une bordure bleu et deux marges externes en haut et en bas de
1rem (correspondant à la valeur 3). À ce lien, ajoutez l’icône fa-home de la
bibliothèque font-awesome.
 Après cette section, ajoutez un trait et lui définissez deux marges externes en haut et
en bas de 1.5rem (correspondant à la valeur 4) et une largeur égale à 75% du body.

1
2. Deuxième section :
 Appliquez une marge interne en haut et en bas de 3rem (correspondant à la valeur 5).
 Sur une même ligne, placez l’image screens.jpg qui va occuper 5 colonnes de la grille
md et une ligne imbriquée qui occupera 7 colonnes de la grille md.
 Les colonnes de la ligne imbriquée sont divisée en deux lignes : chaque ligne
comporte deux paragraphes qui s'affichent en colonnes et occupant chacune 6
colonnes de la grille md.
 Le texte des paragraphes est justifié et de couleur bleu-gris.
 Les titres de niveau 5 sont en gras, de couleur bleu, avec une marge externe en bas de
1rem (correspondant à la valeur 3).
3. Troisième section :
 Appliquez à la section des marges internes en haut et en bas de 3rem (correspondant à
la valeur 5), la couleur de fond #eee.
 Le titre de niveau 2 est en gras, aligné au centre, avec une marge en bas de 3rem
(correspondant à la valeur 5).
 Le paragraphe qui suit le titre comporte un texte aligné au centre et de couleur gris-
bleu. Appliquez les valeurs suivantes pour les marges externes : auto pour les marges
gauche et droite, 5 pour la marge en bas.
 Sur une même ligne, placez deux blocs occupant chacun 6 colonnes de la grilles md,
avec une marge en bas de 1.5rem (correspondant à la valeur 4) :
 Dans le premier bloc, placez l’image project.jpg et une carte.
 Dans le deuxième bloc, placez l’image project1.jpg et une carte.
 Les deux images doivent être responsives.
 Le corps de chaque carte se compose des éléments suivants qui seront alignés
au centre :
o d'un titre de niveau 4, en gras, possédant des marges haute et basse de
1rem (correspondant à la valeur 3).
o un paragraphe avec un texte bleu-gris
o un lien "View project" de bordure bleu décoré par l’icône fa fa-clone
left.

2
 4. Quatrième section :
 Appliquez à la section des marges externes haute et basse de 3rem (correspondant
à la valeur 5).
 Sur une même ligne placer deux cartes occupant chacune 4 colonnes de la grille
md et réparties équitablement dans la ligne. Chaque carte contient :
 une image nommée avatar.png.
 un corps contenant un titre de niveau 5, un paragraphe avec un texte justifié
et un bouton bleu.

Partie Footer

 Appliquez au footer une marge interne de 1.5rem (correspondant à la valeur 4) et un

fond de couleur #eee.
 Sur une même ligne, placez les icônes suivantes qui occuperont les 12 colonnes sur
toutes les tailles d'écrans : fab fa-facebook, fab fa-twitter, fab fa-google-plu et fab
fa-linkedin. À ces icônes, appliquez une dimension égale à 2x et la couleur #64b5f6.

3
4