Stats preview card component challenge on Frontend Mentor @rayen-code

Rayen

This is a solution to the [Stats preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62). Frontend Mentor challenges help you improve your coding skills by building realistic projects.




Step 1: HTML Markup:

Start 
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Frontend Mentor | Stats preview card component</title>

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap');
  </style>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="container-fluid">
    <div class="row wrapper">

      <div class="col-md-6 col-12 order-md-1 order-2 text-center text-md-center area details">
        <h1 class="header">
          Get <span class="high-light">insights</span> that help your business grow.
        </h1>
        <p class="desc">
          Discover the benefits of data analytics and make better decisions regarding revenue, customer 
  experience, and overall efficiency.
        </p>
        <div class="row stat">
          <div class="col-12 col-sm-4">
            <div class="number">
              10k+
            </div>
            <div class="tag">
              companies
            </div>
          </div>
          <div class="col-12 col-sm-4">
            <div class="number">
              314
            </div>
            <div class="tag">
              templates
            </div>
          </div>
          <div class="col-12 col-sm-4">
            <div class="number">
              12m+
            </div>
            <div class="tag">
              queries
            </div>
          </div>
        </div>
      </div>


      <div class="col-md-6 col-12 order-md-2 order-1 area">
           <div class="bg-image"></div>
      </div>

    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) 
/*-------------------- CSS --------------------*/
*{
margin: 0;
padding: 0;
}
:root{
    --inter: 'Inter', sans-serif;
    --lexend: 'Lexend Deca', sans-serif;
}
body{
    background: hsl(233, 47%, 7%);
    min-height: 100vh;
    color: white;
}

.container-fluid{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.wrapper{
    max-width: 1110px;
    background: hsl(244, 38%, 16%);
    border-radius: 8px;
    overflow: hidden;
}

.area{
    padding: 0;
    margin: 0;
}

.details{
    padding: 72px;
}

.header{
    font-family: var(--inter);
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 28px;
}

.high-light{
    color: hsl(277, 64%, 61%);
}

.desc{
    color: hsla(0, 0%, 100%, 0.75);
    font-size: 15px;
    font-family: var(--lexend);
    font-weight: 400;
    margin-bottom: 78px;
}

.number{
    font-family: var(--inter);
    font-weight: 700;
    font-size: 1.2rem;
}

.tag{
    font-family: var(--inter);
    text-transform: uppercase;
    font-size: 12px;
    color: hsla(0, 0%, 100%, 0.6);
}

.bg-image{
    background: url(images/image-header-desktop.jpg);
    height: 444px;
    width: 100%;
    background-size: cover;
    position: relative;
}

.bg-image::before{
    content: "";
    background: hsl(277, 64%, 61%);
    height: 100%;
    width: 100%;
    position: absolute;
    opacity: 0.5;
    left: 0;
    top: 0;
    overflow: hidden;
}

@media only screen and (max-width: 960px){
    .details{
        padding: 32px;
    }
}
@media only screen and (max-width: 767px){
    .desc{
        margin-bottom: 32px;
    }
    .tag{
        margin-bottom: 15px;
    }
}

@media only screen and (max-width: 375px){
    .bg-image{
        background: url(images/image-header-mobile.jpg);
        height: 240px;
    }
}

Congratulations!

0 Comments