VLgaLX

index.html

  <div class="global">

    <div class="content">

      <div class="content-header"> Dalia </div>

      <div class="content-info">

        <div class="info-left">

          <div class="left-genero">
            <span class="genero-t">Genero</span>
            <span class="genero-v">Mujer</span>
          </div>

          <div class="left-numerologia">
            <span class="numerologia-t">Numerologia</span>
            <span class="numerologia-t">9</span>
          </div>

          <div class="left-origen">
            <span class="origen-t">Origen</span>
            <span class="origen-v">Español</span>
          </div>

        </div>

        <div class="info-right">

          <div class="right-significado">
            <span class="significado-t">Significado</span>
            <span class="significado-v">Del sueco "valle". Nombre de una flor, bautizada en honor del botánico sueco Dahl.</span>
          </div>

          <div class="right-personalidad">
            <span class="personalidad-t">Personalidad</span>
            <span class="personalidad-v">Inspiración y vocación artística para una personalidad muy activa.</span>
          </div>

        </div>

      </div>

    </div>

  </div>

script.js

"use strict"

var aboutAnimation = new TimelineMax({
  repeat: -1
})

load()

function load() {

  aboutAnimation
    .set('.content-info', {
      display: 'none'
    })
    .from('.content', 1.5, {
      scale: 1,
      autoAlpha: 0,
      width: '5px',
      ease: Elastic.easeOut.config(1, 0.5)
    })
    .to('.content-info', 1, {
      display: 'flex',
      height: '324px',
      ease: Elastic.easeOut.config(3, 0.5),
    })
    .staggerFrom('.info-left div', .9, {
      className: '+= temp',
      autoAlpha: 0,
      x: -50,
      ease: Power4.easeOut,
    }, '.3', '-=.3')
    .staggerFrom('.info-right div', .9, {
      className: '+= temp',
      autoAlpha: 0,
      x: +50,
      ease: Power4.easeOut,
    }, '.3', '-=.3')

}

scripts

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700);
@import url(http://fonts.googleapis.com/css?family=Lobster);

* {
   margin: 0;
   padding: 0;
}

.display-none{
  display: none;
}

body {
   font-family: 'Open Sans', sans-serif;
}

.global {
   width: 100%;
   height: 720px;
   background: #7781A9;
   display: flex;
   justify-content: space-around;
   align-items: center;
}

.content {
   background-color: #ECECEC;
   overflow: hidden;
   width: 700px;
   border-radius: 10px 10px 0 0;
}

.content-header {
    background-color: #F5F5F5;
    padding: 10px;
    font-size: 45px;
    border-radius: 10px 10px 0 0;
    font-family: 'Lobster', cursive;
    color: #675959;
    
}

.content-info {
   display: flex;
}

.info-left span {
   display: block;
   padding: 10px;
   background-color: #E76060;
   text-align: center;
   font-size: 25px;
   color: #FBFBFB;
}

.info-left span:nth-child(1) {
   background-color: #FF6868;
   font-weight: 600;
}

.info-left span:nth-child(2){
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.06) inset;
}

.info-right {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
}

.info-right div {
   background-color: #E8F4E8;
   margin: 10px;
}

.right-significado {
   display: flex;
   flex: 1;
}

.right-personalidad {
   display: flex;
   flex: 1;
}

.significado-t {
   background-color: #FBFBEC;
   display: flex;
   align-items: center;
   padding: 10px;
   flex: 1;
   justify-content: center;
   font-weight: 600;
   font-size: 19px;
   border-radius: 10px 0 0 10px;
}

.significado-v {
   display: flex;
   align-items: center;
   padding: 10px;
   flex: 3;
   justify-content: center;
   box-shadow: 3px 0 6px 0 rgba(0, 0, 0, 0.03) inset;
}

.personalidad-t {
   background-color: #FBFBEC;
   display: flex;
   align-items: center;
   padding: 10px;
   flex: 1;
   justify-content: center;
   font-weight: 600;
   font-size: 19px;
   border-radius: 10px 0 0 10px;
}

.personalidad-v {
   display: flex;
   align-items: center;
   padding: 10px;
   flex: 3;
   justify-content: center;
   box-shadow: 3px 0 6px 0 rgba(0, 0, 0, 0.03) inset;
}

VLgaLX.markdown

VLgaLX

A Pen by DanHanfry on CodePen.

License.