Merge pull request #3439 from Sudhanshu248/main

Improved the UI of search bar on book page
anuragverma108 · Oct 14, 2024 · 3c4d969 · 3c4d969
2 parents a2eb468 + 35f27d1
commit 3c4d969
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 6 deletions.
diff --git a/books.html b/books.html
@@ -51,6 +51,38 @@
     left:0;
     top:25%;
     }
+
+  #book-search{
+    border: 4px solid white;
+    border-radius: 70px;
+    color: black;
+    padding: 20px;
+    font-size: 20px;
+    color: rgb(0, 0, 0);
+    box-shadow: 4px 4px 14px rgba(185, 182, 182, 0.892);
+    background-color: white;
+    font-size: 2rem;
+  }
+  #book-search::placeholder{
+    color: black;
+  }
+
+  #text{
+    position: relative;
+  }
+
+
+  #store{
+    display:flex; 
+    direction:row;
+    justify-content:flex-end; 
+    align-items: center; 
+  }
+
+  #book-search:hover{
+    box-shadow: 4px 4px 14px #A30F17;
+  }
+
   </style>
 
 </head>
@@ -67,6 +99,7 @@
 
 <body>
   <style>
+
     .action {
   position: fixed;
   top: 20px;
@@ -590,13 +623,16 @@ <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
 
     <div class="container mx-auto flex items-center flex-wrap pt-4 pb-12">
 
-        <nav id="store" class="w-full z-30 top-0 px-6 py-1">
-            <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3">
+
+      <nav id="store" class="w-full z-30 top-0 px-6 py-1">
+        <input type="text" id="book-search" placeholder="Search books..." class="p-2 border border-gray-300 rounded-md mb-4 outline-none mt-[20px] border-b-gray-400 border-b-[1px] ">
+
+            <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3" style="width:24px; height: 24px; position: absolute; right: 560px;">
 
-                <div class="flex items-center" id="store-nav-content">
+                <div class="flex items-center" id="store-nav-content" style="width:24px; height: 24px; bottom: 10px">
 
                     <a class="pl-3 inline-block no-underline hover:text-black" href="#">
-                        <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                        <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24">
                             <path d="M7 11H17V13H7zM4 7H20V9H4zM10 15H14V17H10z" />
                         </svg>
                     </a>
@@ -610,7 +646,6 @@ <h3 class="h3 card-title">"Enriching stories to warm your heart"</h3>
                 </div>
           </div>
         </nav>
-        <input type="text" id="book-search" style="border-bottom:solid gray 1px ;" placeholder="Search books..." class="p-2 border border-gray-300 rounded-md mb-4 outline-none mt-[20px] border-b-gray-400 border-b-[1px] ">
 
         <!--books start here-->
 

diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
         scrollbar-color: #888 #f1f1f1;
         cursor: default; /* Show default cursor */
     }
-
+ 
     body::-webkit-scrollbar {
       width: 12px;
     }