Merge pull request boradesanket13#94 from Abhijeet-2003/navbar

Added navbar.
AaryaaRam · Dec 26, 2022 · c7d7e19 · c7d7e19
2 parents a47de4a + d240310
commit c7d7e19
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 17 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -7,6 +7,7 @@
 
 body {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
@@ -27,6 +28,62 @@ body {
     opacity: .90;
 }
 
+.navbar{
+    position: absolute;
+    width: 100%;
+    height: 70px;
+    top: 0%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 720px;
+    background-color: rgba(255, 255, 255, 0.7);
+}
+
+.links{
+    display: flex;
+    gap: 35px;
+}
+.links a{
+    text-decoration: none;
+    font-size: 1.05rem;
+    font-weight: lighter;
+    color: #6f7174;
+}
+.links a:hover{
+    color: #000;
+}
+
+.links a.active{
+    /* text-decoration: underline;
+    text-underline-offset: 8px; */
+    color: #000;
+    font-weight: bolder;
+
+}
+
+.buttons{
+    display: flex;
+    gap: 15px;
+}
+
+.btn-1, .btn-2{
+    cursor: pointer;
+    width: max-content;
+    font-size: 0.8rem;
+    height: 2.5rem;
+    border:1px solid black;
+    border-radius: 80px;
+    color: rgb(0, 0, 0);
+    background: rgba(223, 223, 223, 0.446);
+    outline: none;
+    backdrop-filter: blur(40px);
+    padding: 0.5rem 1.8rem;
+}
+.btn-1:hover, .btn-2:hover{
+    background: rgb(227, 226, 226);
+}
+
 .heading {
     background-color: rgba(255, 255, 255, 0.438);
     color: rgb(5, 5, 5);
@@ -67,7 +124,7 @@ body {
     /* text-transform: uppercase; */
 }
 
-button {
+.box-btn {
     cursor: pointer;
     width: max-content;
     font-size: 0.8rem;
@@ -153,12 +210,12 @@ button:active {
 
 }
 
-.btn-1{
+/* .btn-1{
     margin-top: -40rem;
     margin-left:50rem;
 }
 
 .btn-2{
     margin-top: -2.5rem;
     margin-left: 42rem;
-}
+} */
diff --git a/index.html b/index.html
@@ -58,9 +58,26 @@
 
 
 </head>
-
+<div class="navbar">
+    <div class="links">
+        <a href="#" class="active" onclick="linkClick(1)" id="1">Home</a>
+        <a href="#" onclick="linkClick(2)" id="2">Authors</a>
+        <a href="#" onclick="linkClick(3)" id="3">Topics</a>
+        <a href="#" onclick="linkClick(4)" id="4">Contact</a>
+    </div>
+    <div class="buttons">
+        <button class="btn-1" >
+            <a href="signup.html" style="text-decoration:none ;color:black">Sign Up</a>
+
+        </button>
+        <button class="btn-2" >
+            <a href="signin.html" style="text-decoration:none ;color:black">Sign In</a>
+
+        </button>
+    </div>
+</div>
 <body>
-
+    
     <!-- Random Quote Generator -->
     <div class="container">
         <div class="heading">
@@ -75,32 +92,25 @@ <h2>QuoteBuzz</h2>
             </p>
             <p class="person" id="person">C. JoyBell C.</p>
             <div class="button-container">
-                <button class="twitter-button" id="twitter" title="Tweet This!">
+                <button class="twitter-button box-btn" id="twitter" title="Tweet This!">
                     <i class="fab fa-twitter"></i>
                     Tweet This
                 </button>
-                <button class="button" id="new-quote">
+                <button class="button box-btn" id="new-quote">
                     <i class="fa-solid fa-quote-right"></i>
                     Next Quote
                 </button>
-                <button class="twitter-button" id="copy">
+                <button class="twitter-button box-btn" id="copy">
                     <i class="fa-solid fa-copy"></i>
                     Copy
                 </button>
-                <button class="sound" id="sound">
+                <button class="sound box-btn" id="sound">
                     <i class="fas fa-volume-up"></i>
                     sound
                 </button>
             </div>
         </div>
-        <button class="btn-1" >
-            <a href="signup.html" style="text-decoration:none ;color:black">Sign Up</a>
-
-        </button>
-        <button class="btn-2" >
-            <a href="signin.html" style="text-decoration:none ;color:black">Sign In</a>
-
-        </button>
+
     </div>
 
 

diff --git a/js/script.js b/js/script.js
@@ -86,3 +86,18 @@ btn.addEventListener("click", async () => {
 
 twitterBtn.addEventListener('click', tweetQuote);
 copyBtn.addEventListener('click', copyQuote);
+
+function linkClick(id){
+  const clicked = document.getElementById(id);
+  if(!clicked.classList.contains('active')){
+    const active = document.getElementsByClassName('active');
+    Array.from(active).forEach(element => {
+      element.classList.remove('active');
+      // console.log(element);
+    });
+    // console.log(active);
+    clicked.classList.add('active');
+    clicked.style.transitionTimingFunction="ease-out";
+    clicked.style.transitionDuration=".3s"
+  }
+}