<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="layout.css">
<link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">
</head>
<body>
<header>
<h1>La web de los gatitos</h1>
</header>
<main>
<aside>
<ul>
<li><a href="fotos.html">Fotos</a></li>
<li><a href="fotos.html">Productos</a></li>
<li><a href="fotos.html">Tienda</a></li>
</ul>
</aside>
<section>
<h2>Bienvenido a la web de los gatitos</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="gato.jpg" alt="gato">
</section>
</main>
<footer>
<p>(c) Netmind</p>
</footer>
</body>
</html>
*{
font-family:Verdana,serif;
}
header,aside,section,footer{
padding:1rem;
}
header{
height:10rem;
background-color:lightgreen;
}
aside{
width:15rem;
height:40rem;
background-color:#fae596;
float:left;
}
section{
margin-left:17rem;
background-color:#BBBBBB;
min-height:40rem;
padding:1rem 10rem;
}
footer{
height:3rem;
background-color:black;
color:white;
}
header h1{
font-family: 'Carter One', cursive;
font-size:5rem;
margin:0;
}
aside ul{
list-style-type:none;
padding:0;
}
aside ul li {
padding: 8px 16px;
border: 1px solid #ddd;
background-color:PowderBlue ;
margin-top:.5rem;
}
aside ul li:hover {
background-color:yellowgreen ;
}
aside ul li a{
text-decoration:none;
font-size:1.5em;
}
