<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Corner</title>
<link rel="stylesheet" href="css/estilos.css"/>
</head>
<body>
<header>
<h1>The Corner</h1>
<nav>
<p>Inicio</p>
<p>Productos</p>
<p>Servicios</p>
<p>Contacto</p>
</nav>
</header>
<section id="eslogan">
<h2>Bienvenidos a <span class="destacado">The Corner</span> la mejor academia para aprender.</h2>
<h2>Cada día te preparamos para el futuro.</h2>
</section>
<section id="portada">
<img src="img/academia.png" alt="academia"/>
<article>
<h3>Aulas</h3>
<p>Las mejores aulas de toda Barcelona.
Medios técnicos inigualables.</p>
</article>
</section>
</body>
</html>
*{
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 0;
}
header{
background-color: black;
color: white;
padding: 2em;
/*
De esta manera se organizan los dos elementos de la cabecera, el h1 y el nav
display: flex;
justify-content: space-between;
align-items: center;
*/
}
nav{
display: flex;
float: right;
}
nav p{
margin: 0 1em;
}
nav p:hover{
color: yellow;
cursor: pointer;
}
section{
margin:2em;
padding: 1em;
}
#eslogan{
text-align: center;
line-height: 3em;
}
.destacado{
background-color: green;
color: white;
border-radius: 6px;
padding: .2em;
}
#portada{
position: relative;
}
#portada img{
width: 100%;
}
#portada article{
position: absolute;
bottom: 2em;
left: 2em;
width: 30%;
background-color: black;
color: white;
padding: 3em;
}
