Frontend Mentor Challenge: Results Summary Component :: HTML CSS @rayen-code

Rayen

Frontend Mentor Challenge: Results Summary Component :: HTML CSS

This is a solution to the [Results summary component challenge on Frontend Mentor ](https://www.frontendmentor.io/challenges/results-summary-component-CE_K6s0maV). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 


HTML Code

<!-- -------------------- 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="./assets/images/favicon-32x32.png">

  <title>Frontend Mentor | Results summary component</title>

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk&display=swap');
  </style>

  <link rel="stylesheet" href="style.css">

  <link rel="stylesheet" media="screen and (max-width: 375px)" href="phone-style.css">
</head>

<body>


  <div class="wrapper">

    <div class="result">
      <h2>Your Result</h2>
      <div class="circle">
        <div class="number">76</div>
        <span>of 100</span>
      </div>

      <div class="great">Great</div>
      <p>You scored higher than 65% of the people who have taken these tests.</p>

    </div>

    <div class="value">

      <h2>Summary</h2>
      <div class="box red">
        <img src="assets/images/icon-reaction.svg" alt="">
        <p>Reaction</p>
        <div class="number">80</div>
        <span>/ 100</span>
      </div>

      <div class="box yellow">
        <img src="assets/images/icon-memory.svg" alt="">
        <p>Memory</p>
        <div class="number">92</div>
        <span>/ 100</span>
      </div>

      <div class="box green">
        <img src="assets/images/icon-verbal.svg" alt="">
        <p>Verbal</p>
        <div class="number">61</div>
        <span>/ 100</span>
      </div>

      <div class="box blue">
        <img src="assets/images/icon-visual.svg" alt="">
        <p>Visual</p>
        <div class="number">72</div>
        <span>/ 100</span>
      </div>

      <a href="#">Continue</a>

    </div>
  </div>

</body>

</html>

CSS Code

/*-------------------- CSS --------------------*/
/* style.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Hanken Grotesk', sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 750px;
    border-radius: 30px;
    box-shadow: 20px 20px 30px hsl(221, 100%, 96%);
}

.result {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 50%;
    background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
    border-radius: 30px;
}

.result h2 {
    font-size: 22px;
    color: hsla(0, 0%, 100%, 0.74);
    margin: 30px;
    font-weight: 700;
}

.result .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(hsla(256, 72%, 46%, 1), hsla(241, 72%, 46%, 0));
}

.result .circle .number {
    font-size: 65px;
    font-weight: 700;
    margin-top: 40px;
    color: hsl(0, 0%, 100%);
    text-align: center;
}

.result .circle span {
    text-align: center;
    color: hsla(0, 0%, 100%, 0.411);
    font-size: 18px;
    display: block;
}

.result .great {
    font-size: 30px;
    margin: 15px 0;
    color: hsl(0, 0%, 100%);
}

.result p {
    font-size: 18px;
    color: hsla(0, 0%, 100%, 0.411);
    margin-top: 15px;
    margin-bottom: 30px;
    width: 250px;
    text-align: center;
}




.value {
    width: 50%;
    padding: 40px;
}

.value h2 {
    font-size: 22px;
    margin-bottom: 20px;
}

.red {
    color: hsl(0, 100%, 67%);
    background: hsla(0, 100%, 67%, 0.048);
}

.yellow {
    color: hsl(39, 100%, 56%);
    background: hsla(39, 100%, 56%, 0.048);
}

.green {
    color: hsl(166, 100%, 37%);
    background: hsla(166, 100%, 37%, 0.048);
}

.blue {
    color: hsl(234, 85%, 45%);
    background: hsla(234, 85%, 45%, 0.048);
}

.value .box {
    display: flex;
    align-items: center;
    height: 55px;
    padding: 15px;
    margin: 18px 0;
    border-radius: 10px;
}

.value img {
    height: 18px;
    margin-right: 10px;
}

.value p {
    flex-grow: 2;
}

.value .number {
    font-weight: 800;
    color: black;
}

.value span {
    color: hsla(0, 0%, 0%, 0.486);
    font-weight: 700;
}

.value a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    color: white;
    background: hsl(224, 30%, 27%);
    height: 55px;
    border-radius: 30px;
    margin-top: 30px;
}

.value a:hover {
    background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
}

Phone.CSS Code

/*-------------------- Phone CSS --------------------*/
/* phone-style.css */


.wrapper{
    flex-direction: column;
    width: 100vw;
    border-radius: 0;
    box-shadow: none;
}

.result{
    width: 100%;
    border-radius: 0 0 30px 30px;
}

.result h2{
    font-size: 18px;
    margin: 15px 0;
    font-weight: 500;
}

.result .circle{
    width: 140px;
    height: 140px;
}

.result .circle .number{
    font-size: 48px;
    margin-top: 30px;
}

.result .circle span{
    font-size: 15px ;
}

.result .great{
    font-size: 18px;
}

.result p{
    font-size: 15px;
}

.value{
    width: 100%;
}

.value h2{
    font-size: 18px;
    margin-bottom: 25px;
}

.value a{
    height: 60px;
}

0 Comments