Organizar elementos

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 73 de 76.

Desafío

Fácil

Practiquemos flexbox para crear una barra de navegación horizontal sencilla. Usa CSS para dar estilo al menú de modo que coincida con el diseño de la imagen de abajo.

Sigue los pasos a continuación:

Establece la barra de navegación como un contenedor flex.
Añade espaciado entre los enlaces.
1. Usa justify-content: space-around para distribuir los enlaces uniformemente.
Da estilo a la barra de navegación.
1. Establece el color de fondo a dark blue.
2. Añade algo de padding para crear espacio alrededor de los enlaces.
Da estilo a los enlaces de navegación.
1. Selecciona los elementos <a>.
2. Establece el color del texto a white.
3. Elimina el subrayado predeterminado.
4. Establece el tamaño de fuente a 18px.
5. Añade 8px 15px de padding para un mejor espaciado.

Pruébalo tú mismo

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