- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Tienda de artículos para el hogar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<div class="container">
<h1>Gloevk</h1>
<p>Artículos para el hogar con envío a todo el planeta</p>
<img src="img/gloevk-examples.png" width="510" height="80" alt="Ejemplos de interiores">
</div>
</header>
<section class="features">
<h2>¿Qué necesitas para un hogar acogedor?</h2>
<p class="feature-furniture">Muebles y herrajes</p>
<p class="feature-lighting">Lámparas de mesa y de pie</p>
<p class="feature-accessories">Accesorios y detalles</p>
</section>
<section class="advantages">
<h2>¿Qué nos distingue de la competencia?</h2>
<ul class="advantages-list">
<li class="advantages-item">Usamos solo materiales naturales</li>
<!-- Agrega las clases a los elementos de abajo -->
<li class="advantages-item">Informes diarios sobre el avance del trabajo</li>
<li class="advantages-item">Armamos los muebles por ti</li>
<li class="advantages-item">Servicio de garantía gratuito durante 10 años</li>
<li class="advantages-item">Entrega el mismo día del pedido</li>
</ul>
</section>
<footer class="site-footer">
<div class="container">
<p>© Cupcake, 2020</p>
<p>Tienda de artículos para el hogar</p>
</div>
</footer>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
font-family: "Arial", sans-serif;
font-size: 14px;
line-height: 20px;
color: #444444;
}
h1 {
width: 255px;
margin: 0 auto 8px;
font-family: "Georgia", serif;
text-align: center;
font-weight: normal;
font-size: 56px;
line-height: 64px;
}
h2 {
border-bottom: 2px solid #cccccc;
padding-bottom: 12px;
}
.container {
width: 510px;
margin: 0 auto;
padding: 0 20px;
}
.site-header {
min-width: 550px;
height: 186px;
margin-bottom: 70px;
padding-top: 30px;
background: #847462 no-repeat center url("img/gloevk-bg.jpg");
background-size: cover;
color: #ffffff;
}
.site-header p {
width: 255px;
margin: 0 auto 26px;
text-align: center;
font-size: 16px;
line-height: 24px;
}
.site-header img {
display: block;
margin: 0 auto;
}
.features {
width: 510px;
margin: 0 auto 30px;
padding: 0 20px;
}
.features p {
display: inline-block;
vertical-align: top;
width: 30%;
margin: 0 5px;
background-repeat: no-repeat;
background-position: center top;
text-align: center;
}
.feature-furniture {
padding-top: 65px;
background-image: url("img/furniture.svg");
}
.feature-lighting {
padding-top: 65px;
background-image: url("img/lighting.svg");
}
.feature-accessories {
padding-top: 65px;
background-image: url("img/accessories.svg");
}
.advantages {
width: 510px;
margin: 0 auto 40px;
padding: 0 20px;
}
.advantages-list {
padding: 0;
list-style: none;
}
.advantages-item {
margin-bottom: 15px;
padding-left: 20px;
border-left: 20px solid #e2e2e2;
color: #999999;
}
.site-footer {
min-width: 550px;
background-color: #847462;
color: #ffffff;
}
.site-footer .container {
text-align: center;
}
.site-footer p {
display: inline-block;
vertical-align: middle;
padding: 0 20px;
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
En la lista advantages-list:
- Agrega una segunda clase,
standard, al segundo elemento. Las clases se separan con espacios dentro del atributoclass. - Agrega una segunda clase,
standard, al tercer elemento. - Agrega una segunda clase,
vip, al cuarto elemento. - Agrega una segunda clase,
vip, al quinto elemento.