Author Profile with CSS

Oke sahabat blogger, pada kesempatan kali ini saya akan berbagi tutorial bagaimana cara membuat Author Profile hanya menggunakan CSS. Sebelumnya perlu sobat ketahui keuntungan CSS dibandingkan Java script yaitu dapat mempercepat loading blog sobat. dan keuntungan lainnya silahkan cari di mbah google.

Untuk demonya bisa agan ihat di bawah ini.

Demo

Gunakan CSS ini untuk membuat slide-out sosial butonnya:

/*Colors*/
$background1: rgb(80,80,100);
$background2: rgb(243,115,70);
$white: rgb(240,240,240);
$blue: rgb(50,150,150);

/*Imports*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}

body{
  background: $background2 ;
  font-family: 'Open Sans', sans-serif;
  box-sizing: border-box;
}

*{
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.container{
  width: 400px;
  margin: 10% auto 0;
  background: $white;
  border-radius: 3px;
  
  &:hover{
    .social li{
      margin: 0;
    }
  }
}

.header{
  text-align: center;
  padding: 40px 30px 0 30px;
  h1,h2{
    font-weight: 300;
  }
  h1{
    margin: 0;
  }
  h2{
    margin: 0 0 15px 0;
    color: $blue;
  }
}

.profile{
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin: 20px 0 -70px 0;
  border: 3px solid $background1;
  transition: all 1.5s ease;
  &:hover{
    border: 3px solid $background2;
  }
}

.content{
  background: $background1;
  color: $white;
  padding: 75px 0 0 0;
  text-align: center;
  height: auto;
  
  p{
    padding: 20px 40px;
    font-weight: 300;
  }
}

.social{
  padding: 40px 0 0 0;
  
  ul{
    list-style-type: none;
    width: 100%;
    height: 50px;
    overflow: hidden;
    li{
      margin: 50px 0 0 0; 
      float: left;
      width: 33.3333%;
      height: 100%;
      line-height: 50px;
      @for $i from 1 through 3 {
            &:nth-child(#{$i}) {
              transition: ($i * .3s);
            }}
  }
  a{
    color: #fff;
    text-decoration: none;
  }
  }}

.zocial-facebook{
  background: #3B5998;
  display: block;
}
.zocial-twitter{
  background: #55ACEE;
  display: block;
}

.zocial-instagram{
  background: #3F729B;
  display: block;
}

Gunakan HTML ini untuk membuat Author Profilenya:

<div class="container">
<div class="header">
<h1>
Richard Karsten</h1>
<h1>
      </h1>
<h2>
Frontend</h2>
<img class="profile" src="http://clikr.de/wp-content/uploads/2015/02/richard-150x150.jpg" />
  
</div>
<div class="content">
<h3>
about me</h3>
Hey - I am Richie, a 20 years old frontend dev. Feel free to follow me. Feel free to hire me :) <br />
<div class="social">
<ul>
<li>
          <a class="zocial-facebook" href="https://www.blogger.com/blogger.g?blogID=4605505334554099324#"></a>
        </li>
<li>
          <a class="zocial-twitter" href="https://www.blogger.com/blogger.g?blogID=4605505334554099324#"></a>
        </li>
<li>
          <a class="zocial-instagram" href="https://www.blogger.com/blogger.g?blogID=4605505334554099324#"> </a>
        </li>
</ul>
</div>
</div>
</div>

Sekian tutorial kali ini, semoga bermanfaat dan selamat berkreasi.