Développement digital

M104 : Développer des Sites Web statiques

Exercices de CSS3 : Série N° 1

Exercice 1 :
Le message d'alerte est un espace de page qui affiche un message. Ce message
peut être une information ou un avertissement d'erreur, ... (info, avertissement,
danger, ..).
Créer les messages d'alerte suivants en HTML5 et CSS3 :

Les couleurs à utiliser :

Couleur Couleur de fond Couleur de bordure

Success alert #155724 #d4edda #c3e6cb

Danger alert #721c24 #f8d7da #f5c6cb

Warning alert #856404 #fff3cd #ffeeba

Dark alert #1b1e21 #d6d8d9 #c6c8ca

1
1
 Développement digital
M104 : Développer des Sites Web statiques

Exercice 2 :
Créer les Boutons suivants en HTML5 et CSS3 :

Remarque pour le deuxième type des boutons :

Au moment où l'utilisateur le survole avec le pointeur, les boutons seront
comme les suivants :

Les couleurs à utiliser :

Couleur
Primary button #007bff
Success button #28a745
Danger button #dc3545
Warning button #ffc107
Dark button #343a40

2
2
 Développement digital
M104 : Développer des Sites Web statiques

Exercice 3 :
Écrire le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous,
en utilisant les codes couleurs ci-après.

 Jaune : #FCD116
 Bleu : #003893
 Rouge : #CE1126

3
3
 Développement digital
M104 : Développer des Sites Web statiques

Exercice 4 :
Écrire le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous,
en utilisant les codes couleurs ci-après.

 Couleur de fond : #5c94fc

 Couleur 1 : #4976c9
 Couleur 2 : #375897
 Couleur 3 : #243b64
 Couleur 4 : #121d32

4
4
 Développement digital
M104 : Développer des Sites Web statiques

Exercice 5 :
Écrire le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous,
en utilisant les images ci-après.

5
5