Merge pull request #31 from FSBM/main

Included the feature with fixing the bottom row of contributors.
KorryKatti · Oct 10, 2024 · ea594d4 · ea594d4
2 parents 0ac0ea6 + 5925168
commit ea594d4
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -59,8 +59,10 @@
         </div>
 
         <div class="stats">
-          <p>Daily Users: 1,234</p>
-          <p>Today's Users: 456</p>
+          <p>Daily Users:  
+          <span class="num1" data-val="1234"> 0</span></p>
+          <p>Today's Users: 
+          <span class="num1" data-val="400"> 0</span></p>
         </div>
       </div>
     </div>

diff --git a/script.js b/script.js
@@ -1,3 +1,7 @@
+window.onload = () => {
+    const isDarkMode = true;
+    applyTheme(isDarkMode);
+};
 const toggleIcon = document.querySelector(".toggle-theme");
 
 const applyTheme = (isDarkMode) => {
@@ -15,6 +19,8 @@ const applyTheme = (isDarkMode) => {
         document.body.style.backgroundColor = "white"; 
         document.body.style.color = "#1b1f38"; 
         footer.style.color = "#1b1f38";
+        const contributorsText = document.querySelector('.contributors-text');
+        contributorsText.style.color = 'white';
         toggleIcon.classList.remove('fa-sun'); 
         toggleIcon.classList.add('fa-moon'); 
     }
@@ -25,10 +31,6 @@ const toggleDarkMode = () => {
     applyTheme(isDarkMode);
 };
 
-window.onload = () => {
-    const isDarkMode = false;
-    applyTheme(isDarkMode);
-};
 
 const openModal = () => {
     document.getElementById("myModal").style.display = "flex";
@@ -44,3 +46,19 @@ window.onclick = (event) => {
         closeModal();
     }
 };
+
+let valueDisplays = document.querySelectorAll(".num1");
+let interval = 4000;
+// let endValue = 1234;
+valueDisplays.forEach((valueDisplay) => {
+  let startValue = 0;
+  let endValue = parseInt(valueDisplay.getAttribute("data-val"));
+  let duration = Math.floor(interval / endValue);
+  let counter = setInterval(function () {
+    startValue += 1;
+    valueDisplay.textContent = startValue;
+    if (startValue == endValue) {
+      clearInterval(counter);
+    }
+  }, duration);
+});
diff --git a/style.css b/style.css
@@ -3,7 +3,7 @@
 body {
   min-height: 100vh;
   width: 100%;
-  background-color: white;
+  background-color: #1b1f38;
   font-family: "Sora", sans-serif;
   font-optical-sizing: auto;
   display: flex;
@@ -12,6 +12,7 @@ body {
   justify-content: center;
   margin: 0;
   transition: background-color 0.3s, color 0.3s;
+  color: white;
 }
 
 ::-webkit-scrollbar {
@@ -40,7 +41,7 @@ body {
 }
 
 .contain1 {
-  padding-right: 206px;
+  padding-right: 100px;
 }
 
 .description {
@@ -61,21 +62,28 @@ body {
   border: none;
   cursor: pointer;
   text-decoration: none;
-  transition: background-color 0.3s;
+  transition: background-color 0.8s;
 }
 
 .cta-button:hover {
   border : 2px solid white;
   background-color:#1b1f38 ;
+  transform:scale(1.02);
 }
 
 
 .contributors {
+  padding: 20px;
+  background-color: #2a2d47;
   margin-top: 3rem;
+  border-radius: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 .contributors-images {
+  align-items: center;
   margin: 15px 0;
+  transform: scale(0.9);
 }
 
 .dark-mode-toggle {
@@ -97,6 +105,9 @@ body {
 .stats {
   margin-top: 3rem;
 }
+.stats:hover{
+  transform:scale(1.02);
+}
 
 .footer {
   font-size: 0.9rem;
@@ -165,7 +176,9 @@ body {
 }
 
 .contributors-text {
-  font-size: 21px;
+  display: flex;
+  justify-content: center;
+  font-size: 18px;
   margin-bottom: 10px;
   text-align: center;
 }
@@ -174,6 +187,7 @@ body {
   position: relative;
   height: 100%;
   width: 100%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 .contributor-pin {
@@ -214,6 +228,7 @@ body {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   text-align: center;
   font-size: 1.1rem;
+  transition: 0.8s;
 }
 
 .stats p {
@@ -225,21 +240,30 @@ body {
 }
 
 /* Media Queries for responsiveness */
+
 @media (max-width: 1200px) {
+
   .header {
     font-size: 3rem;
+    text-align: center;
   }
 
   .container {
     flex-direction: column;
+    justify-content: center;
     align-items: center;
+    align-content: center;
   }
 
   .cta-button {
     width: 80%;
   }
+  .contain1{
+    padding-right: 0px;
+  }
 }
 
+
 @media (max-width: 768px) {
   .header {
     font-size: 2.5rem;
@@ -282,7 +306,7 @@ body {
   }
 
   .contain1 {
-    padding-right: 0px;
+   padding-right: 0px;
   }
 
   .cta-button {