- 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>
</div>
</header>
<section class="features">
<h2>¿Qué necesitas para un hogar acogedor?</h2>
<p>Muebles y herrajes</p>
<p>Lámparas de mesa y de pie</p>
</section>
<section class="advantages">
<h2>¿Qué nos distingue de la competencia?</h2>
<ul class="advantages-list">
<li>Usamos solo materiales naturales</li>
<li>Informes diarios sobre el avance del trabajo</li>
<li>Armamos los muebles por ti</li>
<li>Servicio de garantía gratuito durante 10 años</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: "Arial", sans-serif;
text-align: center;
font-weight: normal;
font-size: 56px;
line-height: 64px;
}
.container {
width: 510px;
margin: 0 auto;
padding: 0 20px;
}
.site-header {
min-width: 550px;
height: 186px;
margin-bottom: 150px;
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;
}
.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;
}
.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
- Descomenta el código
<link rel="stylesheet" href="style.css">de la línea 6: elimina los símbolos<!--y-->. Después, observa el nuevo diseño.