yapp , dengan ada nya domain baru , semangat dikit deh buat nge post , ok nih , gw mau ngepost tentang author profil CSS tp flat , gak flat kali , code ini awalan gw dapat dari Perkedel , trus gw ubah ubah dikit , ya gw harus berterima kasih juga buat dia :3 . oke ini contoh Screen shot nya
oke bagi yang mau , ini code nya..
CSS
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
body {
cursor: pointer;
font-family: 'Source Sans Pro', sans-serif;
background: url(http://ds2-p.atlusnet.jp/portal_images/bg_01.jpg);
}
.chrome {
width: 500px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
background-color: #34393D;
border-radius: 3px;
text-align: middle;
}
.content {
position: inherit;
background-color: #fff;
top: 30px;
right: 0px;
left: 0px;
bottom:0px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
box-shadow: 0 3px 5px rgba(0,0,0,.3);
}
.circle {
height: 7px;
width: 7px;
margin:10px 0px 0px 10px;
display: inline-block;
border-radius: 50%;
}
.circle:first-child{
background: #555;
}
.circle:nth-child(2){
background: #555;
}
.circle:nth-child(3){
background: #555;
}
header {
background: #3498db;
height: 50px;
width:100%;
position: inherit;
}
#logo {
color: #FFF;
padding-top: 15px;
text-align: center;
font-weight: 800;
position: inherit;
background: #2980b9;
height: 70%;
width: 200px;
}
#left {
background: #333;
top: 50px;
bottom: 0px;
right:0;
width: 200px;
position: inherit;
}
.tab1, .tab2, .tab3, .tab4 {
font-size: 12px;
padding: 15px 25px;
font-family: 'FontAwesome', sans-serif;
color: #949BA7;
border-bottom: 1px solid #444;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
}
.tab1:hover {
background: #23487e;
color:#fff;
}
.tab2:hover {
background: #3ca9d0;
color:#fff;
}
.tab3:hover {
background: #ba1010;
color:#fff;
}
.tab4:hover {
background: #ddd;
color:#333;
}
div i {
margin-right: 10px;
}
#yo-face {
position: inherit;
border-radius: 50%;
background-size: 100%;
width: 40px;
height: 40px;
margin-top: 2px;
transform: scaleX(-1);
right: 5px;
border: 3px solid #333;
background-image: url("http://m.ak.fbcdn.net/sphotos-f.ak/hphotos-ak-prn2/1464763_554677891290262_1686274586_n.jpg");
}
#profil{
top:50px;
width:280px;
padding:10px;
color:#444;
text-align:justify;
position: inherit;
float:left;
font-size:11px;
}
#profil img{
width:98%;
border:3px solid #fff;
box-shadow:0 2px 5px rgba(0,0,0,.3);
margin-bottom:5px;
}
.hidden-scrollbar {
overflow:hidden;
text-align:justify;
margin-top:45px;
}
.hidden-scrollbar .inner {
height:320px;
overflow:auto;
}
.tombol {
background-color:#bd0717;
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
display:inline-block;
color:#fcf9fc;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 36px;
text-decoration:none;
}
HTML
<div class="chrome">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="content">
<header>
<span id="logo">Alvadyza</span>
<span id="yo-face"></span>
</header>
<div class='hidden-scrollbar'>
<div class='inner'>
<div id="profil">
<img src="http://m.ak.fbcdn.net/sphotos-f.ak/hphotos-ak-prn2/1464763_554677891290262_1686274586_n.jpg"/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.<br/><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero
</div></div></div>
<div id="left">
<div class="tab1">
<i class="fontawesome-facebook"></i>
Facebook
</div>
<div class="tab2">
<i class="fontawesome-twitter"></i>
Twitter
</div>
<div class="tab3">
<i class="fontawesome-pinterest"></i>
Pinterest
</div>
<div class="tab4">
<i class="fontawesome-envelope"></i>
Email
</div>
<div id="info"></div>
</div>
</div>
A U R E L Y N E - Talk less , do some action !