Added navigation bar to the website

Its-Aman-Yadav · May 18, 2024 · d9e66b3 · d9e66b3
1 parent af549ee
commit d9e66b3
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 24 deletions.
diff --git a/css/style.css b/css/style.css
@@ -28,6 +28,7 @@ label.logo img{
   margin-top:-5px;
   border-radius: 450px;
 }
+
 nav ul{
   float: right;
   margin-right: 20px;
@@ -43,9 +44,8 @@ nav ul li{
 }
 
 nav ul li a {
-  color: rgb(252, 250, 250);
-  font-size: 15px;
-  padding: 10px 10px 10px 28px;
+  color: black;
+  padding: 5px 5px 5px 30px;
   border-radius: 3px;
   padding-right: 50px;
   text-transform: uppercase;
@@ -124,7 +124,6 @@ nav ul li  a:hover{
     text-decoration: none;
   }
   .navbar nav ul li a{
-    font-size: 20px;
     text-decoration: none;
   }
   a:hover,a.active{
@@ -451,8 +450,25 @@ body {
 
 }
 
-html,
-body {
+.ubuntu-regular {
+  font-family: "Ubuntu", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+*{
+  font-family: 'Ubuntu';
+  font-weight: 400;
+}
+
+body
+	{
+		background: #ffffff;
+   font-family: 'Rajdhani', sans-serif;
+    font-weight: 400;
+	}
+
+html,body {
   width: 100%;
   overflow-x: hidden;
 
@@ -562,6 +578,71 @@ strong {
 .col-md-4:hover{
   transform:scale(1.05);
 }
+nav {
+  background-color: #FFDD55;
+  color: #000000;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+li {
+  margin-right: 20px;
+}
+a {
+  color: #000000;
+  text-decoration: none;
+  transition: color 0.3s ease;
+  font-size: 20px;
+  font-weight: bolder;
+}
+
+a:hover {
+  text-decoration: none; 
+  color: #f1c11a;;
+}
+
+.logo {
+  font-weight: bold;
+  color: #FFDD55;
+  background-color: #FFDD55;
+  margin-left: 0px;
+}
+
+
+.logo {
+  display: inline-block;
+  width: 200px; 
+  height: 80px; 
+  overflow: hidden;
+}
+.logo img {
+  width: 100%; 
+  height: 100%; 
+  object-fit: cover; 
+
+}
+
+@media (max-width: 768px) {
+  .logo {
+      width: 120px; 
+      height: 50px; 
+  }
+}
+
 
 #about,
 #services,
@@ -1290,6 +1371,7 @@ h3{
   width: 100%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   z-index: 1000;
+  background-color: #FFDD55;
 }
 
 body {

diff --git a/index.html b/index.html
@@ -43,28 +43,18 @@
 
 <body>
 
-  <!--navbar-->
-  <div class="navbar">
+  <div class="container">
     <nav>
-      <input type="checkbox" id="check">
-      <label for="check" class="checkbut">
-        <i class="fas fa-bars"></i>
-      </label>
-      <label class="logo" style="margin-left:5px;"><img src="images/fav.png" alt="logo">
-        <span class="logo-text" style="margin-left: 0;">Open Source Village</span>
-    </label>
+      <span class="logo"><img src="fav.png" alt="logo png"></span>
       <ul>
-        <li><i class="fa-solid fa-house" style="filter:invert(1)"></i><a class="active" href="#home" style="text-decoration: none; margin-left: 10px;">Home</a></li>
-        <li><i class="fa-solid fa-circle-info" style="filter:invert(1)"></i><a href="#about" style="text-decoration: none;">About</a></li>
-        <li><i class="fa-solid fa-list" style="filter:invert(1)"></i><a href="#services" style="text-decoration: none;">Services</a></li>
-        <li><i class="fa-solid fa-user"style="filter:invert(1)"></i><a href="#testimonials" style="text-decoration: none;">Reviews</a></li>
-        <li><i class="fa-solid fa-at" style="filter:invert(1)"></i><a href="#contact" style="text-decoration: none;">Contact Us</a></li>
-        <li><i class="fa-solid fa-message" style="filter:invert(1)"></i><a href="#feedback" style="text-decoration: none;">Feedback</a></li>
+        <li><a href="#home">Home</a></li>
+        <li><a href="#about">About</a></li>
+        <li><a href="#services">Services</a></li>
+        <li><a href="#contact">Contact</a></li>
+        <li><a href="#faqq">FAQ</a></li>
       </ul>
     </nav>
-    <section></section>
   </div>
-
   <!-- preloader section -->
   <section class="preloader">
     <div class="sk-circle">
@@ -247,7 +237,7 @@ <h4>Emily Johnson</h4>
   </div>
 </section>
 
-<section class="faqq">
+<section class="faqq" id="faqq">
 
   <div class="containerr">