fun

fun.markdown

fun

A Pen by alex on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/css?family=Cantarell" rel="stylesheet">
<!--img class="bg" src="http://unsplash.it/801"></img-->
<h1>Alex Hudici</h1>

<div class="container container-full">
  <div class="row row-centered">
     <div class="col-sm-3 col-centered">
      <div id="durr">
  <a id="twitter" class="round twittar" href="https://twitter.com/alexhudici">Twitter
            </a>
      </div>
    </div>
    <div class="col-sm-3 col-centered">
      <div id="durr">
        <a id="linkedin" class="round twittar" href="https://facebook.com">LinkedIn</a>
      </div>
    </div>
    <div class="col-sm-3 col-centered">  
      <div id="durr">
        <a id="git" class="round twittar" href="https://github.com/alexhudici">Git</a>
      </div>
    </div>
  </div>
</div>
</div>

    <br/>
    <hr/>
<div class="container container-table">
   <div class="row horizontal-center-row">
        <div class="text-center col-md-4 col-md-offset-4 body-text">
            <h3> About </h3>
Moved to Canada when I was 7 years old. Discovered computers, and the rest is history.
          </div>
  </div>
  <div class="row horizontal-center-row">
    <div class="text-center col-md-4 col-md-offset-4 body-text">
      <h3> Projects </h3>
      <li>RobotMissions</li>
      <li>ShelterTonight</li>

    </div>
</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.css

.round {
  display:block;
  border-radius: 50%;
  border:solid 4px pink;
  text-align:center;
/*   background-image: url("http://unsplash.it/95/95"); */
  position:relative;
  width:95px;
  height: 95px; /* Change to the height you need */
  top:0px;
  left:0%;
}

#linkedin {
  background-image: url("http://unsplash.it/95/95")
}

#linkedin:hover {
  background: grey;
}

#twitter {
  background-image: url("https://yprl.bibliocms.com/wp-content/uploads/sites/8/2015/07/Girl-Sparkler-100x100.jpeg")
}

#twitter:hover {
  background: grey;
}

#git {
  background-image: url("http://arhivach.org/storage2/t/eaa11ac1337e6fc04bee8bf41afec01d.jpg")
}

#git:hover {
  background: grey;
}

.twittar:hover {
  text-decoration: none;
  color:white;
}

.twittar {
/*     z-index:100; */
    text-decoration: none;
    color:white;
    font-size:18px;
    font-weight:bold;
    vertical-align: middle;
    line-height:85px;
}

.bg
{
  width: 100%;
  z-index: -1;
  position: fixed;
}

body {
    background: #ffffff url("https://static1.squarespace.com/static/55e3484fe4b0eacb06361f7d/t/573cd48720c647ee4f0c279b/1463604394236/") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: Cantarell;
}

.container-full { 
  margin: auto; 
  max-width: 600px;
}

.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right: 5%;
    width: 95px;
}

h1 {
  text-align: center;
}

.body-text {
    background-color: #f9eff8;
}

.container-table {
    display: table;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />