Search Bar work Done

zaman20 · Sep 24, 2023 · aacbd23 · aacbd23
1 parent 05c7fd2
commit aacbd23
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -32,10 +32,17 @@
                                         </nav>
                                 </div>
                                 <div class="header-search">
-                                        <i class="fa-solid fa-magnifying-glass"></i>
+                                    <i class="fa-solid fa-magnifying-glass search-icon"></i>
+                                    <i class="fa-solid fa-xmark close-icon"></i>
                                 </div>
                             </div>
                         </div>
+                        <div class="search-box">
+                            <form action="" class="search-content">
+                                <input type="text" class="search-text" placeholder="Search Here">
+                                <input type="submit"  value="Search" class="search-btn">
+                            </form>
+                        </div>
                     </div>
                 </div>
 
@@ -112,10 +119,14 @@ <h2>Having car insurance is a necessity in many states and can be a …</h2>
                             <h3>About Me</h3>
                         </div>
                         <div class="sidebar-box">
-                            <h3>About Me</h3>
+                            <h3>Featured Post</h3>
                         </div>
                         <div class="sidebar-box">
-                            <h3>About Me</h3>
+                            <h3>Search this blog</h3>
+                        </div>
+
+                        <div class="sidebar-box">
+                            <h3>Archived</h3>
                         </div>
                     </div>
                 </div>
@@ -163,6 +174,9 @@ <h2>About Us</h2>
         </div>
     </section>
 
+
+    <script src="js/jquery-3.6.4.min.js"></script>
+    <script src="js/myscript.js"></script>
 
 </body>
 </html>
diff --git a/js/jquery-3.6.4.min.js b/js/jquery-3.6.4.min.js
diff --git a/js/myscript.js b/js/myscript.js
@@ -0,0 +1,11 @@
+$(document).ready(function(){
+    $('.search-icon').on('click',function(){
+      $('.search-box').addClass('search-show');
+      $('.header-search i').toggle();
+    });
+
+    $('.close-icon').on('click',function(){
+        $('.search-box').removeClass('search-show');
+        $('.header-search i').toggle();
+      });
+});
diff --git a/style.css b/style.css
@@ -1,3 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');
+
+body h1,h2,h3,h4,h5,h6,a, p{
+    font-family: 'Montserrat', sans-serif;
+}
 .header-bg{
     width: 100%;
   background: linear-gradient(90deg,red,blue,orange,green);
@@ -36,7 +41,7 @@
 }
 .header-menu ul li a{
     text-decoration: none;
-    font-size: 20px;
+    font-size: 16px;
     text-transform: capitalize;
     font-weight: 500;
     color: #333;
@@ -48,7 +53,7 @@
     width: 990px;
     margin: 0 auto;
 }
-.fa-solid.fa-magnifying-glass {
+.header-search i{
     font-size: 20px;
     margin-top: 14px;
     color: #cac6c6;
@@ -150,7 +155,7 @@
     margin-right: 20px;
 }
 .sidebar-box {
-    width: 100%;
+    width: 300px;
     min-height: 112px;
     box-shadow: 0 0 6px #dcd9d9;
     padding: 20px;
@@ -159,7 +164,7 @@
     margin-left: 25px;
 }
 .sidebar-box h3{
-    font-size: 20px;
+    font-size: 16px;
     text-transform: uppercase;
 }
 #footer-section{
@@ -209,4 +214,52 @@
 .dev-text p a:hover{
     color: rgb(16, 125, 250);
 
+}
+.header-area{
+    position: relative;
+}
+.search-box{
+    margin-bottom: 30px;
+    background-color: #feffff;
+    box-shadow: 0 0 5px #eef4f4;
+    position: absolute;
+    z-index: 9;
+    width: 100%;
+    top: 64px;
+    left: lef;
+    left: 0;
+    height: 79px;
+    padding-bottom: 30px;
+    padding-top: 10px;
+    visibility: hidden;
+    opacity: 0;
+    transform: scaleY(0);
+    transition: 0.4s;
+    transform-origin: top;
+}
+.search-show{
+    visibility: visible;
+    opacity: 1;
+    transform: scaleY(1);
+}
+.close-icon{
+    display: none;
+}
+.search-content{
+    width: 990px;
+    margin: 0 auto;
+}
+input.search-text {
+    width: 951px;
+    height: 49px;
+    border: 1px solid #417eed;
+    border-radius: 5px;
+}
+input.search-btn {
+    height: 49px;
+    margin-left: -65px;
+    border: 1px solid #01bd9a;
+    background: #2cb2f7;
+    color: white;
+    border-radius: 5px;
 }