<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<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="index.html">Inicio</a></li>
<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>Fotos tiernas</h2>
<figure>
<img src="img/gato.jpg" alt=""/>
<figcaption>Un lindo gatito</figcaption>
</figure>
<figure>
<img src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
<figure>
<img src="img/perro2.jpg" alt=""/>
<figcaption>El mejor amigo del hombre</figcaption>
</figure>
</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;
}
.destacado{
color:yellow;
}
figure img{
width: 100%;
height: auto;
}
figure{
margin: 20px;
border: 1px solid #ccc;
float: left;
width: 300px;
box-shadow: 10px 10px 5px #AAAAAA;
}
figure:hover{
border: 1px solid #777;
box-shadow: 10px 10px 5px #555555;
}
figcaption{
padding: 15px;
text-align: center;
background-color: white;
}
