web updates

CODEOWNERS

@@ -1 +1,2 @@
 * @ion05
+*@yuvraajnarula

app.js

@@ -35,4 +35,4 @@ function city(e, city) {
     }
     document.getElementById(city).style.display = 'block';
     e.currentTarget.classList.add('active');
-}
+}

index.html

@@ -17,8 +17,8 @@
         <div class="nav">
           <ul class="nav-list">
             <li><a href="#">Home</a></li>
-            <li><a href="#">About</a></li>
-            <li><a href="#">Our Bots</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#bots">Our Bots</a></li>
           </ul>
         </div>
     <section class="home">
@@ -31,9 +31,33 @@
           </svg>            
         </div>
       </section>
+    <section class="about">
+      <h1 id="about">
+        <center>
+        About Us
+      </center>
+      </h1>
+      <main class="container">
+        <section class="card">
+          <img src="https://media.discordapp.net/attachments/741244174736556076/768894278516473917/unknown.png?width=567&height=381" alt="lifesync logo" />
+          <div>
+            <p>
+              <a href="https://lifesync.netlify.app/" target="_blank" class="link">LifeSync</a> has been made with a single aim: working to provide the best services
+               to the people to make their lives much easier. Our main motive is to utilize 
+               the power of technology in way that the users love it. We love to develop
+                software as it gives us a feeling of contributing to the society. 
+               <br>
+               <br>
+               All of the LifeSync team knew each other since middle school and we hope to 
+               help more people the same way.
+            </p>
+            <br>
+        </section>
+
+    </section>
     <section class="bots">
       <header class="main-header">
-        <h1>Our Bots</h1>
+        <h1 id="bots">Our Bots</h1>
         <h2>
           Need a bot ? We have got it !
         </h2>
@@ -73,8 +97,15 @@ <h3>Explosure Bot</h3>
           </div>
         </section>
       </main>
+      <hr>
+      <footer class="made">
+        <center>
+        <h3>Made with <i class="fa fa-heart"></i> by LifeSync</h3>
+      </center>
+      </footer>
     </section>
 </body>
+
 <script src="app.js"></script>
 <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
 

main.css

@@ -3,6 +3,7 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    scroll-behavior: smooth;
   }
 
   body {
@@ -14,7 +15,7 @@
   }
 
   .hamburger {
-    position: absolute;
+    position: fixed;
     top: 25px;
     right: 50px;
     cursor: pointer;
@@ -141,12 +142,16 @@
       background: black;
       width: 100%;
     }
-  .bots h1{
+  .about h1,.bots h1{
     font-weight: 700;
     letter-spacing: 3px;
     color: #eee;
     margin-top: 1.5rem;
   }
+  .about img{
+    width: 455px;
+    height: 100px;
+  }
   ::-webkit-scrollbar{
     width: 5px;
     background: black;
@@ -266,3 +271,20 @@
     display: block;
   }
 }
+.made{
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  color: #eee;
+}
+.link {
+  transition: background-size 0.4s ease;
+  background: linear-gradient(to bottom, transparent 62%, #fff87e 0) center center/0% 75% no-repeat;
+  color: rgb(255, 255, 255);
+  text-decoration: none;
+}
+.link:hover {
+  background-size: 100% 100%;
+}
+.link:active {
+  background-size: 80% 100%;
+}