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 semelhante à imagem abaixo (ou um design parecido). 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 os passos 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:

Use position: absolute para colocar o botão de fechar no canto superior direito do contêiner da notificação.
Escolha um fundo 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>