I redesigned and fixed all the semantic and class names in the HTML f…

…or improved simplicity and clarity. I reorganized everything in the CSS for a more concise and efficient style.
L3on06 · Feb 20, 2024 · 375c58c · 375c58c
1 parent 6fb7f90
commit 375c58c
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 202 deletions.
diff --git a/index.html b/index.html
@@ -24,35 +24,43 @@
 </head>
 
 <body>
-  <div class="container context">
-    <header>
-      <h1 class="title"> 🎲 Dicee 🎲 </h1>
+  <div class="container">
+    <header class="dgrid">
+      <h1 class="title"> 🎲 &nbsp; Dicee &nbsp; 🎲 </h1>
     </header>
 
-    <main class="main">
-      <section class="dice main-animation">
-        <p class="paragraf" id="Player1">Player 1</p>
-        <figure>
+    <main>
+      <section class="mainContainer ">
+        <figure class="dice main-animation dgrid">
+          <figcaption>
+            <p class="paragraf" id="Player1">Player 1</p>
+          </figcaption>
           <img id="a1" class="img img1" src="./source/images/dice6.png" alt="Dice">
         </figure>
-      </section>
 
-      <section class="dice">
-        <p class="paragraf" id="Player2">Player 2</p>
-        <img id="a2" class="img img2" src="./source/images/diceR6.png" alt="Dice">
+        <figure class="dice dgrid">
+          <figcaption>
+            <p class="paragraf" id="Player2">Player 2</p>
+          </figcaption>
+          <img id="a2" class="img img2" src="./source/images/diceR6.png" alt="Dice">
+        </figure>
       </section>
-    </main>
 
-    <button id="buttonstart" class="button">Start</button>
-    <button id="buttonend" class="button">End</button>
+      <section>
+        <button id="buttonstart" class="button">Start</button>
+        <button id="buttonend" class="button">End</button>
+      </section>
 
-    <footer class="footer">
-      www.dicce.vercel.app
-    </footer>
-  </div>
+      <section class="github">
+        <a href="https://github.com/L3on06">
+          <figure>
+            <img src="./source/images/github.svg" alt="Github">
+          </figure>
+        </a>
+      </section>
+    </main>
 
-  <!-- Background animation -->
-  <div class="area">
+    <!-- Background animation -->
     <ul class="circles">
       <li></li>
       <li></li>

diff --git a/source/images/github.svg b/source/images/github.svg