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"> </li>
<li class="friendfeed"> </li>
<li class="youtube"> </li>
<li class="twitter"> </li>
<li class="linkedin"> </li>
<li class="vimeo"> </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"> </li>
<li class="friendfeed"> </li>
<li class="youtube"> </li>
<li class="twitter"> </li>
<li class="linkedin"> </li>
<li class="vimeo"> </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"> </li>
<li class="friendfeed"> </li>
<li class="youtube"> </li>
<li class="twitter"> </li>
<li class="linkedin"> </li>
<li class="vimeo"> </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"> </li>
<li class="friendfeed"> </li>
<li class="youtube"> </li>
<li class="twitter"> </li>
<li class="linkedin"> </li>
<li class="vimeo"> </li>
</ul>
</div>
</div>
<div id="footer">Kaynak <a href="http://psdup.com">PSDUP</a> Tasarımcı: Hasan YALÇIN Css & Html: Şirzat AYTAÇ Bs Düzenleme <a href="http://empadesign.tr.gg">EmPaDesign</a></div>
