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 qui ressemble à l'image ci-dessous (ou à un design similaire). Il s'agit d'un exercice de récapitulation, vous allez donc appliquer ce que vous avez appris sur le positionnement CSS pour placer correctement la notification et son bouton de fermeture.

Suivez les étapes ci-dessous pour styliser la notification flottante :

1. Stylisez la boîte de notification :

Placez-la près du haut de la page, à peu près au milieu.
Définissez une largeur fixe et ajoutez de l'espacement à l'intérieur.
Utilisez n'importe quelles couleurs pour l'arrière-plan, la police 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 :

Placez-le en haut à droite de la notification.
Choisissez un arrière-plan et ajustez la taille de la police.
Assurez-vous qu'il a l'air cliquable et qu'il se détache 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>