<!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="prod.html">Productos</a></li>
<li><a href="fotos.html">Tienda</a></li>
</ul>
</aside>
<section id="fotos">
<h2>Fotos tiernas</h2>
<figure>
<a href="http://facebook.com">
<img src="img/logo.png" width="32" height="32" alt=""/></a>
<img src="img/gato.jpg" alt=""/>
<figcaption>Un lindo gatito</figcaption>
</figure>
<figure>
<a href="http://facebook.com">
<img src="img/logo.png" width="32" height="32" alt=""/></a>
<img src="img/mascota.jpg" alt=""/>
<figcaption>Amor a los animales</figcaption>
</figure>
<figure>
<a href="http://facebook.com">
<img src="img/logo.png" width="32" height="32" alt=""/></a>
<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-image: url("img/logo2.png"), url("img/gato.jpg");
background-size:160px 160px, cover;
background-repeat: no-repeat,repeat;
}
aside{
width:15rem;
height:40rem;
background-image:linear-gradient(rgba(200,190,160,1),rgba(200,190,160,.7)),url("img/gato.jpg");
float:left;
}
section{
margin-left:17rem;
background-color: #DCD9D4;
background: linear-gradient(to bottom, #abbaab,#ffffff);
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;
}
#fotos figure img{
width: 100%;
height: auto;
}
#fotos figure a img{
width: 32px;
position:absolute;
right:5px;
top:5px;
}
#fotos figure{
margin: 20px;
border: 1px solid #ccc;
float: left;
width: 300px;
box-shadow: 10px 10px 5px #AAAAAA;
opacity:.8;
position:relative;
}
#fotos figure:hover{
border: 1px solid #777;
box-shadow: 10px 10px 5px #555555;
opacity:1;
}
#fotos figcaption{
padding: 15px;
text-align: center;
background-color: white;
}
#productos {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#productos td, #productos th {
border: 1px solid #ddd;
padding: 8px;
}
#productos tr:nth-child(even){background-color: #f2f2f2;}
#productos tr:hover {background-color: #ddd;}
#productos th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
nav ul li{
display: inline-block;
padding:10px;
color:white;
}
nav ul{
background-color: grey;
margin:0;
}
