CODIGO HTML DE MENU “FOTOS”
<section id="principal_fotos">
<article id="fotos1_5">
<figure
id="img1">
<img
class="fotos" src="imagenes/img1.jpg" width="150"
height="150" alt="imagen1" /></figure>
<figure
id="img2">
<img
class="fotos" src="imagenes/img2.jpg" width="150"
height="150" alt="imagen2" />
</figure>
<figure
id="img3">
<img
class="fotos" src="imagenes/img3.jpg" width="150"
height="150" alt="imagen3" />
</figure>
<figure
id="img4">
<img
class="fotos" src="imagenes/img4.jpg" width="150"
height="150" alt="imagen4" />
</figure>
<figure
id="img5">
<img
class="fotos" src="imagenes/img5.jpg" width="150"
height="150" alt="imagen5" />
</figure>
</article>
<article id="fotos6_10">
<figure
id="img6">
<img
class="fotos" src="imagenes/img6.jpg" width="150"
height="150" alt="imagen6" />
</figure>
<figure
id="img7">
<img
class="fotos" src="imagenes/img7.jpg" width="150"
height="150" alt="imagen7" />
</figure>
<figure
id="img8">
<img
class="fotos" src="imagenes/img8.jpg" width="150"
height="150" alt="imagen8" />
</figure>
<figure
id="img9">
<img
class="fotos" src="imagenes/img9.jpg" width="150"
height="150" alt="imagen9" />
</figure>
<figure
id="img10">
<img
class="fotos" src="imagenes/img10.jpg"
width="150" height="150" alt="imagen10" />
</figure>
</article>
</section>
CODIGO
CSS
/*Estilos
del Section de fotos.html*/
#principal_fotos
{
width: 90%;
margin: 5px auto;
background: #CCCCCC;
}
#img1, #img2, #img3, #img4, #img5 {
display: inline-block;
vertical-align: top;
margin: 5px;
padding: 15px;
}
#img6, #img7, #img8, #img9, #img10 {
display: inline-block;
vertical-align: top;
margin:
5px;
padding:
15px;
}
#fotos1_5,
#fotos6_10 {
margin: 15px;
padding: 10px;
border: 2px solid #FFFFFF;
text-align: center;
}
.fotos
{
border-radius: 75px;
box-shadow: 5px 5px 5px #F60;
}
.fotos:hover
{
border-radius:
15px;
width:
300px;
height:
300px;
}
No hay comentarios:
Publicar un comentario