Merge pull request #1186 from sau-mili/main

Feat: Modify the section right below carousel

css/index.css

@@ -319,6 +319,11 @@ body {
   font-weight: bold;
 }
 
+.navbar{
+  display: grid;
+  grid-auto-flow: column;
+}
+
 /*adding transition property to the images of the cateogory-grid section*/
 #category-grid img {
   transition: transform 0.3s ease-in-out;
@@ -341,11 +346,37 @@ body {
   transform: scale(1.1);
 }
 
-/* Search Bar */
-#searchbar input {
+Search Bar 
+#searchbar{
+  width: 100%;
+
+}
+ #searchbar input {
   transition: border-color 0.3s ease-in-out;
+
+}
+
+#searchbar {
+  display: flex; /* Ensures flex layout */
+  align-items: center; /* Centers items vertically */
+  min-width: 40%; 
+
+}
+
+#searchbar .flex-grow {
+  flex-grow: 1; /* Allows the input to grow */
 }
 
+#searchbar .searchbar {
+  width: 100%; /* Makes the input take up available space */
+  min-width: 700px;
+  flex-grow: 1;
+  padding: 8px;
+
+  box-sizing: border-box; /* Ensures padding is included in width */
+}
+
+
 #searchbar input:focus {
   border-color: #2874F0; /* Change the border color on focus */
 }
@@ -463,6 +494,7 @@ body {
   /* Increased box shadow on hover */
 }
 
+
 #faq .accordion .card-header {
   background-color: #fff;
   border: none;
@@ -688,4 +720,15 @@ body {
   font-weight: 500;
   font-size: 16px;
   color: #878787;
+}
+
+
+.banner{
+  object-fit: cover;
+  width: 100%;
+  margin: 15px 0px;
+}
+
+.searchbar{
+  width:40%;
 }

index.html

@@ -57,7 +57,7 @@
 								</svg>
 							</span>
 							<span class="flex-grow">
-								<input id="input_data" type="text" placeholder="Search for Products, Brands and More" />
+								<input id="input_data" class="searchbar" type="text" placeholder="Search for Products, Brands and More" />
 							</span>
 							<div id="autocompleteResults" class="autocom-box" style="display: none;
 							position: absolute;
@@ -69,13 +69,13 @@
 						</div>
 					</li>
 				</ul>
-				<ul class="navbar-nav ml-auto"
+				<ul  class="navbar-nav ml-auto"
 					style="flex-wrap: nowrap;flex-direction: row;width: 40vw; justify-content: space-around">
 					<li class="nav-item navItem2 dropdown" id="navbarDropdow">
 						<a class="nav-link nav-dd acnavdd" href="#" id="navbarDropdown" role="button"
 							data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 							<img src="img/svg/profile-.svg" alt="Profile" />
-							<span class="navname navname_ac"> Account <i class="bi bi-chevron-down"></i><i
+							<span class="navname navname_ac"> Login <i class="bi bi-chevron-down"></i><i
 									class="bi bi-chevron-up"></i></span>
 						</a>
 						<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="left: 0;">
@@ -145,7 +145,7 @@
 	<!--Header end -->
 
 	<!-- categorylist -->
-	<div id="categorylist-wrapper" class="categorylist-wrapper">
+	<div id="categorylist-wrapper" class="container-fluid categorylist-wrapper">
 		<ul id="categories" class="categories"></ul>
 	</div>
 
@@ -191,13 +191,15 @@
 					<img src="img/f09f551230626a04.jpg" class="d-block w-100" alt="image">
 				</div>
 			</div>
-			<button class="carousel-control-prev bg-white" style="width: 35px; height: 45%;  margin-top: 60px;"
+			<button class="carousel-control-prev " style="width: 35px; height: 45%;  margin-top: 60px;box-shadow: 2px 2px grey;background-color: white; border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;"
 				type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
 				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
 				<i class="bi bi-caret-left" style="color: black; z-index: 50; margin-right: 10px;"></i>
 				<span class="visually-hidden">Previous</span>
 			</button>
-			<button class="carousel-control-next bg-white" style="width: 35px; height: 45%;margin-top: 60px;"
+			<button class="carousel-control-next" style="width: 35px; height: 45%;margin-top: 60px; background-color: white; box-shadow: -2px 2px grey;border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;"
 				type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
 				<span class="carousel-control-next-icon" aria-hidden="true"></span>
 				<i class="bi bi-caret-right" style="color: black; z-index: 50; margin-right: 10px;"></i>
@@ -207,6 +209,13 @@
 	</div>
 	<!-- carousel end -->
 
+	<!-- bank card -->
+	 <div class="container-fluid">
+		<img src="/bank-banner/sbi.webp" class="banner"/>
+
+	 </div>
+
+
 
 	<!-- search product show Showing results-->
 	<div class="containter-fluid bg-white">