From b93eb343f99cdda013c341ccd51cb3a60d957d5f Mon Sep 17 00:00:00 2001
From: DevSaLLein <isaac.andrade3@aluno.ce.gov.br>
Date: Sat, 6 Jul 2024 16:50:39 -0300
Subject: [PATCH] refactor: css semantic

---
 index.html |  6 +++---
 script.js  |  2 +-
 style.css  | 30 +++++++++++++++---------------
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index bfb7c21..62b309a 100644
--- a/index.html
+++ b/index.html
@@ -128,9 +128,9 @@ <h2 class="title-page">A creative landing page for you creative <span>webs.</spa
                     </button>
                 </div>
                 <figure data-aos="fade-left">
-                    <div class="geometricShapes geometricBlue"></div>
-                    <div class="geometricShapes geometricRed"></div>
-                    <div class="geometricShapes geometricYellow"></div>
+                    <div class="geometric-sharpe geometric-blue"></div>
+                    <div class="geometric-sharpe geometric-red"></div>
+                    <div class="geometric-sharpe geometric-yellow"></div>
                     <div class="play-container">
                         <img src="./assets/images/play-icon.png" alt="play-icon">
                     </div>
diff --git a/script.js b/script.js
index 7feb640..cdb4861 100644
--- a/script.js
+++ b/script.js
@@ -16,7 +16,7 @@ window.addEventListener('load', () => {
     toggleButton.addEventListener('click', () => {
 
         toggleButton.children.item(0).classList.toggle('toggleModeSun');
-        document.body.classList.toggle('darkMode');
+        document.body.classList.toggle('dark-mode');
     });
 
     hamburger.addEventListener('click', () => {
diff --git a/style.css b/style.css
index 7ee0b55..11297b0 100644
--- a/style.css
+++ b/style.css
@@ -26,14 +26,14 @@ html ::-webkit-scrollbar {
   display: none;
 }
 
-body.darkMode {
+body.dark-mode {
   background-color: var(--text-color);
   color: white;
   --border-color: rgba(255, 255, 255, 0.1);
   --background-color-menuDropDown: #101720;
 }
 
-body.darkMode > header {
+body.dark-mode > header {
   background-color: var(--text-color);
 }
 
@@ -126,7 +126,7 @@ header > div > section > nav > ul > li {
   transition: all 0.2s ease;
 }
 
-body.darkMode .menu-container > svg {
+body.dark-mode .menu-container > svg {
   fill: white;
 }
 
@@ -343,38 +343,38 @@ main > section {
   position: relative;
 }
 
-.home > figure > .geometricShapes {
+.home > figure > .geometric-sharpe {
   position: absolute;
 }
 
-.home > figure > .geometricBlue {
+.home > figure > .geometric-blue {
   padding: 10%;
   top: -10px;
   left: -10px;
   border-radius: 10px 10px 100% 10px;
   background-color: #0d6efd;
-  animation: geometricShapeBlue-animation 6000ms infinite ease;
+  animation: geometric-shape-blue-animation 6000ms infinite ease;
 }
 
-.home > figure > .geometricYellow {
+.home > figure > .geometric-yellow {
   border-radius: 100% 0 100% 100%;
   background-color: #f1c40f;
   bottom: -20px;
   left: -20px;
   padding: 6%;
-  animation: geometricShapeYellow-animation 8000ms infinite ease;
+  animation: geometric-shape-yellow-animation 8000ms infinite ease;
 }
 
-.home > figure > .geometricRed {
+.home > figure > .geometric-red {
   border-radius: 50% 10px 50% 10px;
   background-color: #f4284a;
   padding: 20% 10%;
   bottom: -40px;
   right: -40px;
-  animation: geometricShapeRed-animation 9000ms infinite ease;
+  animation: geometric-shape-red-animation 9000ms infinite ease;
 }
 
-@keyframes geometricShapeBlue-animation {
+@keyframes geometric-shape-blue-animation {
   0% {
     transform: rotateZ(0deg);
   }
@@ -396,7 +396,7 @@ main > section {
   }
 }
 
-@keyframes geometricShapeYellow-animation {
+@keyframes geometric-shape-yellow-animation {
   0% {
     transform: rotateZ(0deg);
   }
@@ -418,7 +418,7 @@ main > section {
   }
 }
 
-@keyframes geometricShapeRed-animation {
+@keyframes geometric-shape-red-animation {
   0% {
     transform: rotateZ(0deg);
   }
@@ -765,11 +765,11 @@ button > span {
     font-size: 14px;
   }
 
-  body.darkMode .line {
+  body.dark-mode .line {
     stroke: white;
   }
 
-  body.darkMode .menu-mobile {
+  body.dark-mode .menu-mobile {
     background-color: var(--text-color);
   }