Organizar Itens

Parte da seção Estilização com CSS do Journey de HTML da Coddy. Lição 73 de 76.

Desafio

Fácil

Vamos praticar flexbox para criar uma barra de navegação horizontal simples. Use CSS para estilizar o menu para que ele corresponda ao design na imagem abaixo.

Siga os passos abaixo:

Defina a barra de navegação como um contêiner flex.
Adicione espaçamento entre os links.
1. Use justify-content: space-around para distribuir os links uniformemente.
Estilize a barra de navegação.
1. Defina a cor de fundo como dark blue.
2. Adicione preenchimento (padding) para criar algum espaço ao redor dos links.
Estilize os links de navegação.
1. Selecione os elementos <a>.
2. Defina a cor do texto como white.
3. Remova o sublinhado padrão.
4. Defina o tamanho da fonte como 18px.
5. Adicione 8px 15px de preenchimento (padding) para um melhor espaçamento.

Experimente você mesmo

<html>
    <head>
        <title>Arrange Items</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="navbar">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Contact</a>
        </nav>
    </body>
</html>