Notificação Flutuante

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 76 de 76.

Desafio

Fácil

Neste desafio, você recriará uma notificação flutuante que se parece com a imagem abaixo (ou um design semelhante). Este é um exercício de recapitulação, então você aplicará o que aprendeu sobre posicionamento CSS para posicionar corretamente a notificação e seu botão de fechar.

Siga as etapas abaixo para estilizar a notificação flutuante:

1. Estilize a caixa de notificação:

Posicione-a perto do topo da página, aproximadamente no meio.
Defina uma largura fixa e adicione algum espaçamento interno.
Use quaisquer cores para o fundo, fonte e bordas para criar um estilo de alerta distinto.
Adicione cantos arredondados e uma leve sombra para destacá-la.

2. Estilize o botão de fechar:

Posicione-o no canto superior direito da notificação.
Escolha um background e ajuste o tamanho da fonte.
Certifique-se de que ele pareça clicável e se destaque do fundo.

💡 Experimente com cores, espaçamento e posicionamento para alcançar o design desejado!

Experimente você mesmo

<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>