Merge pull request #52 from kapilG0/gssoc-level-kap

there is search button at top but no input field to take user input #35

assets/css/style.css

@@ -820,7 +820,13 @@ body {
   font-size: var(--fs-5);
 }
 
-.blog-card .card-subtitle { text-transform: uppercase; }
+.blog-card .card-subtitle {
+  text-transform: uppercase;
+}
+.me-2{
+  border:1px solid black;
+}
+
 
 .blog-card .card-title {
   margin-block: 10px 15px;
@@ -1411,6 +1417,22 @@ body {
     margin-inline: 0;
   }
 }
+.x-input {
+  display: flex;
+  border: 1px solid #ccc;
+  cursor: pointer;
+}
+
+.x-input input.me-2 {
+  border: 0;
+  outline: 0;
+}
+.cross{
+  width: 10%;
+  margin-right: 2%;
+  cursor: pointer;
+}
+
 
 /**
    * FAQ

assets/js/script.js

@@ -26,7 +26,24 @@ const navbar = document.querySelector("[data-navbar]");
 const navTogglers = document.querySelectorAll("[data-nav-toggler]");
 const navLinks = document.querySelectorAll("[data-nav-link]");
 const overlay = document.querySelector("[data-overlay]");
-
+let slideSearch = document.querySelector(".me-2");
+let slideCross= document.querySelector(".cross");
+let searchIcon= document.querySelector(".header-action-btn");
+
+slideSearch.style.display='none'
+slideCross.style.display='none'
+function showBar() {
+  slideSearch.style.display = "block";
+  slideCross.style.display='inline-block'
+  searchIcon.style.display='none'
+
+
+}
+function removeSearchBar() {
+  slideSearch.style.display = "none";
+  slideCross.style.display='none'
+  searchIcon.style.display='inline-block'
+}
 const toggleNavbar = function () {
   navbar.classList.toggle("active");
   overlay.classList.toggle("active");

index.html

@@ -97,8 +97,15 @@
       </nav>
 
       <div class="header-actions">
-
-        <button class="header-action-btn" aria-label="toggle search" title="Search">
+        <form>
+        <span class="x-input">
+          <input type="text" class="me-2" />
+          <input type="reset" value=" X " class="cross" onclick="removeSearchBar()" />
+      </span>
+      </form>
+        <button class="header-action-btn" aria-label="toggle search" onclick="showBar()" title="Search">
+
+
           <ion-icon name="search-outline" aria-hidden="true"></ion-icon>
         </button>