├── checkout.css
├── checkout.html
├── cart.css
├── foodgrains.css
├── snacks.css
├── bakery.css
├── beauty.css
├── beverages.css
├── fruits_category.css
├── navbar.html
├── navbar.css
├── checkout.js
├── cart.js
├── snacks.js
├── bakery.js
├── signup.html
├── slider.js
├── login.html
├── homepage.js
├── beverages.js
├── beauty.js
├── footer.css
├── fruits_category.js
├── foodgrains.js
├── homepage.css
├── slider.html
├── main.js
└── footer.html
/checkout.css:
--------------------------------------------------------------------------------
1 | #checkout{
2 | width: 1000px;
3 | margin: auto;
4 | }
5 | #form{
6 | margin: auto;
7 | margin-top: 5%;
8 | padding: 5%;
9 | width: 500px;
10 | border: 1px solid green;
11 | display: grid;
12 | grid-template-columns: repeat(1,1fr);
13 | gap: 20px;
14 | }
15 | h4{
16 | text-align: center;
17 | }
18 | input{
19 | padding: 5%;
20 | }
21 | #pay{
22 | margin: auto;
23 | width: 150px;
24 | background-color: teal;
25 | color: white;
26 | padding: 2% 3% 2% 3%;
27 | border: none;
28 | border-radius: 3px;
29 | }
30 | #pay:hover{
31 | cursor: pointer;
32 | opacity: 0.8;
33 | }
--------------------------------------------------------------------------------
/checkout.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Checkout Page
8 |
12 |
13 |
User Details
14 |
22 |
23 |
Document
8 |
9 |
13 |
14 |
1860 123 1000
15 |
560004, Bangalore
16 |
20 |
21 |
43 |
signup
8 |
46 |
47 |
1860 123 1000
48 |
560004, Bangalore
49 |
53 |
54 |
55 |
66 |
71 |
72 |
73 |
My Basket
74 |
75 |
76 |
78 |
Sign up
79 |
80 |
86 |
87 |
88 |
89 |
90 |
110 |
111 |
112 |
--------------------------------------------------------------------------------
/slider.js:
--------------------------------------------------------------------------------
1 | let slideIndex = 1;
2 | showSlides(slideIndex);
3 |
4 | // Next/previous controls
5 | function plusSlides(n) {
6 | showSlides(slideIndex += n);
7 | }
8 |
9 | // Thumbnail image controls
10 | function currentSlide(n) {
11 | showSlides(slideIndex = n);
12 | }
13 |
14 | function showSlides(n) {
15 | let i;
16 | let slides = document.getElementsByClassName("mySlides");
17 | let dots = document.getElementsByClassName("dot");
18 | if (n > slides.length) { slideIndex = 1 }
19 | if (n < 1) { slideIndex = slides.length }
20 | for (i = 0; i < slides.length; i++) {
21 | slides[i].style.display = "none";
22 | }
23 | for (i = 0; i < dots.length; i++) {
24 | dots[i].className = dots[i].className.replace("active", "");
25 | }
26 | slides[slideIndex - 1].style.display = "block";
27 | dots[slideIndex - 1].className += " active";
28 | }
29 |
30 |
31 | showSlides();
32 |
33 | function showSlides() {
34 | let i;
35 | let slides = document.getElementsByClassName("mySlides");
36 | for (i = 0; i < slides.length; i++) {
37 | slides[i].style.display = "none";
38 | }
39 | slideIndex++;
40 | if (slideIndex > slides.length) { slideIndex = 1 }
41 | slides[slideIndex - 1].style.display = "block";
42 | setTimeout(showSlides, 4000); // Change image every 2 seconds
43 | }
44 |
45 |
46 | // let getdata=async()=>{
47 |
48 | // try{
49 |
50 | // let res= await fetch('https://edamam-food-and-grocery-database.p.rapidapi.com/parser?ingr=meat',{
51 | // method: 'GET',
52 | // headers: {
53 | // 'X-RapidAPI-Key': 'fb17a4ece0msh47eb9b62180a9c9p181e49jsn547c70adae2c',
54 | // 'X-RapidAPI-Host': 'edamam-food-and-grocery-database.p.rapidapi.com'
55 | // }
56 | // });
57 |
58 | // let data= await res.json();
59 | // console.log(data);
60 | // }catch(e){
61 | // console.log(e);
62 |
63 | // }
64 |
65 |
66 | // }
67 | // getdata();
68 | // Add to Cert Items
69 |
70 | let bestseller=[{
71 | image:'https://www.bigbasket.com/media/uploads/p/s/40072320_2-fresho-farm-eggs-table-tray-medium-antibiotic-residue-free.jpg',
72 | name:'Farm Eggs - Table Tray',
73 | price:82
74 | },
75 | {
76 | image:'https://www.bigbasket.com/media/uploads/p/s/10000071_14-fresho-carrot-orange.jpg',
77 | name:'Carrot - Orange (Loose)',
78 | price:19
79 |
80 | },
81 | {
82 | image:'https://www.bigbasket.com/media/uploads/p/s/40208261_1-borges-extra-virgin-olive-oil.jpg',
83 | name:'Extra Virgin Olive Oil',
84 | price:3360
85 | },
86 | {
87 | image:'https://www.bigbasket.com/media/uploads/p/s/10000200_17-fresho-tomato-hybrid.jpg',
88 | name:'Tomato - Hybrid (Loose)',
89 | price:38
90 | },
91 | {
92 | image:'https://www.bigbasket.com/media/uploads/p/s/40030808_10-bb-royal-cuminjeera-whole.jpg',
93 | name:'Cumin/Jeera/Jeerige - Whole',
94 | price:353
95 | }]
96 |
97 | function items(data)
98 | {
99 | let count=0;
100 | let main_container=document.getElementById("items_container");
101 | main_container.innerHTML=null;
102 | data.forEach(({image,name,price})=>{
103 | let div=document.createElement("div");
104 | div.id="item_div"
105 |
106 |
107 | let img=document.createElement("img");
108 | img.src=image;
109 | let p=document.createElement("p");
110 | p.innerText=name;
111 | let p2=document.createElement("p");
112 | p2.innerText=price;
113 | let cart=document.createElement("button");
114 | cart.innerText="ADD"
115 |
116 | let cart_items={
117 | image,
118 | name,
119 | price
120 | }
121 |
122 | cart.addEventListener('click',()=>{
123 | count++;
124 | let items_data = JSON.parse(localStorage.getItem("items")) || [];
125 | items_data.push(cart_items);
126 | localStorage.setItem("items", JSON.stringify(items_data));
127 |
128 | console.log(count)
129 |
130 | })
131 |
132 | div.append(img,p,p2,cart);
133 | main_container.append(div);
134 |
135 |
136 | })
137 |
138 |
139 |
140 |
141 |
142 | }
143 |
144 | items(bestseller);
145 |
146 |
--------------------------------------------------------------------------------
/login.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | login
8 |
45 |
46 |
1860 123 1000
47 |
560004, Bangalore
48 |
52 |
53 |
54 |
55 |
56 |
57 | SHOP BY CATEGORY
58 | Bakery, Cakes & Dairy
59 | Beauty & Hygiene
60 | Beverages
61 | FoodGrains,Oil & Masala
62 | Fruits & Vegetables
63 | Snacks & Branded Foods
64 |
65 |
66 |
67 |
72 |
73 |
74 |
My Basket
75 |
76 |
77 |
79 |
Log in
80 |
81 |
87 |
88 |
89 |
90 |
121 |
122 |
--------------------------------------------------------------------------------
/homepage.js:
--------------------------------------------------------------------------------
1 | let slideIndex = 1;
2 | showSlides(slideIndex);
3 |
4 | // Next/previous controls
5 | function plusSlides(n) {
6 | showSlides(slideIndex += n);
7 | }
8 |
9 | // Thumbnail image controls
10 | function currentSlide(n) {
11 | showSlides(slideIndex = n);
12 | }
13 |
14 | function showSlides(n) {
15 | let i;
16 | let slides = document.getElementsByClassName("mySlides");
17 | let dots = document.getElementsByClassName("dot");
18 | if (n > slides.length) { slideIndex = 1 }
19 | if (n < 1) { slideIndex = slides.length }
20 | for (i = 0; i < slides.length; i++) {
21 | slides[i].style.display = "none";
22 | }
23 | for (i = 0; i < dots.length; i++) {
24 | dots[i].className = dots[i].className.replace("active", "");
25 | }
26 | slides[slideIndex - 1].style.display = "block";
27 | dots[slideIndex - 1].className += " active";
28 | }
29 |
30 |
31 | showSlides();
32 |
33 | function showSlides() {
34 | let i;
35 | let slides = document.getElementsByClassName("mySlides");
36 | for (i = 0; i < slides.length; i++) {
37 | slides[i].style.display = "none";
38 | }
39 | slideIndex++;
40 | if (slideIndex > slides.length) { slideIndex = 1 }
41 | slides[slideIndex - 1].style.display = "block";
42 | setTimeout(showSlides, 4000); // Change image every 2 seconds
43 | }
44 |
45 |
46 | // let getdata=async()=>{
47 |
48 | // try{
49 |
50 | // let res= await fetch('https://edamam-food-and-grocery-database.p.rapidapi.com/parser?ingr=meat',{
51 | // method: 'GET',
52 | // headers: {
53 | // 'X-RapidAPI-Key': 'fb17a4ece0msh47eb9b62180a9c9p181e49jsn547c70adae2c',
54 | // 'X-RapidAPI-Host': 'edamam-food-and-grocery-database.p.rapidapi.com'
55 | // }
56 | // });
57 |
58 | // let data= await res.json();
59 | // console.log(data);
60 | // }catch(e){
61 | // console.log(e);
62 |
63 | // }
64 |
65 |
66 | // }
67 | // getdata();
68 | // Add to Cert Items
69 |
70 | let bestseller=[{
71 | image:'https://www.bigbasket.com/media/uploads/p/s/40072320_2-fresho-farm-eggs-table-tray-medium-antibiotic-residue-free.jpg',
72 | name:'Farm Eggs - Table Tray',
73 | price:82
74 | },
75 | {
76 | image:'https://www.bigbasket.com/media/uploads/p/s/10000071_14-fresho-carrot-orange.jpg',
77 | name:'Carrot - Orange (Loose)',
78 | price:19
79 |
80 | },
81 | {
82 | image:'https://www.bigbasket.com/media/uploads/p/s/40208261_1-borges-extra-virgin-olive-oil.jpg',
83 | name:'Extra Virgin Olive Oil',
84 | price:3360
85 | },
86 | {
87 | image:'https://www.bigbasket.com/media/uploads/p/s/10000200_17-fresho-tomato-hybrid.jpg',
88 | name:'Tomato - Hybrid (Loose)',
89 | price:38
90 | },
91 | {
92 | image:'https://www.bigbasket.com/media/uploads/p/s/40030808_10-bb-royal-cuminjeera-whole.jpg',
93 | name:'Cumin/Jeera/Jeerige - Whole',
94 | price:353
95 | }]
96 |
97 | function items(data)
98 | {
99 | let count=0;
100 | let main_container=document.getElementById("items_container");
101 | main_container.innerHTML=null;
102 | data.forEach(({image,name,price})=>{
103 | let div=document.createElement("div");
104 | div.id="item_div"
105 |
106 |
107 | let img=document.createElement("img");
108 | img.src=image;
109 | let p=document.createElement("p");
110 | p.innerText=name;
111 | let p2=document.createElement("p");
112 | p2.innerText=price;
113 | let cart=document.createElement("button");
114 | cart.innerText="ADD"
115 |
116 | let cart_items={
117 | image,
118 | name,
119 | price
120 | }
121 |
122 | cart.addEventListener('click',()=>{
123 | count++;
124 | let items_data = JSON.parse(localStorage.getItem("items")) || [];
125 | items_data.push(cart_items);
126 | localStorage.setItem("items", JSON.stringify(items_data));
127 |
128 | console.log(count)
129 |
130 | })
131 |
132 | div.append(img,p,p2,cart);
133 | main_container.append(div);
134 |
135 |
136 | })
137 |
138 |
139 |
140 |
141 |
142 | }
143 |
144 | items(bestseller);
145 |
146 | let i=0;
147 | let images=[];
148 | let time=3000;
149 | images[0]="https://www.bigbasket.com/media/uploads/banner_images/hp_m_petstore_250922_400.jpg";
150 | images[1]="https://www.bigbasket.com/media/uploads/banner_images/hp_bcd_m_bcd_250922_400.jpg";
151 | images[2]="https://www.bigbasket.com/media/uploads/banner_images/hp_m_health_suppliment_250922_400.jpg";
152 | images[3]="https://www.bigbasket.com/media/uploads/banner_images/hp_m_babycare_250922_400.jpg"
153 | function changeImg(){
154 | document.slide.src=images[i]
155 | if(i< images.length-1){
156 | i++;
157 | }
158 | else {
159 | i=0;
160 | }
161 | setTimeout("changeImg()",time)
162 | }
163 | window.onload=changeImg;
--------------------------------------------------------------------------------
/beverages.js:
--------------------------------------------------------------------------------
1 | const options = {
2 | method: 'GET',
3 | Headers : {
4 | "Content-Type" : "application/json",
5 |
6 | }
7 | };
8 |
9 | fetch(' https://api.spoonacular.com/food/search?query=beverages&apiKey=16a7ab4f21a24c6aba65724240f8792e', options)
10 | .then(response => response.json())
11 | .then(data => appendBeverages(data.searchResults[1].results))
12 | .catch(err => console.log(err));
13 |
14 | let beverages_images = ["https://www.bigbasket.com/media/uploads/banner_images/YXPL14540_1200x300_25thsep.jpg","https://www.bigbasket.com/media/uploads/banner_images/YXPL14539_1200x300_25thsep.jpg","https://www.bigbasket.com/media/uploads/banner_images/YXPL14535_1200x300_25thsep.jpg","https://www.bigbasket.com/media/uploads/banner_images/L2-YXPL154-1200x300-25thmar.jpg","https://www.bigbasket.com/media/uploads/banner_images/YXTT5179_DT_1200x300_24thsep22.jpg"];
15 | let img = document.createElement("img");
16 | let beverages_slider = document.getElementById("beverages_slider");
17 | let i = 0;
18 | setInterval(function(){
19 | if(i===3){i=0}
20 | img.src = beverages_images[i];
21 | beverages_slider.innerHTML = null;
22 | beverages_slider.append(img);
23 | i++;
24 | },3000);
25 |
26 |
27 |
28 | let cart_data = JSON.parse(localStorage.getItem('items'));
29 |
30 | function appendBeverages(data){
31 | let striked_price = [72.72, 101.3, 39.29, 53.25, 28.57, 50.22, 140.26, 263.64, 74.68, 72.73, 166.23, 81.82, 54.98, 58.01, 30.08, 64.94, 353.24, 92.53, 21.43, 233.76, 40.17, 35.06, 227.27, 141.56, 12.38, 112.38, 141.99, 28.57, 155.84, 32.47, 40, 189.61, 250.65, 13.11, 118.18, 149.35];
32 | let price = [55.99, 78, 20.5, 36, 19.5, 24.5, 103, 203, 53.5, 56, 102, 58.5, 39, 41, 23.16, 50, 271.99, 38.5, 16.5, 180, 29, 27, 175, 103, 9.53, 67.5, 96, 19, 120, 25, 30, 146, 193, 10.09, 91, 115];
33 |
34 | let i = 0;
35 | while(i<=10){
36 | let div = document.createElement("div");
37 | let img = document.createElement("img");
38 | img.src = data[i].image;
39 | let name = document.createElement("h4");
40 | name.innerHTML = data[i].name;
41 | let striked_price_div = document.createElement("p");
42 | striked_price_div.id = "striked_price";
43 | striked_price_div.innerHTML = `Rs:- ${striked_price[i]}`;
44 | let price_div = document.createElement("p");
45 | price_div.id = "price";
46 | price_div.innerHTML = `Rs:- ${price[i]}`;
47 | let add_to_cart = document.createElement("button");
48 | add_to_cart.innerText = "ADD";
49 | let obj = {
50 | image : data[i].image,
51 | name : data[i].name,
52 | striked_price : striked_price[i],
53 | price : price[i]
54 | }
55 | add_to_cart.addEventListener("click",(e)=>{
56 | cart_data.push(obj);
57 | localStorage.setItem("items",JSON.stringify(cart_data));
58 | alert ("Product added to cart succesfully");
59 | });
60 | div.append(img,name,striked_price_div,price_div,add_to_cart);
61 | document.getElementById("beverages_container").append(div);
62 | i++;
63 | }
64 | }
65 |
66 | let count = 0;
67 | document.getElementById("more_beverages").addEventListener('click',(e)=>{
68 | const options = {
69 | method: 'GET',
70 | Headers : {
71 | "Content-Type" : "application/json",
72 |
73 | }
74 | };
75 | console.log(count);
76 | fetch(' https://api.spoonacular.com/food/search?query=drinks&apiKey=16a7ab4f21a24c6aba65724240f8792e', options)
77 | .then(response => response.json())
78 | .then(data => appendBeverages(data.searchResults[1].results)
79 | .catch(err => console.log(err)))
80 | count++;
81 | if(count===1){
82 | fetch(' https://api.spoonacular.com/food/search?query=tea&apiKey=16a7ab4f21a24c6aba65724240f8792e', options)
83 | .then(response => response.json())
84 | .then(data => appendBeverages(data.searchResults[1].results)
85 | .catch(err => console.log(err)))
86 | }else if(count === 2){
87 | fetch(' https://api.spoonacular.com/food/search?query=coffee&apiKey=16a7ab4f21a24c6aba65724240f8792e', options)
88 | .then(response => response.json())
89 | .then(data => appendBeverages(data.searchResults[1].results)
90 | .catch(err => console.log(err)))
91 | }else if(count === 3){
92 | fetch(' https://api.spoonacular.com/food/search?query=wines&apiKey=16a7ab4f21a24c6aba65724240f8792e', options)
93 | .then(response => response.json())
94 | .then(data => appendBeverages(data.searchResults[1].results)
95 | .catch(err => console.log(err)))
96 | }
97 | }) ;
--------------------------------------------------------------------------------
/beauty.js:
--------------------------------------------------------------------------------
1 | const options = {
2 | method: 'GET',
3 | headers: {
4 | 'X-RapidAPI-Key': '1890b4099emsh5032653b60150a7p18974fjsne6d1feb5c535',
5 | 'X-RapidAPI-Host': 'sephora.p.rapidapi.com'
6 | }
7 | };
8 |
9 | fetch('https://sephora.p.rapidapi.com/auto-complete?q=beauty', options)
10 | .then(response => response.json())
11 | .then(data => appendBeauty(data.typeAheadTerms))
12 | .catch(err => console.error(err));
13 |
14 | let beauty_images = ["https://www.bigbasket.com/media/uploads/banner_images/YXPL14714_1200x300_25thsep.jpg","https://www.bigbasket.com/media/uploads/banner_images/L2-YXPL154-1200x300-25thmar.jpg","https://www.bigbasket.com/media/customPage/7693c8af-c9b3-4fc5-b1a8-5d3e8496dc6e/dbc3ec45-8257-4c5c-85b0-b5fcabf5644c/1846b03b-e0f4-4433-9b20-301d49edfdae/korean-beauty-1130x400-12feb21.jpg","https://www.bigbasket.com/media/customPage/7693c8af-c9b3-4fc5-b1a8-5d3e8496dc6e/dbc3ec45-8257-4c5c-85b0-b5fcabf5644c/1846b03b-e0f4-4433-9b20-301d49edfdae/natural-store-1130x400-12feb21.jpg"];
15 | let img = document.createElement("img");
16 | let beauty_slider = document.getElementById("beauty_slider");
17 | let i = 0;
18 | setInterval(function(){
19 | if(i===4){i=0}
20 | img.src = beauty_images[i];
21 | beauty_slider.innerHTML = null;
22 | beauty_slider.append(img);
23 | i++;
24 | },3000);
25 |
26 | let cart_data = JSON.parse(localStorage.getItem('items'));
27 |
28 | function appendBeauty(data){
29 | let striked_price = [72.72, 101.3, 39.29, 53.25, 28.57, 50.22, 140.26, 263.64, 74.68, 72.73, 166.23, 81.82, 54.98, 58.01, 30.08, 64.94, 353.24, 92.53, 21.43, 233.76, 40.17, 35.06, 227.27, 141.56, 12.38, 112.38, 141.99, 28.57, 155.84, 32.47, 40, 189.61, 250.65, 13.11, 118.18, 149.35];
30 | let price = [55.99, 78, 20.5, 36, 19.5, 24.5, 103, 203, 53.5, 56, 102, 58.5, 39, 41, 23.16, 50, 271.99, 38.5, 16.5, 180, 29, 27, 175, 103, 9.53, 67.5, 96, 19, 120, 25, 30, 146, 193, 10.09, 91, 115];
31 |
32 | let i = 3;
33 | while(i<=10){
34 | let div = document.createElement("div");
35 | let image = document.createElement("img");
36 | image.src = data[i].defaultSku.skuImages.image50;
37 | let name = document.createElement("h4");
38 | name.innerHTML = data[i].productName;
39 | let striked_price_div = document.createElement("p");
40 | striked_price_div.id = "striked_price";
41 | striked_price_div.innerHTML = `Rs:- ${striked_price[i]}`;
42 | let price_div = document.createElement("p");
43 | price_div.id = "price";
44 | price_div.innerHTML = `Rs:- ${price[i]}`;
45 | let add_to_cart = document.createElement("button");
46 | add_to_cart.innerText = "ADD";
47 | let obj = {
48 | image : data[i].defaultSku.skuImages.image50,
49 | name : data[i].productName,
50 | striked_price : striked_price[i],
51 | price : price[i]
52 | }
53 | add_to_cart.addEventListener("click",(e)=>{
54 | cart_data.push(obj);
55 | localStorage.setItem("items",JSON.stringify(cart_data));
56 | alert ("Product added to cart succesfully");
57 | });
58 | div.append(image,name,striked_price_div,price_div,add_to_cart);
59 | document.getElementById("beauty_container").append(div);
60 | i++;
61 | }
62 | }
63 |
64 | let count = 0;
65 | document.getElementById("more_beauty").addEventListener("click",(e)=>{
66 | const options = {
67 | method: 'GET',
68 | headers: {
69 | 'X-RapidAPI-Key': '1890b4099emsh5032653b60150a7p18974fjsne6d1feb5c535',
70 | 'X-RapidAPI-Host': 'sephora.p.rapidapi.com'
71 | }
72 | };
73 |
74 | fetch('https://sephora.p.rapidapi.com/auto-complete?q=eyelashes', options)
75 | .then(response => response.json())
76 | .then(data => appendBeauty(data.typeAheadTerms))
77 | .catch(err => console.error(err));
78 | count++;
79 | console.log(count);
80 | if(count === 1){
81 | fetch('https://sephora.p.rapidapi.com/auto-complete?q=blush', options)
82 | .then(response => response.json())
83 | .then(data => appendBeauty(data.typeAheadTerms))
84 | .catch(err => console.error(err));
85 | }else if(count === 2){
86 | fetch('https://sephora.p.rapidapi.com/auto-complete?q=bronzer', options)
87 | .then(response => response.json())
88 | .then(data => appendBeauty(data.typeAheadTerms))
89 | .catch(err => console.error(err));
90 | }else if(count === 3){
91 | fetch('https://sephora.p.rapidapi.com/auto-complete?q=eyebrow', options)
92 | .then(response => response.json())
93 | .then(data => appendBeauty(data.typeAheadTerms))
94 | .catch(err => console.error(err));
95 | }
96 |
97 | });
98 |
99 |
--------------------------------------------------------------------------------
/footer.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0%;
3 | }
4 | #b1 {
5 | display: block;
6 | margin-left: auto;
7 | margin-right: auto;
8 | width: 1400px;
9 | height: 1420px;
10 | border: 1px solid black;
11 | }
12 | #a{
13 | width: 1370px;
14 | height: 100px;
15 |
16 | font-style:unset;
17 | display: block;
18 | margin-left: auto;
19 | margin-right: auto;
20 | color: black;
21 |
22 | }
23 | #b{
24 | width: 1370px;
25 | height: 200px;
26 |
27 | font-style:unset;
28 | display: block;
29 | margin-left: auto;
30 | margin-right: auto;
31 | color: rgb(78, 76, 76);
32 |
33 | }
34 | #c{
35 | width:1370px;
36 | height: 50px;
37 |
38 | font-style:unset;
39 | display: block;
40 | margin-left: auto;
41 | margin-right: auto;
42 | color: rgb(85, 83, 83);
43 |
44 | }
45 |
46 | #d{
47 | width: 1370px;
48 | height: 200px;
49 |
50 | font-style:unset;
51 | display: block;
52 | margin-left: auto;
53 | margin-right: auto;
54 | color:black;
55 |
56 | }
57 | #e{
58 | width:1370px;
59 | height: 100px;
60 |
61 | font-style:unset;
62 | display: block;
63 | margin-left: auto;
64 | margin-right: auto;
65 | color:black;
66 |
67 | }
68 | #f{
69 | width: 1370px;
70 | height: 150px;
71 |
72 | font-style:unset;
73 | display: block;
74 | margin-left: auto;
75 | margin-right: auto;
76 | color: rgb(85, 83, 83);
77 |
78 | }
79 | #g{
80 | width:1370px;
81 | height: 80px;
82 |
83 | font-style:unset;
84 | display: block;
85 | margin-left: auto;
86 | margin-right: auto;
87 | color: rgb(85, 83, 83);
88 |
89 | }
90 | #h,#i,#j{
91 | width: 1370px;
92 | height: 130px;
93 |
94 | font-style:unset;
95 | display: block;
96 | margin-left: auto;
97 | margin-right: auto;
98 | color: rgb(85, 83, 83);
99 |
100 | }
101 | .fourteen {
102 | display: grid;
103 | margin: 50px auto 0px auto;
104 | width: 1390px;
105 | height: 1000px;
106 | grid-template-columns: repeat(29, 1fr);
107 |
108 |
109 | gap: 5px 20px;
110 |
111 | }
112 |
113 | .fourteen>div {
114 | display: flex;
115 |
116 |
117 | margin: 5px 1px 0px 5px;
118 | }
119 |
120 | .fourteen>div>img {
121 | width: 220px;
122 | height: 90px;
123 | }
124 |
125 | #ena{
126 | color: limegreen;
127 | }
128 |
129 | .m1 {
130 | grid-area: 1/1/2/6;
131 |
132 | }
133 |
134 |
135 | .m2 {
136 | grid-area: 2/1/3/6;
137 | }
138 |
139 | .m3 {
140 | grid-area: 3/1/4/6;
141 | }
142 |
143 | .m4 {
144 | grid-area: 4/1/5/6;
145 | }
146 |
147 | .m5 {
148 | grid-area: 5/1/6/6;
149 | }
150 |
151 | .m6 {
152 | grid-area: 6/1/7/6;
153 | }
154 |
155 | .m7 {
156 | grid-area: 7/1/8/6;
157 | }
158 |
159 | .m8 {
160 | grid-area: 8/1/9/6;
161 | }
162 |
163 | .m9 {
164 | grid-area: 9/1/10/6;
165 | }
166 |
167 | .m10 {
168 | grid-area: 10/1/11/6;
169 | }
170 |
171 | .m11 {
172 | grid-area: 11/1/12/6;
173 | }
174 |
175 | .m12 {
176 | grid-area: 12/1/13/6;
177 | }
178 |
179 | .m13 {
180 | grid-area: 1/8/2/13;
181 | }
182 |
183 | .m14 {
184 | grid-area: 2/8/3/13;
185 | }
186 |
187 | .m15 {
188 | grid-area: 3/8/4/13;
189 | }
190 |
191 | .m16 {
192 | grid-area: 4/8/5/13;
193 | }
194 |
195 | .m17 {
196 | grid-area: 5/8/6/13;
197 | }
198 |
199 | .m18 {
200 | grid-area: 6/8/7/13;
201 | }
202 |
203 | .m19 {
204 | grid-area: 1/14/2/20;
205 | }
206 |
207 | .m20 {
208 | grid-area: 2/14/4/20;
209 | }
210 |
211 | .m21 {
212 | grid-area: 4/14/6/20;
213 | }
214 |
215 | .m22 {
216 | grid-area: 1/21/2/29;
217 | }
218 |
219 | .m23 {
220 | grid-area: 2/21/4/23;
221 | }
222 |
223 | .m24 {
224 | grid-area: 2/23/4/25;
225 | }
226 |
227 | .m25 {
228 | grid-area: 2/25/4/27;
229 | }
230 |
231 | .m26 {
232 | grid-area: 2/27/4/29;
233 | }
234 |
235 |
236 |
237 |
238 | .fifteen {
239 | display: grid;
240 | margin: 50px auto 0px auto;
241 | width: 1390px;
242 | height: 700px;
243 | grid-template-columns: repeat(12, 1fr);
244 |
245 |
246 | gap: 5px 20px;
247 |
248 | }
249 |
250 | .fifteen>div {
251 | display: flex;
252 | color:darkgray;
253 | font-style:inherit;
254 |
255 | margin: 5px 1px 0px 5px;
256 | }
257 |
258 | .fifteen>div>img {
259 | width: 120px;
260 | height: 50px;
261 | }
262 | #meena{
263 | color: limegreen;
264 | }
265 |
266 |
267 |
268 | .n1 {
269 | grid-area: 1/1/2/4;
270 |
271 | }
272 |
273 |
274 | .n2 {
275 | grid-area: 1/4/2/13;
276 | }
277 |
278 | .n3 {
279 | grid-area: 2/1/3/4;
280 | }
281 |
282 | .n4 {
283 | grid-area: 2/4/3/13;
284 | }
285 |
286 | .n5 {
287 | grid-area: 3/1/5/4;
288 | }
289 |
290 | .n6 {
291 | grid-area: 3/4/5/13;
292 | }
293 |
294 | .n7 {
295 | grid-area: 5/1/6/4;
296 | }
297 | .n8 {
298 | grid-area: 5/4/6/5;
299 | }
300 | .n9 {
301 | grid-area: 5/5/6/6;
302 | }
303 | .n10 {
304 | grid-area: 5/6/6/7;
305 | }
306 | .n11 {
307 | grid-area: 5/7/6/8;
308 | }
309 | .n12 {
310 | grid-area: 5/8/6/9;
311 | }
312 | .n13 {
313 | grid-area: 5/9/6/10;
314 | }
315 | .n14 {
316 | grid-area: 5/10/6/11;
317 | }
318 |
319 | .sixteen {
320 | display: grid;
321 | margin: 50px 0px 0px 0px;
322 | width: 1780px;
323 | height: 50px;
324 | grid-template-columns: repeat(7, 1fr);
325 | background-color: rgb(204, 203, 203);
326 |
327 | gap: 0px 0px;
328 |
329 | }
330 |
331 | .sixteen>div {
332 | display: flex;
333 | color:rgb(72, 71, 71);
334 | font-style:inherit;
335 |
336 | margin: 0px 0px 0px 0px;
337 | }
338 |
339 | .o1 {
340 | grid-area: 1/2/2/5;
341 |
342 | }
343 |
344 |
345 | .o2 {
346 | grid-area: 1/7/2/8;
347 | }
348 |
349 |
350 |
--------------------------------------------------------------------------------
/fruits_category.js:
--------------------------------------------------------------------------------
1 | const options = {
2 | method: 'GET',
3 | Headers : {
4 | "Content-Type" : "application/json",
5 |
6 | }
7 | };
8 |
9 | fetch('https://api.spoonacular.com/food/search?query=fruits&apiKey=16a7ab4f21a24c6aba65724240f8792e', options)
10 | .then(response => response.json())
11 | .then(data => appendFruits(data.searchResults[1].results))
12 | .catch(err => console.log(err));
13 |
14 | let fruits_images = ["https://www.bigbasket.com/media/uploads/banner_images/L1-YXNP4834-1200X300-01stSEP22.jpg","https://www.bigbasket.com/media/uploads/banner_images/L1-YXNP3540-1200X300-20thJun22.jpg","https://www.bigbasket.com/media/uploads/banner_images/L1-YXNP3469-1200X300-16thJun22.jpg","https://www.bigbasket.com/media/uploads/banner_images/YXNP5333-1200x300-070922.jpg","https://www.bigbasket.com/media/uploads/banner_images/fresho-fnv-Bangalore-1200x300-27thSEP22.jpeg"];
15 | let img = document.createElement("img");
16 | let fruits_slider = document.getElementById("fruits_slider");
17 | let i = 0;
18 | setInterval(function(){
19 | if(i===3){i=0}
20 | img.src = fruits_images[i];
21 | fruits_slider.innerHTML = null;
22 | fruits_slider.append(img);
23 | i++;
24 | },3000);
25 |
26 |
27 |
28 |
29 |
30 | function appendFruits(data){
31 |
32 |
33 | console.log(data);
34 | let striked_price = [72.72, 101.3, 39.29, 53.25, 28.57, 50.22, 140.26, 263.64, 74.68, 72.73, 166.23, 81.82, 54.98, 58.01, 30.08, 64.94, 353.24, 92.53, 21.43, 233.76, 40.17, 35.06, 227.27, 141.56, 12.38, 112.38, 141.99, 28.57, 155.84, 32.47, 40, 189.61, 250.65, 13.11, 118.18, 149.35];
35 | let price = [55.99, 78, 20.5, 36, 19.5, 24.5, 103, 203, 53.5, 56, 102, 58.5, 39, 41, 23.16, 50, 271.99, 38.5, 16.5, 180, 29, 27, 175, 103, 9.53, 67.5, 96, 19, 120, 25, 30, 146, 193, 10.09, 91, 115];
36 |
37 | let arr = [];
38 | let i = 0;
39 | while(i<=35){
40 | let div = document.createElement("div");
41 | let image = document.createElement("img");
42 | image.src = data[i].image;
43 | let name = document.createElement("h4");
44 | name.innerHTML = data[i].name;
45 | let striked_price_div = document.createElement("p");
46 | striked_price_div.id = "striked_price";
47 | striked_price_div.innerHTML = `Rs:- ${striked_price[i]}`;
48 | let price_div = document.createElement("p");
49 | price_div.innerHTML = `Rs:- ${price[i]}`;
50 | let add_to_cart = document.createElement("button");
51 | add_to_cart.innerText = "ADD";
52 | let obj = {
53 | image : data[i].image,
54 | name : data[i].name,
55 | striked_price : striked_price[i],
56 | price : price[i]
57 | }
58 | add_to_cart.addEventListener("click",(e)=>{
59 | arr.push(obj);
60 | localStorage.setItem("items",JSON.stringify(arr));
61 | alert ("Product added to cart succesfully");
62 | });
63 | div.append(image,name,striked_price_div,price_div,add_to_cart);
64 | document.getElementById("fruits_category_container").append(div);
65 | i++;
66 | }
67 | }
68 |
69 |
70 | document.getElementById("more_fruits").addEventListener('click',(e)=>{
71 | const options = {
72 | method: 'GET',
73 | Headers : {
74 | "Content-Type" : "application/json",
75 |
76 | }
77 | };
78 |
79 | fetch(' https://api.spoonacular.com/food/search?query=vegetables&apiKey=16a7ab4f21a24c6aba65724240f8792e', options)
80 | .then(response => response.json())
81 | .then(data => appendFruits(data.searchResults[1].results))
82 | .catch(err => console.log(err));
83 | function appendFruits(data){
84 | let count = 0;
85 | console.log(data);
86 | let striked_price = [72.72, 101.3, 39.29, 53.25, 28.57, 50.22, 140.26, 263.64, 74.68, 72.73, 166.23, 81.82, 54.98, 58.01, 30.08, 64.94, 353.24, 92.53, 21.43, 233.76, 40.17, 35.06, 227.27, 141.56, 12.38, 112.38, 141.99, 28.57, 155.84, 32.47, 40, 189.61, 250.65, 13.11, 118.18, 149.35];
87 | let price = [55.99, 78, 20.5, 36, 19.5, 24.5, 103, 203, 53.5, 56, 102, 58.5, 39, 41, 23.16, 50, 271.99, 38.5, 16.5, 180, 29, 27, 175, 103, 9.53, 67.5, 96, 19, 120, 25, 30, 146, 193, 10.09, 91, 115];
88 |
89 | let arr = [];
90 | let i = 0;
91 | while(i<=10){
92 | let div = document.createElement("div");
93 | let image = document.createElement("img");
94 | image.src = data[i].image;
95 | let name = document.createElement("h4");
96 | name.innerHTML = data[i].name;
97 | let striked_price_div = document.createElement("p");
98 | striked_price_div.id = "striked_price";
99 | striked_price_div.innerHTML = `Rs:- ${striked_price[i]}`;
100 | let price_div = document.createElement("p");
101 | price_div.innerHTML = `Rs:- ${price[i]}`;
102 | let add_to_cart = document.createElement("button");
103 | add_to_cart.innerText = "ADD";
104 | let obj = {
105 | image : data[i].image,
106 | name : data[i].name,
107 | striked_price : striked_price[i],
108 | price : price[i]
109 | }
110 | add_to_cart.addEventListener("click",(e)=>{
111 | arr.push(obj);
112 | localStorage.setItem("items",JSON.stringify(arr));
113 | alert ("Product added to cart succesfully");
114 | });
115 | div.append(image,name,striked_price_div,price_div,add_to_cart);
116 | document.getElementById("fruits_category_container").append(div);
117 | i++;
118 | }
119 | count++;
120 | if(count===1){
121 | count = 0;
122 | }
123 | }
124 | }) ;
--------------------------------------------------------------------------------
/foodgrains.js:
--------------------------------------------------------------------------------
1 | const options = {
2 | method: 'GET',
3 | Headers : {
4 | "Content-Type" : "application/json",
5 |
6 | }
7 | };
8 |
9 | fetch(' https://api.spoonacular.com/food/search?query=grains&apiKey=16a7ab4f21a24c6aba65724240f8792e', options)
10 | .then(response => response.json())
11 | .then(data => appendGrains(data.searchResults[1].results))
12 | .catch(err => console.log(err));
13 |
14 | let grains_images = ["https://www.bigbasket.com/media/uploads/banner_images/YXTT4977_1200x300_250922.jpg","https://www.bigbasket.com/media/uploads/banner_images/YXNP4699_1200x300_290822.jpg","https://www.bigbasket.com/media/uploads/banner_images/CXNP5623_1200x300_301021.jpg","https://www.bigbasket.com/media/uploads/banner_images/YXPL14771_YXPL14773_YXPL14774_YXPL14781_YXPL14795_300_240922.jpg"];
15 | let img = document.createElement("img");
16 | let food_grains_slider = document.getElementById("food_grains_slider");
17 | let i = 0;
18 | setInterval(function(){
19 | if(i===3){i=0}
20 | img.src = grains_images[i];
21 | food_grains_slider.innerHTML = null;
22 | food_grains_slider.append(img);
23 | i++;
24 | },3000);
25 |
26 |
27 |
28 |
29 |
30 | function appendGrains(data){
31 |
32 |
33 | console.log(data);
34 | let striked_price = [72.72, 101.3, 39.29, 53.25, 28.57, 50.22, 140.26, 263.64, 74.68, 72.73, 166.23, 81.82, 54.98, 58.01, 30.08, 64.94, 353.24, 92.53, 21.43, 233.76, 40.17, 35.06, 227.27, 141.56, 12.38, 112.38, 141.99, 28.57, 155.84, 32.47, 40, 189.61, 250.65, 13.11, 118.18, 149.35];
35 | let price = [55.99, 78, 20.5, 36, 19.5, 24.5, 103, 203, 53.5, 56, 102, 58.5, 39, 41, 23.16, 50, 271.99, 38.5, 16.5, 180, 29, 27, 175, 103, 9.53, 67.5, 96, 19, 120, 25, 30, 146, 193, 10.09, 91, 115];
36 |
37 | let arr = [];
38 | let i = 0;
39 | while(i<=35){
40 | let div = document.createElement("div");
41 | let image = document.createElement("img");
42 | image.src = data[i].image;
43 | let name = document.createElement("h4");
44 | name.innerHTML = data[i].name;
45 | let striked_price_div = document.createElement("p");
46 | striked_price_div.id = "striked_price";
47 | striked_price_div.innerHTML = `Rs:- ${striked_price[i]}`;
48 | let price_div = document.createElement("p");
49 | price_div.innerHTML = `Rs:- ${price[i]}`;
50 | let add_to_cart = document.createElement("button");
51 | add_to_cart.innerText = "ADD";
52 | let obj = {
53 | image : data[i].image,
54 | name : data[i].name,
55 | striked_price : striked_price[i],
56 | price : price[i]
57 | }
58 | add_to_cart.addEventListener("click",(e)=>{
59 | arr.push(obj);
60 | localStorage.setItem("items",JSON.stringify(arr));
61 | alert ("Product added to cart succesfully");
62 | });
63 | div.append(image,name,striked_price_div,price_div,add_to_cart);
64 | document.getElementById("food_grains_container").append(div);
65 | i++;
66 | }
67 | }
68 |
69 | let count = 0;
70 |
71 | document.getElementById("more_grains").addEventListener('click',(e)=>{
72 | const options = {
73 | method: 'GET',
74 | Headers : {
75 | "Content-Type" : "application/json",
76 |
77 | }
78 | };
79 |
80 | fetch(' https://api.spoonacular.com/food/search?query=oil&apiKey=16a7ab4f21a24c6aba65724240f8792e', options)
81 | .then(response => response.json())
82 | .then(data => appendGrains(data.searchResults[1].results))
83 | .catch(err => console.log(err));
84 | function appendGrains(data){
85 | console.log(data);
86 | let striked_price = [72.72, 101.3, 39.29, 53.25, 28.57, 50.22, 140.26, 263.64, 74.68, 72.73, 166.23, 81.82, 54.98, 58.01, 30.08, 64.94, 353.24, 92.53, 21.43, 233.76, 40.17, 35.06, 227.27, 141.56, 12.38, 112.38, 141.99, 28.57, 155.84, 32.47, 40, 189.61, 250.65, 13.11, 118.18, 149.35];
87 | let price = [55.99, 78, 20.5, 36, 19.5, 24.5, 103, 203, 53.5, 56, 102, 58.5, 39, 41, 23.16, 50, 271.99, 38.5, 16.5, 180, 29, 27, 175, 103, 9.53, 67.5, 96, 19, 120, 25, 30, 146, 193, 10.09, 91, 115];
88 |
89 | let arr = [];
90 | let i = 0;
91 | while(i<=10){
92 | let div = document.createElement("div");
93 | let image = document.createElement("img");
94 | image.src = data[i].image;
95 | let name = document.createElement("h4");
96 | name.innerHTML = data[i].name;
97 | let striked_price_div = document.createElement("p");
98 | striked_price_div.id = "striked_price";
99 | striked_price_div.innerHTML = `Rs:- ${striked_price[i]}`;
100 | let price_div = document.createElement("p");
101 | price_div.innerHTML = `Rs:- ${price[i]}`;
102 | let add_to_cart = document.createElement("button");
103 | add_to_cart.innerText = "ADD";
104 | let obj = {
105 | image : data[i].image,
106 | name : data[i].name,
107 | striked_price : striked_price[i],
108 | price : price[i]
109 | }
110 | add_to_cart.addEventListener("click",(e)=>{
111 | arr.push(obj);
112 | localStorage.setItem("items",JSON.stringify(arr));
113 | alert ("Product added to cart succesfully");
114 | });
115 | div.append(image,name,striked_price_div,price_div,add_to_cart);
116 | document.getElementById("food_grains_container").append(div);
117 | i++;
118 | }
119 | }
120 | count++;
121 | if(count===1){
122 | const options = {
123 | method: 'GET',
124 | Headers : {
125 | "Content-Type" : "application/json",
126 |
127 | }
128 | };
129 |
130 | fetch(' https://api.spoonacular.com/food/search?query=masala&apiKey=16a7ab4f21a24c6aba65724240f8792e', options)
131 | .then(response => response.json())
132 | .then(data => appendGrains(data.searchResults[1].results))
133 | .catch(err => console.log(err));
134 | function appendGrains(data){
135 | console.log(data);
136 | let striked_price = [72.72, 101.3, 39.29, 53.25, 28.57, 50.22, 140.26, 263.64, 74.68, 72.73, 166.23, 81.82, 54.98, 58.01, 30.08, 64.94, 353.24, 92.53, 21.43, 233.76, 40.17, 35.06, 227.27, 141.56, 12.38, 112.38, 141.99, 28.57, 155.84, 32.47, 40, 189.61, 250.65, 13.11, 118.18, 149.35];
137 | let price = [55.99, 78, 20.5, 36, 19.5, 24.5, 103, 203, 53.5, 56, 102, 58.5, 39, 41, 23.16, 50, 271.99, 38.5, 16.5, 180, 29, 27, 175, 103, 9.53, 67.5, 96, 19, 120, 25, 30, 146, 193, 10.09, 91, 115];
138 |
139 | let arr = [];
140 | let i = 0;
141 | while(i<=10){
142 | let div = document.createElement("div");
143 | let image = document.createElement("img");
144 | image.src = data[i].image;
145 | let name = document.createElement("h4");
146 | name.innerHTML = data[i].name;
147 | let striked_price_div = document.createElement("p");
148 | striked_price_div.id = "striked_price";
149 | striked_price_div.innerHTML = `Rs:- ${striked_price[i]}`;
150 | let price_div = document.createElement("p");
151 | price_div.innerHTML = `Rs:- ${price[i]}`;
152 | let add_to_cart = document.createElement("button");
153 | add_to_cart.innerText = "ADD";
154 | let obj = {
155 | image : data[i].image,
156 | name : data[i].name,
157 | striked_price : striked_price[i],
158 | price : price[i]
159 | }
160 | add_to_cart.addEventListener("click",(e)=>{
161 | arr.push(obj);
162 | localStorage.setItem("items",JSON.stringify(arr));
163 | alert ("Product added to cart succesfully");
164 | });
165 | div.append(image,name,striked_price_div,price_div,add_to_cart);
166 | document.getElementById("food_grains_container").append(div);
167 | i++;
168 | }
169 | }
170 | }
171 | if(count === 2){
172 | count = 0;
173 | }
174 | }) ;
--------------------------------------------------------------------------------
/homepage.css:
--------------------------------------------------------------------------------
1 | #homepage_container{
2 | margin-top: 150px;
3 | }
4 | #container{
5 | margin: auto;
6 | width: 75%;
7 | display: flex;
8 | /* border: 1px solid red; */
9 | justify-content:space-between;
10 | /* align-items: center; */
11 | }
12 | h1{
13 | text-align: center;
14 | }
15 | #child{
16 | margin: auto;
17 | /* width: 25%; */
18 | display: grid;
19 | /* border: 1px solid black; */
20 | grid-template-columns: repeat(2,1fr);
21 | justify-content: space-between;
22 | }
23 | #child div{
24 | /* border: 1px solid black; */
25 | margin: auto;
26 | justify-content: space-around;
27 | margin: 4px;
28 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
29 | }
30 | #div1{
31 | /* width: 25%; */
32 | /* border: 1px solid black; */
33 | justify-content: space-around;
34 | margin: 4px;
35 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
36 | }
37 | #container2{
38 | width: 75%;
39 | margin: auto;
40 | display: flex;
41 | /* grid-template-columns: repeat(6,1fr); */
42 | justify-content: space-between;
43 |
44 | }
45 | #container2 div{
46 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
47 | margin: 4px;
48 | }
49 | .image{
50 | width: 100%;
51 | }
52 | #beverages{
53 | margin: auto;
54 | width: 75%;
55 | display: flex;
56 | justify-content: space-between;
57 | }
58 | #child2{
59 | display: grid;
60 | grid-template-columns: repeat(2,1fr);
61 | }
62 | #child2 div{
63 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
64 | margin: 4px;
65 | }
66 | #div2{
67 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
68 | margin: 4px;
69 | }
70 | #Snaks{
71 | margin: auto;
72 | width: 75%;
73 | display: flex;
74 | justify-content: space-between;
75 | }
76 | #Snaks div{
77 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
78 | margin: 4px;
79 | }
80 | .image2{
81 | width: 100%;
82 | }
83 | #clean{
84 | margin: auto;
85 | width: 75%;
86 | display: flex;
87 | justify-content: space-between;
88 | }
89 | #clean div{
90 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
91 | margin: 4px;
92 | }
93 | .image3{
94 | width:100%;
95 | }
96 | #slider{
97 | margin: 30px;
98 | width: 74%;
99 | margin-left: 13%;
100 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
101 | }
102 | #brand{
103 | margin: auto;
104 | width: 75%;
105 | display: flex;
106 | justify-content: space-between;
107 | }
108 | #brand div{
109 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
110 | margin: 4px;
111 | }
112 | .image4{
113 | width: 100%;
114 | }
115 | #last{
116 | width: 72%;
117 | margin: auto;
118 | box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
119 | margin-top: 25px;
120 | padding: 8px;
121 | padding-left: 20px;
122 | padding-right: 15px;
123 | }
124 | p{
125 | font-size: 16px;
126 | }
127 | * {
128 | box-sizing: border-box
129 | }
130 | /* Slideshow container */
131 |
132 | .slideshow-container {
133 | width: 100%;
134 | height: 400px;
135 | position: relative;
136 | margin: auto;
137 | /* <--- set to zero, 1em = the inherited font size, which will offset it */
138 | /* <--- set to zero, 1em = the inherited font size, which will offset it */
139 | }
140 | /* Hide the images by default */
141 |
142 | .mySlides {
143 | display: none;
144 | }
145 | /* Next & previous buttons */
146 |
147 | .prev,
148 | .next {
149 | cursor: pointer;
150 | position: absolute;
151 | top: 50%;
152 | margin-top: -22px;
153 | width: auto;
154 | padding: 16px;
155 | color: white;
156 | font-weight: bold;
157 | font-size: 18px;
158 | transition: 0.6s ease;
159 | border-radius: 0 3px 3px 0;
160 | user-select: none;
161 | }
162 | /* Position the "next button" to the right */
163 |
164 | .next {
165 | right: 0;
166 | border-radius: 3px 0 0 3px;
167 | }
168 | /* On hover, add a black background color with a little bit see-through */
169 |
170 | .prev:hover,
171 | .next:hover {
172 | background-color: rgba(0, 0, 0, 0.8);
173 | }
174 | /* Caption text */
175 | /* Number text (1/3 etc) */
176 | /* The dots/bullets/indicators */
177 |
178 | .dot {
179 | cursor: pointer;
180 | height: 15px;
181 | width: 15px;
182 |
183 | background-color: #bbb;
184 | border-radius: 50%;
185 | display: inline-block;
186 | transition: background-color 0.6s ease;
187 | }
188 |
189 | .active,
190 | .dot:hover {
191 | background-color: #717171;
192 | }
193 | /* Fading animation */
194 |
195 | .fade {
196 | animation-name: fade;
197 | animation-duration: 1.5s;
198 | }
199 |
200 | @keyframes fade {
201 | from {
202 | opacity: .4
203 | }
204 | to {
205 | opacity: 1
206 | }
207 | }
208 |
209 | #Button_Container{
210 | margin-top: 5%;
211 | display: flex;
212 | justify-content: center;
213 | }
214 | #Button_Container>img{
215 | margin-left: 1%;
216 | }
217 | #Button_Container>img:hover{
218 | border: gray solid;
219 | border-width: 1px;
220 | border-radius: 10%;
221 | }
222 |
223 | #image_Container{
224 | margin-top: 1%;
225 | display: flex;
226 | justify-content: center;
227 | }
228 | #image_Container>img{
229 | margin-left: 1%;
230 | width: 19%;
231 | height: 19%;
232 | border: gray solid;
233 | border-width: 1px;
234 | }
235 |
236 | #image_Container>img:hover{
237 | box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
238 | }
239 | #popular_brand
240 | {
241 | margin-top: 1%;
242 | display: flex;
243 | justify-content: center;
244 |
245 | }
246 | #popular_brand>img{
247 | margin-left: 1%;
248 | width: 19%;
249 | height: 19%;
250 | border: gray solid;
251 | border-width: 1px;
252 | }
253 | #popular_brand>img:hover{
254 | box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
255 | }
256 | #Top_Offers{
257 | margin-top: 1%;
258 | display: flex;
259 | justify-content: center;
260 | }
261 | #Top_Offers>img{
262 | margin-left: 1%;
263 | width: 19%;
264 | height: 19%;
265 | border: gray solid;
266 | border-width: 1px;
267 | }
268 | #Top_Offers>img:hover{
269 | box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
270 | }
271 | #item_div
272 | {
273 | width: 14%;
274 | height: 26%;
275 | border: lightgray solid ;
276 | border-width: 0.1px;
277 | margin-left: 1%;
278 |
279 | }
280 | #item_div:hover{
281 | box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
282 | }
283 | #item_div>img{
284 | width: 100%;
285 | }
286 | #item_div>p{
287 | margin-left: 8%;
288 | }
289 | #item_div>button{
290 | margin-left: 40%;
291 | background-color: orange;
292 | margin-bottom: 2%;
293 | border: 0px;
294 | padding: 0 2% 0 2%;
295 | border-radius: 2px;
296 |
297 |
298 | }
299 | #item_div>button:hover{
300 | background-color: greenyellow;
301 | }
--------------------------------------------------------------------------------
/slider.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
❮
221 |
❯
222 |
223 |
224 |
225 |
226 |
232 |
245 | Bank Offers
246 |
247 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
259 | Best Sellers
260 |
261 |
263 |
264 |
265 |
266 |
267 |
268 | Most Popular
269 |
272 |
273 |
274 |
275 |
276 |
Top Offers
279 |
282 |
283 |
284 |
285 |
286 |
287 |
Document
9 |
16 |
17 |
bigbasket – online grocery store
18 |
19 |
20 |
Did you ever imagine that the freshest of fruits and vegetables, top quality pulses and food grains,
21 | dairy products and hundreds of branded items could be handpicked and delivered to your home, all at the
22 | click of a button? India’s first comprehensive online megastore, bigbasket.com, brings a whopping 20000+
23 | products with more than 1000 brands, to over 4 million happy customers. From household cleaning products
24 | to beauty and makeup, bigbasket has everything you need for your daily needs. bigbasket.com is
25 | convenience personified We’ve taken away all the stress associated with shopping for daily essentials,
26 | and you can now order all your household products and even buy groceries online without travelling long
27 | distances or standing in serpentine queues. Add to this the convenience of finding all your requirements
28 | at one single source, along with great savings, and you will realize that bigbasket- India’s largest
29 | online supermarket, has revolutionized the way India shops for groceries. Online grocery shopping has
30 | never been easier. Need things fresh? Whether it’s fruits and vegetables or dairy and meat, we have this
31 | covered as well! Get fresh eggs, meat, fish and more online at your convenience. Hassle-free Home
32 | Delivery options
33 |
34 |
35 |
We deliver to 25 cities across India and maintain excellent delivery times, ensuring that all your
36 | products from groceries to snacks branded foods reach you in time.
37 |
38 |
39 |
40 |
• Slotted Delivery: Pick the most convenient delivery slot to have your grocery delivered. From
41 | early morning delivery for early birds, to late-night delivery for people who work the late shift,
42 | bigbasket caters to every schedule.
43 | • Express Delivery: This super useful service can be availed by customers in cities like
44 | Bangalore, Mumbai, Pune, Chennai, Kolkata, Hyderabad and Delhi-NCR in which we deliver your orders to
45 | your doorstep in 90 Minutes.
46 | • BB Specialty stores: Missed out on buying that essential item from your favorite neighborhood
47 | store for tonight’s party? We’ll deliver it for you! From bakery, sweets and meat to flowers and
48 | chocolates, we deliver your order in 90 minutes, through a special arrangement with a nearby specialty
49 | store, verified by us.
50 |
51 |
52 |
India’s biggest Online Supermarket
53 |
54 |
55 |
bigbasket.com believes in providing the highest level of customer service and is continuously innovating
56 | to meet customer expectations. Our On-time Guarantee is one such assurance where we refund 5% of the
57 | bill value if the delivery is delayed (however, due to the pandemic caused by Covid-19 our delivery
58 | might get delayed. Delivery Guarantee will not be applicable). For all your order values above Rs. 1200,
59 | we provide free delivery. A wide range of imported and gourmet products are available through our
60 | express delivery and slotted delivery service. If you ever find an item missing on delivery or want to
61 | return a product, you can report it to us within 48 hours for a ‘no-questions-asked’ refund.
62 |
63 |
64 |
65 |
Best quality products for our quality-conscious customers.
66 |
67 |
68 |
bigbasket.com is synonymous with superior quality and continues to strive for higher levels of customer
69 | trust and confidence, by taking feedback and giving our customers what they want. We have added the
70 | convenience of pre-cut fruits in our Fresho range. If it’s a product category you’re looking to shop
71 | from, we’ve made it convenient for you to access all products in a section easily. For instance, if
72 | you’re looking for beverages, you can order from a long list of beverages that include cool drinks, hot
73 | teas, fruit juices and more.
74 |
75 |
76 |
We are proud to be associated closely with the farmers from whom we source our fresh products. Most of
77 | our farm-fresh products are sourced directly from farmers, which not only ensures the best prices and
78 | freshest products for our customers but also helps the farmers get better prices. With more than 80
79 | Organic Fruits and Vegetables and a wide range of organic staples, bigbasket has the largest range in
80 | the organic products category.
81 |
82 |
83 |
When it comes to payment, we have made it easy for our customers can pay through multiple payment
84 | channels like Credit and Debit cards, Internet Banking, e-wallets and Sodexo passes or simply pay Cash
85 | on Delivery (COD).The convenience of shopping for home and daily needs, while not compromising on
86 | quality, has made bigbasket.com the online supermarket of choice for thousands of happy customers across
87 | India.
88 |
89 |
91 |
92 |
bigbasket
93 |
94 |
95 |
96 |
About Us
97 |
98 |
99 |
100 |
In News
101 |
102 |
103 |
104 |
Green bigbasket
105 |
106 |
107 |
108 |
Privacy Policy
109 |
110 |
111 |
112 |
Affiliate
113 |
114 |
115 |
116 |
117 |
Terms and Conditions
118 |
119 |
120 |
121 |
122 |
Careers At bigbasket
123 |
124 |
125 |
126 |
127 |
bb Instant
128 |
129 |
130 |
131 |
132 |
bb Daily
133 |
134 |
135 |
136 |
137 |
bb Blog
138 |
139 |
140 |
141 |
142 |
bbnow
143 |
144 |
145 |
146 |
147 |
Help
148 |
149 |
150 |
151 |
152 |
FAQs
153 |
154 |
155 |
156 |
157 |
Contact Us
158 |
159 |
160 |
161 |
162 |
bb Wallet FAQs
163 |
164 |
165 |
166 |
167 |
bb Wallet T&Cs
168 |
169 |
170 |
171 |
172 |
Vendor Connect
173 |
174 |
175 |
176 |
177 |
Download Our App
178 |
179 |
180 |
181 |
184 |
185 |
186 |
187 |
190 |
191 |
192 |
193 |
194 |
Get Social With Us
195 |
196 |
197 |
198 |
201 |
202 |
203 |
204 |
207 |
208 |
209 |
210 |
213 |
214 |
215 |
216 |
219 |
220 |
221 |
223 |
224 |
POPULAR CATEGORIES:
225 |
226 |
227 |
228 |
229 | Sunflower Oils, Wheat Atta, Ghee, Milk, Health Drinks, Flakes, Organic F&V, Namkeen, Eggs, Floor
230 | Cleaners, Other Juices, Leafy Vegetables, Frozen Veg Food, Diapers & Wipes,
231 |
232 |
233 |
234 |
POPULAR BRANDS:
235 |
236 |
237 |
238 |
239 | Amul, Nescafe , MTR, RED BULL , elite cake, Pediasure, Yummiez, Yera, Yakult, Britannia, Wow Momo,
240 | Fortune , Haldirams , Ferrero, Lays, Patanjali, McCain, kwality walls, Cadbury Dairy Milk, Pedigree,
241 |
242 |
243 |
244 |
245 |
CITIES WE SERVE:
246 |
247 |
248 |
249 |
Bangalore, Hyderabad, Mumbai, Pune, Chennai, Delhi, Mysore, Madurai, Coimbatore, Vijayawada-Guntur,
250 | Kolkata, Ahmedabad-Gandhinagar, Nashik Business, Lucknow-Kanpur, Gurgaon, Vadodara, Visakhapatnam,
251 | Surat, Nagpur, Patna, Indore, Chandigarh Tricity, Jaipur, Bhopal, Noida-Ghaziabad, Kochi, Krishna
252 | District, Bhubaneshwar-Cuttack, Guwahati, Renigunta, Hubli, Davanagere, Trichy, Amravati, Raipur,
253 | Rajkot, Gwalior, Bareilly, Allahabad, Hyderabad Rural, Bangalore Rural, Chennai Rural, Vizag Rural,
254 | Lucknow Rural, Noida Rural, Ahmedabad Rural, Bhopal Rural, Bhubaneswar Rural, Coimbatore Rural,
255 | Chandigarh Rural, Gurugram Rural, Guwahati Rural, Indore Rural, Kochi Rural, Kolkata Rural, Mumbai
256 | Rural, Mysore Rural, Nagpur Rural, Patna Rural, Pune Rural, Surat Rural, Vadodara Rural, Jaipur Rural,
257 | Ranchi, Nashik, Agra,
258 |
259 |
260 |
261 |
262 |
PAYMENT OPTIONS:
263 |
264 |
265 |
266 |
267 |
269 |
270 |
271 |
272 |
273 |
275 |
276 |
277 |
278 |
279 |
281 |
282 |
283 |
284 |
285 |
287 |
288 |
289 |
290 |
291 |
293 |
294 |
295 |
296 |
297 |
299 |
300 |
301 |
302 |
303 |
305 |
306 |
307 |
308 |
309 |
311 |
312 |
Copyright © 2021-2023 Supermarket Grocery Supplies Pvt Ltd
313 |
314 |
315 |
316 |
319 |
320 |
194 |
195 | 
200 |
201 | 
206 |
207 | 
211 |
212 | 
216 |
217 | 
235 | 
236 | 
237 | 
238 | 
239 | 
240 |
241 |
242 |
243 | 
250 | 
251 | 
252 | 
253 |
254 |
255 |
256 |
257 | 
273 | 
274 | 
275 | 
276 | 
283 | 
284 | 
285 | 
286 |
287 | 
184 |
185 | 
190 |
191 | 
201 |
202 | 
207 |
208 | 
213 |
214 | 
275 |
276 | 
287 |
288 | 
293 |
294 | 
299 |
300 | 
305 |
306 | 
24 | 
40 |