Desktop design

Mobile design

Results summary component

<h3 id="score-anecdote">You scored higher than 65% of the people who have taken these tests.</h3>

<div class="scorecard" id="reaction">
      <img class="icon" src="images/icon-reaction.svg" alt="Reaction icon">
      <p class="scorecard-name" style="color: red;">Reaction</p>
      <p class="score"><span class="score-value">80</span> / 100</p>
    </div>

<div class="scorecard" id="memory">
      <img class="icon" src="images/icon-memory.svg" alt="Memory icon">
      <p class="scorecard-name" style="color: orange;">Memory</p>
      <p class="score"><span class="score-value">92</span> / 100</p>
    </div>

<div class="scorecard" id="verbal">
      <img class="icon" src="images/icon-verbal.svg" alt="Verbal icon">
      <p class="scorecard-name" style="color: green;">Verbal
      </p><p class="score"><span class="score-value">61</span> / 100</p>
    </div>

<div class="scorecard" id="visual">
      <img class="icon" src="images/icon-visual.svg" alt="Visual icon">
      <p class="scorecard-name" style="color: blue;">Visual</p>
      <p class="score"><span class="score-value">72</span> / 100</p>
    </div>

<div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://www.frontendmentor.io/profile/CJCameron13">CJ Cameron</a>.
  </div>

Design comparison

Please log in to post a comment

Community feedback

Results Summary Card

Design comparison

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community