<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 – 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.