Frontend Mentor Result Summary Component

Frontend Mentor Result Summary Component

Frontend Mentor Result Summary Component it is a nice challenge to test out your CSS skills. To get started, I recommend downloading the starter files first. Starter Files:

https://www.frontendmentor.io/challenges/results-summary-component-CE_K6s0maV

In case you want a video tutorial...

HTML CODE

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
    />
    <link rel="stylesheet" href="./style.css" />
    <title>Frontend Mentor | Results summary component</title>
  </head>
  <body>
    <div class="container">
      <div class="left">
        <h4>Your Result</h4>
        <div class="score-left">
          <span class="big-score">76</span>
          <span class="small-score">of 100</span>
        </div>
        <div class="left-text">
          <h3>Great</h3>
          <p>
            You scored higher than 65% of the people who have taken these
            tests.</p>
          </p>
        </div>
      </div>
      <div class="right">
        <h4>Summary</h4>
        <div class="scores">
          <div class="score-reaction score">
            <div class="score-con">
              <img src="./assets/images/icon-reaction.svg" alt="Reaction" />
              <span>Reaction</span>
            </div>
            <span class="black-text">80 / <span class="grey">100</span></span>
          </div>
          <div class="score-memory score">
            <div class="score-con">
              <img src="./assets/images/icon-memory.svg" alt="Memory" />
              <span>Memory</span>
            </div>
            <span class="black-text">80 / <span class="grey">100</span></span>
          </div>
          <div class="score-verbal score">
            <div class="score-con">
              <img src="./assets/images/icon-verbal.svg" alt="Verbal" />
              <span>Verbal</span>
            </div>
            <span class="black-text">80 / <span class="grey">100</span></span>
          </div>
          <div class="score-visual score">
            <div class="score-con">
              <img src="./assets/images/icon-visual.svg" alt="Visual" />
              <span>Visual</span>
            </div>
            <span class="black-text">80 / <span class="grey">100</span>           </span>
          </div>

        </div>
        <button>Continue</button>
      </div>
    </div>
  </body>
</html>

The CSS Code

body {
/*Centers Everything*/
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: sans-serif;
}
.container {
/* Centering the Card it iteself*/
  display: flex;
  width: 600px;
  justify-content: center;
  border-radius: 20px;
  box-shadow: 1px 0px 20px 2px rgb(0, 0, 0, 0.4);
}

.left {
  color: #fff;
  padding: 20px;
  width: 40%;
  text-align: center;
  border-radius: 20px;
  background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
}
.right {
  width: 50%;
  padding: 20px;
}
.left h4 {
  text-align: center;
}
.score-left {
  padding: 50px;
  width: 74px;
  height: 74px;
  border-radius: 100%;
  box-shadow: inset 1px 1px 12px 0px hsla(256, 72%, 46%, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
}
.big-score {
  color: #fff;
  font-weight: bold;
  font-size: 60px;
}
.left h3 {
}
.score-con {
  display: flex;
}
.score {
  display: flex;
  justify-content: space-between;
  background-color: hsla(0, 100%, 67%, 0.1);
  color: hsl(0, 100%, 67%);
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 10px;
}
.grey {
  color: rgba(87, 87, 87, 0.992);
}
.score-con img {
  margin-right: 5px;
}
.black-text {
  color: #222;
  font-weight: bold;
}
.score-memory {
  color: hsl(39, 100%, 56%);
  background: hsla(39, 100%, 56%, 0.1);
}
.score-verbal {
  color: hsl(166, 100%, 37%);
  background: hsl(166, 100%, 37%, 0.1);
}
.score-visual {
  color: hsl(234, 85%, 45%);
  background: hsl(234, 85%, 45%, 0.1);
}

button {
  margin-top: 30px;
  padding: 15px 30px;
  border: none;
  color: white;
  outline: none;
  background-color: hsl(224, 30%, 27%);
  width: 100%;
  border-radius: 20px;
}
@media (max-width: 760px) {
/* These Apply When Screen is less than 760px */
  .left {
    width: 100%;
    padding: 0px;
    border-radius: 0px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  .right {
    padding: 0;
    width: 80%;
    margin: 0 auto;
  }
  .left-text {
    padding: 20px;
    text-align: center;
  }
  .container {
    width: 100%;
    flex-direction: column;
    border-radius: 0px;
    overflow: hidden;
    padding: 0;
  }
}