html

natho19 · Jun 27, 2023 · 1d3c6a0 · 1d3c6a0
1 parent 9f24bb7
commit 1d3c6a0
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 4 deletions.
diff --git a/002-results-summary-component/assets/css/style.css b/002-results-summary-component/assets/css/style.css
@@ -1,11 +1,49 @@
+/* Variables */
+:root {
+ --blue: hsla(234, 85%, 45%, 1);
+ --blue-95-white: hsla(0, 0%, 100%, 0.95);
+ --dark-navy: hsla(223, 30%, 27%, 1);
+ --green: hsla(166, 100%, 37%, 1);
+ --green-95-white: hsla(0, 0%, 100%, 0.95);
+ --light-blue: hsla(241, 100%, 89%, 1);
+ --red: hsla(0, 100%, 67%, 1);
+ --red-95-white: hsla(0, 0%, 100%, 0.95);
+ --white: hsla(0, 0%, 100%, 1);
+ --yellow: hsla(40, 100%, 56%, 1);
+ --yellow-95-white: hsla(39, 100%, 56%, 1);
+ --gradient-1: linear-gradient(180deg, #75f 0%, #6943ff 0.01%, #2f2ce9 100%);
+ --gradient-2: linear-gradient(
+ 180deg,
+ #4d21c9 0%,
+ rgba(37, 33, 201, 0) 100%,
+ rgba(37, 33, 201, 0) 100%
+ );
+}
+
 /* General */
 
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
 @font-face {
- font-family: 'HankenGrotesk';
+ font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
 }
 
 body {
- font-family: 'HankenGrotesk', sans-serif;
+ margin: 0;
+ font-family: 'Hanken Grotesk', sans-serif;
+ font-size: 16px;
+ font-weight: 500;
+ background-color: var(--white);
 }
+
+/* Base */
+
+/* Result */
+
+/* Summary */
diff --git a/002-results-summary-component/index.html b/002-results-summary-component/index.html
@@ -8,7 +8,55 @@
  <link rel="stylesheet" href="assets/css/style.css" />
  </head>
  <body>
- <!-- Your Result 76 of 100 Great You scored higher than 65% of the people who have taken these
- tests. Summary Reaction 80 / 100 Memory 92 / 100 Verbal 61 / 100 Visual 72 / 100 Continue -->
+ <main class="main">
+ <div class="result">
+ <h1 class="result--title">Your result</h1>
+ <div class="result--score">
+ <strong>76</strong>
+ <span>of 100</span>
+ </div>
+ <h2 class="result--mention">Great</h2>
+ <p class="result--description">
+ Your performance exceed 65% of the people conducting the test here!
+ </p>
+ </div>
+ <div class="summary">
+ <h2 class="summary--title">Summary</h2>
+ <div class="summary--indicators">
+ <div class="indicator">
+ <img class="indicator--icon" src="./assets/images/icon-reaction.svg" alt="Reaction Icon"/>
+ <h3 class="indicator--category">Reaction</h3>
+ <div class="indicator--score">
+ <strong>80</strong>
+ <span>/ 100</span>
+ </div>
+ </div>
+ <div class="indicator">
+ <img class="indicator--icon" src="./assets/images/icon-memory.svg" alt="Memory Icon"/>
+ <h3 class="indicator--category">Memory</h3>
+ <div class="indicator--score">
+ <strong>92</strong>
+ <span>/ 100</span>
+ </div>
+ </div>
+ <div class="indicator">
+ <img class="indicator--icon" src="./assets/images/icon-verbal.svg" alt="Verbal Icon"/>
+ <h3 class="indicator--category">Verbal</h3>
+ <div class="indicator--score">
+ <strong>61</strong>
+ <span>/ 100</span>
+ </div>
+ </div>
+ <div class="indicator">
+ <img class="indicator--icon" src="./assets/images/icon-visual.svg" alt="Visual Icon"/>
+ <h3 class="indicator--category">Visual</h3>
+ <div class="indicator--score">
+ <strong>72</strong>
+ <span>/ 100</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
  </body>
 </html>