114 |
115 |
Account Information
116 | EDIT
117 |
118 |
119 |
120 |
121 |
122 |
123 |
Full Name
124 |
${data[0].user_name || "Guest"}
125 |
126 |
127 |
128 |
Email id
129 |
${data[0].user_email || "guest@example.com"}
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
DOB
138 |
${data[0].user_dathofbirth || "YYYY/MM/DD"}
140 |
141 |
Mobile Number
142 |
+91-${data[0].user_number}
144 |
145 |
Default Address
146 |
${data[0].user_address || "India"} ${
147 | data[0].user_pincode || ""
148 | }
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 | `;
157 | }
158 |
159 | function ClosePopBtn_address() {
160 | document.getElementById("UpdateAddress_PopUp_section").style.display = "none";
161 | }
162 |
163 | function ShowChangeAddressPop() {
164 | document.getElementById("UpdateAddress_PopUp_section").style.display =
165 | "block";
166 | }
167 | document.querySelector("form").addEventListener("submit", (event) => {
168 | event.preventDefault();
169 | let userndata = localStorage.getItem("userNumberOndataID");
170 | let fname = document.getElementById("firstName").value;
171 | let lname = document.getElementById("lastName").value;
172 | let genderSelect = document.getElementById("genderSelect").value;
173 | let dobofuser = document.getElementById("dobofuser").value;
174 | let email = document.getElementById("email").value;
175 | let usermobilenumber = document.getElementById("usermobilenumber").value;
176 | let userAddress = document.getElementById("userAddress").value;
177 | let userAddressPincode = document.getElementById("userAddressPincode").value;
178 | localStorage.setItem("userpincodelocal", userAddressPincode);
179 | fetch(`https://jsonserver-twny.onrender.com/jiomartuserdata/${userndata}`, {
180 | method: "PATCH",
181 | body: JSON.stringify({
182 | user_fname: fname,
183 | user_lname: lname,
184 | user_name: fname + " " + lname,
185 | user_number: usermobilenumber,
186 | user_email: email,
187 | user_dathofbirth: dobofuser,
188 | user_gender: genderSelect,
189 | user_address: userAddress,
190 | user_pincode: userAddressPincode,
191 | }),
192 | headers: { "Content-Type": "application/json" },
193 | });
194 | ClosePopBtn_address();
195 | dataShowUserAccount();
196 | });
197 |
198 | function logountUser() {
199 | localStorage.clear();
200 | window.open("./index.html", "_Salf");
201 | }
202 |
203 | function movetocartpage() {
204 | window.open("./cartpage.html", "_Salf");
205 | }
206 |
--------------------------------------------------------------------------------
/assets/js/productview.js:
--------------------------------------------------------------------------------
1 | document.body.innerHTML = `
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | `;
10 | dishplayProductOnItemData();
11 | async function dishplayProductOnItemData() {
12 | try {
13 | let id = localStorage.getItem("selectProductIdandshowDetails");
14 | let res = await fetch(`https://jsonserver-twny.onrender.com/items/${id}`);
15 | let data = await res.json();
16 |
17 | document.getElementById("product_Overview_Nav").innerHTML = `
18 |
19 |
20 | Home
21 |
22 |
23 |
25 |
26 | All Categories
28 |
29 |
30 |
32 |
33 | ${data.item_name}
35 |
36 |
37 | `;
38 | let buttonInt;
39 | if (data.item_quantity == 0) {
40 | buttonInt = `
Add to Cart `;
41 | } else {
42 | buttonInt = `
43 |
${data.item_quantity}
44 | `;
45 | }
46 |
47 | let likeornot;
48 | if (data.item_like) {
49 | likeornot = 'style="color:red"';
50 | }
51 | document.getElementById("product_Overview_section").innerHTML = `
52 |
53 |
54 |
55 |
56 |
61 |
62 |
63 |
64 |
65 |
66 |
${data.item_name}
67 |
68 |
69 |
70 |
₹ ${data.item_final_price}.00
71 |
M.R.P: ₹ ${data.item_price}.00
72 |
73 |
74 |
75 |
76 |
77 | You Save : ₹ ${data.item_disc_price}.00 Inclusive of
78 | all taxes
79 |
80 |
In Stock
81 |
Sold By Reliance Retail
82 |
Inaugural Offer Free Shipping
83 |
84 |
85 |
${buttonInt}
86 |
87 |
88 |
97 |
98 |
99 |
Available Offers 3
100 |
101 |
102 |
BUY MORE SAVE MORE
103 |
104 | Get Sugar at ₹ 9 only on Grocery Shopping of Min. ₹ 1499.
105 |
106 |
View 1 Offer
107 |
108 |
109 |
ADDITIONAL OFFERS
110 |
111 | Get Sugar at Rs.9 only on Grocery Shopping of Min. 1499.
112 |
113 |
View 1 offer
114 |
115 |
116 |
BANK OFFERS
117 |
118 | Pay using Paytm Wallet & Get up to Rs. 750/- Cashback.
119 |
120 |
View 6 more offers
121 |
122 |
123 |
SEE MORE
124 |
125 |
126 | `;
127 |
128 | data.item_other_img_url.forEach((element) => {
129 | let img = document.createElement("img");
130 | img.src = element;
131 | document.querySelector(".AllImagesSlider").append(img);
132 | });
133 |
134 | document.getElementById("Item_Description").innerHTML = `
135 |
136 |
Description
137 |
138 |
139 | ${data.item_name}
147 |
148 | Disclaimer:
153 |
154 |
155 |
156 |
157 |
Features & Details
158 |
159 |
Removes tough stains
160 |
Leaves a pleasant scent
161 |
162 |
163 |
164 | `;
165 | if (localStorage.getItem("userpincodelocal") == null) {
166 | document
167 | .getElementById("pincodeFromPopUp1")
168 | .setAttribute("value", "302034");
169 | } else {
170 | document.getElementById("pincodeFromPopUp1").value =
171 | localStorage.getItem("userpincodelocal");
172 | }
173 | } catch (error) {
174 | console.log(error);
175 | }
176 | }
177 |
--------------------------------------------------------------------------------
/assets/js/ordersummary.js:
--------------------------------------------------------------------------------
1 | document.body.innerHTML = `
2 |
3 |
4 |
5 |
6 |
7 | `;
8 |
9 | showcartpageData();
10 | async function showcartpageData() {
11 | try {
12 | let res = await fetch(
13 | `https://jsonserver-twny.onrender.com/items?item_addtocart=true`
14 | );
15 | let data = await res.json();
16 | let totalPayment = 0;
17 | let savePayment = 0;
18 | let count = 0;
19 | data.forEach((element) => {
20 | totalPayment += element.item_final_price * element.item_quantity;
21 | savePayment += element.item_disc_price * element.item_quantity;
22 | count++;
23 | });
24 | document.querySelector(".mc_amount").innerText = `₹ ${totalPayment}.00`;
25 | document.querySelector(
26 | ".mc_savings"
27 | ).innerHTML = `You save ₹ ${savePayment}.00`;
28 | document.querySelector(".items").innerHTML = `${count} item(s)`;
29 |
30 | let coupanPayment = (totalPayment * 20) / 100;
31 | document.getElementById("cartDataSection_container").innerHTML = `
32 |
33 |
Order Summary
34 |
35 |
Select Delivery Address
36 |
37 |
38 |
39 |
40 |
41 |
Basket (${count} items) ₹${totalPayment}.00
42 |
43 |
44 |
45 |
Offer is
46 | applicable only on products sold by Reliance Retail . For specific exclusions & offer
47 | details refer T&C
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
Your
57 | Cart
58 |
59 |
Order Summary
60 |
Payment
62 |
63 |
64 |
65 |
66 |
67 |
Payment Details
68 |
69 | MRP Total ₹${
70 | totalPayment + savePayment
71 | }.00
72 |
73 |
74 |
Product
75 | Discount -
76 | ₹${savePayment}.00
77 |
78 |
79 | Amount ₹${totalPayment}.00
80 |
81 |
82 | Coupon Amount - ₹${coupanPayment}
83 |
84 |
85 | Total Amount ₹${
86 | totalPayment - coupanPayment
87 | }
88 |
89 |
You Save ₹${
90 | savePayment + coupanPayment
91 | }
92 |
93 |
94 |
95 |
96 | Make Payment
97 |
98 |
99 | `;
100 | data.forEach((element) => {
101 | let div = document.createElement("div");
102 | div.innerHTML = `
103 |
104 |
106 |
107 |
108 |
109 |
${element.item_name.slice(0, 20)}...
110 |
₹${
111 | element.item_final_price * element.item_quantity
112 | }.00 ₹${
113 | element.item_price * element.item_quantity
114 | }.00 You Save ₹${
115 | element.item_disc_price * element.item_quantity
116 | }.00
117 |
Sold By Reliance Retail
118 |
Qty : ${element.item_quantity}
119 |
120 | `;
121 | document.querySelector(".addproducttocartpageitems").append(div);
122 | });
123 |
124 | if (localStorage.getItem("userPromoCode") == "true") {
125 | }
126 | document.getElementById("countOfCart").innerHTML = data.length;
127 | } catch (error) {
128 | console.log(error);
129 | }
130 | }
131 |
132 | function goonmakepaymentpage() {
133 | let pay = document
134 | .getElementById("cart_netpay_makepayment")
135 | .innerText.slice(1, 100);
136 | console.log(pay);
137 | localStorage.setItem("usemakepayment", pay);
138 | window.open("./makepayment.html", "_Self");
139 | }
140 |
141 | checkuserdatainoderpage();
142 | async function checkuserdatainoderpage() {
143 | try {
144 | let userndata = localStorage.getItem("userNumberOndata");
145 | let res = await fetch(
146 | `https://jsonserver-twny.onrender.com/jiomartuserdata?user_number=${userndata}`
147 | );
148 | let data = await res.json();
149 | document.getElementById("userAddressShowForD").innerHTML = `
150 |
151 | Change/Add Address
155 |
156 | `;
157 | } catch (error) {
158 | console.log(error);
159 | }
160 | }
161 | function updateDaddressFun() {
162 | if (
163 | document.getElementById("updateDaddressID").innerText ==
164 | "Change/Add Address"
165 | ) {
166 | document.getElementById("userAddressShowForDAddress").disabled = false;
167 | document.getElementById("userAddressShowForDPincode").disabled = false;
168 | document.getElementById("updateDaddressID").innerHTML = "Update Address";
169 | } else {
170 | document.getElementById("userAddressShowForDAddress").disabled = true;
171 | document.getElementById("userAddressShowForDPincode").disabled = true;
172 | document.getElementById("updateDaddressID").innerHTML =
173 | "Change/Add Address";
174 | let userndata = localStorage.getItem("userNumberOndataID");
175 | fetch(`https://jsonserver-twny.onrender.com/jiomartuserdata/${userndata}`, {
176 | method: "PATCH",
177 | body: JSON.stringify({
178 | user_address: document.getElementById("userAddressShowForDAddress")
179 | .value,
180 | user_pincode: document.getElementById("userAddressShowForDPincode")
181 | .value,
182 | }),
183 | headers: { "Content-Type": "application/json" },
184 | });
185 | }
186 | }
187 |
--------------------------------------------------------------------------------
/assets/js/showallproduct.js:
--------------------------------------------------------------------------------
1 | document.body.innerHTML = `
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | `;
31 |
32 | let locaValue = localStorage.getItem("productsCategory");
33 |
34 | if (locaValue == "Top_Deals" || locaValue == "fruitsNvegies") {
35 | document.querySelector(".leftSide").innerHTML = `
36 |
37 |
Categories
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | `;
62 | } else if (locaValue == "kitchenware") {
63 | document.querySelector(".leftSide").innerHTML = `
64 |
65 |
Categories
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 | `;
106 | } else if (locaValue == "mens") {
107 | document.querySelector(".leftSide").innerHTML = `
108 |
109 |
Categories
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 | `;
126 | } else if (locaValue == "Electronics") {
127 | document.querySelector(".leftSide").innerHTML = `
128 |
129 |
Categories
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 | `;
158 | } else if (locaValue == "makeup") {
159 | document.querySelector(".leftSide").innerHTML = `
160 |
161 |
Categories
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 | `;
186 | }
187 |
188 | dishplayData2("");
189 | async function dishplayData2(valFOR) {
190 | try {
191 | document.getElementById("products_display").innerHTML = "";
192 | let res = await fetch(
193 | `https://jsonserver-twny.onrender.com/items?item_category=${locaValue}&_sort=${valFOR}`
194 | );
195 | let data = await res.json();
196 |
197 | data.forEach((element) => {
198 | let buttonInt;
199 | if (element.item_quantity == 0) {
200 | buttonInt = `
Add to Cart `;
201 | } else {
202 | buttonInt = `
203 |
${element.item_quantity}
204 | `;
205 | }
206 | let div = document.createElement("div");
207 | div.innerHTML = `
208 |
${
209 | element.item_discount
210 | } %
211 |
214 |
217 |
${element.item_name.slice(0, 50)}
218 |
219 |
220 |
₹ ${element.item_final_price}.00
221 |
M.R.P: ₹ ${
222 | element.item_price
223 | }.00
224 |
Save ₹ ${element.item_disc_price}.00
225 |
226 |
${buttonInt}
227 | `;
228 |
229 | document.getElementById("products_display").append(div);
230 | });
231 | } catch (error) {
232 | console.log(error);
233 | }
234 | }
235 |
--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
6 | -webkit-user-select: none;
7 | -moz-user-select: none;
8 | -ms-user-select: none;
9 | user-select: none;
10 | }
11 |
12 | body {
13 | display: flex;
14 | flex-direction: column;
15 | align-items: center;
16 | background-color: #ffff;
17 | }
18 |
19 | section {
20 | max-width: 1680px;
21 | min-width: 1024px;
22 | height: auto;
23 | width: 100%;
24 | margin: 0 auto;
25 | position: relative;
26 | }
27 |
28 | #homepage_top_slider_part{
29 | margin-top: 112px;
30 | }
31 | .homePage-topslideshow-container {
32 | position: relative;
33 | margin: auto;
34 | }
35 |
36 | .homePage-topslideshow-container img {
37 | vertical-align: middle;
38 | }
39 |
40 | .homePage-topslideshow-container .prev,
41 | .homePage-topslideshow-container .next {
42 | cursor: pointer;
43 | position: absolute;
44 | top: 50%;
45 | width: auto;
46 | padding: 16px;
47 | margin-top: -22px;
48 | color: white;
49 | font-weight: bold;
50 | font-size: 18px;
51 | transition: 0.6s ease;
52 | border-radius: 0 3px 3px 0;
53 | user-select: none;
54 | }
55 |
56 | .homePage-topslideshow-container .next {
57 | right: 0;
58 | border-radius: 3px 0 0 3px;
59 | }
60 |
61 | .homePage-topslideshow-container .prev:hover,
62 | .homePage-topslideshow-container .next:hover {
63 | background-color: rgba(0, 225, 255, 0.61);
64 | }
65 |
66 | .homePage-topslideshow-dots-container {
67 | display: flex;
68 | justify-content: center;
69 | position: absolute;
70 | width: 100%;
71 | bottom: 5px;
72 | }
73 |
74 | .homePage-topslideshow-dots-container .dot {
75 | cursor: pointer;
76 | height: 10px;
77 | width: 10px;
78 | margin: 0 2px;
79 | background-color: #ffff;
80 | border-radius: 50%;
81 | display: inline-block;
82 | transition: background-color 0.6s ease;
83 | border: 1px solid rgb(148, 148, 148);
84 | }
85 |
86 | .homePage-topslideshow-dots-container .active,
87 | .homePage-topslideshow-dots-container .dot:hover {
88 | background-color: #007bff;
89 | border: 2px solid white;
90 | }
91 |
92 | /* Fading animation */
93 | .homePage-topslideshow-container .homePage-topslideshow-image {
94 | display: none;
95 | animation-name: fade;
96 | animation-duration: 1.5s;
97 | }
98 |
99 |
100 | @keyframes fade {
101 | from {
102 | opacity: .4
103 | }
104 |
105 | to {
106 | opacity: 1
107 | }
108 | }
109 |
110 | #homepage_top__part_all_category {
111 | margin: 10px 0;
112 | }
113 |
114 | section>img {
115 | width: 100%;
116 | }
117 |
118 | .homepage_boxwithhad_part {
119 | padding: 0 50px;
120 | }
121 |
122 | .homepage_boxwithhad_part h1 {
123 | padding: 20px 0;
124 | font-size: 20px;
125 | color: #000;
126 | text-align: start;
127 | width: 100%;
128 | }
129 |
130 | .homepage_boxwithhad_part_items {
131 | display: grid;
132 | grid-template-columns: repeat(4, 1fr);
133 | gap: 20px;
134 | }
135 |
136 | .homepage_boxwithhad_part_items>div {
137 | background: #efd6da;
138 | border-radius: 15px;
139 | position: relative;
140 | width: 100%;
141 | height: 300px;
142 | display: flex;
143 | flex-direction: column;
144 | align-items: center;
145 | justify-content: center;
146 | }
147 |
148 | .homepage_boxwithhad_part_items>div:hover {
149 | box-shadow: rgba(122, 122, 122, 0.3) 5px 5px, rgba(167, 167, 167, 0.25) 6px 6px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
150 | }
151 |
152 | .homepage_boxwithhad_part_items>div>span {
153 | position: absolute;
154 | color: #fff;
155 | font-size: 16px;
156 | font-family: JioBold;
157 | width: 100%;
158 | text-transform: uppercase;
159 | background: url(https://www.jiomart.com/assets/version1659035733/smartweb/images/offer_bg.png) no-repeat top center;
160 | height: 38px;
161 | background-size: 100%;
162 | text-align: center;
163 | padding: 8px 0 0;
164 | top: 0;
165 | font-weight: 600;
166 | z-index: 1;
167 | }
168 |
169 | .homepage_boxwithhad_part_items>div>span>span {
170 | font-style: italic;
171 | font-size: 18px;
172 | }
173 |
174 | .homepage_boxwithhad_part_items>div>div {
175 | margin-top: 25px;
176 | height: 235px;
177 | width: 200px;
178 | transition: all 0.2s ease-out;
179 | }
180 |
181 | .homepage_boxwithhad_part_items>div:hover div {
182 | transform: scale(1.1, 1.1);
183 | transition: all 0.3s ease-in-out;
184 | }
185 |
186 | .homepage_boxwithhad_part_items>div>div>img {
187 | vertical-align: middle;
188 | border-style: none;
189 | max-width: 100%;
190 | cursor: pointer;
191 | }
192 |
193 | .homepage_boxwithhad_part_items>div>div>p {
194 | font-size: 16px;
195 | font-weight: 600;
196 | font-family: JioBold;
197 | color: #000;
198 | display: -webkit-box;
199 | display: -ms-flexbox;
200 | display: flex;
201 | -webkit-box-pack: center;
202 | -ms-flex-pack: center;
203 | justify-content: center;
204 | overflow: hidden;
205 | height: 38px;
206 | }
207 |
208 | .homepage_bottam_box_twoImage_part_items {
209 | display: grid;
210 | grid-template-columns: repeat(2, 1fr);
211 | gap: 20px;
212 | padding: 10px 15px;
213 | }
214 |
215 | .homepage_bottam_box_twoImage_part_items>img {
216 | width: 100%;
217 | cursor: pointer;
218 | }
219 |
220 | .homepage_bottam_box_twoImagebyRound_part_items {
221 | display: grid;
222 | grid-template-columns: repeat(2, 1fr);
223 | gap: 20px;
224 | padding: 10px 15px;
225 | }
226 |
227 | .homepage_bottam_box_twoImagebyRound_part_items>div {
228 | width: 100%;
229 | border-radius: 12px;
230 | overflow: hidden;
231 | cursor: pointer;
232 | }
233 |
234 | .homepage_bottam_box_twoImagebyRound_part_items>div>img {
235 | width: 100%;
236 | transition: all 0.2s ease-out;
237 | }
238 |
239 | .homepage_bottam_box_twoImagebyRound_part_items>div>img:hover {
240 | transform: scale(1.1, 1.1);
241 | transition: all 0.3s ease-in-out;
242 | }
243 |
244 | #homepage_OffersonGroceriesallproduct_part .homepage_boxwithhad_part_items>div {
245 | background-color: #007bff57 !important;
246 | }
247 |
248 | #homepage_OffersonHousehold_Personalcareallproduct_part .homepage_boxwithhad_part_items>div {
249 | background-color: #c8f9c2 !important;
250 | }
251 |
252 | .homepage_bottam_box_fiveImagebyRound_part_items {
253 | display: grid;
254 | grid-template-columns: repeat(5, 1fr);
255 | gap: 20px;
256 | padding: 10px 15px;
257 | }
258 |
259 | .homepage_bottam_box_fiveImagebyRound_part_items>div {
260 | width: 100%;
261 | border-radius: 12px;
262 | overflow: hidden;
263 | cursor: pointer;
264 | }
265 |
266 | .homepage_bottam_box_fiveImagebyRound_part_items>div>img {
267 | width: 100%;
268 | transition: all 0.2s ease-out;
269 | }
270 |
271 | .homepage_bottam_box_fiveImagebyRound_part_items>div>img:hover {
272 | transform: scale(1.05, 1.05);
273 | transition: all 0.3s ease-in-out;
274 | }
275 |
276 | #homepage_Shopbycategorieso_part {
277 | margin-top: 25px;
278 | }
279 |
280 | .homepage_sliderLiftRightarrow_images_container {
281 | position: absolute;
282 | width: 100%;
283 | display: flex;
284 | justify-content: space-between;
285 | background: antiquewhite;
286 | top: 50%;
287 | height: 0;
288 | }
289 |
290 | .homepage_sliderLiftRightarrow_images_container .prev {
291 | background-image: url(https://www.jiomart.com/assets/version1659035733/smartweb/images/icons/left_arrow.svg);
292 | }
293 |
294 | .homepage_sliderLiftRightarrow_images_container .next {
295 | background-image: url(https://www.jiomart.com/assets/version1659035733/smartweb/images/icons/right_arrow.svg);
296 | }
297 |
298 | .homepage_sliderLiftRightarrow_images_container .prev,
299 | .homepage_sliderLiftRightarrow_images_container .next {
300 | cursor: pointer;
301 | position: absolute;
302 | top: 50%;
303 | width: 50px;
304 | height: 50px;
305 | background-size: 100%;
306 | background-repeat: no-repeat;
307 | }
308 |
309 | .homepage_sliderLiftRightarrow_images_container .next {
310 | right: 0;
311 | border-radius: 3px 0 0 3px;
312 | }
313 |
314 | .homepage_Shopbycategorieso_part_iteams {
315 | display: grid;
316 | grid-template-columns: repeat(8, 18%);
317 | overflow-x: auto;
318 | height: auto;
319 | margin: 0 50px;
320 | gap: 25px;
321 | }
322 |
323 | .homepage_Shopbycategorieso_part_iteams::-webkit-scrollbar {
324 | display: none;
325 | }
326 |
327 | .homepage_Shopbycategorieso_part_iteams>div {
328 | display: flex;
329 | flex-direction: column;
330 | align-items: center;
331 | justify-content: center;
332 | width: 100%;
333 | height: 200px;
334 | cursor: pointer;
335 | background: #fff;
336 | border: 1px solid rgba(111, 114, 132, .25);
337 | border-radius: 12px;
338 | }
339 |
340 | .homepage_Shopbycategorieso_part_iteams>div>img {
341 | width: 55%;
342 | transition: all 0.2s ease-out;
343 | }
344 |
345 | .homepage_Shopbycategorieso_part_iteams>div:hover>img {
346 | transform: scale(1.2, 1.2);
347 | transition: all 0.3s ease-in-out;
348 | }
349 |
350 | .homepage_Shopbycategorieso_part_iteams>div>p {
351 | margin: 10px 0;
352 | text-align: center;
353 | display: block;
354 | font-size: 16px;
355 | font-weight: 700;
356 | font-family: JioBold;
357 | color: #000;
358 | overflow: hidden;
359 | }
360 |
361 | .homepage_top_Shop_from_Top_Categories_part_iteams {
362 | display: flex;
363 | overflow-x: auto;
364 | height: auto;
365 | margin: 0 50px;
366 | gap: 25px;
367 | }
368 |
369 | .homepage_top_Shop_from_Top_Categories_part_iteams::-webkit-scrollbar {
370 | display: none;
371 | }
372 |
373 | .homepage_top_Shop_from_Top_Categories_part_iteams>img {
374 | width: 100%;
375 | transition: all 0.2s ease-out;
376 | }
377 |
378 | .homepage_top_Shop_from_Top_Categories_part_iteams>img:hover {
379 | transform: scale(1.05, 1.05);
380 | transition: all 0.3s ease-in-out;
381 | }
382 |
383 | .homepage_TopDeals_part_all_category_iteams {
384 | display: flex;
385 | overflow-x: auto;
386 | height: auto;
387 | margin: 0 50px;
388 | gap: 15px;
389 | position: relative;
390 | }
391 |
392 | .homepage_TopDeals_part_all_category_iteams::-webkit-scrollbar {
393 | display: none;
394 | }
395 |
396 | .homepage_TopDeals_part_all_category_iteams>div {
397 | background: #ffff;
398 | border: 1px solid rgba(111, 114, 132, .25);
399 | border-radius: 5px;
400 | display: flex;
401 | flex-direction: column;
402 | align-items: center;
403 | cursor: pointer;
404 | }
405 |
406 | .homepage_TopDeals_part_all_category_iteams>div>div:first-child {
407 | width: 205px;
408 | display: flex;
409 | justify-content: space-between;
410 | padding: 5px;
411 | position: absolute;
412 | z-index: 1;
413 | }
414 |
415 | .homepage_TopDeals_part_all_category_iteams>div>div>.homepage_TopDeals_part_dis_section{
416 | background-image: url(https://www.jiomart.com/assets/version1659035733/smartweb/images/icons/offer_bg.svg);
417 | background-size: 100%;
418 | background-repeat: no-repeat;
419 | height: 45px;
420 | width: 45px;
421 | font-size: 10px;
422 | font-weight: 700;
423 | padding: 6px 0 0 11px;
424 | color: white;
425 | }
426 |
427 | .homepage_TopDeals_part_all_category_iteams>div>div>span:first-child>span {
428 | font-size: 12px;
429 | }
430 |
431 | .homepage_TopDeals_part_all_category_iteams .homepage_TopDeals_part_pro_detail {
432 | display: flex;
433 | flex-direction: column;
434 | align-items: center;
435 | height: 175px;
436 | width: 205px;
437 | z-index: 0;
438 | overflow: hidden;
439 | margin-top: 15px;
440 | }
441 |
442 | .homepage_TopDeals_part_all_category_iteams .homepage_TopDeals_part_pro_detail>img {
443 | width: 60%;
444 | transition: all 0.2s ease-out;
445 | }
446 |
447 | .homepage_TopDeals_part_all_category_iteams .homepage_TopDeals_part_pro_detail>img:hover {
448 | transform: scale(1.1, 1.1);
449 | transition: all 0.3s ease-in-out;
450 | }
451 |
452 |
453 | .homepage_TopDeals_part_all_category_iteams .homepage_TopDeals_part_pro_detail>p {
454 | font-size: 14px;
455 | font-family: JioBold;
456 | line-height: 16px;
457 | text-align: left;
458 | letter-spacing: .01px;
459 | color: #000;
460 | display: block;
461 | max-height: 101px;
462 | margin: 0 0 8px;
463 | overflow: hidden;
464 | min-height: 32px;
465 | z-index: 1;
466 | padding: 10px;
467 | padding-bottom: 0;
468 | font-weight: 600;
469 | }
470 |
471 | .homepage_TopDeals_part_all_category_iteams .homepage_TopDeals_part_price_box {
472 | width: 100%;
473 | padding: 0 5px;
474 | }
475 |
476 | .homepage_TopDeals_part_all_category_iteams .homepage_TopDeals_part_price_box>p:first-child {
477 | font-size: 20px;
478 | font-weight: 700;
479 | }
480 |
481 | .homepage_TopDeals_part_all_category_iteams .homepage_TopDeals_part_price_box>p:last-child {
482 | color: #00a100;
483 | font-family: JioMedium;
484 | font-size: 14px;
485 | margin-top: 2px;
486 | }
487 |
488 | #homepage_TopDeals_part_Addtocart_btn {
489 | width: 100%;
490 | padding: 10px;
491 |
492 | }
493 |
494 | #homepage_TopDeals_part_Addtocart_btn>button {
495 | background: #008ecc;
496 | width: 100%;
497 | font-size: 14px;
498 | border-radius: 4px;
499 | padding: 0 8px 0 16px;
500 | border: 0;
501 | color: #fff;
502 | font-family: JioMedium;
503 | cursor: pointer;
504 | display: flex;
505 | align-items: center;
506 | justify-content: space-around;
507 | line-height: 32px;
508 | }
509 | #homepage_TopDeals_part_Addtocart_btn>button>.qty_minus {
510 | width: 24px;
511 | height: 24px;
512 | border-radius: 50%;
513 | background: rgba(255, 255, 255, .1) url(https://www.jiomart.com/assets/version1659035733/smartweb/images/icons/minus-bulecolor.svg) center no-repeat;
514 | }
515 | #homepage_TopDeals_part_Addtocart_btn>button>.add_plus {
516 | width: 24px;
517 | height: 24px;
518 | border-radius: 50%;
519 | background: rgba(255, 255, 255, .1) url(https://www.jiomart.com/assets/version1659035733/smartweb/images/icons/add_plus.svg) center no-repeat;
520 | }
521 |
522 |
523 | #homepage_bank_and_paytm_add_part{
524 | margin: 25px 0;
525 | }
526 | .homepage_bank_and_paytm_add_part_iteams {
527 | display: flex;
528 | overflow-x: auto;
529 | height: auto;
530 | margin: 0 50px;
531 | gap: 15px;
532 | }
533 |
534 | .homepage_bank_and_paytm_add_part_iteams::-webkit-scrollbar {
535 | display: none;
536 | }
537 |
538 | .homepage_bank_and_paytm_add_part_iteams>img {
539 | width: 50%;
540 | }
541 |
542 | /* @media (min-width: 320px) and (max-width: 1024px) {
543 |
544 | } */
545 |
--------------------------------------------------------------------------------
/assets/css/navbarfooter.css:
--------------------------------------------------------------------------------
1 | /* ================================CSS For Navbar ============================ */
2 | #nav-dropdowns-section {
3 | width: 100%;
4 | height: 100vh;
5 | margin-top: 113px;
6 | top: 0;
7 | background-color: rgba(20, 125, 218, 0.787);
8 | z-index: 5;
9 | }
10 |
11 | a {
12 | cursor: pointer;
13 | }
14 |
15 | #navabar_section {
16 | width: 100%;
17 | display: flex;
18 | flex-direction: column;
19 | align-items: center;
20 | position: fixed;
21 | top: 0;
22 | /* overflow: hidden; */
23 | z-index: 5;
24 | }
25 |
26 | #nav-top {
27 | width: 100%;
28 | display: flex;
29 | justify-content: space-around;
30 | align-items: center;
31 | height: 72px;
32 | background-color: #008ecc;
33 | color: white;
34 | min-width: 1230px;
35 | }
36 |
37 | #logosM {
38 | width: 200px;
39 | display: flex;
40 | align-items: center;
41 | justify-content: space-around;
42 | }
43 |
44 | #logosM img {
45 | width: 110px;
46 | }
47 |
48 | #logosM i {
49 | font-size: 30px;
50 | }
51 |
52 | #nav-top a {
53 | text-decoration: none;
54 | color: white;
55 | /* width: 30px; */
56 | }
57 |
58 | #login-div {
59 | display: block;
60 | }
61 |
62 | #login-div i,
63 | #login-div span {
64 | font-size: 18px;
65 | margin: 0 2px;
66 | }
67 |
68 | #after_login_div {
69 | display: none;
70 | }
71 |
72 | #after_login_div a {
73 | display: flex;
74 | gap: 15px;
75 | }
76 |
77 | #after_login_div i {
78 | font-size: 32px;
79 | margin: 0 2px;
80 | }
81 |
82 | #after_login_div {
83 | font-size: 22px;
84 |
85 | }
86 |
87 | #cart-div {
88 | position: relative;
89 | }
90 |
91 | /* #cart-div>div{
92 | position: relative;
93 | }
94 | #cart-div>div p{
95 | margin: 0;
96 | } */
97 | #cart-div:hover .cartpopup_container {
98 | display: block;
99 | }
100 |
101 | #cart-div .cartpopup_container .mc_title {
102 | display: flex;
103 | justify-content: space-between;
104 | padding: 10px;
105 | }
106 |
107 | #cart-div .cartpopup_container .mc_title h2 {
108 | text-transform: uppercase;
109 | }
110 |
111 | #cart-div .cartpopup_container .cartpopup_items .mc_item {
112 | display: flex;
113 | justify-content: space-between;
114 | padding: 10px;
115 | }
116 |
117 | #cart-div .cartpopup_container .mc_footer {
118 | display: flex;
119 | justify-content: space-between;
120 | padding: 10px;
121 | }
122 |
123 | #cart-div .cartpopup_container .mc_footer .mc_price .mc_amount {
124 | font-size: 21px;
125 | font-weight: 700;
126 | }
127 |
128 | #cart-div .cartpopup_container .mc_footer .mc_price .mc_savings {
129 | color: #05b905;
130 | }
131 |
132 | #cart-div .cartpopup_container .mc_footer .mc_cartBtn {
133 | width: 200px;
134 | margin: 6px;
135 | border-radius: 5px;
136 | color: white;
137 | font-weight: 700;
138 | background: #008ecc;
139 | border: none;
140 | letter-spacing: 1.5px;
141 | }
142 |
143 | .cartpopup_container {
144 | color: black;
145 | display: none;
146 | position: absolute;
147 | width: 401px;
148 | height: auto;
149 | right: 5px;
150 | top: 51px;
151 | padding: 5px;
152 | background-color: rgb(255, 255, 255);
153 | z-index: 2;
154 | border-radius: 5px;
155 | box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
156 | }
157 |
158 | .cartpopup_container>.trishalCartcontainer {
159 | background: rgb(255, 255, 255);
160 | height: 21px;
161 | width: 21px;
162 | position: absolute !important;
163 | right: 21px;
164 | top: -9px !important;
165 | transform: rotate(45deg);
166 | }
167 |
168 | #cart-div>div>span {
169 | position: fixed;
170 | top: 0;
171 | }
172 |
173 | #cart-div a {
174 | position: relative;
175 | }
176 |
177 | #cart-div i,
178 | #cart-div span {
179 | font-size: 18px;
180 | margin: 0 2px;
181 | }
182 |
183 | #search-div {
184 | position: relative;
185 | display: flex;
186 | width: 60%;
187 | }
188 |
189 | #search_div_results {
190 | position: absolute;
191 | width: 100%;
192 | background-color: #ffffff;
193 | top: 37px;
194 | left: 0;
195 | border-radius: 7px;
196 | z-index: 1;
197 | height: 250px;
198 | padding: 10px;
199 | overflow: hidden;
200 | display: none;
201 | }
202 |
203 | #search_div_results>p {
204 | color: black;
205 | font-size: 21px;
206 | padding: 9px;
207 | border-bottom: 1px solid gray;
208 | cursor: pointer;
209 | }
210 |
211 | #search-div input {
212 | width: 100%;
213 | font-size: 17px;
214 | height: 30px;
215 | padding: 6px 20px;
216 | border-radius: 7px 0 0 7px;
217 | outline: none;
218 | border: none;
219 | }
220 |
221 | #search-div button {
222 | background-color: white;
223 | border: none;
224 | border-radius: 0 7px 7px 0;
225 | padding: 0 14px;
226 | }
227 |
228 | #countOfCart {
229 | background-color: red;
230 | padding: 1px 6px;
231 | border-radius: 80px;
232 | font-size: 12px !important;
233 | font-weight: bold;
234 | position: absolute;
235 | top: -10px;
236 | left: 5px
237 | }
238 |
239 | #slider_Menu_BTN {
240 | cursor: pointer;
241 | }
242 |
243 | #logosM {
244 | width: 200px;
245 | display: flex;
246 | align-items: center;
247 | justify-content: space-around;
248 | }
249 |
250 | #logosM img {
251 | width: 110px;
252 | }
253 |
254 | #logosM i {
255 | font-size: 30px;
256 | }
257 |
258 | #nav-top a {
259 | text-decoration: none;
260 | color: white;
261 | position: relative;
262 | }
263 |
264 | #login-div {
265 | display: block;
266 | }
267 |
268 | #login-div i,
269 | #login-div span {
270 | font-size: 18px;
271 | margin: 0 2px;
272 | }
273 |
274 | #after_login_div {
275 | display: none;
276 | }
277 |
278 | #after_login_div a {
279 | display: flex;
280 | gap: 15px;
281 | }
282 |
283 | #after_login_div i {
284 | font-size: 32px;
285 | margin: 0 2px;
286 | }
287 |
288 | #after_login_div {
289 | font-size: 22px;
290 |
291 | }
292 |
293 | #cart-div>div>span {
294 | position: fixed;
295 | top: 0;
296 | }
297 |
298 | #cart-div i,
299 | #cart-div span {
300 | font-size: 18px;
301 | margin: 0 2px;
302 | }
303 |
304 | #search-div {
305 | display: flex;
306 | width: 60%;
307 | }
308 |
309 | #search-div input {
310 | width: 100%;
311 | font-size: 17px;
312 | height: 30px;
313 | padding: 18px 20px;
314 | border-radius: 7px 0 0 7px;
315 | outline: none;
316 | border: none;
317 | }
318 |
319 | #search-div button {
320 | background-color: white;
321 | border: none;
322 | border-radius: 0 7px 7px 0;
323 | padding: 0 14px;
324 | }
325 |
326 | #countOfCart {
327 | background-color: red;
328 | padding: 1px 4px;
329 | border-radius: 80px;
330 | font-size: 10px !important;
331 | font-weight: bold;
332 | position: absolute;
333 | top: -9px;
334 | left: 9px;
335 | }
336 |
337 | #slider_Menu_BTN {
338 | cursor: pointer;
339 | }
340 |
341 | /*======================== CSS for bottom navbar ================================*/
342 |
343 | #nav-bottom {
344 | width: 100%;
345 | height: 40px;
346 | background-color: #ececed;
347 | display: flex;
348 | justify-content: center;
349 | min-width: 1024px;
350 |
351 | }
352 |
353 | #nav-bottom-options {
354 | width: 95%;
355 | display: flex;
356 | justify-content: space-evenly;
357 | align-items: center;
358 | color: #767676;
359 | }
360 |
361 | #nav-bottom-options>div {
362 | will-change: 70px;
363 | height: 30px;
364 | /* background-color: rgb(252, 228, 198); */
365 | display: flex;
366 | align-items: center;
367 | gap: 12px;
368 | }
369 |
370 | #nav-bottom-options h4 {
371 | color: black;
372 | font-size: 16px;
373 | }
374 |
375 | #nav-bottom-options a {
376 | text-decoration: none;
377 | }
378 |
379 | #nav-bottom-options>div i {
380 | font-size: 16px;
381 | transition: 0.5s;
382 | }
383 |
384 | #nav-bottom-options>div:hover i {
385 | transform: rotate(-180deg);
386 | }
387 |
388 | #nav-bottom-options>div:first-child:hover i {
389 | transform: rotate(0deg);
390 | }
391 |
392 | #location-option-div {
393 | cursor: pointer;
394 | }
395 |
396 | #location-option-div p {
397 | margin: 0;
398 | font-size: 14px;
399 | }
400 |
401 | #location-option-div>i {
402 | font-size: 27px !important;
403 | }
404 |
405 | #pincode {
406 | cursor: pointer;
407 | font-weight: bold;
408 | color: black;
409 | }
410 |
411 | /*========================CSS For Footer=========================================================*/
412 |
413 | #footer_section {
414 | max-width: 1680px;
415 | min-width: 1024px;
416 | background-color: #ededef;
417 | bottom: 0;
418 | width: 100%;
419 | margin-top: 10px;
420 | }
421 |
422 | footer {
423 | /* display: flex;
424 | justify-content: space-around; */
425 | font-size: 14px;
426 | display: grid;
427 | grid-template-columns: repeat(3, 1fr);
428 | gap: 25px;
429 | padding: 0 20px;
430 | }
431 |
432 | .ContactUs {
433 | padding: 0 8% 0 3%;
434 | border-left: 2px solid rgb(171, 167, 167);
435 | color: grey;
436 | margin-top: 10px;
437 | }
438 |
439 | .ContactUs>div>p {
440 | padding: 2px 0;
441 | }
442 |
443 | .ContactUs h3 {
444 | color: black;
445 | }
446 |
447 | .ContactUs img {
448 | width: 40%;
449 | }
450 |
451 | .ContactUs span {
452 | color: blue;
453 | }
454 |
455 | .ContactUs img {
456 | padding: 10px;
457 | }
458 |
459 | footer li {
460 | margin: 9px 0;
461 | list-style: none;
462 | }
463 |
464 | footer a {
465 | text-decoration: none;
466 | color: grey;
467 | }
468 |
469 | .copyright {
470 | display: flex;
471 | justify-content: space-around;
472 | align-items: center;
473 | margin-top: 50px;
474 | border-top: 1px solid rgb(159, 155, 155);
475 | font-size: 14px;
476 | color: rgb(24, 23, 23);
477 | padding: 5px 0;
478 | }
479 |
480 |
481 | /* ===========================Css For Dropdown ====================================*/
482 |
483 | /* #nav-dropdowns-section {
484 | width: 100%;
485 | height: 100vh;
486 | position: fixed;
487 | margin-top: 113px;
488 | top: 0;
489 | display: none;
490 | background-color: rgba(20, 125, 218, 0.787);
491 | } */
492 |
493 | /* =========================== Css For Dropdown ====================================*/
494 |
495 |
496 | #nav-bottom ul {
497 | list-style: none;
498 | padding: 0;
499 | margin: 0;
500 | }
501 |
502 | #nav-bottom-options>div>div a {
503 | color: black;
504 | font-weight: 640;
505 |
506 | }
507 |
508 | #nav-bottom-options li:hover {
509 | background-color: white;
510 | }
511 |
512 | #nav-bottom-options li:hover a {
513 | color: #008ecc;
514 | }
515 |
516 | .navigation_submenu li {
517 | padding: 8px 12px;
518 | margin: 2px 1px;
519 | }
520 |
521 | #Groceries-option {
522 | position: relative;
523 | }
524 |
525 | #Groceries-dropdown {
526 | position: fixed;
527 | top: 112px;
528 | background: #ececed;
529 | display: none;
530 | width: 600px;
531 | }
532 |
533 | #Groceries-option:hover #Groceries-dropdown {
534 | display: block;
535 | }
536 |
537 | #Groceries-dropdown ul {
538 | height: auto;
539 | display: grid;
540 | grid-template-columns: repeat(2, 1fr);
541 | }
542 |
543 | #Groceries-dropdown ul li {
544 | width: 280px;
545 | }
546 |
547 |
548 | #premiumfruits-option {
549 | position: relative;
550 | }
551 |
552 | #premiumfruits-dropdown {
553 | position: fixed;
554 | top: 112px;
555 | background: #ececed;
556 | display: none;
557 | width: 600px;
558 | }
559 |
560 | #premiumfruits-option:hover #premiumfruits-dropdown {
561 | display: block;
562 | }
563 |
564 | #premiumfruits-dropdown ul {
565 | height: auto;
566 | display: grid;
567 | grid-template-columns: repeat(2, 1fr);
568 | }
569 |
570 | #premiumfruits-dropdown ul li {
571 | width: 280px;
572 | }
573 |
574 | #homekitchen-option {
575 | position: relative;
576 | }
577 |
578 | #homekitchen-dropdown {
579 | position: fixed;
580 | top: 112px;
581 | background: #ececed;
582 | display: none;
583 | width: 600px;
584 | }
585 |
586 | #homekitchen-dropdown ul {
587 | height: auto;
588 | display: grid;
589 | grid-template-columns: repeat(2, 1fr);
590 | }
591 |
592 | #homekitchen-dropdown ul li {
593 | width: 280px;
594 | }
595 |
596 | #homekitchen-option:hover #homekitchen-dropdown {
597 | display: block;
598 | }
599 |
600 | #fashion-option {
601 | position: relative;
602 | }
603 |
604 | #fashion-dropdown {
605 | position: fixed;
606 | top: 112px;
607 | background: #ececed;
608 | display: none;
609 | width: 300px;
610 | }
611 |
612 | #fashion-option:hover #fashion-dropdown {
613 | display: block;
614 | }
615 |
616 | #electronics-option {
617 | position: relative;
618 | }
619 |
620 | #electronics-dropdown {
621 | position: fixed;
622 | top: 112px;
623 | background: #ececed;
624 | display: none;
625 | width: 300px;
626 | }
627 |
628 | #electronics-option:hover #electronics-dropdown {
629 | display: block;
630 | }
631 |
632 | #beauty-option {
633 | position: relative;
634 | }
635 |
636 | #beauty-dropdown {
637 | position: fixed;
638 | top: 112px;
639 | background: #ececed;
640 | display: none;
641 | width: 300px;
642 | }
643 |
644 | #beauty-option:hover #beauty-dropdown {
645 | display: block;
646 | }
647 |
648 | #jwellery-option {
649 | position: relative;
650 | }
651 |
652 | #jwellery-dropdown {
653 | position: fixed;
654 | top: 112px;
655 | background: #ececed;
656 | display: none;
657 | width: 300px;
658 | }
659 |
660 | #jwellery-option:hover #jwellery-dropdown {
661 | display: block;
662 | }
663 |
664 |
665 | /*======================= CSS for location popup ===============================*/
666 |
667 | #location_popup_section {
668 | position: fixed;
669 | top: 0;
670 | width: 100%;
671 | height: 100vh;
672 | background-color: #4d4d4d77;
673 | display: none;
674 | z-index: 5;
675 | }
676 |
677 | #location_popup {
678 | width: 100%;
679 | height: 100vh;
680 | position: relative;
681 | }
682 |
683 | #location_popup_div {
684 | width: 350px;
685 | min-height: 325px;
686 | max-height: 450px;
687 | background-color: white;
688 | border-radius: 13px;
689 | position: absolute;
690 | top: 120px;
691 | left: 5.5%;
692 | }
693 |
694 | .triangle {
695 | height: 15px;
696 | width: 20px;
697 | background-color: white;
698 | transform: rotate(45deg);
699 | position: absolute;
700 | top: 115px;
701 | left: 7%;
702 | }
703 |
704 | /* Inner Content */
705 |
706 | #location_popup {
707 | z-index: 1;
708 | }
709 |
710 | #location_popup_div {
711 | padding: 20px;
712 | z-index: 0;
713 | }
714 |
715 | .location_close_btn {
716 | text-align: right;
717 | font-weight: bold;
718 | font-size: 35px;
719 | margin: 0;
720 | cursor: pointer;
721 | margin-left: 30px;
722 | margin-bottom: 20px;
723 | z-index: 1;
724 | }
725 |
726 | .whereDoYouwant {
727 | display: block;
728 | margin-top: 0;
729 | display: flex;
730 | margin: 0;
731 | }
732 |
733 | .where_address_div h5 {
734 | margin-top: 0;
735 | }
736 |
737 | .location_close_btn:hover {
738 | color: red;
739 | }
740 |
741 | .location_popup_lower {
742 | bottom: 0;
743 | border-top: 5px solid #c0bcbc;
744 | }
745 |
746 | .location_popup_lower>h3,
747 | .location_popup_lower>h5 {
748 | margin: 5px;
749 | }
750 |
751 | .enter_pincode_div {
752 | display: flex;
753 | margin-top: 10px;
754 | /* align-items: center; */
755 |
756 | }
757 |
758 | .enter_pincode_div>input {
759 | width: 80%;
760 | padding: 5px 10px;
761 | border: none;
762 | border-bottom: 2px solid #7f7f7f;
763 | font-size: 17px;
764 | outline: none;
765 |
766 | }
767 |
768 | .enter_pincode_div>button {
769 | background-color: white;
770 | border: none;
771 | border-bottom: 2px solid #7f7f7f;
772 | font-size: 17px;
773 | color: rgb(194, 5, 5);
774 | font-weight: bold;
775 | }
776 |
777 | .enter_pincode_div>i {
778 | font-size: 22px;
779 | margin-top: 4px;
780 | margin-right: 4px;
781 | color: #7f7f7f;
782 | }
783 |
784 | .detect_loc_mark {
785 | width: 70%;
786 | display: flex;
787 | align-items: center;
788 | color: rgb(194, 5, 5);
789 | gap: 20px;
790 | }
791 |
792 | .my_address_div {
793 | width: 170px;
794 | height: 170px;
795 | background-color: #008ecc;
796 | padding: 0 5px;
797 | border-radius: 12px;
798 | color: white;
799 | margin-bottom: 20px;
800 | /* display: none; */
801 | }
802 |
803 | .my_address_div * {
804 | margin: 0;
805 | padding: 5px;
806 | }
807 |
808 | .my_address_div button {
809 | background-color: #1eafee;
810 | color: white;
811 | border: none;
812 | border-radius: 5px;
813 | }
814 |
815 | .where_address_div {
816 | padding: 0 5px;
817 | margin-bottom: 20px;
818 | /* display: none; */
819 | }
820 |
821 | .where_address_div>button {
822 | width: 90%;
823 | padding: 8px;
824 | border-radius: 5px;
825 | color: white;
826 | border: none;
827 | font-size: 17px;
828 | background-color: #008ecc;
829 | }
830 |
831 | #location_popup {
832 | z-index: 2;
833 | }
834 |
835 | #locationToBeShown {
836 | margin-left: 20px;
837 | font-size: 14px;
838 | color: #05b905;
839 | }
840 |
841 | /* ================= CSS For Slider Menu ========================================*/
842 |
843 | #slide_menu_slider_section {
844 | width: 0px;
845 | height: 100vh;
846 | position: fixed;
847 | top: 0;
848 | background-color: rgba(0, 0, 0, 0.389);
849 | display: none;
850 | transition: 1s;
851 | z-index: 5;
852 | }
853 |
854 | #slide_menu_slider {
855 | width: 23%;
856 | height: 100vh;
857 | display: flex;
858 | flex-direction: column;
859 | background-color: #ececed;
860 | }
861 |
862 | .HelloName {
863 | height: 110px;
864 | background-color: rgb(0 142 204);
865 | padding: 5px 20px;
866 | color: white;
867 | }
868 |
869 | .OnlyHelloName {
870 | display: flex;
871 | align-items: center;
872 | justify-content: space-between;
873 | }
874 |
875 | .OnlyHelloName i {
876 | font-size: 25px;
877 | }
878 |
879 | .OnlyHelloName>div {
880 | display: flex;
881 | align-items: center;
882 | gap: 10px;
883 | }
884 |
885 | #CloseSlideMenuSlider {
886 | font-size: 30px;
887 | /* font-weight: bolder; */
888 | margin: 0;
889 | cursor: pointer;
890 | }
891 |
892 | #CloseSlideMenuSlider:hover {
893 | color: rgb(197, 205, 217);
894 | }
895 |
896 | .HelloNameBtns {
897 | display: flex;
898 | justify-content: space-around;
899 | }
900 |
901 | .HelloNameBtns a {
902 | width: 49%;
903 | padding: 8px;
904 | font-size: 17px;
905 | text-decoration: none;
906 | text-align: center;
907 | background-color: #008ecc;
908 | border: 1px solid white;
909 | color: white;
910 | font-weight: 600;
911 | margin: 5px;
912 | border-radius: 5px;
913 | }
914 |
915 | .HelloNameBtns a:hover {
916 | background-color: white;
917 | color: #008ecc;
918 | }
919 |
920 | .Slider_Content_Option {
921 | height: 75vh;
922 | overflow-y: scroll;
923 | }
924 |
925 | .Slider_Content_Option ul {
926 | list-style: none;
927 | background-color: white;
928 | margin: 2px 0 20px 0;
929 | padding: 0;
930 | }
931 |
932 | .Slider_Content_Option li {
933 | padding: 10px 20px;
934 | margin: 0;
935 | }
936 |
937 | .Slider_Content_Option li a {
938 | text-decoration: none;
939 | color: black;
940 |
941 | }
942 |
943 | .Slider_Content_Option li:hover {
944 | background-color: #7f7f7f;
945 | }
946 |
947 | .ContactUsinsideSlider {
948 | padding: 10px;
949 | background-color: white;
950 | }
951 |
952 | .ContactUsinsideSlider>div>p {
953 | padding: 2px 0;
954 | }
955 |
956 | .ContactUsinsideSliderImg {
957 | display: flex;
958 | }
959 |
960 | .ContactUsinsideSliderImg img {
961 | width: 120px !important;
962 | margin: 10px 5px 10px 5px;
963 | }
964 |
965 | .ContactUsinsideSlider span {
966 | color: blue;
967 | }
968 |
969 | .slider_home_option li:hover {
970 | background-color: #008ecc;
971 |
972 | }
973 |
974 | .slider_home_option li:hover a {
975 | color: white;
976 | }
--------------------------------------------------------------------------------
/assets/js/navbar.js:
--------------------------------------------------------------------------------
1 | shownavbar();
2 | function shownavbar() {
3 | document.getElementById("navabar_section").innerHTML = `
4 |
5 |
6 |
7 |
8 |
14 |
15 |
20 |
21 |
22 |
23 |
29 |
30 |
31 |
32 |
38 |
39 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
Deliver to
71 |
400001
72 |
73 |
74 |
75 |
118 |
119 |
156 |
157 |
227 |
228 |
256 |
257 |
306 |
307 |
353 |
354 |
367 |
368 |
369 | `;
370 | document.getElementById("location_popup_section").innerHTML = `
371 |
15 | /qr-code-bc94057f452f4806af70fd34540f72ad.png)
24 | 
59 | 
9 | 
44 | 
73 | 
81 | 
89 | 
97 | 
105 | 
113 | 
120 | 
51 | 
12 | 
12 | 
505 | 
508 |