Desktop design

Mobile design

Results summary component

<div id="block1">
      <h1>Your Result</h1>
      <div id="circle">
        <h1>76</h1> 
        <p>of 100</p>
      </div>
      <h2>Great</h2> 
      <p>You scored higher than 65% of the people who have taken these tests.</p>
    </div>

<div class="blocks" id="red"> 
        <img src="./assets/images/icon-reaction.svg" alt="">
        <p class="p1" id="pred">Reaction</p>
        <p class="p"> <strong>80</strong> / 100</p>
      </div>

<div class="blocks" id="yellow">
        <img src="./assets/images/icon-memory.svg" alt="">
        <p class="p1" id="myellow">Memory</p>
        <p class="p"> <strong>92</strong> / 100</p>
      </div>

<div class="blocks" id="green">
        <img src="./assets/images/icon-verbal.svg" alt="">
        <p class="p2" id="vgreen">Verbal</p>
        <p class="p"> <strong>61</strong> / 100</p>
      </div>

<div class="blocks" id="blue">
        <img src="./assets/images/icon-visual.svg" alt="">
        <p class="p2" id="vblue">Visual</p>
        <p class="p"> <strong>72</strong> / 100</p>
      </div>

Please log in to post a comment

Community feedback

📱 My solution of: Results-summary-component📱

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community