Notification flottante

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 76 sur 76.

Défi

Facile

Dans ce défi, vous allez recréer une notification flottante (floating notification) qui ressemble à l'image ci-dessous (ou un design similaire). Il s'agit d'un exercice récapitulatif, vous allez donc appliquer ce que vous avez appris sur le positionnement css pour placer correctement la notification et son bouton de fermeture (close button).

Suivez les étapes ci-dessous pour styliser la notification flottante (`Floating` `Notification`) :

1. Stylisez la boîte de notification :

Placez-la près du haut de la page, environ au milieu.
Définissez une largeur fixe et ajoutez un peu d'espacement à l'intérieur.
Utilisez les couleurs de votre choix pour l'arrière-plan, la police (font) et les bordures afin de créer un style d'alerte distinct.
Ajoutez des coins arrondis et une légère ombre pour la faire ressortir.

2. Stylisez le bouton de fermeture (close button) :

Utilisez position: absolute pour placer le bouton de fermeture dans le coin supérieur droit du conteneur de notification.
Choisissez un arrière-plan et ajustez la taille de la police (font).
Assurez-vous qu'il ait l'air cliquable et qu'il se démarque de l'arrière-plan.

💡 Expérimentez avec les couleurs, l'espacement et le positionnement pour obtenir le design souhaité !

Essayez vous-même

<html>
    <head>
        <title>Floating Notification</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="notification">
        <button class="close-btn">&times;</button>
        <p>This is a floating notification! Click the "X" to close.</p>
    </div>
    </body>
</html>