It's Working page

index.html

<div class="box">
  <div class="ball-container">
    <div class="ball"></div>
  </div>
</div>
<div class="hello-box">
<h1>Olá, mundo! :D</h1>
  <p>Se você pode ver essa página, sorria: Está funcionando!</p>
  <p>Agora vá pegar um café. Você merece, garotão! ;-)</p>
</div>

it-s-working-page.markdown

It's Working page

Página de testes

A Pen by Maique Almeida on CodePen.

License.

style.css

body, html {
  background-color: #1c2024;
}

.box {
  position: absolute;
  top: 80px;
  left: 50%;
  margin: auto;
  
  margin-left: -130px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 30px solid #e3dbe3;
  animation: container-move .7s ease-in-out infinite alternate;
}

@keyframes container-move {
  from {transform: translateX(20px) rotate(10deg); }
  to   {transform: translateX(-20px) rotate(-10deg); }
}

.box::before {
  content: '';
  height: 130px;
  width: 260px;
  background-color: #1c2024;
  display: inline-block;
  position: relative;
  top: -35px;
  left: -30px;
}

.ball {
  width: 50px;
  height: 50px;
  background-color: #e1c207;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 75px;
}

.ball-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: ball-move .7s ease-in-out infinite alternate;
}

@keyframes ball-move {
  from {transform: rotate(-35deg);}
  to   {transform: rotate(35deg);}
}

.hello-box {
  width: 500px;
  color: #FFF;
  text-align: center;
  position: absolute;
  top: 10px;
  
  left: 50%;
  
  margin-left: -250px;
}