Scribd Logo
Upload

Welcome to Scribd!

  • Flores

    Uploaded by

    Yuri Giglio
    6 views2 pages
    site flor

    Original Title

    flores

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    site flor

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views2 pages

    Flores

    Uploaded by

    Yuri Giglio
    site flor

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    <html>

    <head>
    <title>Álbum de fotos com CSS</title>
    <link rel="stylesheet" href="album.css" type="text/css">
    </head>
    <body>

    <ul>
    <li><img src="images/mi-gatito.jpg" alt="" border="0"></li>
    <li><img src="images/queso-gema.jpg" alt="" border="0"></li>
    <li><img src="images/atardecer-pescando.jpg" alt="" border="0"></li>
    <li><img src="images/moto.jpg" alt="" border="0"></li>
    <li><img src="images/tanto-monta.jpg" alt="" border="0"></li>
    <li><img src="images/doris.jpg" alt="" border="0"></li>
    </ul>

    ul.fotos {
    width: 970px;
    margin: 0 0 18px -30px;
    }
    ul.fotos li {
    display: inline;
    }
    ul.fotos a {
    display: inline;
    float: left;
    margin: 0 0 27px 30px;
    width: auto;
    padding: 10px 10px 15px;
    text-align: center;
    color: #333;
    font-size: 18px;
    }
    ul.fotos img {
    display: block;
    width: 190px;
    margin-bottom: 12px;
    }

    <ul class="fotos">
    <li><a href="#" title="Mi gato"><img src="images/mi-gatito.jpg" alt=""
    border="0" ></a></li>
    <li><a href="#" title="El queso"><img src="images/queso-gema.jpg" alt=""
    border="0" ></a></li>
    <li><a href="#" title="Valmayor"><img src="images/atardecer-pescando.jpg"
    alt="" border="0" ></a></li>
    <li><a href="#" title="Mi moto"><img src="images/moto.jpg" alt="" border="0"
    ></a></li>
    <li><a href="#" title="Toledo"><img src="images/tanto-monta.jpg" alt=""
    border="0" ></a></li>
    <li><a href="#" title="Mi coneja"><img src="images/doris.jpg" alt=""
    border="0" ></a></li>

    </ul>
    ul.fotos li:nth-child(3n) a {
    -webkit-transform: none;
    position: relative;
    top: -5px;
    }
    ul.fotos li:nth-child(5n) a {
    -webkit-transform: rotate(5deg);
    position: relative;
    right: 5px;

    ul.fotos li a:hover {
    -webkit-transform: scale(1.25);
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
    position: relative;
    z-index: 5;
    }
    </body>
    </html>

    You might also like