<!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>
<div class="separador"></div>
<section id="caracteristicas">
<article class="caracteristica">
<p class="numero">1</p>
<div>
<h4>Titulo</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, blanditiis voluptates? Ad,
reprehenderit animi natus nihil adipisci placeat eveniet ipsa. Facere, ullam quaerat quasi ipsa quas
harum est praesentium mollitia.</p>
</div>
</article>
<article class="caracteristica">
<p class="numero">2</p>
<div>
<h4>Titulo</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, blanditiis voluptates? Ad,
reprehenderit animi natus nihil adipisci placeat eveniet ipsa. Facere, ullam quaerat quasi ipsa quas
harum est praesentium mollitia.</p>
</div>
</article>
<article class="caracteristica">
<p class="numero">3</p>
<div>
<h4>Titulo</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, blanditiis voluptates? Ad,
reprehenderit animi natus nihil adipisci placeat eveniet ipsa. Facere, ullam quaerat quasi ipsa quas
harum est praesentium mollitia.</p>
</div>
</article>
</section>
<h2 class="texto_separador">Recent work</h2>
</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: #00000095;
color: white;
padding: 3em;
}
.separador{
border-bottom: solid 1px #8f8f8f;
margin: .4em 3em;
}
#caracteristicas{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
margin: 0;
}
.caracteristica{
display: flex;
align-items: start;
width: 30%;
padding: 1em;
}
.numero{
background-color: gray;
border-radius: 50%;
font-size: 1.5em;
width: 1.3em;
text-align: center;
padding: .1em;
margin: 0.1em 1em;
flex-shrink: 0; /*para evitar que se distorsione */
}
.numero:hover{
background-color: green;
color:white;
}
.texto_separador{
margin: .4em 3em;
display: flex;
align-items: center;
}
.texto_separador::after {
content: '';
flex: auto;
margin-left: 1rem;
border-top: 1px solid #8f8e8e;
}
