109 lines
3.4 KiB
Plaintext
109 lines
3.4 KiB
Plaintext
<!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="stylesheet"
|
|
href="static/public/out.css"
|
|
type="text/css"
|
|
media="screen"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="32x32"
|
|
href="static/public/images/favicon-32x32.png"
|
|
/>
|
|
|
|
<title>Frontend Mentor | Results summary component</title>
|
|
|
|
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
|
<style>
|
|
.attribution {
|
|
font-size: 11px;
|
|
text-align: center;
|
|
}
|
|
.attribution a {
|
|
color: hsl(228, 45%, 44%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<section
|
|
class="flex flex-col gap-y-4 items-center px-10 pt-4 pb-8 text-white bg-gradient-to-t rounded-b-3xl from-light-royal-blue to-light-slate-blue"
|
|
>
|
|
<h1 class="font-bold text-pale-blue">Your Result</h1>
|
|
<div
|
|
class="flex flex-col justify-center items-center w-32 h-32 bg-gradient-to-t rounded-full from-violet-blue/60 to-persian-blue/75"
|
|
>
|
|
<span class="text-5xl font-extrabold">76</span>
|
|
<span class="text-pale-blue"> of 100 </span>
|
|
</div>
|
|
<div class="flex flex-col gap-y-3 items-center">
|
|
<h2 class="text-xl font-bold">Great</h2>
|
|
<p class="text-sm text-center text-pale-blue">
|
|
You scored higher than 65% of the people who have taken these tests.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-y-4 p-7">
|
|
<h2 class="font-bold">Summary</h2>
|
|
<dl class="flex flex-col">
|
|
<div
|
|
class="flex flex-row bg-summary-item-color/10"
|
|
style="--summary-item-color-var: 0deg 100% 67%"
|
|
>
|
|
<dt class="flex-1 text-summary-item-color">Reaction</dt>
|
|
<dd class="flex flex-row">
|
|
<strong>80</strong>
|
|
/ 100
|
|
</dd>
|
|
</div>
|
|
<div
|
|
class="flex flex-row bg-summary-item-color/10"
|
|
style="--summary-item-color-var: 39deg 100% 56%"
|
|
>
|
|
<dt class="flex-1 text-summary-item-color">Memory</dt>
|
|
<dd class="flex flex-row">
|
|
<strong>92</strong>
|
|
/ 100
|
|
</dd>
|
|
</div>
|
|
<div
|
|
class="flex flex-row bg-summary-item-color/10"
|
|
style="--summary-item-color-var: 166deg 100% 37%"
|
|
>
|
|
<dt class="flex-1 text-summary-item-color">Verbal</dt>
|
|
<dd class="flex flex-row">
|
|
<strong>61</strong>
|
|
/ 100
|
|
</dd>
|
|
</div>
|
|
<div
|
|
class="flex flex-row bg-summary-item-color/10"
|
|
style="--summary-item-color-var: 234deg 85% 45%"
|
|
>
|
|
<dt class="flex-1 text-summary-item-color">Visual</dt>
|
|
<dd class="flex flex-row">
|
|
<strong>72</strong>
|
|
/ 100
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
Continue
|
|
</section>
|
|
</main>
|
|
<footer class="fixed inset-x-0 bottom-1 attribution">
|
|
Challenge by
|
|
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
|
|
>Frontend Mentor</a
|
|
>. Coded by <a href="#">Your Name Here</a>.
|
|
</footer>
|
|
</body>
|
|
</html>
|