Facebook Google plus YouTube Pinterest Tumblr Delicius DIIGO Start.me NETVIBES feedburner

Πέμπτη, 8 Δεκεμβρίου 2016

PHOTO GALLERY ΜΕ ΠΕΡΙΓΡΑΦΗ ΚΑΙ ΔΙΚΟ ΣΑΣ STYLE

PHOTO GALLERY
Αυτή είναι μία photo gallery με περιγραφή και δικό της style. Μπορείτε να αλλάξετε το χρώμα του background και του χρώματος κειμένου της περιγραφής αλλάζοντας τους 6ψήφιους κωδικούς χρωμάτων  εκεί που γράφει background και color. Το ίδιο πρέπει να κάνετε και για το περίγραμμα των εικόνων αλλάξτε το border: 1px solid #FBBB22; Οι διαστάσεις των εικόνων ρυθμίζονται εκεί που γράφει width:160px;height:100px; εντός του κώδικα style αλλά και αμέσως μετά τα πράσινα links των εικόνων. 
Τα γαλάζια links των εικόνων είναι τα links που θα οδηγήται ο αναγνώστης αν πατήσει επάνω στις εικόνες της photo gallery. Δείτε πως θα εμφανίζεται η photo gallery ακριβώς κάτω από εδώ.


KERKYRA
KERKYRA
PAXOI
PAXOI
LEYKADA
LEYKADA
ITHAKI
ITHAKI
KEFALLONIA
KEFALLONIA
ZAKYNTHOS
ZAKYNTHOS
KYTHYRA
KYTHYRA
MILOS
MILOS
KRITI
KRITI
RODOS
RODOS
KARPATHOS
KARPATHOS
SANTORINI
SANTORINI
MYKONOS
MYKONOS
SYROS
SYROS
POROS
POROS




















<style>
div.img {margin:1px;padding:5px;background:#115599;border: 1px solid #FBBB22;float: left;width:160px;}
div.img:hover {background:#105105;border: 1px solid #00FF00;}
div.img img {width:160px;height:100px;}
div.desc {background:#115599;color:#FFF;font:13px arial;padding:5px;text-align: center;}
div.desc:hover {background:#105105;color:#FFF;font:13px arial;padding:5px;text-align:center;}
</style>
<div class="img">
<a target="_blank" href="http://i.imgbox.com/x4YtqHsG">
<img src="http://i.imgur.com/Pq9Dexat.jpg" alt="KERKYRA" width="160" height="100"></a>
<div class="desc">KERKYRA</div></div>
<div class="img">
<a target="_blank" href="http://i.imgur.com/kbCkBYe.jpg">
<img src="http://i.imgur.com/kbCkBYet.jpg" alt="PAXOI" width="160" height="100"></a>
<div class="desc">PAXOI</div></div>
<div class="img">
<a target="_blank" href="http://i.imgbox.com/MIiFeUzy">
<img src="http://i.imgur.com/gCr4ycDt.jpg" alt="LEYKADA" width="160" height="100"></a>
<div class="desc">LEYKADA</div></div>
<div class="img">
<a target="_blank" href="http://i.imgbox.com/ZpvJrjg4">
<img src="http://i.imgur.com/JcRaeRSt.jpg" alt="ITHAKI" width="160" height="100"></a>
<div class="desc">ITHAKI</div></div>
<div class="img">
<a target="_blank" href="http://i.imgbox.com/4jvkDVTA">
<img src="http://i.imgur.com/XMS6PHst.jpg" alt="KEFALLONIA" width="160" height="100"></a>
<div class="desc">KEFALLONIA</div></div>
<div class="img">
<a target="_blank" href="http://i.imgbox.com/R6GYEpSU">
<img src="http://i.imgur.com/I9SFA0st.jpg" alt="ZAKYNTHOS" width="160" height="100"></a>
<div class="desc">ZAKYNTHOS</div></div>
<div class="img">
<a target="_blank" href="http://i.imgur.com/bVvl5yw.jpg">
<img src="http://i.imgur.com/bVvl5ywt.jpg" alt="KYTHYRA" width="160" height="100"></a>
<div class="desc">KYTHYRA</div></div>
<div class="img">
<a target="_blank" href="http://i.imgbox.com/6CibblTz">
<img src="http://i.imgur.com/w9qsfyQt.jpg" alt="MILOS" width="160" height="100"></a>
<div class="desc">MILOS</div></div>
<div class="img">
<a target="_blank" href="http://i.imgbox.com/kV04fIoO">
<img src="http://i.imgur.com/gptb8xnt.jpg" alt="KRITI" width="160" height="100"></a>
<div class="desc">KRITI</div></div>
<div class="img">
<a target="_blank" href="http://i.imgbox.com/rMcsofyY">
<img src="http://i.imgur.com/xHwALvDt.jpg" alt="RODOS" width="160" height="100"></a>
<div class="desc">RODOS</div></div>
<div class="img">
<a target="_blank" href="http://i.imgbox.com/R6GYEpSU">
<img src="http://i.imgur.com/qMMDdhYt.jpg" alt="KARPATHOS" width="160" height="100"></a>
<div class="desc">KARPATHOS</div></div>
<div class="img">
<a target="_blank" href="http://i.imgbox.com/oAmPVZ8O">
<img src="http://i.imgur.com/KwuI9Z2t.jpg" alt="SANTORINI" width="160" height="100"></a>
<div class="desc">SANTORINI</div></div>
<div class="img">
<a target="_blank" href="http://i.imgbox.com/JwHSht5d">
<img src="http://i.imgur.com/C83SL17t.jpg" alt="MYKONOS" width="160" height="100"></a>
<div class="desc">MYKONOS</div></div>
<div class="img">
<a target="_blank" href="http://i.imgbox.com/LUt5RX51">
<img src="http://i.imgur.com/3sNGgkut.jpg" alt="SYROS" width="160" height="100"></a>
<div class="desc">SYROS</div></div>
<div class="img">
<a target="_blank" href="http://i.imgbox.com/V6XAirZ2">
<img src="http://i.imgur.com/n5IesXRt.jpg" alt="POROS" width="160" height="100"></a>
<div class="desc">POROS</div></div>

1 σχόλιο: