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;
}
}