sadet48 - slayt

Sadet Sevinç

Slayt

<DOCTYPE html>
<head>
<title>Sadet Sevinç</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="https://img.webme.com/pic/s/sadet48/sincap.png">

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js">
</script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script>
$('.katman2').cycle();   
$(document).ready(function(){
  $(".katman2").click(function(){
    $(".katman2").slideToggle("slow");
  });  });
</script>
  
<style>
body, h3, div, img, p, ul
{
margin: 0px;
padding: 0px;
}
section,img,div
{
display: block;
}
body
{
background:#fff;
background:url(https://img.webme.com/pic/s/sadet48/bck.jpg);
background-repeat:repeat;
background-size:5%;
background-attachment:fixed;
}
.zemin
{
border:1px solid #fff;
padding-top:40px;
margin-left:150px;
background:#c2e1f5;
width:680px;
height:380px;
}
.katman2 img{
width:600px;
height:337px;
}
.anakatman
{
margin-top: -20px;
margin-left: 20px;
background:#fff;
border:1px solid #ddd;
overflow:hidden;
width:640px;
height:380px;
z-index:-1;
}
.katman2 img
{	
width:600px;
height:337px;
}
.katman2 { 
    margin-left:20px;
	width:600px;
	height:337px;
	background:#FFF;
	position: relative;
}
.katman2:before,.katman2:after
{
  z-index: 0;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index:1;
}
.katman2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}  
h3 {font-family:Bradley Hand ITC;text-align:center}
</style>
  </head>
<body>
<div class="zemin">
<section class="anakatman"><h3>Slayt</h3>
<div class="katman2">
<img src="https://img.webme.com/pic/s/sadet48/sam_0389.jpg"/>
<img src="https://lh6.googleusercontent.com/-bZtb3ySRzso/UxNL_kh8nzI/AAAAAAAA5P4/DDTm9PtE8QI/w886-h665/2+03+2014+-+1">
<img src="https://lh6.googleusercontent.com/-M_GTSc533Zg/Uwo4v37wEeI/AAAAAAAAEAs/vOzLElzRCCU/w886-h591/IMG_5766.JPG">
<img src="http://amazingslider.com/wp-content/uploads/amazingslider/12/images/ivy-on-house-in-autumn-600-300.jpg">

</div>
</section>
</div>
</body>
</html>