<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="card">
      <div class="wrapper">
        <h1>Design</h1>
        <p class="dim">Sed ut perspiciatis unde</p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor
        </p>
        <p class="dim">
          At vero eos et accusamus et iusto odio dignissimos ducimus qui
          blanditiis praesentium voluptatum
        </p>
      </div>
    </div>
    <div class="shade-1"></div>
    <div class="shade-2"></div>
  </body>
</html>

/** original design https://dribbble.com/shots/4941238-One-Minimal-Festival-Homepage-Alternative-Version-Animation */
:root {
  font-size: 16px;
  font-family: Futura;
  --bg-color: #010101;
  --w: 370px;
  --h: 450px;
  --gap: 2rem;
  --c1-color: #f8a3bc;
  --c2-color: #fec2d4;
}
body {
  padding: 0;
  margin: 0;
  background: var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
}
.card,
.shade-1,
.shade-2 {
  border: 2px solid rgba(255, 255, 255, 0.4);
}
.card {
  position: absolute;
  max-width: var(--w);
  color: white;
  animation: pendulum 1s cubic-bezier(0.6, 0, 1, 1) infinite;
  animation-direction: alternate;
  top: calc(50% - 570px / 2);
  left: calc(50% - 370px / 2);
}
.card .wrapper {
  padding: 4rem 2rem;
  background: var(--bg-color);
}
.card h1 {
  font-size: 3rem;
  font-weight: bold;
}
.card p {
  font-weight: 200;
  line-height: 2;
}
.dim {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4rem;
}

.shade-1,
.shade-2 {
  width: 370px;
  height: 570px;
  position: absolute;
}
.shade-1 {
  top: calc(50% - 570px / 2 + var(--gap));
  left: calc(50% - 370px / 2 + var(--gap));
  animation: pendulum 1s cubic-bezier(0.3, 0, 1, 1) infinite;
  animation-direction: alternate;

  background: var(--c1-color);
  z-index: -1;
}
.shade-2 {
  top: calc(50% - 570px / 2 + var(--gap) * 2);
  left: calc(50% - 370px / 2 + var(--gap) * 2);

  animation: pendulum 1s cubic-bezier(0.1, 0, 1, 1) infinite;
  animation-direction: alternate;

  background: var(--c2-color);
  z-index: -2;
}

@keyframes pendulum {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(1500px);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.