ypQjqg

index.html

<div class="container wrapper bgfade">
  <div class="container inner">
    <div class="container left">
      <div class="ghost-2 round container">
        <p>Selo</p>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisi justo, vehicula a massa sit amet, lobortis hendrerit dui. Ut consectetur lacinia pulvinar. Nam posuere, quam consectetur aliquam pretium, elit nunc sodales dolor, non rutrum
        libero ligula eget enim. Aliquam a sapien a metus feugiat consectetur. Sed at leo nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut et eros commodo, luctus mauris vel, convallis ipsum. Cras tempus
        iaculis ultricies. Sed ac dolor tortor. Etiam vel erat nec ex lobortis vehicula.</p>
    </div>
    <div class="container middle">
      <div class="header container">
        <h1>INGRESSO VIP</h1>
      </div>
      <div class="container">
        <div class="is-1 container row">
          <div class="ghost">&nbsp;</div>
          <img class="bounce" src="http://3.bp.blogspot.com/-AcGqFjY91lI/VeSt9ju7D9I/AAAAAAAALHw/_b9t1lGYw14/s1600/1.png">
        </div>
        <div class="event-info is-2 container">
          <p class="line-1">Sábado</p>
          <p class="line-2">20 de janeiro</p>
          <p class="line-3">inscrições somente às</p>
          <p class="line-4">09:00 - 10:00 - 11:00 - 12:00 ou 13:00</p>
          <p class="line-5">polo de atendimento</p>
          <p class="line-6">cinema do shopping la plage</p>
          <p class="line-7">av. mal. deodoro da fonseca, 88</p>
          <p class="line-8">pitangueiras - guarujá - sp</p>
          <p class="line-9">(Chegar com 10 minutos de antecedencia)</p>
        </div>
      </div>
    </div>
    <div class="container right">
      <div class="container">
        <div class="container item row header">
          <p>Feira Tecnológica de Profissões</p>
        </div>
        <div class="container item row">
          <div class="round icon container"></div>
          <p>operador de computador</p>
        </div>
        <div class="container item row">
          <p>designer gráfico 3d</p>
          <div class="round icon container"></div>
        </div>
        <div class="container item row">
          <div class="round icon container"></div>
          <p>web designer / hardware</p>
        </div>
        <div class="container item row">
          <p>desenvolvedor de games</p>
          <div class="round icon container"></div>
        </div>
        <div class="container item row">
          <div class="round icon container"></div>
          <p>edição de vídeos e música</p>
        </div>
        <div class="container item row">
          <p>assistente de contabilidade</p>
          <div class="round icon container"><i class="fa fa-usd"></i></div>
        </div>
        <div class="container item row">
          <div class="round icon container"><i class="fa fa-briefcase"></i></div>
          <p>gestão empresarial (ADM)</p>
        </div>
        <div class="container item row">
          <p>inglês com conversação</p>
          <div class="round icon container"><i class="fa fa-book"></i></div>
        </div>
        <div class="container item row">
          <div class="round icon container"><i class="fa fa-youtube-play"></i></div>
          <p>youtubers</p>
        </div>
        <div class="container item row">
          <p>e muito mais</p>
          <div class="round icon container"><i class="fa fa-plus"></i></div>
        </div>
        <div class="container item footer row">
          <p>Menores Acompanhados com pais ou responsáveis</p>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

script.js

$(document).ready(function(){
  $('.icon').each(function(){
    $(this).css('background-color','#'+Math.random().toString(16).substr(-6))
  })
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.scss

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

$color-light: #fff;
$color-dark: #444;
$color-dark-2: #555;
$color-red: #eecc33;
$color-yellow: #f0a30a;

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: $color-light;
  text-align: center;
  overflow: hidden;
}

.round {
  border-radius: 50%;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.inner > * {
  animation: fade 1s 1 ease-in-out;
}

@keyframes bgfade {
  0% {
    background-color: $color-dark;
  }
  50% {
    background-color: $color-dark-2;
  }
  100% {
    background-color: $color-dark;
  }
}
.bgfade {
  animation: bgfade 3s infinite ease-in-out;
}

@keyframes bounce {
  0% {
    transform: translateY(-15px);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-15px);
  }
}
.bounce {
  animation: bounce 6s infinite ease-in-out;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.is-1 {
  flex: 1;
}

.is-2 {
  flex: 2;
}

.wrapper {
  background-color: $color-dark;
  padding: 15px;
  min-height: 75vh;
  min-width: 90vw;
  flex-direction: column;
}

.inner {
  width: 90vw;
  height: 70vh;
  border: 5px solid $color-red;
}

.inner > div {
  margin: 0 15px;
}

.left,
.right {
  flex: 1;
}

.left > p {
  font-size: 2.5vh;
}

.middle {
  justify-content: space-between;
  flex: 2;
  height: 100%;
}
.right {
  flex-direction: column;
}

.row {
  flex-direction: row;
}

.right > .container {
  height: 100%;
  flex-wrap: wrap;
}

.header {
  width: 100;
}

h1 {
  width: 100%;
  margin: 0;
  text-align: justify;
  font-size: 3em;
  text-align: center;
}

.item {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  color: $color-dark;
  text-transform: uppercase;
}

.icon {
  width: 32px;
  height: 32px;
  background-color: $color-light;
}

.item:nth-child(even) > .icon {
  position: relative;
  top: 0;
  left: 20px;
}
.item:nth-child(odd) > .icon {
  position: relative;
  float: right;
  top: 0;
  right: 20px;
}

.item > p {
  border-radius: 5px;
  background-color: $color-light;
  width: 80%;
  margin: 5px 0;
  font-size: 2vh;
}

.event-info {
  flex-direction: column;
}

.event-info p {
  width: 100%;
  margin: 0;
}

.header > p {
  padding: 2px;
  border-radius: 5px;
}

i {
  color: $color-light;
}

.line-1,
.line-2,
.line-3,
.line-4,
.line-5,
.line-6,
.line-7,
.line-8,
.line-9 {
  text-transform: uppercase;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.line-1,
.line-3 {
  color: $color-red;
}

.line-5,
.line-6 {
  color: $color-yellow;
}

.line-1 {
  font-size: 10vh;
}

.line-2 {
  font-size: 2.3em;
}

.line-3 {
  font-size: 1.3em;
}

.line-4 {
  font-size: 0.9em;
}

.line-5 {
  font-size: 0.8em;
}

.line-6 {
  font-size: 1.05em;
}

.line-7 {
  font-size: 0.95em;
}

.line-8 {
  font-size: 1em;
}

.line-9 {
  margin-top: 15px !important;
  font-size: 0.7em;
}

.ghost {
  width: 250px;
  height: 250px;
}
.ghost-2 {
  background-color: $color-light;
  color: $color-dark;
  width: 80px;
  height: 80px;
}
img.bounce {
  position: fixed;
  bottom: 80px;
  width: 80vh;
  height: auto;
}

.header {
  width: 100%;
}
.header > p {
  width: 100%;
  font-size: 2.5vh;
}

.footer {
  margin-top: 10px;
}

.footer > p {
  background-color: transparent;
  color: $color-light !important;
  text-transform: uppercase;
  font-size: 2vh;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

ypqjqg.markdown

ypQjqg

A Pen by Guilherme Aguiar on CodePen.

License.