HTML and CSS W3C validation

natho19 · Jun 29, 2023 · 2135c59 · 2135c59
1 parent 81dc509
commit 2135c59
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 32 deletions.
diff --git a/002-results-summary-component/assets/css/style.css b/002-results-summary-component/assets/css/style.css
@@ -13,12 +13,7 @@
  --blue: hsl(234, 85%, 45%);
  --blue-95-white: hsla(234, 85%, 45%, 0.05);
  --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%
- );
+ --gradient-2: linear-gradient(180deg, #4d21c9 0%, rgba(37, 33, 201, 0) 100%, rgba(37, 33, 201, 0) 100%);
 }
 /*#endregion: Variables*/
 
@@ -42,9 +37,9 @@ body {
  font-weight: 500;
  background: var(--very-light-blue);
  color: var(--dark-navy);
+ height: 100vh;
  display: flex;
  justify-content: center;
- height: 100vh;
 }
 /*#endregion: */
 
@@ -158,7 +153,7 @@ button {
  align-items: center;
 }
 
-.indicator:last-child {
+.indicator:last-of-type {
  margin-bottom: 24px;
 }
 
@@ -187,36 +182,36 @@ button {
  opacity: 0.5;
 }
 
-.indicator.is-red {
+.indicator:nth-child(1) {
  background: var(--red-95-white);
 }
 
-.indicator.is-red .indicator--category {
+.indicator:nth-child(1) .indicator--category {
  color: var(--red);
 }
 
-.indicator.is-yellow {
+.indicator:nth-child(2) {
  background: var(--yellow-95-white);
 }
 
-.indicator.is-yellow .indicator--category {
+.indicator:nth-child(2) .indicator--category {
  color: var(--yellow);
 }
 
-.indicator.is-green {
+.indicator:nth-child(3) {
  background: var(--green-95-white);
 }
 
-.indicator.is-green .indicator--category {
+.indicator:nth-child(3) .indicator--category {
  color: var(--green);
 }
 
-.indicator.is-blue {
+.indicator:nth-child(4) {
  background: var(--blue-95-white);
  margin-bottom: 24px;
 }
 
-.indicator.is-blue .indicator--category {
+.indicator:nth-child(4) .indicator--category {
  color: var(--blue);
 }
 
@@ -293,8 +288,8 @@ button {
  margin-bottom: 28px;
  }
 
- .indicator.is-blue {
- margin-bottom: 41px;
+ .indicator:last-of-type {
+ margin-bottom: 40px;
  }
 }
-/*#endregion: Responsive Desktop*/
+/*#endregion: Responsive Desktop*/
diff --git a/002-results-summary-component/index.html b/002-results-summary-component/index.html
@@ -1,11 +1,11 @@
 <!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" />
+ <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>
- <link rel="stylesheet" href="assets/css/style.css" />
+ <link rel="stylesheet" href="assets/css/style.css">
  </head>
  <body>
  <main class="main">
@@ -23,32 +23,32 @@ <h2 class="result--mention">Great</h2>
  <div class="summary">
  <h2 class="summary--title">Summary</h2>
  <div class="summary--indicators">
- <div class="indicator is-red">
- <img class="indicator--icon" src="./assets/images/icon-reaction.svg" alt="Reaction Icon"/>
+ <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 is-yellow">
- <img class="indicator--icon" src="./assets/images/icon-memory.svg" alt="Memory Icon"/>
+ <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 is-green">
- <img class="indicator--icon" src="./assets/images/icon-verbal.svg" alt="Verbal Icon"/>
+ <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 is-blue">
- <img class="indicator--icon" src="./assets/images/icon-visual.svg" alt="Visual Icon"/>
+ <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>
@@ -60,4 +60,4 @@ <h3 class="indicator--category">Visual</h3>
  </div>
  </main>
  </body>
-</html>
+</html>