Please enter the commit message for your changes. Lines starting

with '#' will be ignored, and an empty message aborts the commit. On branch main Your branch is up to date with 'origin/main'. Changes to be committed: modified: css/about-section.css modified: css/footer.css modified: css/hero-section.css modified: css/leaderboard.css modified: css/mentors.css modified: css/navbar.css modified: css/project.css modified: index.html new file: js/navbar.js
opencodeiiita · Dec 25, 2023 · 88202fe · 88202fe
1 parent de211f1
commit 88202fe
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 14 deletions.
diff --git a/css/about-section.css b/css/about-section.css
@@ -8,7 +8,17 @@
   /* background: linear-gradient(#0C1717, #17403E, #132222); */
   padding: 0px 0px;
   height: 100vh;
-  background: linear-gradient(#132222, #17403e, #0c1717);
+  /* background: linear-gradient(#FF6F61, #FFD166, #6B4226); */
+  /* background: linear-gradient(#1a462f, #0e5a49, #17403E); */
+  /* background: linear-gradient(#112525, #16403d, #132222); */
+  z-index: 1;
+
+  background: linear-gradient(#031717, #112e2d, #132222);
+
+
+  /* background: linear-gradient(#428C65, #226556, #17403E); */
+
+
 }
 
 #about-section .logo {

diff --git a/css/footer.css b/css/footer.css
@@ -1,8 +1,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
 :root {
   --background: #24262b;
-  --boldtext: #ffffff;
-  --iconbg: #565759;
+  --boldtext: #00CF90;
+  --iconbg: #ffffff;
   --h4font: 18px;
 }
 
@@ -20,7 +20,7 @@ body {
   margin: auto;
 }
 #footer {
-  background: #132222;
+  background: #091616;
 }
 .row {
   display: flex;

diff --git a/css/hero-section.css b/css/hero-section.css
@@ -4,7 +4,10 @@
     align-items: center;
     flex-wrap: wrap;
     justify-content: space-between;
-        background: linear-gradient(#0C1717, #17403E, #132222);
+        /* background: linear-gradient(#0C1717, #17403E, #132222); */
+        background: linear-gradient(#112020, #18433F, #132222);
+        background-attachment: fixed;
+        background-position: center;
 
     padding: 20px 20px;
     height: 100vh;

diff --git a/css/leaderboard.css b/css/leaderboard.css
@@ -1,6 +1,9 @@
 #leaderboard {
   padding: 100px 0px;
-  background: linear-gradient(#132222, #17403e, #0c1717);
+  background: linear-gradient(#031717, #112e2d, #132222);
+
+  /* background: linear-gradient(#1a462f, #0e5a49, #17403E); */
+
 }
 
 #leader_content {

diff --git a/css/mentors.css b/css/mentors.css
@@ -1,6 +1,9 @@
 #mentors {
   /* border: 2px solid black; */
-  background: linear-gradient(#0c1717, #17403e, #132222);
+  /* background: linear-gradient(#0c1717, #17403e, #132222); */
+  background: linear-gradient(#234343, #18433F, #112020);
+
+
 }
 #mentor-content {
   justify-content: center;

diff --git a/css/navbar.css b/css/navbar.css
@@ -135,6 +135,10 @@ body {
     opacity: 1;
     transition: 0.5s;
 }
+.menu a.active {
+    color: #00CF90;
+    /* color: white; */
+}
 
 @media screen and (max-width: 986px) {
     .hamburger,

diff --git a/css/project.css b/css/project.css
@@ -1,7 +1,9 @@
 #projects {
   /* border: 2px solid black; */
   /* margin-top: 100px; */
-  background: linear-gradient(#0c1717, #17403e, #132222);
+  /* background: linear-gradient(#0c1717, #17403e, #132222); */
+  background: linear-gradient(#234343, #18433F, #112020);
+
 }
 #project-div {
   justify-content: center;

diff --git a/index.html b/index.html
@@ -50,12 +50,12 @@
         <div class="hamburger"> </div>
 
           <ul class="menu">
-              <li><a href="#">HOME</a></li>
-              <li><a href="#">ABOUT US</a></li>
-              <li><a href="#">MENTORS</a></li>
-              <li><a href="#">LEADERBOARD</a></li>
-              <li><a href="#">PROJECTS</a></li>
-              <li><a href="#">CONTACT US</a></li>
+            <li><a href="#hero-section" class="active">HOME</a></li>
+            <li><a href="#about-section">ABOUT US</a></li>
+              <li><a href="#mentors">MENTORS</a></li>
+              <li><a href="#leaderboard">LEADERBOARD</a></li>
+              <li><a href="#projects">PROJECTS</a></li>
+              <li><a href="#footer">CONTACT US</a></li>
           </ul>
       </div>
   </nav>
@@ -502,5 +502,6 @@ <h4>follow us</h4>
 
     <!-- script files  -->
       <script src="js/index.js"></script>
+      <script src="js/navbar.js"></script>
   </body>
 </html>
diff --git a/js/navbar.js b/js/navbar.js
@@ -0,0 +1,30 @@
+document.addEventListener("DOMContentLoaded", function () {
+    var navLinks = document.querySelectorAll('.menu a');
+
+    function onScroll() {
+        var scrollPosition = window.scrollY || document.documentElement.scrollTop;
+        var offset = window.innerHeight * 0.6;
+
+        navLinks.forEach(function (navLink) {
+            var targetDivId = navLink.getAttribute('href').substring(1);
+            var targetDiv = document.getElementById(targetDivId);
+
+            if (targetDiv) {
+                var divTop = targetDiv.offsetTop;
+                var divHeight = targetDiv.offsetHeight;
+
+                if (scrollPosition >= divTop - offset && scrollPosition < divTop + divHeight - offset) {
+                    navLinks.forEach(function (link) {
+                        link.classList.remove('active');
+                    });
+
+                    navLink.classList.add('active');
+                }
+            }
+        });
+    }
+
+    window.addEventListener('scroll', onScroll);
+
+    onScroll();
+});