Saltar al contenido principal

Ejercicio 5: Crear una maqueta de header y banner superior con html y css a partir de una imagen

Crea una maqueta de header y banner superior con HTML y CSS a partir de la siguiente imagen:

Maqueta ejercicio CSS 6

Solución interactiva

Solución con el código HTML y CSS completo

HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Ejercicio 2</title>
<style>
/* Escribe tu CSS aquí */
body {
margin: 0; /* Quita el margen por defecto */
font-family: sans-serif;
}
.container {
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 32px;
background: #e1d9ff;
min-width: fit-content;
}
.top_banner {
width: 100%;
box-sizing: border-box;
margin: 0 0 16px;
padding: 20px;
border: 3px solid #000000;
text-align: center;
background: #fff;
}
.top_banner span {
font-size: 18px;
font-weight: 800;
}
.nav {
width: 100%;
box-sizing: border-box;
border: 3px solid #000;
background: #fff7e7;
}
.nav ul {
list-style: none;
display: flex;
gap: 20px;
margin: 0; /*Quitamos el margen por defecto*/
padding: 0 16px;
}
.nav ul li a {
display: block;
text-decoration: none;
font-size: 16px;
color: #000; /*Utilizamos tres valores ya que es similar a utilizar #000000*/
font-weight: 600;
padding: 12px;
transition: 0.3s; /*Esto produce un efecto suave cuando pasas el cursor por sobre el enlace*/
}
.nav ul li a:hover {
background: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="top_banner">
<span>MyCompany</span>
</div>
<nav class="nav">
<ul>
<li><a href="" title="Link description">Home</a></li>
<li><a href="" title="Link description">Services</a></li>
<li><a href="" title="Link description">About</a></li>
<li><a href="" title="Link description">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>