bscsskodlari

Mini Renkli Tasarımı

TEMANIN GÖRÜNTÜSÜNÜ GÖRMEK İSTİYORSANIZ TIKLAYINIZ > DEMO GÖRÜNTÜSÜ

TASARIM ÜSTÜ : 

<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Economica|Lato" rel="stylesheet"> <div class="ust"> <table width="750" height="130" border="0" align="center" cellpadding="1" cellspacing="1"> <tbody> <tr> <td width="435"><h2>EGETEMA</h2><h4>Mini renkli css tasarim</h4></td> <td align="right"> <table width="308" height="134" border="0" align="right" cellpadding="1" cellspacing="1" background="https://img.webme.com/pic/b/belen-fm/07menu.png"> <tbody> <tr> <td width="150" style="text-align: center;"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Ana Sayfa</a></td> <td style="text-align: center;"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Forum</a></td> </tr> <tr> <td style="text-align: center;"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Bize Ulaşın</a></td> <td style="text-align: center;"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Blog</a></td> </tr> <tr> <td style="text-align: center;"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Yorumlar</a></td> <td style="text-align: center;"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Hakkımda</a></td> </tr> </tbody> </table></td> </tr> </tbody> </table> </div> <div class="slide"><table width="750" height="260" border="0" align="center"cellpadding="1" cellspacing="1"> <tbody> <tr> <td style="text-align: center;"><img src="https://img.webme.com/pic/b/belen-fm/07slide.png" _fcksavedurl="https://img.webme.com/pic/b/belen-fm/07slide.png" _fcksavedurl="https://img.webme.com/pic/b/belen-fm/07slide.png" alt="belenmedia" /></td> </tr> </tbody> </table></div> <div class="icerik">

TASARIM ALTI : 

</div> <div class="alt"><table width="730" height="46" border="0" align="center" cellpadding="1" cellspacing="1"> <tbody> <tr> <td style="text-align: left;">Copyright 2016 <a href="#" _fcksavedurl="#" _fcksavedurl="#">EGETEMA</a> | Tüm haklari saklidir </td> <td style="text-align: right;">Tasarim:<a href="http://belenmedia.tr.gg" _fcksavedurl="http://belenmedia.tr.gg" _fcksavedurl="http://belenmedia.tr.gg" target="_blank">BELENMEDİA</a></td> </tr> </tbody> </table></div> <br /><center>

CSS KODU : 

/*Belenmedia */ /*URL: http://www.belenmedia.tr.gg*/ table {margin-left: auto;margin-right: auto} #webme_footer_textlink_dont_hide { background: url(https://img.webme.com/pic/b/belen-fm/07alt.png)no-repeat top; color:#fff; font-family: Titillium Web; font-size:11px; } #webme_sky_ad { position: absolute; right: 10px; top: 160px; z-index: 1000000000000000000; } table[height="102"]{display:nne;} hr { border: 1px solid #e7e2cf; background:none; border-radius:5px; } ::-moz-selection { background:#91CDF5; color:#000; } ::selection { background:#91CDF5; color:#000; } b{color:#e7e2cf;} textarea{ resize:none } h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} body{ font-family: 'Titillium Web', serif; font-size:15px; background: url(https://img.webme.com/pic/b/belen-fm/backgln.png)center; background-size: cover; color:#666050; } img{border:none; } h1{ background: #d65a3d; url() no-repeat; font-family: Titillium Web; font-size:17px; color:#fff; font-weight:normal; text-align: center; letter-spacing: 0.9px;} h2{ font-family: 'Economica', serif; font-size:49px; color:#fff; font-weight:normal;} h4{ font-family: 'Economica', serif; font-size:17px; letter-spacing: 0.3px; color:#cccccc;} a{text-decoration:none; color:#385074; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } a:hover{color:#fff; text-shadow: 0px 0px 3px #000; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .ust{width:750px; height:138px; overflow:hidden; margin:0 auto; background: url(https://img.webme.com/pic/b/belen-fm/07ustlogo.png)no-repeat left; margin-top:15px; font-family: Economica; font-size:33px; letter-spacing: 0.5px; text-align: center; line-height:1px; text-shadow: 1px 1px 2px #000; } .ust a{text-decoration:none; color:#fff; font-family: Titillium Web; font-size:16px; letter-spacing: 0.3px; line-height:1px; font-weight:bold; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .ust a:hover { text-decoration:none; color:#fff; font-size:16px; letter-spacing: 1.2px; text-shadow: 1px 2px 3px #000; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .slide{width:750px; height:260px; overflow:hidden; margin:0 auto; background: url(https://img.webme.com/pic/b/belen-fm/07sld.png)repeat; color:#fff; margin-top:15px; üip 0 font-size:14px; letter-spacing: 0.5px; text-align: center; } .slide img{width:670px; height:225px; border-radius:7px; opacity: 0.9; filter: alpha(opacity=90); } .icerik{width:750px; height:auto; overflow:hidden; margin:0 auto; background: url(https://img.webme.com/pic/b/belen-fm/07icrik.png)repeat; color:#555; margin-top:15px; font-family: Titillium Web; font-size:14px; letter-spacing: 0.5px; text-align: center; } .alt{width:750px; height:47px; overflow:hidden; margin:0 auto; background: url(https://img.webme.com/pic/b/belen-fm/07alt.png)no-repeat; color:#ccc; margin-bottom:50px; margin-top:15px; font-family: Economica; font-size:16px; letter-spacing: 0.5px; text-align: center; } .alt a{text-decoration:none; color:#000; font-family: Economica; font-size:15px; letter-spacing: 0.3px; line-height:1px; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .alt a:hover { text-decoration:none; color:#fff; letter-spacing: 0.5px; text-shadow: 1px 2px 3px #000; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .konuarka{width:210px; height:270px; overflow:hidden; margin:0 auto; background: url(https://img.webme.com/pic/b/belen-fm/07konuark.png)no-repeat; color:#fff; margin-bottom:45px; margin-top:5px; margin-left:29px; float:left; font-family: Titillium Web; font-size:16px; letter-spacing: 0.5px; text-align: center; border-radius:7px; font-weight:bold; transform:rotate(6deg); -ms-transform:rotate(6deg); -webkit-transform:rotate(6deg); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; } .konuarka:hover{ -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); } .konuarka img{ border-radius:4px; transform:rotate(1deg); -ms-transform:rotate(1deg); -webkit-transform:rotate(1deg); opacity: 0.8; filter: alpha(opacity=80); } ul.img-list { list-style-type: none; padding: 0; text-align: center; } ul.img-list li { display: inline-block; height: 230px; margin-top: -19px; position: relative; width: 160px; } span.text-content span { display: table-cell; text-align: center; vertical-align: middle; } ul.img-list li:hover span.text-content { opacity: 1; } span.text-content { border-radius:4px; transform:rotate(1deg); -ms-transform:rotate(1deg); -webkit-transform:rotate(1deg); font-family: Titillium Web; font-size:12px; font-weight:normal; background: rgba(0,0,0,0.5); color: white; cursor: pointer; display: table; height: 125px; left: -1px; position: absolute; bottom: 0; width: 160px; opacity: 0; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; }

ANA SAYFA KODU : 

<div class="konuarka">Buraya konu basligi <ul class="img-list"> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"> <img src="https://img.webme.com/pic/b/belen-fm/blog-analiz.jpg" _fcksavedurl="https://img.webme.com/pic/b/belen-fm/blog-analiz.jpg" _fcksavedurl="https://img.webme.com/pic/b/belen-fm/blog-analiz.jpg" width="160" height="230" alt="" /> <span class="text-content"><span>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere ...</span></span> </a></li> </ul> </div> <div class="konuarka">Buraya konu basligi <ul class="img-list"> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"> <img src="https://img.webme.com/pic/b/belen-fm/Blog45.jpg" _fcksavedurl="https://img.webme.com/pic/b/belen-fm/Blog45.jpg" _fcksavedurl="https://img.webme.com/pic/b/belen-fm/Blog45.jpg" width="160" height="230" alt="" /> <span class="text-content"><span>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere ...</span></span> </a></li> </ul> </div> <div class="konuarka">Buraya konu basligi <ul class="img-list"> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"> <img src="https://img.webme.com/pic/b/belen-fm/blog-3.jpg" _fcksavedurl="https://img.webme.com/pic/b/belen-fm/blog-3.jpg" _fcksavedurl="https://img.webme.com/pic/b/belen-fm/blog-3.jpg" width="160" height="230" alt="" /> <span class="text-content"><span>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere ...</span></span> </a></li> </ul> </div>

Kaynak : Belenmedia