Le but de cette séance est d'utiliser FLEXBOX pour aligner nos cartes.
Commencer !Pour cette séance, nous allons commencer avec un tout nouveau dossier.
Crée un nouveau dossier cartes. Fais un click droit et selectionne New Folder.
Ensuite glisse le dossier dans ton éditeur de texte (Sublime Text, par exemple), et crée les deux fichiers habituels:
drapeau/
|-- index.html
|-- style.css
👇🏽 Voici une animation qui te montre comment proceder:
Petit rappel :
Pour selectionner des boites d'un fichier codé en HTML depuis un fichier codé en CSS, on doit commencer par lier les deux fichiers.
Dans la section <head> de ton fichier index.html, ajoute la ligne 5 afin de le lier avec le fichier style.css.
<!DOCTYPE html>
<html>
<head>
...
<link href="style.css" rel="stylesheet" />
</head>
A quoi ressemble une carte ?
Avant de coder cette carte, on va regarder de plus pres la structure de cette dernière.
Prends 📝 un crayon et une feuille de papier (je sais... 🤯 pour coder), et dessine les boites que tu vois (de la plus grande > à la plus petite).
Afin de donner du style à la carte, il faut pouvoir donner un nom clair aux boites qui composent cette carte.
Attention:
Garde bien en tête que l'objectif est ensuite de pouvoir selectionner ces boîtes depuis le fichier CSS
selecteur{
propriété: valeur;
}
Question : A ton avis, on va donner des class ou des id à nos boites ?
PAR EXEMPLE : la semaine dernière, pour l'exercice du drapeau canadien 🇨🇦, nos boites ressemblaient à ceci 👇
👇 Voici une solution possible pour nommer tes boites. Pour la suite de l'exercice, nous allons continuer avec cette solution.
class pour carte ?
Maintenant il faut coder la carte 💪🏽
Dans le fichier index.html, nous allons donc créer une première div qui va avoir une class appellée carte. Celle-ci contient 3 autres div qui ont des class différentes :
<body>
<div class="carte">
<div class="avatar"></div>
<div class="description"></div>
<div class="scores">
‹–– #A FAIRE: code içi la div .score ––›
‹–– #A FAIRE: code içi la div .score ––›
‹–– #A FAIRE: code içi la div .score ––›
</div>
</div>
</body>
Il est temps de donner du style à notre carte 👘.
Petit rappel :
Pour selectionner depuis style.css une boite avec une class, on utilise le .
.carte{
height: 300px;
width: 100px;
background-color: #cce5ff;
border: 1px solid black;
border-radius: 10px;
box-shadow: 1px 1px 5px -2px black;
padding: 10px;
}
Open in Browser afin de visualiser le résultat.
CSS pour les boites qui sont à l'interieur de notre magnifique carte 🌈
Notre avatar va faire 40% de la hauteur de notre carte. Ca te parait bien ? 🧐
.avatar{
height: 40%;
width: 100%;
background-color: #1DB100;
border: 1px solid #3D7F25;
}
Notre description va également occuper 40% de la hauteur de notre carte.
.description{
height: 👉 AJOUTE LA BONNE VALEUR ICI 👈;
width: 100%;
background-color: #D41876;
border: 1px solid #97265C;
}
La grande boite .scores va occuper l'espace restant. C'est à dire ?
.scores{
height: 👉 AJOUTE LA BONNE VALEUR ICI 👈;
width: 100%;
background-color: #00AB8E;
border: 1px solid #3B8370;
padding: 1px;
}
Quelles sont les dimensions des petites boites .score par rapport à la boite .scoreS?
.score{
height: 👉 AJOUTE LA BONNE VALEUR ICI 👈;
width: 👉 AJOUTE LA BONNE VALEUR ICI 👈;
background-color: #0076BA;
border: 1px solid #265889;
}
👏 Bravo!
Il y a un petit probleme quand même. Nos boites .score sont les unes sur les autres 😅
Rappel: Afin d'aligner des boites horizontalement, tu peux utiliser la propiété suivante:
display: flex;
Le tout est de mettre cette propriété au bon endroit... 👩🏽💻.
👇 Voici le code qui solutionne notre petit soucis :
.scores{
AJOUTE CETTE LIGNE
display: flex;
}
🎉 Félicitations d'être arrivé aussi loin!
Nous n'avons toujours pas notre image dans la boite .avatar
On veut que notre image prenne la taille de la boite .avatar, sans qu'elle ne se déforme. Pour y arriver, on introduit un nouveau concept. C'est celui de :
background-image: url("AjOuTe UnE AdReSsE d'ImAgE iCi");
Si tu te rends compte qu'il y a un souci avec ton image, voici un peu de lecture. On corrige à la prochaine séance 🤓.
Pour commencer cette 11eme étape, nous allons emballer notre carte.
Commence par ajouter ce code dans ton fichier style.css :
.emballage{
padding-top: 40px;
padding-bottom: 40px;
margin-bottom: 40px;
border: 10px solid #673ab7;
position: relative;
}
A ton avis, comment vas t on emballer notre carte dans le fichier index.html ?