Merge pull request #140 from Avdhesh-Varshney/navbar

[GSSoC'23] Added Navbar with styling
sahil-sagwekar2652 · Aug 10, 2023 · 3cdc7b4 · 3cdc7b4
2 parents cb11bfa + c85debf
commit 3cdc7b4
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 19 deletions.
diff --git a/css/contributors.css b/css/contributors.css
@@ -7,6 +7,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    text-align: center;
 }
 
 .contributors h1 {
@@ -46,8 +47,8 @@
 }
 
 .contributor-card img:hover {
-    width: 78px;
-    height: 78px;
+    width: 75px;
+    height: 75px;
     opacity: 1;
 }
 

diff --git a/css/style.css b/css/style.css
@@ -1,8 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&family=Open+Sans:wght@300;400;500;600;700&display=swap');
+
 * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: "Poppins", sans-serif;
+  text-decoration: none;
 }
 
 html {
@@ -17,6 +20,111 @@ html {
   }
 
 
+/* Styling of Navbar */
+.navbar {
+  list-style: none;
+  z-index: 100;
+  font-family: 'Josefin Sans', sans-serif;
+  background: rgba(0, 130, 230, 0.6);
+  height: 80px;
+  width: 98%;
+  position: fixed;
+  top: 3%;
+  left: 1%;
+  transform: translate(-50%, -50%);
+  animation: moveAnimation 2s ease-in-out infinite alternate;
+}
+label.logo {
+  color: white;
+  font-size: 35px;
+  line-height: 80px;
+  padding: 0 70px;
+  font-weight: bold;
+}
+.navbar ul {
+  float: right;
+  margin-right: 20px;
+}
+.navbar ul li {
+  display: inline-block;
+  line-height: 80px;
+  margin: 0 5px;
+}
+.navbar ul li a {
+  color: white;
+  font-size: 17px;
+  text-transform: uppercase;
+  font-weight: bold;
+  padding: 7px 13px;
+  border-radius: 3px;
+}
+a.active, a:hover {
+  background: #1b9bff;
+  transition: 0.5s;
+}
+.checkbtn {
+  font-size: 30px;
+  color: white;
+  float: right;
+  line-height: 80px;
+  margin-right: 40px;
+  cursor: pointer;
+  display: none;
+}
+#check {
+  display: none;
+}
+@media (max-width: 1300px) {
+  label.logo {
+    font-size: 25px;
+    padding-left: 25px;
+  }
+  .navbar ul li a {
+    font-size: 16px;
+  }
+}
+@media (max-width: 1225px) {
+  .checkbtn {
+    display: block;
+  }
+  ul {
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    background-color: #2c3e50;
+    top: 80px;
+    left: -100%;
+    text-align: center;
+    transition: all .5s;
+  }
+  .navbar ul li {
+    display: block;
+    margin: 50px 0;
+    line-height: 30px;
+  }
+  .navbar ul li a {
+    font-size: 20px;
+  }
+  a:hover, a.active {
+    background: none;
+    color: #0082e6;
+  }
+  #check:checked ~ ul {
+    left: 0;
+  }
+}
+@keyframes moveAnimation {
+  0% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(10px);
+  }
+}
+
+/* End styling of navbar */
+
+
     /* View Port Style  */
 
     .Viewcontainer {
@@ -186,7 +294,7 @@ html {
 
 footer {
   margin-top: auto;
-  background-color: #000;
+  background-color: rgba(0, 130, 230, 0.75);
   padding-top: 40px;
   color: #fff;
 }
@@ -248,7 +356,7 @@ footer {
 }
 
 .footer-bottom{
-  background: #000;
+  background: transparent;
   padding-top: 20px;
   padding-bottom: 30px;
   text-align: center;

diff --git a/index.html b/index.html
@@ -13,17 +13,20 @@
   </style>
 </head>
 <body class="bg-gray-100">
-  <header class="bg-gray-300 py-4">
-    <div class="container mx-auto px-4">
-      <h1 class="text-2xl font-semibold text-black">GitHub Automation Scripts 🤖</h1>
-      <div class="github-link mb-2">
-        <a class="fg-black" href="https://github.com/sahil-sagwekar2652/GitHub-Automation-scripts" target="_blank" rel="noopener noreferrer">
-          <i class="fg-black fab fa-github"></i>
-          GitHub
-        </a>
-      </div>
-    </div>
-  </header>
+  <nav class="navbar">
+    <input type="checkbox" id="check">
+    <label for="check" class="checkbtn">
+      <i class="fas fa-bars"></i>
+    </label>
+    <label class="logo"><a href="https://github.com/sahil-sagwekar2652/GitHub-Automation-scripts">GitHub Automation Scripts 🤖</a></label>
+    <ul>
+      <li><a href="#about">About</a></li>
+      <li><a href="#contribute">Contribute</a></li>
+      <li><a href="#install">Installation</a></li>
+      <li><a href="#contributor">Contributors</a></li>
+      <li><a href="#contact">Contact</a></li>
+    </ul>
+  </nav>
 
   <section class="h-screen bg-blue-900 flex items-center justify-center">
     <div class="Viewcontainer mx-auto flex flex-wrap flex-col md:flex-row space-x-0 md:space-x-8">
@@ -47,7 +50,7 @@ <h2 class="text-xl text-white font-semibold mb-4">Tech Stack</h2>
     </div>
   </section>
 
-  <div class="desc-container mx-auto px-4">
+  <div class="desc-container mx-auto px-4" id="about">
     <div class="description-section">
       <div class="image-container">
         <img src="graphics/repo.jpg" alt="gitrepo-Floating-Image">
@@ -64,7 +67,7 @@ <h2 class="title">GitHub Automation Scripts 🤖</h2>
   </div>
 
 
-  <div class="container mx-auto px-4 py-8">
+  <div class="container mx-auto px-4 py-8" id="contribute">
     <div class="contribute-guide">
       <h1 class="text-2xl font-semibold">Contributing to GitHub-Automation-Scripts</h1>
       <p class="mt-4">First off, thanks for taking the time to contribute! ❤️</p>
@@ -110,7 +113,7 @@ <h2 id="styleguides" class="text-xl font-semibold mt-8">Styleguides</h2>
 </body>
 </html>
 
-  <main class="container mx-auto px-4 py-8">
+  <main class="container mx-auto px-4 py-8" id="install">
     <nav class="mb-8 flex justify-center items-center">
       <div class="inline-flex border border-gray-300 rounded">
         <button class="py-2 px-4 bg-gray-200 font-semibold focus:outline-none active:bg-gray-300" onclick="openTab(event, 'installation')">Installation</button>
@@ -199,7 +202,7 @@ <h1>Our Valuable Contributors</h1>
     <div id="contributor"></div>
   </div>
 
-  <footer class="py-4">
+  <footer class="py-4" id="contact">
     <div class="container mx-auto px-4 footer-content">
       <h3>GITHUB AUTOMATION SCRIPTS 🤖</h3>
       <p>Bash and Python scripts to automate your Git & GitHub workflow. Made by using only standard python libraries.</p>