Burdasın >> About tema

empadesign

About tema

Evvvet arkadaşlar dün bir giriş teması paylaşmıştım bu gün de PSDUP'ın sunduğu Kişisel Bilgiler temasını (tek sayfalık) Bs'ye uyarlayıp paylaşayım dedim.Tasarım kişilerin kendilerini tanıtmaları için açtıkları sitelerde kullanabilecekleri güzel bir tasarımdır.Uzatmadan kodları yollayım size

| Önizleme Yap |

Not:Arkadaşlar gerekli yerleri sizler editlersiniz.Eğer editleyemezseniz iletişimden bize ulaşın.
CSS:
<style type="text/css">
#tasiyici {
width: 540px;
margin: 50px auto;
}
#ust {
height: 100px;
padding: 20px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
margin: 0px 20px 0px 20px;
}
#resim {
float: left;
width: 110px;
}
h1, h3, h4, h5 {
margin: 0px 0px 8px 0px;
}
h1 {
color: #ffffff;
}
h3 {
color: #f1f1f1;
}
h4 {
color: #580800;
}
h5 {
color: #580800;
}
#hakkimda {
padding: 20px;
box-shadow: 0px 10px 10px #000000;
}
#hakkimda h3 {
color: #cc4839;
}
#alt {
height: 130px;
margin: 0px 20px 0px 20px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
#alt ul {
list-style: none;
margin: 0px;
padding: 20px 0px 20px 25px;
}
#alt ul li {
width: 142px;
height: 42px;
float: left;
background-image: url('http://www.psdup.com/demo/tanitimsitesi/images/sosyal.png');
margin: 0px 11px 10px 0px;
}
#alt ul li:hover {
opacity: .5;
}
#alt ul li a {
display: block;
width: 142px;
height: 42px;
}
.facebook {
background-position: 0px 0px;
}
.twitter {
background-position: 0px -42px;
}
.flickr {
background-position: 0px -84px;
}
.friendfeed {
background-position: 0px -126px;
}
.vimeo {
background-position: 0px -168px;
}
.youtube {
background-position: 0px -210px;
}
.linkedin {
background-position: 0px -252px;
}
.rss {
background-position: 0px -294px;
}
.turuncu-ust {
background-color: #cb4839;
}
.turuncu-hakkimda {
background: #ffaf4a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff920a', endColorstr='#ffaf4a');
background: -webkit-gradient(linear, left top, left bottom, from(#ff920a), to(#ffaf4a));
background: -moz-linear-gradient(top, #ff920a, #ffaf4a); /* for firefox 3.6+ */;
}
.turuncu-alt {
background-color: #ec3c23;
}
.gri-ust {
background-color: #9b9b9b;
}
.gri-hakkimda {
background: #ffaf4a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0');
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f0f0));
background: -moz-linear-gradient(top, #ffffff, #f0f0f0); /* for firefox 3.6+ */;
}
.gri-alt {
background-color: #757575;
}
.mavi-ust {
background-color: #0b6f84;
}
.mavi-hakkimda {
background: #ffaf4a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0');
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f0f0));
background: -moz-linear-gradient(top, #ffffff, #f0f0f0); /* for firefox 3.6+ */;
}
.mavi-alt {
background-color: #13849c;
}
.yesil-ust {
background-color: #549520;
}
.yesil-hakkimda {
background: #ffaf4a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0');
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f0f0));
background: -moz-linear-gradient(top, #ffffff, #f0f0f0); /* for firefox 3.6+ */;
}
.yesil-alt {
background-color: #69AD33;
 

HTML:
</style><div id="tasiyici">
<div id="ust" class="turuncu-ust">
<div id="resim"><img alt="İsminiz" src="http://www.psdup.com/demo/tanitimsitesi/images/resim.gif" /></div>
<div id="bilgi">
<h1>Ad Soyad</h1>
<h3>Grafik Tasarım / Web Geliştirme</h3>
<h4>www.psdup.com</h4>
</div>
</div>
<div id="hakkimda" class="turuncu-hakkimda">
<h3>HAKKIMDA</h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<br />
<br />
It was popularised in the 1960s with the release of Letraset sheets containing   Lorem Ipsum passages, and more recently with desktop publishing software   like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="alt" class="turuncu-alt">
<ul>
    <li class="facebook">&nbsp;</li>
    <li class="friendfeed">&nbsp;</li>
    <li class="youtube">&nbsp;</li>
    <li class="twitter">&nbsp;</li>
    <li class="linkedin">&nbsp;</li>
    <li class="vimeo">&nbsp;</li>
</ul>
</div>
</div>
<div id="tasiyici">
<div id="ust" class="gri-ust">
<div id="resim"><img alt="İsminiz" src="http://www.psdup.com/demo/tanitimsitesi/images/resim.gif" /></div>
<div id="bilgi">
<h1>Ad Soyad</h1>
<h3>Grafik Tasarım / Web Geliştirme</h3>
<h4>www.psdup.com</h4>
</div>
</div>
<div id="hakkimda" class="gri-hakkimda">
<h3>HAKKIMDA</h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<br />
<br />
It was popularised in the 1960s with the release of Letraset sheets containing   Lorem Ipsum passages, and more recently with desktop publishing software   like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="alt" class="gri-alt">
<ul>
    <li class="facebook">&nbsp;</li>
    <li class="friendfeed">&nbsp;</li>
    <li class="youtube">&nbsp;</li>
    <li class="twitter">&nbsp;</li>
    <li class="linkedin">&nbsp;</li>
    <li class="vimeo">&nbsp;</li>
</ul>
</div>
</div>
<div id="tasiyici">
<div id="ust" class="mavi-ust">
<div id="resim"><img alt="İsminiz" src="http://www.psdup.com/demo/tanitimsitesi/images/resim.gif" /></div>
<div id="bilgi">
<h1>Ad Soyad</h1>
<h3>Grafik Tasarım / Web Geliştirme</h3>
<h4>www.psdup.com</h4>
</div>
</div>
<div id="hakkimda" class="mavi-hakkimda">
<h3>HAKKIMDA</h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<br />
<br />
It was popularised in the 1960s with the release of Letraset sheets containing   Lorem Ipsum passages, and more recently with desktop publishing software   like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="alt" class="mavi-alt">
<ul>
    <li class="facebook">&nbsp;</li>
    <li class="friendfeed">&nbsp;</li>
    <li class="youtube">&nbsp;</li>
    <li class="twitter">&nbsp;</li>
    <li class="linkedin">&nbsp;</li>
    <li class="vimeo">&nbsp;</li>
</ul>
</div>
</div>
<div id="tasiyici">
<div id="ust" class="yesil-ust">
<div id="resim"><img alt="İsminiz" src="http://www.psdup.com/demo/tanitimsitesi/images/resim.gif" /></div>
<div id="bilgi">
<h1>Ad Soyad</h1>
<h3>Grafik Tasarım / Web Geliştirme</h3>
<h4>www.psdup.com</h4>
</div>
</div>
<div id="hakkimda" class="yesil-hakkimda">
<h3>HAKKIMDA</h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<br />
<br />
It was popularised in the 1960s with the release of Letraset sheets containing   Lorem Ipsum passages, and more recently with desktop publishing software   like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="alt" class="yesil-alt">
<ul>
    <li class="facebook">&nbsp;</li>
    <li class="friendfeed">&nbsp;</li>
    <li class="youtube">&nbsp;</li>
    <li class="twitter">&nbsp;</li>
    <li class="linkedin">&nbsp;</li>
    <li class="vimeo">&nbsp;</li>
</ul>
</div>
</div>
<div id="footer">Kaynak <a href="http://psdup.com">PSDUP</a> Tasarımcı: Hasan YAL&Ccedil;IN Css &amp; Html: Şirzat AYTA&Ccedil; Bs D&uuml;zenleme <a href="http://empadesign.tr.gg">EmPaDesign</a></div>




Bu sayfa hakkındaki yorumlar:
Yorumu gönderen::01.06.2011, 18:36 (UTC)
empadesign
empadesign
Kapalı

Kardeşim Kodları tümünü aynı sayfaya koyabilirsiniz.Yada Tasarım Ayarları>Css Design>Gelişmiş Ayarlar Kısmına Yapıştırabilrisiniz.Ayrıca Css Kodunu Css Bölümüne ve Html Kodunu Tasarım Üstüne Koyabilirsiniz.

Yorumu gönderen::01.06.2011, 10:56 (UTC)
mertulupinar
mertulupinar
Kapalı

kardeş 2.kısmı html kodları olanı anasayfayı yapıştırcaz



Bu sayfa hakkında yorum ekle:
İsmin:
Mesajınız:

Giriş Yap

Kullanıcı Adı Şifre

Kayıt Ol!

Kategoriler

Popüler Yazılar

Reklamlar

Bir Tık Birşey Kaybettirmez! TurkeyRank.Com - Pagerank Servisi

Dostlarım

=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=