Bir sitede gördüğüm footer tasarımını kendim kodlamak istedim.Sonuçta hemen hemen aynı bir tasarım yaptım.Boş durmaması için paylaşmak istedim.
indir : http://ustaderslik.com/dosya/footer.rar
Görüntüsü :
Kodlar :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<title>UstaDerslik</title>
<script type="text/javascript">
</script>
<style type="text/css">
body{margin:0px;padding:0px;}
.f_ana{width:980px;height:275px;margin:auto;overflow:hidden;position:relative;}
.f_kisim1{width:580px;height:275px;transform:skew(20deg);-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg);position:absolute;top:0px;left:-200px;z-index:5;
background-image: linear-gradient(bottom, rgb(54,94,114) 0%, rgb(112,175,205) 81%);
background-image: -o-linear-gradient(bottom, rgb(54,94,114) 0%, rgb(112,175,205) 81%);
background-image: -moz-linear-gradient(bottom, rgb(54,94,114) 0%, rgb(112,175,205) 81%);
background-image: -webkit-linear-gradient(bottom, rgb(54,94,114) 0%, rgb(112,175,205) 81%);
background-image: -ms-linear-gradient(bottom, rgb(54,94,114) 0%, rgb(112,175,205) 81%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(54,94,114)),color-stop(0.81, rgb(112,175,205)));
}
.f_kisim2{width:65px;height:225px;background:#d8f9fe;float:left;position:absolute;top:50px;left:390px;z-index:6;transform:skew(20deg);-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg);}
.f_kisim3{width:630px;height:250px;border:1px solid #365e72;background:#70afcd;opacity:.6;position:absolute;top:25px;left:335px;}
.f_kisim4{width:470px;height:225px;float:left;transform:skew(20deg);-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg);list-style-type:none;margin:0px;padding:0px;margin-top:25px;margin-left:100px;}
.f_liste li{display:block;width:85px;height:20px;float:left;font-family:Arial;font-size:12px;color:#333;margin-bottom:5px;cursor:pointer;}
.f_liste li .f_yazi:hover {text-decoration:underline;}
.f_ok{color:#d8f9fe;}
.f_kisim2 img{transform:skew(-20deg);-webkit-transform:skew(-20deg);-moz-transform:skew(-20deg);-o-transform:skew(-20deg);margin-left:10px;margin-top:10px;}
.fb_ana{width:100%;height:75px;background:#365e72;padding:10px;}
.fb_ana2{width:980px;height:75px;margin:auto;}
.fb_yazi{width:780px;height:75px;font-family:Arial;font-size:12px;color:#78a2b6;}
.temiz{clear:both;}
</style>
</head>
<body>
<div class="f_ana">
<div class="f_kisim1"></div>
<div class="f_kisim2">
<img src="f.png" />
<img src="g.png" />
<img src="r.png" />
<img src="t.png" />
</div>
<div class="f_kisim3">
<div class="f_kisim4">
<ul class="f_liste">
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> </span><span class="f_yazi">buton</span></li>
<div class="temiz"></div>
</ul>
</div>
<div class="temiz"></div>
</div>
</div>
<div class="fb_ana">
<div class="fb_ana2">
<div class="fb_yazi">
Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin
</div>
</div>
</div>
</body>
</html>
UstaDerslik
