- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<!-- <link rel="stylesheet" href="outline.css"> -->
<title>Estudio de arquitectura AlterMansion</title>
</head>
<body>
<header class="page-header">
<img src="img/logo-alter-mansion.svg" width="60" height="30" alt="Logotipo del estudio de arquitectura AlterMansion">
<h1 class="title">Estudio de arquitectura AlterMansion</h1>
</header>
<main class="page-main">
<article class="article article-1">
<img class="article-image" src="img/house1.jpg" alt="Fachwerk-23" width="100" height="80">
<div>
<h2 class="article-title">Proyecto de casa de entramado «Fachwerk-23»</h2>
<p class="article-text">Amplia casa de dos pisos con 3 dormitorios, estudio, una gran cocina-comedor y una terraza abierta.</p>
<!-- Agrega el párrafo aquí -->
</div>
</article>
<article class="article article-2">
<img class="article-image" src="img/house2.jpg" alt="Ermitaño-11" width="100" height="80">
<div>
<h2 class="article-title">Proyecto de casa de campo «Ermitaño-11»</h2>
<p class="article-text">Casa tipo estudio de un piso: la opción más compacta y económica. Comodidad mínima y privacidad máxima.</p>
</div>
</article>
<article class="article article-3">
<img class="article-image" src="img/house3.jpg" alt="Monarca-39" width="100" height="80">
<div>
<h2 class="article-title">Proyecto de residencia «Monarca-39»</h2>
<p class="article-text">Mansión de tres pisos para la realeza. Ideal para organizar bailes y recepciones de gala.</p>
</div>
</article>
<article class="article article-4">
<img class="article-image" src="img/house4.jpg" alt="Hobbit-15" width="100" height="80">
<div>
<h2 class="article-title">Proyecto de casa subterránea «Hobbit-15»</h2>
<p class="article-text">Vivienda ecológica y espaciosa con 5 habitaciones y una gran despensa. Ideal para personas de baja estatura.</p>
</div>
</article>
</main>
<footer class="page-footer"><span class="copyright">© Estudio de Cupcake, 2020</span></footer>
</body>
</html>
CSS
body {
margin: 0;
font-family: "Trebuchet MS", "Verdana", sans-serif;
font-size: 14px;
line-height: 22px;
background-color: #ebeff2;
color: #333333;
}
.page-header {
display: flex;
min-height: 50px;
align-items: center;
justify-content: center;
padding: 10px 20px;
background-color: #3b70a0;
}
.title {
margin: 0;
margin-left: 20px;
font-weight: 700;
font-size: 22px;
line-height: 28px;
color: #ffffff;
}
.page-main {
margin: 20px;
}
.article {
display: flex;
margin-bottom: 10px;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.article-image {
margin-right: 20px;
}
.article-title {
margin: 0;
margin-bottom: 4px;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: #24527C;
}
.article-text {
margin: 0;
}
.page-footer {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
background-color: #3b70a0;
color: #ffffff;
}
.copyright:hover {
background-color: #ffffff;
color: #3b70a0;
}
Ha ido a otra página
ObjetivosRealizado
0
- En la línea 6, quita los comentarios del enlace a la hoja de estilos
outline.css. Las cajas de la página quedarán resaltadas. - En la línea 20, agrega un párrafo
<p>con el textoNueva caja. Aparecerá una caja de bloque nueva en la primera tarjeta de la vista previa. - En la línea 19, envuelve las palabras
casa de dos pisosen una etiqueta<span>. Aparecerá una caja en línea nueva en la primera tarjeta.