Blog

Challenge CSS Walkthrough

Stats preview card walkthrough

This is a great small challenge to help get you used to, building to a design. Test your HTML & CSS skills.

Ragav Kumar V

Jan 14, 2023 · 2 min read

Let's build this challenge from frontendmentor.io

Setup

Let's start with an empty section

index.html

src/styles.css

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <section></section>
    <script src="src/index.js"></script>
  </body>
</html>

Open this example in CodeSandbox

Adding two container

Card content
Office image

index.html

src/styles.css

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <section>
      <div class="card-content"></div>
      <div class="office-image"></div>
    </section>
    <script src="src/index.js"></script>
  </body>
</html>

Adding image cover

Adding office cover as a background to mix with a nice color ✨
blend-mode is like Insta filter
Choose the best filter to match with color you chose

index.html

src/styles.css

@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
:root {
  font-size: 15px;
}
section {
  display: flex;
  background: hsl(244, 38%, 16%);
  color: hsl(0, 0%, 100%);
  border-radius: 2rem;
  overflow: hidden;
  flex-direction: column-reverse;
  text-align: center;
}
.card-content {
  padding: 2rem;
}
.office-image {
  background: url(https://www.incimages.com/uploaded_files/image/1920x1080/getty_533979847_128300.jpg),
    hsl(277, 64%, 61%);
  min-height: 20rem;
  width: 100%;
  background-size: cover;
  background-blend-mode: luminosity;
  background-overflow: hidden;
  /*   width: 100px; */
}

Card Content

Heading content
Para content

index.html

src/styles.css

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <section>
      <div class="card-content">
        <h2>
          Get <span class="insight">insights</span> that help your business
          grow.
        </h2>
        <p class="card-info">
          Discover the benefits of data analytics and make better decisions
          regarding revenue, customer experience, and overall efficiency.
        </p>
        <div class="card-social-media"></div>
      </div>
      <div class="office-image"></div>
    </section>
    <script src="src/index.js"></script>
  </body>
</html>

Card Info

Reduce the size of para a tat

index.html

src/styles.css

@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
:root {
  font-size: 15px;
}
section {
  display: flex;
  background: hsl(244, 38%, 16%);
  color: hsl(0, 0%, 100%);
  border-radius: 2rem;
  overflow: hidden;
  flex-direction: column-reverse;
  text-align: center;
}
.card-content {
  padding: 2rem;
}
.office-image {
  background: url(https://www.incimages.com/uploaded_files/image/1920x1080/getty_533979847_128300.jpg),
    hsl(277, 64%, 61%);
  min-height: 20rem;
  width: 100%;
  background-size: cover;
  background-blend-mode: luminosity;
  background-overflow: hidden;
  /*   width: 100px; */
}
.card-info {
  font-size: 0.8rem;
}

Stats of the companies

index.html

src/styles.css

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <section>
      <div class="card-content">
        <h2>
          Get <span class="insight">insights</span> that help your business
          grow.
        </h2>
        <p class="card-info">
          Discover the benefits of data analytics and make better decisions
          regarding revenue, customer experience, and overall efficiency.
        </p>
        <div class="card-social-media">
          <div>
            <p>10k+</p>
            <p>companies</p>
          </div>
          <div>
            <p>314</p>
            <p>templates</p>
          </div>
          <div>
            <p>12m+</p>
            <p>queries</p>
          </div>
        </div>
      </div>
      <div class="office-image"></div>
    </section>
    <script src="src/index.js"></script>
  </body>
</html>

Center the stats

Align the data in the center

index.html

src/styles.css

@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
:root {
  font-size: 15px;
}
section {
  display: flex;
  background: hsl(244, 38%, 16%);
  color: hsl(0, 0%, 100%);
  border-radius: 2rem;
  overflow: hidden;
  flex-direction: column-reverse;
  text-align: center;
}
.card-content {
  padding: 2rem;
}
.office-image {
  background: url(https://www.incimages.com/uploaded_files/image/1920x1080/getty_533979847_128300.jpg),
    hsl(277, 64%, 61%);
  min-height: 20rem;
  width: 100%;
  background-size: cover;
  background-blend-mode: luminosity;
  background-overflow: hidden;
  /*   width: 100px; */
}
.card-info {
  font-size: 0.8rem;
}
.card-social-media {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

Count styling helper

Adding class to count to style easier

index.html

src/styles.css

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <section>
      <div class="card-content">
        <h2>
          Get <span class="insight">insights</span> that help your business
          grow.
        </h2>
        <p class="card-info">
          Discover the benefits of data analytics and make better decisions
          regarding revenue, customer experience, and overall efficiency.
        </p>
        <div class="card-social-media">
          <div>
            <p class="card-count">10k+</p>
            <p>companies</p>
          </div>
          <div>
            <p class="card-count">314</p>
            <p>templates</p>
          </div>
          <div>
            <p class="card-count">12m+</p>
            <p>queries</p>
          </div>
        </div>
      </div>
      <div class="office-image"></div>
    </section>
    <script src="src/index.js"></script>
  </body>
</html>

Count styling

Fancy 🎉 text gradient on the count
Uppercase on the next para to count & sliming it

index.html

src/styles.css

@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
:root {
  font-size: 15px;
}
section {
  display: flex;
  background: hsl(244, 38%, 16%);
  color: hsl(0, 0%, 100%);
  border-radius: 2rem;
  overflow: hidden;
  flex-direction: column-reverse;
  text-align: center;
}
.card-content {
  padding: 2rem;
}
.office-image {
  background: url(https://www.incimages.com/uploaded_files/image/1920x1080/getty_533979847_128300.jpg),
    hsl(277, 64%, 61%);
  min-height: 20rem;
  width: 100%;
  background-size: cover;
  background-blend-mode: luminosity;
  background-overflow: hidden;
  /*   width: 100px; */
}
.card-info {
  font-size: 0.8rem;
}
.card-social-media {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.card-count {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 5px;
  background: linear-gradient(to left, hsl(277, 64%, 61%) 10%, #30cfd0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.card-count + p {
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 100;
  margin: 0px;
}

Responsiveness

Side by side on a bigger screen
Align left

index.html

src/styles.css

@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
:root {
  font-size: 15px;
}
section {
  display: flex;
  background: hsl(244, 38%, 16%);
  color: hsl(0, 0%, 100%);
  border-radius: 2rem;
  overflow: hidden;
  flex-direction: column-reverse;
  text-align: center;
}
.card-content {
  padding: 2rem;
}
.office-image {
  background: url(https://www.incimages.com/uploaded_files/image/1920x1080/getty_533979847_128300.jpg),
    hsl(277, 64%, 61%);
  min-height: 20rem;
  width: 100%;
  background-size: cover;
  background-blend-mode: luminosity;
  background-overflow: hidden;
  /*   width: 100px; */
}
.card-info {
  font-size: 0.8rem;
}
.card-social-media {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.card-count {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 5px;
  background: linear-gradient(to left, hsl(277, 64%, 61%) 10%, #30cfd0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.card-count + p {
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 100;
  margin: 0px;
}
/* Responsive layout */
/* 475px - breakpoint */
@media (min-width: 600px) {
  section {
    flex-direction: row;
    text-align: left;
  }
  .office-image {
    background: url(https://www.incimages.com/uploaded_files/image/1920x1080/getty_533979847_128300.jpg),
      orchid;
    background-size: cover;
  }
  .card-social-media {
    flex-direction: row;
  }
}

Glitter ✨

Background with a beautiful gradient
Nicer font-style lifts the entire app to the next level
Center the whole thing on the page

index.html

src/styles.css

@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
:root {
  font-size: 15px;
}
section {
  display: flex;
  background: hsl(244, 38%, 16%);
  color: hsl(0, 0%, 100%);
  border-radius: 2rem;
  overflow: hidden;
  flex-direction: column-reverse;
  text-align: center;
}
.card-content {
  padding: 2rem;
}
.office-image {
  background: url(https://www.incimages.com/uploaded_files/image/1920x1080/getty_533979847_128300.jpg),
    hsl(277, 64%, 61%);
  min-height: 20rem;
  width: 100%;
  background-size: cover;
  background-blend-mode: luminosity;
  background-overflow: hidden;
  /*   width: 100px; */
}
.card-info {
  font-size: 0.8rem;
}
.card-social-media {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.card-count {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 5px;
  background: linear-gradient(to left, hsl(277, 64%, 61%) 10%, #30cfd0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.card-count + p {
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 100;
  margin: 0px;
}
/* Responsive layout */
/* 475px - breakpoint */
@media (min-width: 600px) {
  section {
    flex-direction: row;
    text-align: left;
  }
  .office-image {
    background: url(https://www.incimages.com/uploaded_files/image/1920x1080/getty_533979847_128300.jpg),
      orchid;
    background-size: cover;
  }
  .card-social-media {
    flex-direction: row;
  }
}
body {
  font-family: "Lexend Deca", sans-serif;
  /*   background: hsl(233, 47%, 7%); */
  background-image: linear-gradient(
    to right top,
    #051937,
    #33275d,
    #6f2d78,
    #b12681,
    #f01a78
  );
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

Open this example in CodeSandbox

Setup

Let's start with an empty section

Adding two container

Card content
Office image

Adding image cover

Adding office cover as a background to mix with a nice color ✨
blend-mode is like Insta filter
Choose the best filter to match with color you chose

Card Content

Heading content
Para content

Card Info

Reduce the size of para a tat

Stats of the companies

Center the stats

Align the data in the center

Count styling helper

Adding class to count to style easier

Count styling

Fancy 🎉 text gradient on the count
Uppercase on the next para to count & sliming it

Responsiveness

Side by side on a bigger screen
Align left

Glitter ✨

Background with a beautiful gradient
Nicer font-style lifts the entire app to the next level
Center the whole thing on the page

index.html

src/styles.css

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <section></section>
    <script src="src/index.js"></script>
  </body>
</html>

Open this example in CodeSandbox

@ragavkumarv

swipe to next ➡️

Blog

Stats preview card walkthrough

Setup

Adding two container

Adding image cover

Card Content

Card Info

Card social media

Center the stats

Count styling helper

Count styling

Responsiveness

Glitter ✨

Setup

Adding two container

Adding image cover

Card Content

Card Info

Card social media

Center the stats

Count styling helper

Count styling

Responsiveness

Glitter ✨