Merge pull request #76 from Sanjayshreeram/stylingmain

Added some style to mainpage
Karamraj · Oct 3, 2023 · 3d364e4 · 3d364e4
2 parents 97f7d14 + 8c74d0f
commit 3d364e4
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 3 deletions.
diff --git a/ProductsPage/MainPage/index.html b/ProductsPage/MainPage/index.html
@@ -62,8 +62,11 @@
             <nav class="navbar flex-grow-1 align-self-center me-sm-5 pe-lg-5">
                 <div class="container-fluid me-sm-5 pe-sm-5">
                     <form class="d-flex me-sm-5 pe-sm-5 w-100" role="search">
-                        <input class="searchBar form-control me-sm-2 h-100 w-100 border-danger border-opacity-25" type="search"
-                            placeholder="Search" aria-label="Search" />
+                        <div class="input-group">
+                            <input class="searchBar form-control h-100 border-danger border-opacity-25" type="search"
+                                placeholder="Search" aria-label="Search" />
+                            <button class="btn btn-outline-danger" type="submit"><i class="bi bi-search"></i></button>
+                        </div>
                     </form>
                 </div>
             </nav>

diff --git a/ProductsPage/style.css b/ProductsPage/style.css
@@ -2,12 +2,52 @@
 @import url(../CSS/reset.css);
 @import url(../Home-Page/style.css);
 
+
+
+
+
+
 .main-header {
   height: 11rem;
+
+}
+
+
+.nav-bar {
+  height: 50px;
+  display: flex;
+
+
+
+
 }
+
+
 .main-body {
+  z-index: -6;
+  width: 100%;
   margin-top: 12.9rem;
+  height: 450px;
+  background: rgb(210,9,102);
+background: linear-gradient(193deg, rgba(221,9,102,0.375875350140056) 0%, rgba(182,35,35,1) 83%);
+}
+
+.dropdown {
+  width: 40px;
 }
+.dropdown-toggle {
+  background: rgb(94,65,75);
+  background: linear-gradient(90deg, rgba(94,65,75,1) 35%, rgba(255,0,70,1) 100%);
+  font-size: medium;
+  color: #fff;
+
+}
+
+
+
+
+
+
 .thumb-wrapper {
   padding: 2.5rem 1.5rem;
   background: #fff;
@@ -52,10 +92,23 @@
 }
 .book-name {
   min-height: 4.3rem;
+
 }
 
 .second-navbar-bi-list-clicked {
 	z-index: 1;
 	transition: all ease .5s;
 	top: -40rem;
-}
+
+}
+
+.search-button {
+  background:transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.search-button i {
+  font-size: 1.5rem; 
+}