<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
</head>

<section class="section-promo">
  <div class="circle-text">
    <span class="wrap-el" aria-hidden="true"></span>
    <h2 id="you-want">You want to protect the climate?</h2>
    <!--<h2 id="you-want">Protect the environment that sustains us all</h2>-->
    <!--<h2 id="you-want">Working together to sustain a living planet</h2>-->
    <p>Everyone leaves a carbon footprint. Currently it’s just too high, with the average European having a carbon footprint of around <strong>9 tonnes</strong> per year. To stop global warming, we need to reduce it to <strong>under 1 tonne</strong>. Unfortunately, that’s hardly possible in our world today.</p>
    <p>And hey &ndash; nobody is perfect, and change doesn’t happen instantly.</p>
  </div>
  <div class="average-footprint">
    <div class="footprint-cell">
      <p>1 TONNE</p>
    </div>
    <div class="footprint-cell">
      <p>2 TONNE</p>
    </div>
    <div class="footprint-cell">
      <p>3 TONNE</p>
    </div>
    <div class="footprint-cell">
      <p>4 TONNE</p>
    </div>
    <div class="footprint-cell">
      <p>5 TONNE</p>
    </div>
    <div class="footprint-cell">
      <p>6 TONNE</p>
    </div>
    <div class="footprint-cell">
      <p>7 TONNE</p>
    </div>
    <div class="footprint-cell">
      <p>8 TONNE</p>
    </div>
    <div class="footprint-cell">
      <p>9 TONNE</p>
    </div>
  </div>
  <div class="goal-footprint">
    <div class="footprint-cell">1 TONNE</div>
    <div class="footprint-cell"></div>
    <div class="footprint-cell"></div>
    <div class="footprint-cell"></div>
    <div class="footprint-cell"></div>
    <div class="footprint-cell"></div>
    <div class="footprint-cell"></div>
    <div class="footprint-cell"></div>
    <div class="footprint-cell"></div>
  </div>
</section>
@import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css");

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", "Avenir Next", "Avenir", "Futura", sans-serif;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  text-decoration-skip-ink: auto;
  text-rendering: optimizeLegibility;
}

h2,
p {
  margin: 0;
}

.section-promo {
  display: flex;
  flex-wrap: wrap;
  padding: 9vh 0;
  background: /*linear-gradient(115deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%, rgba(255,255,255,0) 40%,rgba(255,255,255,0) 80%), 
                  linear-gradient(20deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 20%, rgba(255,255,255,0) 40%,rgba(255,255,255,0) 80%),*/ url(https://i.postimg.cc/BnYyd149/atmosphere-smoke.jpg)
    no-repeat right bottom / cover;
}

.circle-text {
  width: 700px;
  height: 700px;
  position: relative;
  text-align: center;
  margin-left: 10vw;
  background: url(https://i.postimg.cc/jSSDjPrg/world-layout-light.png)
      no-repeat center center / cover,
    radial-gradient(
      circle farthest-side at 100% 0%,
      rgba(59, 168, 181, 0.9) 0%,
      rgba(1, 1, 56, 0.95) 120%,
      rgba(1, 1, 56, 0) 125.3%
    );
  /*mix-blend-mode: multiply;*/
  border-radius: 50%;
  overflow: hidden;
  color: white;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

.wrap-el::before {
  content: "";
  width: 50%;
  height: 100%;
  float: left;
  --left-bg-shape: radial-gradient(
    circle farthest-side at 100% 50%,
    transparent 99.7%,
    rgba(30, 85, 119, 0.1) 100%
  );
  background: var(--left-bg-shape);
  /*shape-outside: var(--left-bg-shape);
  ORIGINAL
  shape-outside: polygon(0% 0%, 100% 0%, 84.36% .62%, 69.1% 2.45%, 54.6% 5.45%, 41.22% 9.55%, 29.29% 14.64%, 19.1% 20.61%, 10.9% 27.3%, 4.89% 34.55%, 1.23% 42.18%, 0% 50%, 1.23% 57.82%, 4.89% 65.45%, 10.9% 72.7%, 19.1% 79.39%, 29.29% 85.36%, 29.29% 85.36%, 41.22% 90.45%, 54.6% 94.55%, 69.1% 97.55%, 84.36% 99.38%, 100% 100%, 0% 100%);*/
  shape-outside: polygon(
    0% 0%,
    100% 0%,
    84.36% 0.62%,
    69.1% 2.45%,
    54.6% 5.45%,
    41.22% 9.55%,
    29.29% 14.64%,
    0% 20%,
    0% 27%,
    4.89% 34.55%,
    1.23% 42.18%,
    0% 50%,
    1.23% 57.82%,
    4.89% 65.45%,
    10.9% 72.7%,
    19.1% 79.39%,
    29.29% 85.36%,
    29.29% 85.36%,
    41.22% 90.45%,
    54.6% 94.55%,
    69.1% 97.55%,
    84.36% 99.38%,
    100% 100%,
    0% 100%
  );
  shape-margin: 4.4%;
}

.wrap-el::after {
  content: "";
  width: 50%;
  height: 100%;
  float: right;
  --right-bg-shape: radial-gradient(
    circle farthest-side at 0% 50%,
    transparent 99.7%,
    rgba(30, 85, 119, 0.1) 100%
  );
  background: var(--right-bg-shape);
  /*shape-outside: var(--right-bg-shape);
  ORIGINAL
  shape-outside: polygon(100% 0%, 0% 0%, 15.64% .62%, 30.9% 2.45%, 45.4% 5.45%, 58.78% 9.55%, 70.71% 14.64%, 80.9% 20.61%, 89.1% 27.3%, 95.11% 34.55%, 98.77% 42.18%, 100% 50%, 98.77% 57.82%, 95.11% 65.45%, 89.1% 72.7%, 80.9% 79.39%, 70.71% 85.36%, 70.71% 85.36%, 58.78% 90.45%, 45.4% 94.55%, 30.9% 97.55%, 15.64% 99.38%, 0% 100%, 100% 100%);*/
  shape-outside: polygon(
    100% 0%,
    0% 0%,
    15.64% 0.62%,
    30.9% 2.45%,
    45.4% 5.45%,
    58.78% 9.55%,
    70.71% 14.64%,
    100% 20%,
    100% 27%,
    95.11% 34.55%,
    98.77% 42.18%,
    100% 50%,
    98.77% 57.82%,
    95.11% 65.45%,
    89.1% 72.7%,
    80.9% 79.39%,
    70.71% 85.36%,
    70.71% 85.36%,
    58.78% 90.45%,
    45.4% 94.55%,
    30.9% 97.55%,
    15.64% 99.38%,
    0% 100%,
    100% 100%
  );
  shape-margin: 4.4%;
}

#you-want {
  font-size: 55px;
  line-height: 1.2;
  margin-bottom: 2.5rem;
}

.circle-text p {
  margin-bottom: 1.5rem;
}

.footprint-cell {
  font-size: 1.9rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.5);
}

.average-footprint {
  display: grid;
  gap: 10px;
  margin-left: auto;
  grid-template-areas:
    "nine-tonne"
    "eight-tonne"
    "seven-tonne"
    "six-tonne"
    "five-tonne"
    "four-tonne"
    "three-tonne"
    "two-tonne"
    "one-tonne";
  position: relative;
}

.average-footprint::before {
  content: "Average \A carbon footprint";
  position: absolute;
  top: -55px;
  font-size: 18px;
  text-transform: uppercase;
  white-space: pre-wrap;
  color: #fff;
  letter-spacing: 0.1em;
  line-height: 1.3;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
  opacity: 0.8;
}

.average-footprint .footprint-cell {
  background: #fff;
  /*mix-blend-mode: multiply;
  mix-blend-mode: overlay;*/
  mix-blend-mode: color-burn;
}

.average-footprint .footprint-cell:nth-child(1) {
  grid-area: one-tonne;
  background: linear-gradient(
    to bottom,
    rgba(140, 204, 69, 0.98) 0%,
    rgba(17, 153, 142, 0.98) 100%
  );
}

.average-footprint .footprint-cell:nth-child(2) {
  grid-area: two-tonne;
  background: linear-gradient(
    to bottom,
    rgba(254, 246, 2, 0.98) 0%,
    rgba(157, 211, 59, 0.98) 100%
  );
}

.average-footprint .footprint-cell:nth-child(3) {
  grid-area: three-tonne;
  background: linear-gradient(
    to bottom,
    rgba(251, 225, 9, 0.98) 0%,
    rgba(254, 243, 3, 0.98) 100%
  );
}

.average-footprint .footprint-cell:nth-child(4) {
  grid-area: four-tonne;
  background: linear-gradient(
    to bottom,
    rgba(249, 203, 16, 0.98) 0%,
    rgba(251, 222, 10, 0.98) 100%
  );
}

.average-footprint .footprint-cell:nth-child(5) {
  grid-area: five-tonne;
  background: linear-gradient(
    to bottom,
    rgba(246, 182, 23, 0.98) 0%,
    rgba(248, 201, 17, 0.98) 100%
  );
}

.average-footprint .footprint-cell:nth-child(6) {
  grid-area: six-tonne;
  background: linear-gradient(
    to bottom,
    rgba(244, 148, 23, 0.98) 0%,
    rgba(246, 179, 24, 0.98) 100%
  );
}

.average-footprint .footprint-cell:nth-child(7) {
  grid-area: seven-tonne;
  background: linear-gradient(
    to bottom,
    rgba(243, 105, 21, 0.98) 0%,
    rgba(244, 142, 23, 0.98) 100%
  );
}

.average-footprint .footprint-cell:nth-child(8) {
  grid-area: eight-tonne;
  background: linear-gradient(
    to bottom,
    rgba(242, 62, 18, 0.98) 0%,
    rgba(243, 101, 21, 0.98) 100%
  );
}

.average-footprint .footprint-cell:nth-child(9) {
  grid-area: nine-tonne;
  background: linear-gradient(
    to bottom,
    rgba(241, 39, 17, 0.98) 0%,
    rgba(242, 58, 18, 0.98) 100%
  );
}

.goal-footprint {
  display: grid;
  gap: 10px;
  grid-auto-rows: 1fr;
  margin-left: 4rem;
  margin-right: 4rem;
  position: relative;
}

.goal-footprint::before {
  content: "Goal \A carbon footprint";
  position: absolute;
  top: -55px;
  font-size: 18px;
  text-transform: uppercase;
  white-space: pre-wrap;
  color: #fff;
  letter-spacing: 0.1em;
  line-height: 1.3;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
  opacity: 0.8;
}

.goal-footprint::before::first-line {
  font-weight: bold;
}

.goal-footprint .footprint-cell:not(:nth-child(1)) {
  border: 1px dashed rgba(0, 0, 0, 0.5);
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MSA1MSI+PHBhdGggZD0iTTI1LjUuNUMxMS43LjUuNSAxMS43LjUgMjUuNXMxMS4yIDI1IDI1IDI1IDI1LTExLjIgMjUtMjUtMTEuMi0yNS0yNS0yNXptMCA0Mi41TDggMjUuNWgxMC4yVjhoMTQuNnYxNy41SDQzTDI1LjUgNDN6IiBvcGFjaXR5PSIuMyIvPjwvc3ZnPg==")
      center center no-repeat,
    rgba(0, 0, 0, 0.4);
  background-size: 46px, cover;
  mix-blend-mode: overlay;
}

.goal-footprint .footprint-cell:nth-child(1) {
  grid-row: 9;
  mix-blend-mode: color-burn;
  background: linear-gradient(
    to bottom,
    rgba(140, 204, 69, 0.98) 0%,
    rgba(17, 153, 142, 0.98) 100%
  );
}

.goal-footprint .footprint-cell:nth-child(2) {
  background-size: 60px, cover;
}

.goal-footprint .footprint-cell:nth-child(3) {
  background-size: 56px, cover;
}

.goal-footprint .footprint-cell:nth-child(4) {
  background-size: 52px, cover;
}

.goal-footprint .footprint-cell:nth-child(5) {
  background-size: 48px, cover;
}

.goal-footprint .footprint-cell:nth-child(6) {
  background-size: 44px, cover;
}

.goal-footprint .footprint-cell:nth-child(7) {
  background-size: 40px, cover;
}

.goal-footprint .footprint-cell:nth-child(8) {
  background-size: 36px, cover;
}

.goal-footprint .footprint-cell:nth-child(9) {
  background-size: 32px, cover;
}

.footprint-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14vw;
  min-width: 245px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.