add href links to menu

Author: kulov

index.html

@@ -23,35 +23,35 @@
           <div class="nav">
             <h1 class="title">PIPELINE FOUNDATION</h1>
             <div class="items">
-              <div class="item active">
+              <a href="#Vision" class="item active">
                 <i class="far fa-eye"></i>
                 <span>Vision</span>
-              </div>
-              <div class="item">
+              </a>
+              <a href="#Mission" class="item">
                 <i class="far fa-dot-circle"></i>
                 <span>Mission</span>
-              </div>
-              <div class="item">
+              </a>
+              <a href="#WhoCanJoin" class="item">
                 <i class="fas fa-sign-in-alt"></i>
                 <span>Who can join</span>
-              </div>
-              <div class="item">
+              </a>
+              <a href="#Benefits" class="item">
                 <i class="fas fa-chart-line"></i>
                 <span>Benefits</span>
-              </div>
+              </a>
             </div>
           </div>
         </div>
 
         <div class="container">
-          <div class="vision line">
+          <div class="vision line" id="Vision">
             <h1 class="heading"><i class="far fa-eye"></i>Vision</h1>
             <p class="text">
               Enable software community to grow and achieve software engineering
               excellence utilizing DevSecOps best practices
             </p>
           </div>
-          <div class="mission line">
+          <div class="mission line" id="Mission">
             <h1 class="heading"><i class="far fa-dot-circle"></i>Mission</h1>
             <p class="text">
               Help open source projects with their migration to GitHub Actions,
@@ -60,7 +60,7 @@ <h1 class="heading"><i class="far fa-dot-circle"></i>Mission</h1>
               community for like-minded people.
             </p>
           </div>
-          <div class="who-can-join line">
+          <div class="who-can-join line" id="WhoCanJoin">
             <h1 class="heading">
               <i class="fas fa-sign-in-alt"></i>Who can join
             </h1>
@@ -79,7 +79,7 @@ <h1 class="heading">
               </li>
             </ul>
           </div>
-          <div class="benefits line">
+          <div class="benefits line" id="Benefits">
             <h1 class="heading"><i class="fas fa-chart-line"></i>Benefits</h1>
             <ul class="text">
               <li>

style.css

@@ -28,7 +28,9 @@ html {
 li {
   list-style: none;
 }
-
+a {
+  text-decoration: none;
+}
 body {
   font-family: "Poppins", sans-serif;
   height: 100%;
@@ -109,6 +111,7 @@ body {
   margin-right: 6rem;
   padding: 1rem;
   font-weight: var(--medium);
+  color: var(--black);
 }
 
 .heading i {
@@ -148,6 +151,9 @@ body {
   .items {
     display: none;
   }
+  .item a {
+    text-decoration: none;
+  }
   .container {
     padding: 0rem 3rem 0rem 3rem;
   }