balkian.github.com/content/about.md

+++
title = "About"
date = "2017-02-24"
menu = ["main"]
+++

Hi!

My name is Fernando. I'm a researcher and developer from Madrid, Spain.


---
<style>

about ul {
  position: relative;
  width: 900px;
  margin: 0 auto;
}

#about li {
  line-height:1.5em;
  border-bottom:1px solid #DDD;
  float:left;
  display:inline;
  width: 33.333%;
}

#about i {
  /*background-color: #ffd700;*/
  /*padding: 5px;*/
  /*border-radius: 10px;*/
}
.icons {
    text-align: center;
    color: #333;
    /* text-shadow: 2px 2px #FFD700; */
}

.coolicon {
    position: relative;
}

.coolicon:hover .icon-stack {
    visibility: none;
}

.coolicon:hover .explanation {
    white-space: nowrap;
    background: #FFD700;
    display: block;
    position:absolute;
    border: 1px solid black;
    z-index: 99;
    top: 1em;
    color: black;
    font-family: Comfortaa;
    /* width: 100%; */
    padding: 0.5em;
    /* border-radius: 0 10px 10px; */
    overflow: visible;
    left: 0;
  /* transform-origin: 95% 50%; */
  /* -moz-transform-origin: 95% 50%; */
  /* -webkit-transform-origin: 95% 50%; */
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  transform: rotate(-4deg);
}
/* .coolicon:hover { */
/*     width: 5em; */
/* } */

.explanation {
    display:none;
}
</style>

<div id="about" style="clear:both;">
            <!-- <h1 class="title">Interests</h1> -->
            <div class="icons">
              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-stack-1x fa-linux"></i></span><span class="explanation">Linux lover</span></span>
              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x"></i><i class="fa fa-android"></i></span><span class="explanation">Android dev</span></span>
              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x"></i><i class="fa fa-github-alt"></i> </span><span class="explanation">GitHub user</span></span>
              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x"></i><i class="fa fa-stack-exchange"></i> </span><span class="explanation">StackExchange fan</span></span>
              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x"></i><i class="fa fa-music"></i> </span><span class="explanation">Music lover</span></span>
              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x"></i><i class="fa fa-film"></i> </span><span class="explanation">Movie fan</span></span>
              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x"></i><i class="fa fa-comments"></i> </span><span class="explanation">Always on IM</span></span>
              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x"></i><i class="fa fa-laptop"></i> </span><span class="explanation">Always on a PC</span></span>
              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x"></i><i class="fa fa-pencil"></i> </span><span class="explanation">Occassional writter</span></span>
              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x"></i><i class="fa fa-moon-o"></i> </span><span class="explanation">Night owl</span></span>
              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x"></i><i class="fa fa-terminal"></i></span>      <span class="explanation">CLI user</span></span>
              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x"></i><i class="fa fa-flag"></i></span>      <span class="explanation">Linguist wannabe</span></span>
              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x"></i><i class="fa fa-code"></i> </span>           <span class="explanation">Love to code</span></span>
              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x"></i><i class="fa fa-book"></i></span>      <span class="explanation">Keen reader</span></span>
              <span class="coolicon"><span class="fa fa-stack"> <i class="fa fa-square-o fa fa-stack-2x"></i><i class="fa fa-quote-right"></i></span>      <span class="explanation">Quotes on demand</span></span>
            </div>
          </div>