Style Rotate Image Author Box

CSS

by Imron Fhatoni

HTML

<div class="vCard">
<img src="https://1.bp.blogspot.com/--YrewbeVTUk/V5_IYTLKiVI/AAAAAAAAFkE/FiZIDFpxv4QF0NrEpmJAs0yKFMEG29BlgCLcB/s320/animeboy2.jpg" />
  <h1>Hi, Saya Admin Ganteng!</h1>
<p>Nama saya Imron Fhatoni, saya belum menikah, gimana mau nikah pacar aja ngak punya. yang ingin mengetahui tentang biografi saya silahkan klik tautan yang ada dibawah. sekian ya wassalam.  </p>
  <ul>
    <li><a href="#Twitter" title="Follow me on : Twitter">Twitter</a><li>
    <li><a href="#Facebook" title="Follow me on : Facebook">Facebook</a><li>
    <li><a href="#Google+" title="Follow me on : Google+">Google+</a><li>
    <li><a href="#Tumblr" title="Follow me on : CSSdeck">Tumblr</a><li>
    <li><a href="#Instagram" title="Follow me on : CodePen">Instagram</a><li>
  </ul> 
</div>

CSS

/* 
// Simple CSS - Responsive Auto Biografi For Blogspot
// Made with ❤ by @imronfhatoni
// http://imronfhatoni.blogspot.com 
*/

@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
.vCard {
  margin: 4% auto;
  padding: 15px;
  width: 80%;
  background-color: #f5f5f5;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.vCard img {
  margin: 10% 0% 0% 30%;
  height: auto;
  width: 35%;
  border-radius: 50%;
  border: double 10px #CCC;
  box-shadow: 0 7px 4px #555;
}

.vCard h1 {
  font-family: 'Lobster', cursive;
  text-align: center;
  text-shadow: 0 1px 1px #444;
}

.vCard p {
  font-family: 'Indie Flower', cursive;
  text-align: center;
  text-shadow: 0 1px 1px #444;
}

.vCard ul {
  list-style: none;
}

.vCard ul > li {
  display: inline-block;
  padding: 5px;
  margin-bottom: 10px;
  font-family: 'Shadows Into Light', cursive;
}

.vCard a:link,
a:visited {
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  padding: 5px;
  border-radius: 10px 0px 10px 0px;
  color: #000;
  font-weight: bolder;
}

.vCard a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 0px 10px 0px 10px;
}

.vCard a[title] {
  position: relative;
}

.vCard a[title]:before {
  content: "";
  position: absolute;
  bottom: 10px;
  border-width: 14px 7px;
  border-style: solid;
  border-color: #3c404b transparent transparent transparent;
  left: -9999px;
  opacity: 0;
  transition: .75s opacity, .75s bottom;
}

.vCard a[title]:after {
  content: attr(title);
  color: #FFF;
  font: bold 16px arial, sans-serif;
  background: #3c404b;
  padding: 10px;
  position: absolute;
  left: -9999px;
  opacity: 0;
  bottom: 38px;
  white-space: nowrap;
  border-radius: 8px;
  transition: .75s opacity, .75s bottom;
  font-family: 'Indie Flower', cursive;
}

.vCard a[title]:hover:before {
  left: 35px;
  opacity: 1;
  bottom: 30px;
}

.vCard...