<section id="aboutPage">
<h4 class="pageTitle fadeInUp animated"> Olá =) </h4>
<div class="aboutAnimate fadeInUp animated"> 
  
<div class="aboutMe">
  <article class="aboutMeContainer card-front">
    <header class="aboutHeader">
        <img class="headerProfile" src="http://felipemartinin.com/wp-content/themes/FelipeMartinin/img/felipe-martinin.jpg" alt="header image" />
      <h1 class="fadeInLeft animated">Felipe Martinin</h1>
      <p class="fadeInLeft animated">UI/ UX Designer - Web Developer</p>
    </header>
   
    <div class="frontContent">
        <p>Tenho 21 anos, moro na Grande São Paulo e sou 
apaixonado pela Web. Ela me cativa principalmente
por sua grande colaboração com o desenvolvimento
social. Ela é um novo mundo capaz de inserir a 
nossa sociedade moderna a um novo patamar 
jamais visto antes. E meu maior objetivo é 
contribuir notoriamente com essa evolução </p>
      
    </div>
    <div class="socialIcons">
      <a href=""><i class="fa fa-facebook first-icon"></i></i></a>
      <a href=""><i class="fa fa-twitter"></i></a>
      <a href=""><i class="fa fa-google-plus-square"></i></a>
      <a href=""><i class="fa fa-github"></i></a>
      <a href=""><i class="fa fa-youtube"></i></a>
      <a href=""><i class="fa fa-dribbble"></i></a>
      <a href=""><i class="fa fa-linkedin-square last-icon"></i></i></a>
    </div>
    <footer class="aboutFooter">
      <a href="" class="goContact">Contato</a>
      <a class="goFlip">Currículo</a>
    </footer>
  </article>
  
  <!-- card back -->
  
  <div class="aboutMeContainer card-back">
    
    <header class="aboutHeader">
        <h2 class="animated">Currículo</h2>
    </header>
    
    <div class="backContent-wrap">
      
      <div class="backContent animated">
        <p><b>Resumo: </b>  Sou desenvolvedor front-end e designer de interfaces. E um grande fanático por usabilidade e por experiências visuais únicas. Gosto de trabalhar com desenvolvimento Web pois ela abrange vários campos de conhecimentos. 
          <br />
          <br />
          Isso permite que eu não seja um profissional que só interage apenas com códigos. Por isso além de estudar unicamente tecnologias ligadas à web. Também sou um grande estudante de Direito, Psicologia, Marketing e User Experience.
        </p>
        
        <p><b>Formação Acadêmica: </b> Cursando o penúltimo
semestre do curso Sistemas para Internet na
Universidade Municipal de São Caetano do
sul (USCS).
        </p>
        <p class="list">
          <b>Conhecimentos: </b>
          <br />
          <br />
         • HTML5, CSS3. JavaScript e jQuery<br />
          • Linguagens para dados estruturados:  Microdata,
          Microformats e RDFa.<br />
          • WAI-ARIA para acessibilidade <br />
          • CMS’s: Wordpress e Magento<br />
          • UX/UI Design<br />
          • Marketing e Publicidade digital<br />
          • SEO, SEM e SMM<br />
          • Scrum e Kanban para gerenciamento de projetos <br />
          • Git para versionamento de projetos <br />
          • Inglês técnico <br />
        </p>
      </div>
    </div>
    
    <footer class="aboutFooter">
      <a href="" class="goContact">Contato</a>
      <a class="goFlip">Voltar</a>
    </footer>
</div>
</div>
 </section>
  
body {
  -webkit-font-smoothing: antialiased;
}

@import url(https://fonts.googleapis.com/css?family=Raleway:300,100,200);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);

#aboutPage .pageTitle {
font: 72px 'Raleway', sans-serif;
color: #fff;
color: rgba(255,255,255, .8);
width: 100%;
text-align: center;
font-weight: 100;
text-shadow: 1px 1px 41px #000;
 height: 100px;
  margin: 0 0 30px 0;
}





body {
  background: url(http://wallpoper.com/images/00/26/74/04/blurred_00267404.jpg);
  margin: 0 auto;
}

#aboutPage * {
  box-sizing: border-box;
}

#aboutPage .fa{
  color: #444;
}

#aboutPage .fa:hover {
  color: #3498db;
  transition: .4s;
}

.aboutAnimate {
  -webkit-animation-delay: .8s;
  -moz-animation-delay: .8s;
  -o-animation-delay: .8s;
  animation-delay: .8s;
}

.aboutMe {
  position: relative;
  width: 310px;
  height: 480px;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 1px 1px 10px 3px #444;
  box-shadow: 1px 1px 10px 5px rgba(0,0,0, .3);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.5s ease;
  -moz-transition: -moz-transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  transition: transform 0.5s ease;
}

.aboutMe .card-front .aboutHeader {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 310px;
  height: 160px;
  position: relative;
  background: url(http://felipemartinin.com/wp-content/themes/FelipeMartinin/img/card-header.jpg);
}


.aboutHeader .headerProfile {
 position: absolute;
 z-index: 1;
 border-radius: 100%;
 background: #fff;
 box-shadow: 1px 1px 10px 1px #666;
 top: 95px;
 left: 15px;
 cursor: pointer;
}

.headerProfile:hover {
  -moz-animation: bounce 0.9s ease-out;
  -o-animation: bounce 0.9s ease-out;
  -ms-animation: bounce 0.9s ease-out;
    -webkit-animation: bounce 0.9s ease-out;
    animation: bounce 0.9s ease-out;
}

.aboutHeader h1 {
  position: absolute;
  font: 23px 'Raleway', sans-serif;
  color: #fff;
  color: rgba(255,255,255, .8);
  text-shadow: 1px 1px 10px #111;
  top: 105px;
  left: 145px;
  font-weight: 200;  
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}

.aboutHeader p {
  position: absolute;
  font: 12px 'Open Sans', sans-serif;
  color: #666;
  top: 155px;
  left: 145px;
  z-index: 1;
  -webkit-animation-delay: 1.3s;
  -moz-animation-delay: 1.3s;
  -o-animation-delay: 1.3s;
  animation-delay: 1.3s;
}

 .aboutMe .card-front .frontContent {
  width: 310px;
  background: #fff;
  padding: 60px 10px 5px;
}

.aboutMe .card-front .frontContent p {
  font: 12px 'Open Sans', sans-serif;
  font-weight: 400;
  color: #888;
  text-align: justify;
}

.socialIcons {
  position: relative;
  border-top: 1px solid #dfdfdf;
  background: #fff;
  width: 310px;
}

.socialIcons a i{
  padding: 10px 12px;
  border-right: 1px solid #dfdfdf;
  
}

.socialIcons a .first-icon{
 margin-left: 10px;
 padding-right: 15px;
  
}

.socialIcons a .last-icon{
  border-right: none;
  
}

.aboutFooter {
  position: relative;
  width: 310px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background: #fff;
  border-top: 1px solid #ccc;
  padding: 17px 10px;
}

.aboutFooter a {
  position: relative;
  padding: 10px 40px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 20px;
}

.aboutFooter .goContact {
  background: #1abc9c;
  color: #fff;
  font: 16px 'Open Sans', sans-serif;
  font-weight: 600;
  margin: 15px 0px 5px 0px;
}

.aboutFooter .goContact:hover {
  background: #2bcdad;
  transition: .4s;
}

.aboutFooter .goFlip {
  background: #fff;
  border: 1px solid #ccc;
  font: 14px 'Open Sans', sans-serif;
  font-weight: 600;
  color: #666;
}

.aboutFooter .goFlip:hover {
  background: #666;
  transition: .4s;
  border: 1px solid #666;
  color: #fff;
}

.twitterIcon {
  content: url(https://www.corujalivraria.com.br/assets/twitter-icon-a7d78a313aebc7b78923dc06b614c30d.png);
  width: 40px;
}

.card-front {
  z-index: 10;
}

.card-back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
  top: 0;
  overflow: hidden;
}

.aboutMe .card-back .aboutHeader {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 310px;
  height: 60px;
  position: relative;
  background: url(http://felipemartinin.com/wp-content/themes/FelipeMartinin/img/card-header.jpg);
}

.aboutMe .card-back .aboutHeader h2 {
  position: absolute;
  font: 32px 'Raleway', sans-serif;
  font-weight: 100;
  color: #fff;
  color: rgba(255,255,255, .8);
  width: 100%;
  text-align: center;
  margin: auto;
  top: 10px;
   -webkit-animation-delay: .4s;
  -moz-animation-delay: .4s;
  -o-animation-delay: .4s;
  animation-delay: .4s;
}

.aboutMeContainer {
  width: 310px;
  height: 480px;
  margin: 0 auto;
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

 .aboutMe .card-back .backContent-wrap {
   background: #fff;
   position: relative;
   padding: 20px 0px;
 }

 .aboutMe .card-back .backContent {
   position: relative;
   background: #fff;
   height: 323px;    
   overflow: auto;
   -webkit-animation-delay: .6s;
  -moz-animation-delay: .6s;
  -o-animation-delay: .6s;
  animation-delay: .6s;
 }

 .aboutMe .card-back .backContent p {
  padding: 0px 10px 25px;
  margin: 0;  
  font: 12px 'Open Sans', sans-serif;
  font-weight: 400;
  color: #888;
 }

 .aboutMe .card-back .backContent p b{
   color: #555;
 }

 .aboutMe .card-back .backContent .list {
  line-height: 20px;
 }

.aboutMe .card-back .backContent::-webkit-scrollbar {
    width: 8px;
}

.card-back .goFlip{
  padding: 10px 50px;
}
 
/* Track */
.aboutMe .card-back .backContent::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
.aboutMe .card-back .backContent::-webkit-scrollbar-thumb {
    opacity:0.1;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0,0,0,0.5); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

.rotate-3d {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}



.z-up {
  z-index: 10;
}
.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}



@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.8);
  }

  50% {
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  } 
}

@-moz-keyframes bounce {
  0% {
    -moz-transform: scale(1);
  }

  25% {
    -moz-transform: scale(.8);
  }

  50% {
    -moz-transform: scale(1.05);
  }

  70% {
    -moz-transform: scale(.9);
  }

  100% {
    -moz-transform: scale(1);
  }
}

@-o-keyframes bounce {
  0% {
    -o-transform: scale(1);
  }

  25% {
    -o-transform: scale(.8);
  }

  50% {
    -o-transform: scale(1.05);
  }

  70% {
    -o-transform: scale(.9);
  }

  100% {
    -o-transform: scale(1);
  }
}

@keyframes bounceIn_custom {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(.8);
  }

  50% {
    transform: scale(1.05);
  }

  70% {
    transform: scale(.9);
  }

  100% {
    transform: scale(1);
  }
}

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInUp {
	0% {
		opacity: 0;
		-moz-transform: translateY(20px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInUp {
	0% {
		opacity: 0;
		-o-transform: translateY(20px);
	}
	
	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
}


  
jQuery(document).ready(function(){
  ( function ( $ ){ 
      $ ( '.goFlip' ).on ( "click" ,  function (){ 
      $ ( '.aboutMe' ).toggleClass ( 'rotate-3d' ); 
      $ ( '.card-back' ).toggleClass ( 'z-up' ); 
      $ ( '.card-back .> AboutHeader> h2 ' ).addClass ( 'fadeInUp' ); 
      $ ( '.backContent-wrap backContent').addClass ( 'fadeInUp' ); 
    }); 
  }) ( jQuery );
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js