Bayram KÖSE

YıldızBlog

Merhaba ziyaretçi,

Sizlere şuana kadar yaptığım en güzel eseri sunuyorum.Web tasarımcılı yolunda uzun bir süreyi geride bıraktım.İşte geldiğim en son nokta!

Lafı fazla uzatmadan sizlere tasarımımı sunuyorum 




Tasarımı İncele

Tasarım işte böyle.Eğer kendi website adınızı şekilli yazmak isterseniz iletişim bölümünden ulaşabilirsiniz.

Tasarım Kodları:

Tasarımın Üstü:

<div id="header"> <a href="anasayfa.htm" _fcksavedurl="anasayfa.htm" class="logo"> <img src="//img.webme.com/pic/s/sanalito/logo.gif" _fcksavedurl="//img.webme.com/pic/s/sanalito/logo.gif" alt=""> </a> <ul id="menu"> <li class="menu"> <a href="anasayfa.htm" _fcksavedurl="anasayfa.htm">Anasayfa</a> </li> <li> <a href="hakkimda.htm" _fcksavedurl="hakkimda.htm">Hakkımda</a> </li> <li> <a href="galeri.htm" _fcksavedurl="galeri.htm">Galeri</a> </li> <li> <a href="yazilarim.htm" _fcksavedurl="yazilarim.htm">Yazılarım</a> </li> <li> <a href="iletisim.htm" _fcksavedurl="iletisim.htm">İletişim</a> </li> </ul> </div> <div id="body"> <div id="duyuru"> <img src="//img.webme.com/pic/s/sanalito/b%C3%BCy%C3%BCk%20header.jpg" _fcksavedurl="//img.webme.com/pic/s/sanalito/b%C3%BCy%C3%BCk%20header.jpg" alt=""> <div> <h2>Yıldız Blog Teması</h2> <span>Merhaba ziyaretçi,siteme hoşgeldin</span> <span>Yıldız Blog temasını kullanıyorum.</span> <span>Teşekkürler BayramBlog <img src="//theme.webme.com/smiles/smiley.gif" border="0" width="15" height="15" alt="" /></span></br> <a href="hakkimda.htm" _fcksavedurl="hakkimda.htm" class="more">Hakkımda</a> </div> </div> <ul> <li> <a href="bayramblog.tr.gg" _fcksavedurl="bayramblog.tr.gg"> <img src="//img.webme.com/pic/s/sanalito/logo.gif" _fcksavedurl="//img.webme.com/pic/s/sanalito/logo.gif" alt=""> <span>Dost site</span> </a> </li> <li> <a href="bayramblog.tr.gg" _fcksavedurl="bayramblog.tr.gg"> <img src="//img.webme.com/pic/s/sanalito/logo.gif" _fcksavedurl="//img.webme.com/pic/s/sanalito/logo.gif" alt=""> <span>Dost site</span> </a> </li> <li> <a href="bayramblog.tr.gg" _fcksavedurl="bayramblog.tr.gg"> <img src="//img.webme.com/pic/s/sanalito/logo.gif" _fcksavedurl="//img.webme.com/pic/s/sanalito/logo.gif" alt=""> <span>Dost site</span> </a> </li> </ul> </div> <div id="content">

 
Tasarımın Altı:

<div id="footer"> <div> <p>© 2016 Yıldız Blog Teması.Tasarımcısı "BayramBlog"dur.Tüm hakları saklıdır.</p> <ul> <p>Sosyal Medya:</p> <li><a href="#" _fcksavedurl="#" id="twitter">twitter</a></li> <li><a href="#" _fcksavedurl="#" id="facebook">facebook</a></li> </ul> </div> </div> </body> </html>

 
Css Bölümü:

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 { background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; line-height: 1; margin: 0; min-width: 960px; padding: 0; } p { color: #252525; line-height: 24px; margin: 0; padding: 0; } p a { color: #252525; text-decoration: underline; } p a:hover { color: #898989; } #header { margin: 0 auto; padding: 44px 0 50px; text-align: center; width: 960px; } #header a.logo { display: block; margin: 0 auto; padding: 0; width: 340px; } #header a.logo img { border: 0; display: block; margin: 0; padding: 0; } #header ul { margin: 0; padding: 56px 0 0; } #header ul li { display: inline; list-style: none; margin: 0; padding: 0 19px; } #header ul li a { color: #252525; display: inline-block; font-family: "Arial Black", Gadget, sans-serif; font-size: 14px; font-weight: normal; margin: 0; padding: 0 0 3px; text-decoration: none; text-transform: uppercase; } #header ul li a:hover, #header ul li.menu a { color: #0ba39c; } #body { margin: 0; padding: 0 0 30px; text-align: center; } #body h1 { color: #fff; display: inline; font-family: poller_oneregular; font-size: 35px; font-weight: normal; margin: 0; padding: 0; text-transform: uppercase; } #body h1 span { background: #252525; display: inline-block; padding: 15px 28px 12px; } #body > div { margin: 0 auto; padding: 0; width: 960px; } #body > div img { border: 2px solid #292929; margin: 24px 0 0; padding: 0; } #body > div .article { margin: 0 auto; padding: 30px 30px 0; width: 560px; } #body > div .article h2 { font-family: "Arial Black", Gadget, sans-serif; font-size: 25px; font-weight: normal; margin: 0 0 30px; } #body > div .article h3 { color: #252525; line-height: 24px; margin: 0; padding: 0; } #body > div .article h4 { background: #252525; color: #fff; display: inline-block; font-family: "Arial Black", Gadget, sans-serif; font-size: 25px; font-weight: normal; margin: 0 0 30px; padding: 8px 27px 10px; } #body > div .article p { margin: 0 0 30px; } #body div ul { margin: 0; padding: 24px 10px 0; width: 940px; } #body div ul li { border: 2px solid #1a1a1a; display: block; list-style: none; margin: 0 0 13px; overflow: hidden; padding: 0; } #body div ul li .figure { border-right: 2px solid #1a1a1a; float: left; margin: 0; padding: 0; width: 376px; } #body div ul li img { border: 0; display: block; margin: 0; padding: 0; opacity: 0.8; transition: 0.5s ease-in-out; } #body div ul li .figure:hover img { opacity: 1; } #body div ul li div { float: left; margin: 0; padding: 63px 0 20px; width: 558px; } #body div ul li div h3 { color: #252525; font-family: "Arial Black", Gadget, sans-serif; font-size: 25px; font-weight: normal; margin: 0; padding: 0; text-transform: uppercase; } #body div ul li div p { padding: 30px 30px 18px; } #body div ul li div a.more { background: #000; color: #fff; display: inline-block; font-family: "Arial Black", Gadget, sans-serif; font-size: 18px; font-weight: normal; margin: 0; padding: 8px 28px; text-decoration: none; text-transform: uppercase; } #body div ul li div a.more:hover { color: #252525; background: #fff; border: 2px solid #252525; } #body #duyuru { margin: 0 0 13px; padding: 0; position: relative; width: 100%; } #body #duyuru img { border: 0; display: block; margin: 0; padding: 0; width: 100%; } #body #duyuru div { left: 50%; margin-left: -480px; margin-top: -171px; padding: 0 0 0 470px; position: absolute; top: 50%; text-align: left; width: 490px; } #body #duyuru div h2 { background: #fff; color: #000; display: inline-block; font-family: poller_oneregular; font-size: 20px; font-weight: normal; margin: 0 0 18px; padding: 23px 27px 20px; text-transform: uppercase; } #body #duyuru div span { background: #252525; color: #fff; display: inline-block; font-size: 20px; margin: 7px 0; padding: 12px 27px; } #body #duyuru div a { background: #0ba39c; color: #fff; display: inline-block; font-size: 16px; margin: 15px 0 0; padding: 26px 27px 22px; text-align: center; text-decoration: none; text-transform: uppercase; } #body #duyuru div a:hover { background: #1fc3bc; } #body > ul { margin: 0 auto; overflow: hidden; padding: 24px 0 0; width: 960px; } #body > ul li { display: block; float: left; margin: 0 10px 20px; padding: 0; width: 300px; } #body > ul li a { color: #000; display: block; font-family: poller_oneregular; font-size: 20px; font-weight: normal; margin: 0; padding: 0; text-align: center; text-decoration: none; text-transform: uppercase; } #body > ul li a img { border: 2px solid #1a1a1a; display: block; margin: 0; padding: 0; opacity: .8; transition: 0.5s ease-in-out; } #body > ul li a:hover img { opacity: 1; } #body > ul li a span { display: block; margin: 0; padding: 33px 0 0; } #footer { background: #252525; margin: 0; padding: 36px 0 42px; } #footer div { margin: 0 auto; overflow: hidden; padding: 0; width: 960px; } #footer div p { color: #fff; float: left; line-height: 44px; margin: 0 0 0 10px; padding: 0; } #footer div ul { display: block; float: right; margin: 0; overflow: hidden; padding: 0; width: 256px; } #footer div ul li { display: block; float: left; list-style: none; margin: 0 10px; padding: 0; width: 44px; } #footer div ul li a { background: url(//img.webme.com/pic/s/sanalito/icons2.jpg) no-repeat 0 0; display: block; height: 44px; margin: 0; padding: 0; text-indent: -99999px; width: 44px; } #footer div ul li #twitter { background-position: -10px -10px; } #footer div ul li #twitter:hover { background-position: -70px -10px; } #footer div ul li #facebook { background-position: -10px -66px; } #footer div ul li #facebook:hover { background-position: -70px -66px; }


 Anasayfa İçeriği:

<div id="body"> <h1><span>blog</span></h1> <div> <ul> <li><a href="#" _fcksavedurl="#" class="figure"> <img src="//img.webme.com/pic/s/sanalito/logo.gif" _fcksavedurl="//img.webme.com/pic/s/sanalito/logo.gif" alt="" /> </a> <div> <h3>Başlık</h3> <p>Deneme yazısı</p> <a href="#" _fcksavedurl="#" class="more">devamı</a></div> </li> <li><a href="#" _fcksavedurl="#" class="figure"> <img src="//img.webme.com/pic/s/sanalito/logo.gif" _fcksavedurl="//img.webme.com/pic/s/sanalito/logo.gif" alt="" /> </a> <div> <h3>Başlık</h3> <p>Deneme yazısı</p> <a href="#" _fcksavedurl="#" class="more">devamı</a></div> </li> <li><a href="#" _fcksavedurl="#" class="figure"> <img src="//img.webme.com/pic/s/sanalito/logo.gif" _fcksavedurl="//img.webme.com/pic/s/sanalito/logo.gif" alt="" /> </a> <div> <h3>Başlık</h3> <p>Deneme yazısı</p> <a href="#" _fcksavedurl="#" class="more">Devamı</a></div> </li> </ul> </div> </div>