DENTASARIM | Tasarımın bizden!
Dağınık galeri v1
background-color: #E9E9E9;
color: #333;
font-size: 16px;
}
.amp {
font-family:Garamond,Baskerville,Georgia,serif !important;
font-style:italic;
font-weight:normal;
border: none;
}
a.polaroid {
display: block;
text-decoration: none;
color: #333;
padding: 10px 10px 20px 10px;
width: 150px;
border: 1px solid #BFBFBF;
background-color: white;
z-index: 2;
font-size: 0.7em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
a.polaroid:hover,
a.polaroid:focus,
a.polaroid:active {
z-index: 999;
border-color: #6A6A6A;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
.polaroid img {
margin: 0 0 15px;
width: 150px;
height: 150px;
}
a img {
border: none;
display: block;
}
.photo-album {
position: relative;
width: 80%;
margin: 0 auto;
max-width: 70em;
height: 450px;
margin-top: 5em;
min-width: 800px;
max-width: 900px;
}
.photo-album .polaroid {
position: absolute;
}
.photo-album h1 {
position: absolute;
z-index: 5;
top: 150px;
text-align: center;
width: 100%;
line-height: 1.9;
}
.photo-album h1 span {
background-color: white;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
padding: 0.4em 0.8em 0.3em 0.8em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
border: 1px solid #6A6A6A;
}
.photo-album .small {
width: 75px;
padding: 6px 6px 12px 6px;
font-size: 0.6em;
}
.photo-album .small img {
width: 75px;
height: 75px;
}
.photo-album .medium {
width: 200px;
padding: 13px 13px 26px 13px;
font-size: 0.8em;
}
.photo-album .medium img {
width: 200px;
height: 200px;
}
.photo-album .large {
width: 300px;
padding: 20px 20px 30px 20px;
font-size: 1em;
}
.photo-album .large img {
width: 300px;
height: 300px;
}
.photo-album .img1 {
bottom: 10px;
right: 365px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}
.photo-album .img2 {
top: 50px;
right: 20px;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.photo-album .img3 {
left: 400px;
top: 0;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.photo-album .img4 {
top: 10px;
left: 495px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.photo-album .img5 {
bottom: 0;
right: 0;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
transform: rotate(1deg);
}
.photo-album .img6 {
bottom: 10px;
right: 156px;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
}
.photo-album .img7 {
bottom:0;
left:400px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.photo-album .img8 {
bottom: -20px;
left: 700px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img9 {
bottom: 0;
left: 0;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img10 {
top: 0;
left: 20px;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
transform: rotate(8deg);
}
.photo-album .img11 {
top: 0;
right: 0;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img12 {
top: 0;
left: 680px;
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
transform: rotate(18deg);
}
.photo-album .img13 {
bottom: -20px;
right: 630px;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
.photo-album .img14 {
top: 90px;
left: 430px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
}
.photo-album .img15 {
left:176px;
top:20px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
a:hover,
a:focus {
z-index: 5;
}
#genel {
margin-bottom: 20px;
padding-bottom: 20px;
}
<div id="genel">
<div class="photo-album">
<h1><span>DENTASARIM</span></h1>
<a href="http://www.flickr.com/photos/nataliedowne/2254117707/in/set-72157604232220981" class="large polaroid img1"><img src="http://media.24ways.org/2009/14/img/volcanic.jpg" alt="">This breathtaking volcanic lake is at Wai-O-Tapu Thermal Wonderland</a>
<a href="http://www.flickr.com/photos/nataliedowne/2254700486/in/set-72157604232220981/" class="polaroid img2"><img src="http://media.24ways.org/2009/14/img/waterfall.jpg" alt="">This lovely waterfall was at Rotorua in Rainbow Springs</a>
<a href="http://www.flickr.com/photos/nataliedowne/2254704566/in/set-72157604232220981/" class="small polaroid img3"><img src="http://media.24ways.org/2009/14/img/leaf.jpg" alt="">Ferntastic</a>
<a href="http://www.flickr.com/photos/nataliedowne/2311404989/in/set-72157604232220981/" class="medium polaroid img4"><img src="http://media.24ways.org/2009/14/img/whale.jpg" alt="">At Kaikoura we went whale watching!</a>
<a href="http://www.flickr.com/photos/nataliedowne/2312219680/in/set-72157604232220981" class="polaroid img5"><img src="http://media.24ways.org/2009/14/img/seal.jpg" alt="">Found this little cutie on a walk in New Zealand!</a>
<a href="http://www.flickr.com/photos/nataliedowne/2254789880/in/set-72157604232220981/" class="polaroid img6"><img src="http://media.24ways.org/2009/14/img/lake.jpg" alt="">An amazing bubbling volcanic spring, a bit muddy</a>
<a href="http://www.flickr.com/photos/nataliedowne/2341399904/in/set-72157604232220981/" class="polaroid img7"><img src="http://media.24ways.org/2009/14/img/simon.jpg" alt="">Simon in a giant Kiwi, pretending to be a Kiwi (the bird)</a>
<a href="http://www.flickr.com/photos/nataliedowne/2352603191/in/set-72157604232220981/" class="small polaroid img8"><img src="http://media.24ways.org/2009/14/img/albatross.jpg" alt="">Albatross in Dunedin</a>
<a href="http://www.flickr.com/photos/nataliedowne/2340993237/in/set-72157604232220981/" class="medium polaroid img9"><img src="http://media.24ways.org/2009/14/img/raft.jpg" alt="">White water rafting in Queenstown</a>
<a href="http://www.flickr.com/photos/nataliedowne/2306995686/in/set-72157604033893095/" class="polaroid img10"><img src="http://media.24ways.org/2009/14/img/whiteisland.jpg" alt="">White Island</a>
<a href="http://www.flickr.com/photos/nataliedowne/2306989200/in/set-72157604033893095/" class="small polaroid img11"><img src="http://media.24ways.org/2009/14/img/sulphur.jpg" alt="">Sulphurous</a>
<a href="http://www.flickr.com/photos/nataliedowne/2352608953/in/set-72157604232220981/" class="small polaroid img12"><img src="http://media.24ways.org/2009/14/img/sealions.jpg" alt="">Sea lions!</a>
<a href="http://www.flickr.com/photos/nataliedowne/2341816430/in/set-72157604232220981/" class="small polaroid img13"><img src="http://media.24ways.org/2009/14/img/horses.jpg" alt="">Horse riding</a>
<a href="http://www.flickr.com/photos/nataliedowne/2352490411/in/set-72157604232220981/" class="small polaroid img14"><img src="http://media.24ways.org/2009/14/img/camping.jpg" alt="">Stewart Island</a>
<a href="http://www.flickr.com/photos/nataliedowne/2339184562/in/set-72157604232220981/" class="polaroid img15"><img src="http://media.24ways.org/2009/14/img/us.jpg" alt="">Us in a blue cave on the Franz Josef glacier</a>
</div>
</div>