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>

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

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol