Frontend Mentor - Results summary component solution

This is a solution to the Results summary component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Results summary component solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • Highlights of the code
  • Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution URL: https://github.com/rovicbalingbing/result-summary-frontendMentor.git
• Live Site URL: https://rovicbalingbing.github.io/result-summary-frontendMentor/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Media Queries

Highlights of the code

<div class="container">
  <div class="wrapper">

    <div class="leftDiv">
      <div class="result-holder">
        <h4 class="title">Your Result</h4>
        <div class="cicrle">
          <h1 class="result">76</h1>
          <h5 class="base-result">out 100</h5>
        </div>
        <h3 class="message">Great</h3>
        <p class="message-info">You scored higher than 65% of the people who have taken these tests.</p>
      </div>
    </div>

    <div class="rightDiv">
      <h1 class="summary">Summary</h1>

      <div class="light-red">
        <p class="category">Reaction</p>
        <p class="category-grade"><b>80</b> / 100</p>
      </div>

      <div class="orange-yellow">
        <p class="category">Memory</p>
        <p class="category-grade"><b>92</b> / 100</p>
      </div>

      <div class="green-teal">
        <p class="category">Verbal</p>
        <p class="category-grade"><b>61</b> / 100</p>
      </div>

      <div class="cobalt-blue">
        <p class="category">Visual</p>
        <p class="category-grade"><b>72</b> / 100</p>
      </div>

      <a href="#" class="btn-continue">Continue</a>
    </div>

  </div>
</div>

:root {
  /* PRIMARY COLORS */
  --light-red: hsl(0, 100%, 67%);
  --light-red-bg: hsla(0, 100%, 67%, 0.1);
  --orange-yellow:hsl(39, 100%, 56%);
  --orange-yellow-bg:hsla(39, 100%, 56%, 0.1);
  --green-teal: hsl(166, 100%, 37%);
  --green-teal-bg: hsla(166, 100%, 37%, 0.1);
  --cobalt-blue: hsl(234, 85%, 45%);
  --cobalt-blue-bg: hsla(234, 85%, 45%, 0.1);

  /* FOR GRADIENT */
  --light-slate-blue: hsl(252, 100%, 67%);
  --light-royal-blue: hsl(241, 81%, 54%);
  --violet-blue: hsla(256, 72%, 46%, 1);
  --persian-blue: hsla(241, 72%, 46%, 0);

  /* NEUTRAL COLORS */
  --white: hsl(0, 0%, 100%);
  --pale-blue: hsl(221, 100%, 96%);
  --light-lavender: hsl(241, 100%, 89%);
  --dark-gray-blue: hsl(224, 30%, 27%);
}

@media (max-width: 436px) {
    .container .wrapper {
        flex-direction: column;
        margin-top: 0%;
    }

    .container .wrapper .leftDiv {
        width: 100%;
    }

    .container .wrapper .rightDiv {
        width: 100%;
    }

    .container .wrapper .rightDiv {
        margin-top: 20px;
    }
}

Author

• Website - John Rovie R. Balingbing
• Frontend Mentor - @rovicbalingbing
• Twitter - @roscidDreaming