<!-- MORE SECTIONS HERE -->

<section>
  <div class="container">
    <h1>Some stats about our company</h1>
    <ul class="grid">
      <li>
        <figure>
          <div id="award" class="animated"></div>
          <figcaption>
            <p class="counter">30+</p>
            <p>Awards received</p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <div id="support" class="animated"></div>
          <figcaption>
            <p class="counter">24/7</p>
            <p>Service availability</p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <div id="coffee" class="animated"></div>
          <figcaption>
            <p class="counter">40+</p>
            <p>Caps of coffee per day</p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <div id="forum" class="animated"></div>
          <figcaption>
            <p class="counter">10</p>
            <p>Support forums</p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <div id="bulb" class="animated"></div>
          <figcaption>
            <p class="counter">300+</p>
            <p>Successful projects</p>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <div id="clock" class="animated"></div>
          <figcaption>
            <p class="counter">7</p>
            <p>Working hours per day</p>
          </figcaption>
        </figure>
      </li>
    </ul>
  </div>
</section>

<!-- MORE SECTIONS HERE -->

<button type="button" class="contact animated" id="contact"></button>

<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>
/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --black: #05122f;
  --lightbeize: #fdfdee;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

body {
  margin: 50px 0 100px;
  text-align: center;
  color: var(--black);
  font-size: 20px;
  font-family: "Ubuntu", sans-serif;
}

.container {
  max-width: 1000px;
  padding: 0 15px;
  margin: 0 auto;
}


/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.grid {
  display: grid;
  grid-gap: 50px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 50px;
}

.grid li {
  display: flex;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  background: var(--lightbeize);
  padding: 40px;
}

.grid figure {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid figcaption {
  margin-top: 20px;
}

.grid .counter {
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 10px;
}

.contact {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  max-width: 80px;
}


@media screen and (max-width: 700px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 450px) {
  .grid {
    grid-template-columns: repeat(1, 1fr);
  }
}


/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 20px;
  display: flex;
  align-items: center;
  padding: 5px;
  font-size: 16px;
}

.page-footer a {
  margin-left: 4px;
}
const animatedEls = document.querySelectorAll(".animated");

for (const animatedEl of animatedEls) {
  const id = animatedEl.id;
  lottie.loadAnimation({
    container: document.getElementById(id),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: `https://assets.codepen.io/162656/${id}.json`
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js