Básicamente estoy creando un menú y quiero que en la parte izquierda del menú aparezca HOME y en la parte derecha las secciones de la barra de navegación (Quiénes somos, Nuestros Servicios, Contacto). He conseguido hacerlo pero creo que el código es muy sucio, y me gustaría alguna forma de hacerlo de forma más limpia. Gracias.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio de prueba menú</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<a href="#" id="home">HOME</a>
<a href="#" class="navlink" id="somos">Quiénes somos</a>
<a href="#" class="navlink" id="servicios">Servicios</a>
<a href="#" class="navlink" id="contacto">Contacto</a>
</nav>
</body>
</html>
CSS:
.navbar{
display: flex;
/* justify-content: space-around; */
}
#home{
display: inline-block;
text-decoration: none;
position: absolute;
top: 15px;
left: 100px;
}
.navlink{
display: inline-block;
text-decoration: none;
}
#somos{
position: absolute;
top: 15px;
right: 500px;
}
#servicios{
position: absolute;
top: 15px;
right: 300px;
}
#contacto{
position: absolute;
top: 15px;
right: 100px;
}
Muchas gracias, saludos.
<ul>
y<li>
. El hecho de hacerlo solo con un<nav>
ya es muy sexy.