<header>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<div class="Header-wrapper">
<h1>Count To Target with Attributes +</h1>
</div>
</header>
<body>
<div class="container">
<div class="count-up">
<p class="counter-count" wt-countup-element='counter' wt-countup-target="150">150</p>
<h3>Counter 1</h3>
</div>
<div class="count-up">
<p class="counter-count" wt-countup-element='counter' wt-countup-target="10650" wt-countup-prefix="$" wt-countup-suffix="CAD" wt-countup-step="10"></p>
<h3>Counter 2</h3>
</div>
<div class="count-up">
<p class="counter-count"wt-countup-element='counter' wt-countup-target="6000" wt-countup-prefix="~" wt-countup-suffix="K">300</p>
<h3>Counter 3</h3>
</div>
<div class="count-up">
<p class="counter-count"wt-countup-element='counter' wt-countup-target="2300" wt-countup-prefix="^" wt-countup-suffix="km" wt-countup-step="10">400</p>
<h3>Counter 4</h3>
</div>
</div>
</body>html, body, * {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
color: #e3e3e3;
}
header {
background-color: #000000;
color: #ffffff;
padding: 20px;
display: flex;
aligh-items: center;
justify-content: center;
}
h1, h3 {
text-transform: uppercase;
}
h1 {
font-size: 5svw;
}
h3 {
font-size: 3svw;
}
.container {
display: flex;
align-items: center;
justify-content: center;
gap: 3rem;
height: 100svh;
background: linear-gradient(
238deg,
rgba(68, 105, 247, 1) 0%,
rgba(246, 91, 245, 1) 100%
);
}
.count-up {
font-size: 2.5svw;
font-weight: bold;
position: relative;
color: #000000;
text-align: center;
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 50px 20px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
External CSS
This Pen doesn't use any external CSS resources.