SESIÓN 7 - Estilo de página
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Práctica 6 HTML (Diseño web)</title>
<link rel="stylesheet" href="Pr%C3%A1ctica%206.css">
</head>
<body>
<header>
<h1>Diseño Web HTML5</h1>
</header>
<article>
<h2>Contenido Web</h2>
<section>
<h3>Columna 1</h3>
<p>Lorem iptum dolor sit amet, consectetur adipisicing elit. Sapiente maxime illum laborim perferendis harum repudiandae, amet vero soluta doloremque architecto blanditiis numquam incidunt, ex. Voluptas beatae, voluptates tempora magni ut.</p>
</section>
<section>
<h3>Columna 2</h3>
<p>Lorem iptum dolor sit amet, consectetur adipisicing elit. Tempore possimus, tenetur excepturi modi dolorem numquam fugiat eligendi cum qui odit ipsam natus vitae quis nam, nostrum, temppora, nobis recusandae voluptatibus?</p>
</section>
<section>
<h3>Columna 3</h3>
<p>Lorem iptum dolor sit amet, consectetur adipisicing elit. Tempore possimus, tenetur excepturi modi dolorem numquam fugiat eligendi cum qui odit ipsam natus vitae quis nam, nostrum, temppora, nobis recusandae voluptatibus?</p>
</section>
<section>
<h3>Columna 4</h3>
<p>Lorem iptum dolor sit amet, consectetur adipisicing elit. Tempore possimus, tenetur excepturi modi dolorem numquam fugiat eligendi cum qui odit ipsam natus vitae quis nam, nostrum, temppora, nobis recusandae voluptatibus?</p>
</section>
</article>
<footer>
<h3>Diseño realizado por María Gracia</h3>
</footer>
</body>
</html>
CSS
/*Hoja de Estilo Práctica 6.css
*/
*{
box-sizing: border-box;
}
h1,h2,h3{
text-align: center;
}
header, footer{
background-color: floralwhite;
color: white;
padding: 20px;
}
article{
background-color: aquamarine;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
overflow: auto;
}
section{
background-color: coral;
padding: 20px;
float: left;
width: 50%;
height: 300px;
border-style: solid;
overflow: auto;
}
footer{
clear: both;
}
Comentarios
Publicar un comentario