qOgVoq

index.html

<div class="container-fluid">
  <div class="row">
      <div class="spam">
      <nav class="navbar navbar-default" role="navigation">
        <div class="col-md-12">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Meu Portfólio</a>
          </div>
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="http://http://yuri.website/">Blog</a>
            </li>
            <li>
              <a href="#">Trabalhos</a>
            </li>
            <li>
              <a href="#">Contato</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
  <div class="jumbotron">
    <div class="row">  
      <div class="col-md-9">
        <h2>Yuri Soares Brandão - yurisbv				</h2>
        <p>Natural de Maceió/AL, atualmente residindo no Rio de Janeiro/RJ. Graduando em Análise de Sistemas pela FAETERJ-Rio e Trainee no setor de suporte da empresa de hospedagem Hostnet Internet.</p>
      </div>
    <div class="col-md-3">
     <img id="logo" class="redondo img-responsive" src="http://yuri.website/wp-content/uploads/2015/11/yuri_branco.png" >
    </div>
   </div>
  </div>
  <div class="jumbotron">
    <div class="row">
      <div class="col-md-4">
          <figure id="card">
            <div class="front">
              <img class="img-responsive" src="https://scontent.cdninstagram.com/hphotos-xpa1/t51.2885-15/s480x480/e35/12120230_1660914670849910_809073269_n.jpg">
            </div>
          <div class="back">
            <img class="img-responsive" src="http://yuri.website/wp-content/uploads/2015/11/yuri_branco.png">
          </div>
     </figure>
    </div>
      <div class="col-md-4">
    <div>
    </div>
      <div id="card">
        <div class="front">
          <img class="img-responsive" src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/s480x480/e35/10899184_1094440900627191_1417572849_n.jpg">
        </div>
        <div class="back">
          <p> Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
        </div>
      </div>
    </div>
      <div class="col-md-4">
      <div id="card">
        <div class="front">
          <img class="img-responsive" src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/s640x640/sh0.08/e35/11917909_779213922189436_1742703322_n.jpg">
        </div>
        <div class="back">
          <p>
            Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
          </p>
        </div>
      </div>
     </div>
    </div>
   </div>
  <div class="jumbotron">    
    <h2 class="text-center">Conecte-se a mim</h2>    
    <div class="row">   
      <div class="col-md-3">
        <button class="btn btn-block" href="#" target="_blank">Facebook</button>
      </div>
      <div class="col-md-3">
        <button class="btn btn-block" href="#" target="_blank">LinkedIn</button>
      </div>    
      <div class="col-md-3">
        <button class="btn btn-block" href="#" target="_blank">GitHub</button>
      </div>    
      <div class="col-md-3">
        <button class="btn btn-block" href="#" target="_blank">Free Code Camp</button>
      </div>      
    </div>
  </div>
</div>
 <div class="row">
      <div class="spam">
      <nav class="navbar navbar-default" role="navigation">
        <div class="col-md-12">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Meu Portfólio</a>
          </div>
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="http://http://yuri.website/">Blog</a>
            </li>
            <li>
              <a href="#">Trabalhos</a>
            </li>
            <li>
              <a href="#">Contato</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>

qOgVoq.markdown

qOgVoq

A Pen by Yuri Soares Brandão on CodePen.

License.

script.js

//https://nnattawat.github.io/flip/
$("#card*").flip({
  trigger: 'hover',   
});

scripts

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdn.rawgit.com/nnattawat/flip/v1.0.18/dist/jquery.flip.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

style.css

.redondo{
    border-color: white;
    border-width: 5px;
    border-style: solid;
    border-radius: 50%;
}
img { 
    display: inline-block;
}

.jumbotron{
  text-shadow: grey 0.1em 0.1em 0.1em;
  width: 100%;
  margin-bottom: 5%;
  margin-top: 3%;

  
 /* background-image:  url(http://cache2.asset-cache.net/xc/517322557.jpg?v=2&c=IWSAsset&k=2&d=OHegg_05Yg-rwlD3qoQCeMRkjRoHQTxiJNGs1gnLXz5n4KIDVmW7GyiCgE_-3A6z0);*/
}

.front{
  padding:2px;
}

.back{
  padding:2px;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />