Bienvenue à cette séance de formation ! Aujourd'hui, nous allons travailler ensemble sur la construction de la page "À propos de nous". Cette page a pour objectif de présenter du texte et des images afin de parler du site, y compris sa mission et sa vision. Pour commencer, nous allons créer une bannière avec une image en arrière-plan et y ajouter du texte pour mieux comprendre la propriété background-image. Enfin, nous ajouterons une autre section disposée en grille pour afficher une image à gauche, ainsi qu'un titre et un paragraphe à droite.

Commençons par la bannière. Nous allons utiliser la propriété background-image pour définir une image d'arrière-plan. Assurez-vous d'avoir l'image que vous souhaitez utiliser prête et disponible dans votre projet. Dans votre feuille de style CSS, vous pouvez définir la propriété background-image comme ceci :

#banner

{

float: left;

width: 100%;

background-image: url('chemin_vers_votre_image.jpg');

background-size:cover;

background-repeat: no-repeat;

background-position: center;

background-color: rgba(0,0,0,0.7);

background-blend-mode: multiply;

padding: 70px 20%;

text-align: center;

}

Ces lignes de code définissent les propriétés CSS pour l'arrière-plan d'un élément. Voici une explication de chaque propriété avec d'autres propriétés possibles:

1. `background-image:url(image.jpg);` : Cette propriété spécifie l'image à utiliser comme arrière-plan. Vous pouvez également spécifier d'autres valeurs comme "none" pour indiquer qu'aucune image n'est utilisée, ou utiliser des images en ligne ou des chemins d'accès relatifs/absolus vers d'autres images.

Autres propriétés possibles pour `background-image` :
- `linear-gradient()` : permet de créer un dégradé linéaire comme arrière-plan.
- `radial-gradient()` : permet de créer un dégradé radial comme arrière-plan.
- `repeating-linear-gradient()` : permet de créer un dégradé linéaire répété.
- `repeating-radial-gradient()` : permet de créer un dégradé radial répété.
- `url(image.jpg) center top / cover` : spécifie à la fois l'image de fond, la position et la taille en une seule valeur.

2. `background-repeat:no-repeat;` : Cette propriété indique si l'image de fond doit se répéter ou non. "no-repeat" signifie que l'image ne sera pas répétée.

Autres propriétés possibles pour `background-repeat` :
- `repeat` : répète l'image horizontalement et verticalement.
- `repeat-x` : répète l'image horizontalement seulement.
- `repeat-y` : répète l'image verticalement seulement.
- `space` : répète l'image pour remplir l'espace, en espaçant les répétitions.
- `round` : répète l'image pour remplir l'espace, en ajustant les répétitions pour qu'elles soient de tailles égales.

3. `background-position:center;` : Cette propriété définit la position de l'image de fond. "center" indique que l'image sera centrée à l'intérieur de l'élément.

Autres propriétés possibles pour `background-position` :
- `top` : positionne l'image en haut de l'élément.
- `bottom` : positionne l'image en bas de l'élément.
- `left` : positionne l'image à gauche de l'élément.
- `right` : positionne l'image à droite de l'élément.
- `x% y%` : spécifie une position en pourcentage par rapport à l'élément, où 0% est en haut/gauche et 100% est en bas/droite.

4. `background-size:cover;` : Cette propriété spécifie la taille de l'image de fond. "cover" indique que l'image sera redimensionnée pour couvrir complètement l'élément, en conservant son ratio d'aspect.

Autres propriétés possibles pour `background-size` :
- `contain` : redimensionne l'image pour s'adapter entièrement à l'élément, en conservant son ratio d'aspect. L'image peut ne pas couvrir complètement l'élément.
- `auto` : utilise la taille intrinsèque de l'image sans redimensionnement.
- `<length>` : spécifie une taille en pixels, en pourcentage ou toute autre unité de mesure pour l'image de fond.

5. `background-blend-mode:multiply;` : Cette propriété

spécifie le mode de fusion à appliquer entre l'image de fond et le contenu de l'élément. "multiply" produit une interaction de multiplication des couleurs entre l'image de fond et le contenu.

Autres propriétés possibles pour `background-blend-mode` :
- `normal` : aucune fusion, l'image de fond est affichée sans effet de fusion.
- `screen` : réalise une fusion de l'écran entre l'image de fond et le contenu.
- `overlay` : superpose l'image de fond sur le contenu avec un effet de superposition.
- `darken` : prend la couleur la plus sombre entre l'image de fond et le contenu.
- `lighten` : prend la couleur la plus claire entre l'image de fond et le contenu.

6. `background-color:rgba(0,0,0,0.7);` : Cette propriété définit la couleur d'arrière-plan de l'élément. "rgba(0,0,0,0.7)" spécifie une couleur noire avec une opacité de 0,7 (70%). Cela signifie que l'image de fond sera partiellement visible à travers cette couleur d'arrière-plan.

Autres propriétés possibles pour `background-color` :
- `transparent` : rend l'arrière-plan transparent.
- `rgb(255, 0, 0)` : spécifie une couleur RVB.
- `hsl(240, 100%, 50%)` : spécifie une couleur en utilisant le modèle de couleur HSL.
- `#FF0000` : spécifie une couleur en utilisant le format hexadécimal.

Ensuite, pour ajouter du texte dans la bannière, vous pouvez simplement utiliser une balise HTML appropriée, comme un paragraphe ou un en-tête, à l'intérieur de l'élément conteneur de la bannière. Par exemple :

<div id="banner">

<h1>Bienvenue sur notre site !</h1>

<p>Découvrez qui nous sommes et ce que nous faisons.</p>

</div>

Maintenant que nous avons créé la bannière avec une image d'arrière-plan et du texte, passons à la deuxième section. Nous allons l'organiser en utilisant un système de grille. Assurez-vous d'avoir les images et le contenu textuel prêts à être utilisés.

Dans votre HTML, vous pouvez créer une structure similaire à celle-ci :

<div id="text-content">

<div><img src='chemin_vers_votre_image.jpg'></div>

<div>

<h2>Ce que nous faisons</h2>

<p>Nous nous engageons à...</p>

</div>

</div>

Ensuite, dans votre feuille de style CSS, vous pouvez appliquer une grille pour organiser les éléments de la section :

#text-content

{

float: left;

width: 100%;

padding: 50px 5%;

display: grid;

grid-template-columns:repeat(2, 1fr) ;

gap:30px;

}

#text-content img

{

width: 100%;

border-radius: 15px;

}

Assurez-vous d'ajuster les chemins d'accès vers les images appropriés dans la balise `<img>`.

Voilà ! Nous avons maintenant créé une page "À propos de nous" avec une bannière comportant une image d'arrière-plan et du texte, ainsi qu'une section disposée en grille avec une image à gauche et un titre et un paragraphe à droite. N'hésitez pas à personnaliser davantage la mise en page, les styles et le contenu en fonction de vos besoins.

N'oubliez pas de tester votre page dans différents navigateurs et appareils pour vous assurer que tout s'affiche correctement. Bon travail !