├── img ├── .DS_Store ├── Youtube.png ├── image_01.png ├── promo │ ├── kebab.png │ ├── pizza.png │ ├── sushi.png │ └── vegetables.png ├── tanuki │ ├── azhi.jpg │ ├── black.jpg │ ├── fresh.jpg │ ├── smoke.jpg │ ├── nisuaz.jpg │ ├── preview.jpg │ └── tanuki.jpg ├── food-band │ ├── meet.jpg │ ├── preview.jpg │ ├── tom-yam.jpg │ ├── margarita.jpg │ ├── norwegian.jpg │ ├── pepperoni.jpg │ └── seven-cheeses.jpg ├── gusi-lebedi │ ├── chick.jpg │ ├── ear.jpg │ ├── plov.jpg │ ├── squid.jpg │ ├── preview.jpg │ ├── zander.jpg │ ├── calf-sauce.jpg │ ├── dumplings.jpg │ ├── pig-chop.jpg │ └── chicken-soup.jpg ├── palki-skalki │ ├── rome.jpg │ ├── udon.jpg │ ├── combo.jpg │ ├── fusion.jpg │ ├── burrito.jpg │ ├── preview.jpg │ └── cheeseburger.jpg ├── pizza-plus │ ├── preview.jpg │ ├── pizza-girls.jpg │ ├── pizza-plus.jpg │ ├── pizza-classic.jpg │ ├── pizza-oleole.jpg │ ├── pizza-hawaiian.jpg │ └── pizza-vesuvius.jpg ├── pizza-burger │ ├── preview.jpg │ ├── pizza-chef.jpg │ ├── pizza-dacha.jpg │ ├── pizza-meat.jpg │ ├── pizza-caesar.jpg │ ├── pizza-village.jpg │ └── pizza-pepperoni.jpg ├── social │ ├── fb.svg │ ├── vk.svg │ └── instagram.svg └── icon │ ├── rating.svg │ ├── home.svg │ ├── search.svg │ ├── user.svg │ ├── shopping-cart-white.svg │ ├── shopping-cart.svg │ ├── logout.svg │ └── logo.svg ├── README.md ├── db rus ├── tanuki.json ├── food-band.json ├── partners.json ├── pizza-plus.json ├── palki-skalki.json ├── pizza-burger.json └── gusi-lebedi.json ├── db ├── tanuki.json ├── food-band.json ├── partners.json ├── pizza-plus.json ├── palki-skalki.json ├── pizza-burger.json └── gusi-lebedi.json ├── index.html ├── css ├── normalize.css └── style.css ├── restaurant.html └── js └── main.js /img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/.DS_Store -------------------------------------------------------------------------------- /img/Youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/Youtube.png -------------------------------------------------------------------------------- /img/image_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/image_01.png -------------------------------------------------------------------------------- /img/promo/kebab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/promo/kebab.png -------------------------------------------------------------------------------- /img/promo/pizza.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/promo/pizza.png -------------------------------------------------------------------------------- /img/promo/sushi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/promo/sushi.png -------------------------------------------------------------------------------- /img/tanuki/azhi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/tanuki/azhi.jpg -------------------------------------------------------------------------------- /img/tanuki/black.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/tanuki/black.jpg -------------------------------------------------------------------------------- /img/tanuki/fresh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/tanuki/fresh.jpg -------------------------------------------------------------------------------- /img/tanuki/smoke.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/tanuki/smoke.jpg -------------------------------------------------------------------------------- /img/food-band/meet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/food-band/meet.jpg -------------------------------------------------------------------------------- /img/tanuki/nisuaz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/tanuki/nisuaz.jpg -------------------------------------------------------------------------------- /img/tanuki/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/tanuki/preview.jpg -------------------------------------------------------------------------------- /img/tanuki/tanuki.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/tanuki/tanuki.jpg -------------------------------------------------------------------------------- /img/food-band/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/food-band/preview.jpg -------------------------------------------------------------------------------- /img/food-band/tom-yam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/food-band/tom-yam.jpg -------------------------------------------------------------------------------- /img/gusi-lebedi/chick.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/gusi-lebedi/chick.jpg -------------------------------------------------------------------------------- /img/gusi-lebedi/ear.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/gusi-lebedi/ear.jpg -------------------------------------------------------------------------------- /img/gusi-lebedi/plov.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/gusi-lebedi/plov.jpg -------------------------------------------------------------------------------- /img/gusi-lebedi/squid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/gusi-lebedi/squid.jpg -------------------------------------------------------------------------------- /img/palki-skalki/rome.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/palki-skalki/rome.jpg -------------------------------------------------------------------------------- /img/palki-skalki/udon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/palki-skalki/udon.jpg -------------------------------------------------------------------------------- /img/promo/vegetables.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/promo/vegetables.png -------------------------------------------------------------------------------- /img/food-band/margarita.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/food-band/margarita.jpg -------------------------------------------------------------------------------- /img/food-band/norwegian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/food-band/norwegian.jpg -------------------------------------------------------------------------------- /img/food-band/pepperoni.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/food-band/pepperoni.jpg -------------------------------------------------------------------------------- /img/gusi-lebedi/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/gusi-lebedi/preview.jpg -------------------------------------------------------------------------------- /img/gusi-lebedi/zander.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/gusi-lebedi/zander.jpg -------------------------------------------------------------------------------- /img/palki-skalki/combo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/palki-skalki/combo.jpg -------------------------------------------------------------------------------- /img/palki-skalki/fusion.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/palki-skalki/fusion.jpg -------------------------------------------------------------------------------- /img/pizza-plus/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/pizza-plus/preview.jpg -------------------------------------------------------------------------------- /img/gusi-lebedi/calf-sauce.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/gusi-lebedi/calf-sauce.jpg -------------------------------------------------------------------------------- /img/gusi-lebedi/dumplings.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/gusi-lebedi/dumplings.jpg -------------------------------------------------------------------------------- /img/gusi-lebedi/pig-chop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/gusi-lebedi/pig-chop.jpg -------------------------------------------------------------------------------- /img/palki-skalki/burrito.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/palki-skalki/burrito.jpg -------------------------------------------------------------------------------- /img/palki-skalki/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/palki-skalki/preview.jpg -------------------------------------------------------------------------------- /img/pizza-burger/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/pizza-burger/preview.jpg -------------------------------------------------------------------------------- /img/pizza-plus/pizza-girls.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/pizza-plus/pizza-girls.jpg -------------------------------------------------------------------------------- /img/pizza-plus/pizza-plus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/pizza-plus/pizza-plus.jpg -------------------------------------------------------------------------------- /img/food-band/seven-cheeses.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/food-band/seven-cheeses.jpg -------------------------------------------------------------------------------- /img/gusi-lebedi/chicken-soup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/gusi-lebedi/chicken-soup.jpg -------------------------------------------------------------------------------- /img/pizza-burger/pizza-chef.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/pizza-burger/pizza-chef.jpg -------------------------------------------------------------------------------- /img/pizza-burger/pizza-dacha.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/pizza-burger/pizza-dacha.jpg -------------------------------------------------------------------------------- /img/pizza-burger/pizza-meat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/pizza-burger/pizza-meat.jpg -------------------------------------------------------------------------------- /img/pizza-plus/pizza-classic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/pizza-plus/pizza-classic.jpg -------------------------------------------------------------------------------- /img/pizza-plus/pizza-oleole.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/pizza-plus/pizza-oleole.jpg -------------------------------------------------------------------------------- /img/palki-skalki/cheeseburger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/palki-skalki/cheeseburger.jpg -------------------------------------------------------------------------------- /img/pizza-burger/pizza-caesar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/pizza-burger/pizza-caesar.jpg -------------------------------------------------------------------------------- /img/pizza-burger/pizza-village.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/pizza-burger/pizza-village.jpg -------------------------------------------------------------------------------- /img/pizza-plus/pizza-hawaiian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/pizza-plus/pizza-hawaiian.jpg -------------------------------------------------------------------------------- /img/pizza-plus/pizza-vesuvius.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/pizza-plus/pizza-vesuvius.jpg -------------------------------------------------------------------------------- /img/pizza-burger/pizza-pepperoni.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stacykutyepov/Delivery-Food/HEAD/img/pizza-burger/pizza-pepperoni.jpg -------------------------------------------------------------------------------- /img/social/fb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /img/icon/rating.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Welcome to Food Delivery Website! 2 | Food Delivery Website written in HTML, CCS & Vanilla JavaScript. 3 |
4 |

Visit a Website: Food Delivery

5 | website Preview 6 |
7 |
8 |
9 |
10 | 15 |
16 |

Check on the Youtube how this website works

17 | 18 | Youtube Preview 19 |
20 |
21 |
22 |

made with Intensive Course from gloAcademy

23 |
24 | -------------------------------------------------------------------------------- /img/icon/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /img/icon/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /db rus/tanuki.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "tn01", 4 | "name": "ФИЛАДЕЛЬФИЯ НИСУАЗ", 5 | "description": "Угорь, авокадо, сыр, тобико, соус «Нисуаз», кунжут, 6 шт.", 6 | "price": 455, 7 | "image": "img/tanuki/nisuaz.jpg" 8 | }, 9 | { 10 | "id": "tn02", 11 | "name": "ФИЛАДЕЛЬФИЯ СМОУК", 12 | "description": "Лосось копченый, курица копченая, омлет, огурец, авокадо, сыр, микс соусов, 6 шт.", 13 | "price": 455, 14 | "image": "img/tanuki/smoke.jpg" 15 | }, 16 | { 17 | "id": "tn03", 18 | "name": "ФИЛАДЕЛЬФИЯ ФРЕШ", 19 | "description": "Лосось, авокадо, огурец, сыр, омлет, тобико, микс соусов", 20 | "price": 455, 21 | "image": "img/tanuki/fresh.jpg" 22 | }, 23 | { 24 | "id": "tn04", 25 | "name": "КАЛИФОРНИЯ АЖИ", 26 | "description": "Лосось, авокадо, краб-микс, сыр, соус «Ажи-маракуйя», тобико, кунжут, 6 шт.", 27 | "price": 455, 28 | "image": "img/tanuki/azhi.jpg" 29 | }, 30 | { 31 | "id": "tn05", 32 | "name": "КАЛИФОРНИЯ БЛЭК", 33 | "description": "Креветка, краб-микс, сыр, тобико, микс соусов, кунжут, 6 шт.", 34 | "price": 455, 35 | "image": "img/tanuki/black.jpg" 36 | }, 37 | { 38 | "id": "tn06", 39 | "name": "ТАНУКИ", 40 | "description": "Креветка, снежный краб, гуакамоле, сыр, огурец, микс соусов, тобико, кунжут, 6 шт.", 41 | "price": 649, 42 | "image": "img/tanuki/tanuki.jpg" 43 | } 44 | ] 45 | -------------------------------------------------------------------------------- /db rus/food-band.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "fb01", 4 | "name": "Мясная", 5 | "description": "Пицца соус, сыр Моцарелла, томат, куриное филе, пепперони, свинина, бекон", 6 | "price": 685, 7 | "image": "img/food-band/meet.jpg" 8 | }, 9 | { 10 | "id": "fb02", 11 | "name": "Маргарита", 12 | "description": "Пицца соус, сыр Моцарелла, томат", 13 | "price": 693, 14 | "image": "img/food-band/margarita.jpg" 15 | }, 16 | { 17 | "id": "fb03", 18 | "name": "Пепперони", 19 | "description": "Пицца соус, пепперони, сыр Моцарелла", 20 | "price": 595, 21 | "image": "img/food-band/pepperoni.jpg" 22 | }, 23 | { 24 | "id": "fb04", 25 | "name": "Семь сыров", 26 | "description": "Сыр моцарелла, сыр эмменталь, соус сырный, сыр горгондзола, сыр чеддер, сыр креметте, сыр фетакса, сыр пармезан", 27 | "price": 785, 28 | "image": "img/food-band/seven-cheeses.jpg" 29 | }, 30 | { 31 | "id": "fb05", 32 | "name": "Том Ям", 33 | "description": "Креветки, куриное филе, соус Том Ям, сыр Моцарелла, шампиньоны, капуста брокколи, томат.", 34 | "price": 695, 35 | "image": "img/food-band/tom-yam.jpg" 36 | }, 37 | { 38 | "id": "fb06", 39 | "name": "Норвежская", 40 | "description": "Сливочный соус, соус манго-чили, сыр моцарелла, лук красный, перец болгарский, ломтики лосося, салат Айсберг", 41 | "price": 875, 42 | "image": "img/food-band/norwegian.jpg" 43 | } 44 | ] 45 | -------------------------------------------------------------------------------- /db rus/partners.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Пицца Плюс", 4 | "time_of_delivery": 50, 5 | "stars": 4.5, 6 | "price": 900, 7 | "kitchen": "Пицца", 8 | "image": "img/pizza-plus/preview.jpg", 9 | "products": "pizza-plus.json" 10 | }, 11 | { 12 | "name": "Тануки", 13 | "time_of_delivery": 60, 14 | "stars": 4.3, 15 | "price": 1200, 16 | "kitchen": "Суши, роллы", 17 | "image": "img/tanuki/preview.jpg", 18 | "products": "tanuki.json" 19 | }, 20 | { 21 | "name": "FoodBand", 22 | "time_of_delivery": 40, 23 | "stars": 4.4, 24 | "price": 450, 25 | "kitchen": "Пицца", 26 | "image": "img/food-band/preview.jpg", 27 | "products": "food-band.json" 28 | }, 29 | { 30 | "name": "Палки скалки", 31 | "time_of_delivery": 55, 32 | "stars": 4.1, 33 | "price": 500, 34 | "kitchen": "Пицца", 35 | "image": "img/palki-skalki/preview.jpg", 36 | "products": "palki-skalki.json" 37 | }, 38 | { 39 | "name": "Гуси Лебеди", 40 | "time_of_delivery": 75, 41 | "stars": 4.7, 42 | "price": 1000, 43 | "kitchen": "Русская кухня", 44 | "image": "img/gusi-lebedi/preview.jpg", 45 | "products": "gusi-lebedi.json" 46 | }, 47 | { 48 | "name": "PizzaBurger", 49 | "time_of_delivery": 45, 50 | "stars": 4.6, 51 | "price": 700, 52 | "kitchen": "Пицца", 53 | "image": "img/pizza-burger/preview.jpg", 54 | "products": "pizza-burger.json" 55 | } 56 | ] 57 | -------------------------------------------------------------------------------- /db rus/pizza-plus.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "pp01", 4 | "name": "Пицца Везувий", 5 | "description": "Соус томатный, сыр «Моцарелла», ветчина, пепперони, перец «Халапенье», соус «Тобаско», томаты.", 6 | "price": 545, 7 | "image": "img/pizza-plus/pizza-vesuvius.jpg" 8 | }, 9 | { 10 | "id": "pp02", 11 | "name": "Пицца Девичник", 12 | "description": "Соус томатный, постное тесто, нежирный сыр, кукуруза, лук, маслины, грибы, помидоры, болгарский перец.", 13 | "price": 450, 14 | "image": "img/pizza-plus/pizza-girls.jpg" 15 | }, 16 | { 17 | "id": "pp03", 18 | "name": "Пицца Оле-Оле", 19 | "description": "Соус томатный, сыр «Моцарелла», черри, маслины, зелень, майонез", 20 | "price": 440, 21 | "image": "img/pizza-plus/pizza-oleole.jpg" 22 | }, 23 | { 24 | "id": "pp04", 25 | "name": "Пицца Плюс", 26 | "description": "Соус томатный, сыр «Моцарелла», сыр «Чеддер», томаты, пепперони, телятина, грибы, бекон, болгарский перец.", 27 | "price": 805, 28 | "image": "img/pizza-plus/pizza-plus.jpg" 29 | }, 30 | { 31 | "id": "pp05", 32 | "name": "Пицца Гавайская", 33 | "description": "Соус томатный, сыр «Моцарелла», ветчина, ананасы", 34 | "price": 440, 35 | "image": "img/pizza-plus/pizza-hawaiian.jpg" 36 | }, 37 | { 38 | "id": "pp06", 39 | "name": "Пицца Классика", 40 | "description": "Соус томатный, сыр «Моцарелла», сыр «Пармезан», ветчина, салями, грибы.", 41 | "price": 510, 42 | "image": "img/pizza-plus/pizza-classic.jpg" 43 | } 44 | ] 45 | -------------------------------------------------------------------------------- /db rus/palki-skalki.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "ps01", 4 | "name": "Комбо 3 пиццы", 5 | "description": "Пепперони, Чикен Барбекю, Капричеза", 6 | "price": 899, 7 | "image": "img/palki-skalki/combo.jpg" 8 | }, 9 | { 10 | "id": "ps02", 11 | "name": "Пицца Римская", 12 | "description": "30 см. Корнишоны, томатный соус, колбаса, красный лучок, сыр моцарелла, помидоры Черри, зелень.", 13 | "price": 408, 14 | "image": "img/palki-skalki/rome.jpg" 15 | }, 16 | { 17 | "id": "ps03", 18 | "name": "Пицца Фьюжн", 19 | "description": "Сыр моцарелла, соус томатный, курица, пепперони, перец болгарский, томаты, лук красный, соус бургер, лук зеленый", 20 | "price": 499, 21 | "image": "img/palki-skalki/fusion.jpg" 22 | }, 23 | { 24 | "id": "ps04", 25 | "name": "Эби удон", 26 | "description": "Японский супчик на мисо бульоне с добавлением яйца, тигровой креветки, лапши, шампиньонов и зеленого лучка.", 27 | "price": 319, 28 | "image": "img/palki-skalki/udon.jpg" 29 | }, 30 | { 31 | "id": "ps05", 32 | "name": "Чизбургер", 33 | "description": "Мясная котлета, салат Айсберг, Шеф-соус, помидоры, корнишоны, сыр Чеддер, соус Барбекю", 34 | "price": 358, 35 | "image": "img/palki-skalki/cheeseburger.jpg" 36 | }, 37 | { 38 | "id": "ps06", 39 | "name": "Буррито с курицей", 40 | "description": "Сыр, помидор, цыпленок, перец сладкий, лук, салат, яичный блинчик, соус сырный, тортилья, кетчуп", 41 | "price": 356, 42 | "image": "img/palki-skalki/burrito.jpg" 43 | } 44 | ] 45 | -------------------------------------------------------------------------------- /db/tanuki.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "tn01", 4 | "name": "Philadelphia Nisuaz", 5 | "description": "Eel, avocado, cheese, tobiko, Nicoise sauce, sesame, 6 pcs.", 6 | "price": 455, 7 | "image": "img/tanuki/nisuaz.jpg" 8 | }, 9 | { 10 | "id": "tn02", 11 | "name": "Philadelphia Smoke", 12 | "description": "Smoked salmon, smoked chicken, omelet, cucumber, avocado, cheese, mix of sauces, 6 pcs.", 13 | "price": 455, 14 | "image": "img/tanuki/smoke.jpg" 15 | }, 16 | { 17 | "id": "tn03", 18 | "name": "Philadelphia Fresh", 19 | "description": "Salmon, avocado, cucumber, cheese, omelet, tobiko, mix of sauces", 20 | "price": 455, 21 | "image": "img/tanuki/fresh.jpg" 22 | }, 23 | { 24 | "id": "tn04", 25 | "name": "California", 26 | "description": "Salmon, avocado, crab mix, cheese, sauce, passion fruit, tobiko, sesame, 6 pcs.", 27 | "price": 455, 28 | "image": "img/tanuki/azhi.jpg" 29 | }, 30 | { 31 | "id": "tn05", 32 | "name": "California Black", 33 | "description": "Shrimp, crab mix, cheese, tobiko, mix of sauces, sesame, 6 pcs.", 34 | "price": 455, 35 | "image": "img/tanuki/black.jpg" 36 | }, 37 | { 38 | "id": "tn06", 39 | "name": "Tanuki", 40 | "description": "Shrimp, snow crab, guacamole, cheese, cucumber, mix of sauces, tobiko, sesame, 6 pcs.", 41 | "price": 649, 42 | "image": "img/tanuki/tanuki.jpg" 43 | } 44 | ] 45 | -------------------------------------------------------------------------------- /img/social/vk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /db rus/pizza-burger.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "pb01", 4 | "name": "Пицца от Шеф-повара", 5 | "description": "Сыр моцарелла, помидоры, салями, бекон, сыр пармезан, зелень, ветчина", 6 | "price": 638, 7 | "image": "img/pizza-burger/pizza-dacha.jpg" 8 | }, 9 | { 10 | "id": "pb02", 11 | "name": "Пицца Мясное ассорти", 12 | "description": "Сыр моцарелла, фирменный соус, помидоры, куриная грудка, бекон, свинина, говядина, зелень", 13 | "price": 693, 14 | "image": "img/pizza-burger/pizza-meat.jpg" 15 | }, 16 | { 17 | "id": "pb03", 18 | "name": "Пицца Деревенская", 19 | "description": "Сыр моцарелла, пицца соус, чеснок, сыр пармезан, шампиньоны, помидоры, зелень, лук, курица, бекон, ветчина, пепперони", 20 | "price": 705, 21 | "image": "img/pizza-burger/pizza-village.jpg" 22 | }, 23 | { 24 | "id": "pb04", 25 | "name": "Пицца Цезарь", 26 | "description": "Соус Цезарь, куриная грудка, сыр пармезан, моцарелла, гренки, помидоры, салат айсберг", 27 | "price": 759, 28 | "image": "img/pizza-burger/pizza-caesar.jpg" 29 | }, 30 | { 31 | "id": "pb05", 32 | "name": "Пицца Пепперони", 33 | "description": "Сыр моцарелла, пицца соус, шампиньоны, пепперони", 34 | "price": 475, 35 | "image": "img/pizza-burger/pizza-pepperoni.jpg" 36 | }, 37 | { 38 | "id": "pb06", 39 | "name": "Пицца Дачная", 40 | "description": "Сыр моцарелла, пицца соус, бекон, картофель фри, куриная грудка, помидоры, пепперони, ветчина, зелень", 41 | "price": 649, 42 | "image": "img/pizza-burger/pizza-dacha.jpg" 43 | } 44 | ] 45 | -------------------------------------------------------------------------------- /db/food-band.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "fb01", 4 | "name": "Pizza Meat", 5 | "description": "Pizza sauce, Mozzarella cheese, tomato, chicken, pepperoni, pork, bacon", 6 | "price": 685, 7 | "image": "img/food-band/meet.jpg" 8 | }, 9 | { 10 | "id": "fb02", 11 | "name": "Pizza Margarita", 12 | "description": "Pizza sauce, Mozzarella cheese, tomato", 13 | "price": 693, 14 | "image": "img/food-band/margarita.jpg" 15 | }, 16 | { 17 | "id": "fb03", 18 | "name": "Pizza Pepperoni", 19 | "description": "Pizza sauce, pepperoni, Mozzarella cheese", 20 | "price": 595, 21 | "image": "img/food-band/pepperoni.jpg" 22 | }, 23 | { 24 | "id": "fb04", 25 | "name": "Seven cheeses", 26 | "description": "Mozzarella cheese, emmental cheese, cheese sauce, gorgonzola cheese, cheddar cheese, cremette cheese, fetax cheese, parmesan cheese", 27 | "price": 785, 28 | "image": "img/food-band/seven-cheeses.jpg" 29 | }, 30 | { 31 | "id": "fb05", 32 | "name": "Pizza Tom Yam", 33 | "description": "Shrimp, chicken, Tom Yam sauce, Mozzarella cheese, mushrooms, broccoli, tomato.", 34 | "price": 695, 35 | "image": "img/food-band/tom-yam.jpg" 36 | }, 37 | { 38 | "id": "fb06", 39 | "name": "Pizza Norwegian", 40 | "description": "Creamy sauce, mango-chili sauce, mozzarella cheese, red onion, Bulgarian pepper, salmon slices, Iceberg salad", 41 | "price": 875, 42 | "image": "img/food-band/norwegian.jpg" 43 | } 44 | ] 45 | -------------------------------------------------------------------------------- /db/partners.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Pizza Plus", 4 | "time_of_delivery": 50, 5 | "stars": 4.5, 6 | "price": 900, 7 | "kitchen": "Pizza", 8 | "image": "img/pizza-plus/preview.jpg", 9 | "products": "pizza-plus.json" 10 | }, 11 | { 12 | "name": "Tanuki", 13 | "time_of_delivery": 60, 14 | "stars": 4.3, 15 | "price": 1200, 16 | "kitchen": "Japanese", 17 | "image": "img/tanuki/preview.jpg", 18 | "products": "tanuki.json" 19 | }, 20 | { 21 | "name": "FoodBand", 22 | "time_of_delivery": 40, 23 | "stars": 4.4, 24 | "price": 450, 25 | "kitchen": "Pizza", 26 | "image": "img/food-band/preview.jpg", 27 | "products": "food-band.json" 28 | }, 29 | { 30 | "name": "Rolling sticks", 31 | "time_of_delivery": 55, 32 | "stars": 4.1, 33 | "price": 500, 34 | "kitchen": "Pizza", 35 | "image": "img/palki-skalki/preview.jpg", 36 | "products": "palki-skalki.json" 37 | }, 38 | { 39 | "name": "Geese Swans", 40 | "time_of_delivery": 75, 41 | "stars": 4.7, 42 | "price": 1000, 43 | "kitchen": "Russian cuisine", 44 | "image": "img/gusi-lebedi/preview.jpg", 45 | "products": "gusi-lebedi.json" 46 | }, 47 | { 48 | "name": "PizzaBurger", 49 | "time_of_delivery": 45, 50 | "stars": 4.6, 51 | "price": 700, 52 | "kitchen": "American, Pizza", 53 | "image": "img/pizza-burger/preview.jpg", 54 | "products": "pizza-burger.json" 55 | } 56 | ] 57 | -------------------------------------------------------------------------------- /db/pizza-plus.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "pp01", 4 | "name": "Pizza Vesuvius", 5 | "description": "Tomato sauce, Mozzarella cheese, ham, pepperoni, Jalapenier pepper, Tobasco sauce, tomatoes.", 6 | "price": 545, 7 | "image": "img/pizza-plus/pizza-vesuvius.jpg" 8 | }, 9 | { 10 | "id": "pp02", 11 | "name": "Pizza Slumber Party", 12 | "description": "Tomato sauce, lean dough, low-fat cheese, corn, onions, olives, mushrooms, tomatoes, bell peppers.", 13 | "price": 450, 14 | "image": "img/pizza-plus/pizza-girls.jpg" 15 | }, 16 | { 17 | "id": "pp03", 18 | "name": "Pizza Ole Ole", 19 | "description": "Tomato sauce, Mozzarella cheese, cherry, olives, greens, mayonnaise", 20 | "price": 440, 21 | "image": "img/pizza-plus/pizza-oleole.jpg" 22 | }, 23 | { 24 | "id": "pp04", 25 | "name": "Pizza Plus", 26 | "description": "Tomato sauce, Mozzarella & Cheddar cheese, tomatoes, pepperoni, veal, mushrooms, bacon, bell pepper.", 27 | "price": 805, 28 | "image": "img/pizza-plus/pizza-plus.jpg" 29 | }, 30 | { 31 | "id": "pp05", 32 | "name": "Pizza Hawaiian", 33 | "description": "Tomato sauce, Mozzarella cheese, ham, pineapple", 34 | "price": 440, 35 | "image": "img/pizza-plus/pizza-hawaiian.jpg" 36 | }, 37 | { 38 | "id": "pp06", 39 | "name": "Pizza Classic", 40 | "description": "Tomato sauce, Mozzarella cheese, Parmesan cheese, ham, salami, mushrooms.", 41 | "price": 510, 42 | "image": "img/pizza-plus/pizza-classic.jpg" 43 | } 44 | ] 45 | -------------------------------------------------------------------------------- /db/palki-skalki.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "ps01", 4 | "name": "Combo 3 pizzas", 5 | "description": "Pepperoni, Chicken Barbecue, Whims", 6 | "price": 899, 7 | "image": "img/palki-skalki/combo.jpg" 8 | }, 9 | { 10 | "id": "ps02", 11 | "name": "Pizza Roman", 12 | "description": "30 cm. Gherkins, tomato sauce, sausage, red onion, mozzarella cheese, Cherry tomatoes, greens.", 13 | "price": 408, 14 | "image": "img/palki-skalki/rome.jpg" 15 | }, 16 | { 17 | "id": "ps03", 18 | "name": "Pizza Fusion", 19 | "description": "Mozzarella cheese, tomato sauce, chicken, pepperoni, Bulgarian pepper, tomatoes, red onion, burger sauce, green onion", 20 | "price": 499, 21 | "image": "img/palki-skalki/fusion.jpg" 22 | }, 23 | { 24 | "id": "ps04", 25 | "name": "Ebi Udon", 26 | "description": "Japanese soup on miso broth with eggs, tiger shrimp, noodles, mushrooms and green onion.", 27 | "price": 319, 28 | "image": "img/palki-skalki/udon.jpg" 29 | }, 30 | { 31 | "id": "ps05", 32 | "name": "Cheeseburger", 33 | "description": "Meat patty, Iceberg salad, Chef sauce, tomatoes, gherkins, Cheddar cheese, Barbecue sauce", 34 | "price": 358, 35 | "image": "img/palki-skalki/cheeseburger.jpg" 36 | }, 37 | { 38 | "id": "ps06", 39 | "name": "Chicken Burrito", 40 | "description": "Cheese, tomato, chicken, bell peppers, onions, lettuce, egg pancake, cheese sauce, tortilla, ketchup", 41 | "price": 356, 42 | "image": "img/palki-skalki/burrito.jpg" 43 | } 44 | ] 45 | -------------------------------------------------------------------------------- /db/pizza-burger.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "pb01", 4 | "name": "Pizza from the Chef", 5 | "description": "Mozzarella cheese, tomatoes, salami, bacon, parmesan cheese, herbs, ham", 6 | "price": 638, 7 | "image": "img/pizza-burger/pizza-dacha.jpg" 8 | }, 9 | { 10 | "id": "pb02", 11 | "name": "Assorted pizza", 12 | "description": "Mozzarella cheese, special sauce, tomatoes, chicken breast, bacon, pork, beef, greens", 13 | "price": 693, 14 | "image": "img/pizza-burger/pizza-meat.jpg" 15 | }, 16 | { 17 | "id": "pb03", 18 | "name": "Village Pizza", 19 | "description": "Mozzarella cheese, pizza sauce, garlic, parmesan cheese, mushrooms, tomatoes, herbs, onions, chicken", 20 | "price": 705, 21 | "image": "img/pizza-burger/pizza-village.jpg" 22 | }, 23 | { 24 | "id": "pb04", 25 | "name": "Pizza Caesar", 26 | "description": "Caesar sauce, chicken breast, parmesan cheese, mozzarella, croutons, tomatoes, iceberg salad", 27 | "price": 759, 28 | "image": "img/pizza-burger/pizza-caesar.jpg" 29 | }, 30 | { 31 | "id": "pb05", 32 | "name": "Pepperoni Pizza", 33 | "description": "Mozzarella cheese, pizza sauce, mushrooms, pepperoni", 34 | "price": 475, 35 | "image": "img/pizza-burger/pizza-pepperoni.jpg" 36 | }, 37 | { 38 | "id": "pb06", 39 | "name": "Pizza Country", 40 | "description": "Mozzarella cheese, pizza sauce, bacon, french fries, chicken breast, tomatoes, pepperoni, ham, greens", 41 | "price": 649, 42 | "image": "img/pizza-burger/pizza-dacha.jpg" 43 | } 44 | ] 45 | -------------------------------------------------------------------------------- /img/icon/user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /img/icon/shopping-cart-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /img/icon/shopping-cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /img/icon/logout.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 12 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /img/social/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /db rus/gusi-lebedi.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "gl01", 4 | "name": "Пельмени теленок с поросем", 5 | "description": "Настоящие самолепные пельмени из пушистого теста на деревенских желтках и сметане", 6 | "price": 390, 7 | "image": "img/gusi-lebedi/dumplings.jpg" 8 | }, 9 | { 10 | "id": "gl02", 11 | "name": "Плов", 12 | "description": "Плов на углях из правильного риса с бараниной, пряностями и овощами на курдючном жире", 13 | "price": 520, 14 | "image": "img/gusi-lebedi/plov.jpg" 15 | }, 16 | { 17 | "id": "gl03", 18 | "name": "Цыпленок на вертеле", 19 | "description": "Подается на лаваше со свежим томатом и огурцом, с маринованным луком и с шашлычным соусом", 20 | "price": 490, 21 | "image": "img/gusi-lebedi/chick.jpg" 22 | }, 23 | { 24 | "id": "gl04", 25 | "name": "Суп Курочка ряба", 26 | "description": "Кура тушка, морковь, макароны, зелень, яйцо, соль, специи.", 27 | "price": 140, 28 | "image": "img/gusi-lebedi/chicken-soup.jpg" 29 | }, 30 | { 31 | "id": "gl05", 32 | "name": "Отбивная из поросенка", 33 | "description": "Толстый кусок парной свинины с томатами и грибами под сырной корочкой", 34 | "price": 490, 35 | "image": "img/gusi-lebedi/pig-chop.jpg" 36 | }, 37 | { 38 | "id": "gl06", 39 | "name": "Теленок в сливочном соусе", 40 | "description": "Теленок с шампиньонами и луком обжаривается в сливочно-сметанном соусе с картофельным пюре и солеными огурчиками.", 41 | "price": 530, 42 | "image": "img/gusi-lebedi/calf-sauce.jpg" 43 | }, 44 | { 45 | "id": "gl07", 46 | "name": "Судак запеченный", 47 | "description": "Филе судака с картошкой, деревенской сметаной, травами и луком", 48 | "price": 490, 49 | "image": "img/gusi-lebedi/zander.jpg" 50 | }, 51 | { 52 | "id": "gl08", 53 | "name": "Мурманские кальмары", 54 | "description": "Мурманские кальмары с чесночным маслом", 55 | "price": 420, 56 | "image": "img/gusi-lebedi/squid.jpg" 57 | }, 58 | { 59 | "id": "gl09", 60 | "name": "Щучья уха на карасях", 61 | "description": "Наваристая походная уха на четырех рыбах, лаврухе, перце и луке с водкой.", 62 | "price": 380, 63 | "image": "img/gusi-lebedi/ear.jpg" 64 | } 65 | ] 66 | -------------------------------------------------------------------------------- /db/gusi-lebedi.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "gl01", 4 | "name": "Dumplings calf with piglet", 5 | "description": "Real self-made dumplings made of fluffy dough on rustic yolks and sour cream", 6 | "price": 390, 7 | "image": "img/gusi-lebedi/dumplings.jpg" 8 | }, 9 | { 10 | "id": "gl02", 11 | "name": "Pilaf", 12 | "description": "Pilaf on the coals of regular rice with lamb, spices and vegetables in fat tail fat", 13 | "price": 520, 14 | "image": "img/gusi-lebedi/plov.jpg" 15 | }, 16 | { 17 | "id": "gl03", 18 | "name": "Chicken on a spit", 19 | "description": "Served on pita bread with fresh tomato and cucumber, with pickled onions and kebab sauce", 20 | "price": 490, 21 | "image": "img/gusi-lebedi/chick.jpg" 22 | }, 23 | { 24 | "id": "gl04", 25 | "name": "Chicken pock soup", 26 | "description": "Chicken carcass, carrots, pasta, greens, egg, salt, spices.", 27 | "price": 140, 28 | "image": "img/gusi-lebedi/chicken-soup.jpg" 29 | }, 30 | { 31 | "id": "gl05", 32 | "name": "Pig Chop", 33 | "description": "A thick piece of steamed pork with tomatoes and mushrooms under a cheese crust", 34 | "price": 490, 35 | "image": "img/gusi-lebedi/pig-chop.jpg" 36 | }, 37 | { 38 | "id": "gl06", 39 | "name": "Calf in a creamy sauce", 40 | "description": "The calf with mushrooms and onions is fried in a creamy cream sauce with mashed potatoes and pickles.", 41 | "price": 530, 42 | "image": "img/gusi-lebedi/calf-sauce.jpg" 43 | }, 44 | { 45 | "id": "gl07", 46 | "name": "Baked pike perch", 47 | "description": "Fillet of pike perch with potatoes, sour cream, herbs and onions", 48 | "price": 490, 49 | "image": "img/gusi-lebedi/zander.jpg" 50 | }, 51 | { 52 | "id": "gl08", 53 | "name": "Murmansk squid", 54 | "description": "Murmansk squid with garlic oil", 55 | "price": 420, 56 | "image": "img/gusi-lebedi/squid.jpg" 57 | }, 58 | { 59 | "id": "gl09", 60 | "name": "Pike ear on crucian carp", 61 | "description": "A rich marching ear on four fish, laurel, pepper and onion with vodka.", 62 | "price": 380, 63 | "image": "img/gusi-lebedi/ear.jpg" 64 | } 65 | ] 66 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Delivery Food — food delivery service 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 20 | 23 |
24 | 25 | 29 | 33 | 37 |
38 |
39 |
40 | 41 | 42 |
43 |
44 |
45 |
46 |
47 |

Your favourite
food, delivered at home

48 |

49 | Dishes from your favorite restaurants brings a courier in gloves, a mask and an antiseptic. 50 |

51 |
52 |
53 |

Kebab
with a 35% discount

54 |

55 | Order kebab in any restaurant until June 10 and get a discount on OMAGAD promo code 56 |

57 |
58 |
59 |

20% off all meals
by promo code LOVE.FOOD

60 |

61 | A dish from the restaurant will be brought along with a recipe book 62 |

63 |
64 |
65 |

30% discount
in restaurants

66 |

67 | Discounts for sets until May 30 with DADADA promo code 68 |

69 |
70 |
71 |
72 |
73 |
74 |

Top Restaurants

75 | 78 |
79 |
80 |
81 | 82 |
83 | 99 | 100 |
101 | 102 |
103 | 104 | 124 | 125 | 186 | 187 | 213 | 214 | 215 | 216 | 217 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /restaurant.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PizzaBurger — доставка еды на дом 7 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 20 | 23 |
24 | 28 | 32 |
33 |
34 |
35 | 36 | 37 |
38 |
39 | 201 |
202 | 203 |
204 | 205 | 225 | 226 | 287 | 288 | 289 | 290 | 291 | 292 | -------------------------------------------------------------------------------- /img/icon/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | // GET ITEMS DOM 3 | const cartButton = document.getElementById("cart-button"); 4 | const modal = document.querySelector(".modal"); 5 | const closed = document.querySelector(".close"); 6 | const buttonAuth = document.querySelector(".button-auth"); 7 | const modalAuth = document.querySelector(".modal-auth"); 8 | const closeAuth = document.querySelector(".close-auth"); 9 | const logInForm = document.getElementById("logInForm"); 10 | const logInInput = document.getElementById("login"); 11 | const passwordInput = document.getElementById("password"); 12 | const userName = document.querySelector(".user-name"); 13 | const buttonOut = document.querySelector(".button-out"); 14 | const cardsRestaurants = document.querySelector(".cards-restaurants"); 15 | const containerPromo = document.querySelector(".container-promo"); 16 | const restaurants = document.querySelector(".restaurants"); 17 | const menu = document.querySelector(".menu"); 18 | const logo = document.querySelector(".logo"); 19 | const cardsMenu = document.querySelector(".cards-menu"); 20 | const restaurantTitle = document.querySelector('.restaurant-title'); 21 | const rating = document.querySelector('.rating'); 22 | const minPrice = document.querySelector('.price'); 23 | const category = document.querySelector('.category'); 24 | const inputSearch = document.querySelector('.input-search'); 25 | const modalBody = document.querySelector('.modal-body'); 26 | const modalPrice = document.querySelector('.modal-pricetag'); 27 | const buttonClearCart = document.querySelector('.clear-cart'); 28 | const cartText = document.querySelector('.cart-text'); 29 | 30 | let login = localStorage.getItem("gloDelivery"); 31 | 32 | let cart = []; 33 | cart = JSON.parse(localStorage.getItem('cartStorage')); 34 | if (!cart) { 35 | cart = []; 36 | } 37 | 38 | const getData = async function (url) { 39 | const response = await fetch(url); 40 | 41 | if (!response.ok) { 42 | throw new Error(`Error in ${url}, 43 | status ${response.status}!`); 44 | } 45 | return await response.json(); 46 | }; 47 | 48 | const validLogin = function (str) { 49 | // Username (with a restriction of 2-20 characters, which can be letters and numbers, the first character is necessarily a letter) 50 | const nameRegex = /^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$/; 51 | return nameRegex.test(str); 52 | }; 53 | 54 | const validPassword = function (str) { 55 | //Password: (at least 1 numeric character) 56 | const passwordRegex = /(?=.*[0-9])/ 57 | return passwordRegex.test(str); 58 | } 59 | 60 | function toggleModal() { 61 | modal.classList.toggle("is-open"); 62 | } 63 | 64 | function toggleModalAuth() { 65 | logInInput.style.borderColor = ""; 66 | passwordInput.style.borderColor = ''; 67 | modalAuth.classList.toggle("is-open"); 68 | } 69 | 70 | // Authorized 71 | function authorized() { 72 | function logOut() { 73 | login = null; 74 | localStorage.removeItem("gloDelivery"); 75 | // remove items from the cart 76 | cart.length = 0; 77 | renderCart(); 78 | localStorage.removeItem('cartStorage'); 79 | 80 | buttonAuth.style.display = ""; 81 | userName.style.display = ""; 82 | buttonOut.style.display = ""; 83 | logInInput.placeholder = ''; 84 | passwordInput.placeholder = ""; 85 | 86 | buttonOut.removeEventListener("click", logOut); 87 | checkAuth(); 88 | 89 | // if the user logs out on a different page he'll be brought to a Home Page 90 | containerPromo.classList.remove("hide"); 91 | restaurants.classList.remove("hide"); 92 | menu.classList.add("hide"); 93 | cartButton.style.display = ''; 94 | 95 | } 96 | // console.log("Authorized"); 97 | 98 | userName.textContent = login; 99 | 100 | // take away and display new buttons 101 | buttonAuth.style.display = "none"; 102 | userName.style.display = "inline"; 103 | buttonOut.style.display = "flex"; 104 | cartButton.style.display = 'flex'; 105 | 106 | 107 | buttonOut.addEventListener("click", logOut); 108 | } 109 | 110 | // NOT AUTHORIZED 111 | function notAuthorized() { 112 | console.log("Not authorized"); 113 | 114 | function logIn(event) { 115 | event.preventDefault(); 116 | 117 | login = logInInput.value; 118 | localStorage.setItem("gloDelivery", login); // add user to local storage 119 | 120 | updateTotalItemCart(); 121 | renderCart(); 122 | 123 | if (validLogin(login) && validPassword(passwordInput.value)) { 124 | // trim() removes spaces 125 | toggleModalAuth(); 126 | buttonAuth.removeEventListener("click", toggleModalAuth); 127 | closeAuth.removeEventListener("click", toggleModalAuth); 128 | logInForm.removeEventListener("submit", logIn); 129 | logInForm.reset(); // reset the form 130 | checkAuth(); 131 | 132 | } 133 | else { 134 | logInInput.value = ''; 135 | passwordInput.value = ""; 136 | logInInput.placeholder = "Start with a letter"; 137 | passwordInput.placeholder = "At least 1 number"; 138 | logInInput.style.borderColor = "red"; 139 | passwordInput.style.borderColor = 'red'; 140 | } 141 | 142 | } 143 | 144 | buttonAuth.addEventListener("click", toggleModalAuth); 145 | closeAuth.addEventListener("click", toggleModalAuth); 146 | logInForm.addEventListener("submit", logIn); 147 | } 148 | 149 | function checkAuth() { login ? authorized() : notAuthorized(); } 150 | 151 | // create Cards for Restaurants 152 | function createCardRestaurant(restaurant) { 153 | //destructuring 154 | const { 155 | image, 156 | kitchen, 157 | name, 158 | price, 159 | products, 160 | stars, 161 | time_of_delivery: timeOfDelivery, // change name 162 | } = restaurant; 163 | 164 | const card = document.createElement('a') 165 | card.className = 'card card-restaurant'; 166 | card.products = products; 167 | card.info = [name, price, stars, kitchen]; 168 | 169 | card.insertAdjacentHTML('beforeend', ` 170 | ${name} 171 |
172 |
173 |

${name}

174 | ${timeOfDelivery} min 175 |
176 |
177 |
178 | ${stars} 179 |
180 |
От ${price} ₽
181 |
${kitchen}
182 |
183 |
184 | 185 | `); 186 | 187 | cardsRestaurants.insertAdjacentElement("beforeend", card); 188 | } 189 | 190 | // Crete Cards for Items 191 | function createCardGood({ description, image, name, price, id }) { 192 | 193 | const card = document.createElement("div"); 194 | card.className = "card"; 195 | 196 | card.insertAdjacentHTML( 197 | "beforeend", 198 | ` 199 | ${name} 200 |
201 |
202 |

${name}

203 |
204 |
205 |
${description} 206 |
207 |
208 |
209 | 213 | ${price} ₽ 214 |
215 |
216 | 217 | ` 218 | ); 219 | 220 | cardsMenu.insertAdjacentElement("beforeend", card); 221 | } 222 | 223 | // open Restaurant's menu 224 | function openGoods(event) { 225 | 226 | const target = event.target; 227 | 228 | const restaurant = target.closest(".card-restaurant"); // go to this parent element 229 | 230 | if (restaurant) { 231 | 232 | if (login) { 233 | 234 | const [name, price, stars, kitchen] = restaurant.info; 235 | 236 | cardsMenu.textContent = ""; 237 | containerPromo.classList.add("hide"); 238 | restaurants.classList.add("hide"); 239 | menu.classList.remove("hide"); 240 | 241 | restaurantTitle.textContent = name; 242 | rating.textContent = stars; 243 | minPrice.textContent = `From ${price} ₽`; 244 | category.textContent = kitchen; 245 | 246 | getData(`./db/${restaurant.products}`) 247 | .then(data => data.forEach(createCardGood)); 248 | } else { 249 | toggleModalAuth(); 250 | } 251 | } 252 | } 253 | 254 | function returnMain() { 255 | containerPromo.classList.remove("hide"); 256 | restaurants.classList.remove("hide"); 257 | menu.classList.add("hide"); 258 | } 259 | 260 | function updateTotalItemCart() { 261 | const totalItemsCart = cart.reduce(function (result, item) { 262 | return result + item.count; 263 | }, 0); 264 | cartText.textContent = `Cart (${totalItemsCart})` 265 | } 266 | 267 | function addToCart(event) { 268 | 269 | const target = event.target; 270 | // localStorage.setItem('cartStorage', JSON.stringify(cart)); 271 | 272 | // get the right click 273 | const buttonAddToCart = target.closest('.button-add-cart'); 274 | 275 | if (buttonAddToCart) { 276 | // get the card name and cost 277 | const card = target.closest('.card'); 278 | const title = card.querySelector('.card-title-reg').textContent; 279 | const cost = card.querySelector('.card-price').textContent; 280 | const id = buttonAddToCart.id; 281 | 282 | // check if same item is already present into array 283 | const food = cart.find(item => item.id === id); 284 | 285 | // if present increase a count 286 | if (food) { 287 | food.count += 1; 288 | } else { 289 | // push to our cart array a new object 290 | cart.push({ id, title, cost, count: 1 }); 291 | } 292 | localStorage.setItem('cartStorage', JSON.stringify(cart)); 293 | updateTotalItemCart(); 294 | // Change added element cart color 295 | const buttonCartIcon = buttonAddToCart.querySelector('.cart-icon'); 296 | buttonCartIcon.style.backgroundColor = '#1890ff'; 297 | setTimeout(function () { buttonCartIcon.style.backgroundColor = '' }, 500); 298 | } 299 | 300 | } 301 | 302 | 303 | 304 | // const buttonCartIcon = document.querySelector('.cart-icon'); 305 | 306 | // buttonCartIcon.style.backgroundColor = '#1890ff'; 307 | // setTimeout(function () { buttonCartIcon.style.backgroundColor = '' }, 1000); 308 | 309 | 310 | function renderCart() { 311 | // empty the Cart 312 | modalBody.textContent = ''; 313 | // create new items in a the Cart 314 | cart.forEach(function ({ id, title, cost, count }) { 315 | const itemCart = ` 316 |
317 | ${title} 318 | ${cost} 319 |
320 | 321 | ${count} 322 | 323 |
324 |
325 | `; 326 | 327 | modalBody.insertAdjacentHTML('afterbegin', itemCart); 328 | }); 329 | 330 | // calculate the total price in the cart 331 | const totalPrice = cart.reduce(function (result, item) { 332 | return result + (parseFloat(item.cost) * item.count); 333 | }, 0); 334 | 335 | // display total price on UI 336 | modalPrice.textContent = totalPrice + ' ₽'; 337 | updateTotalItemCart(); 338 | } 339 | 340 | // change the count by using + and - in the Cart 341 | function changeCount(event) { 342 | const target = event.target; 343 | // check if target has a certain class 344 | if (target.classList.contains('counter-button')) { 345 | const food = cart.find(function (item) { 346 | return item.id === target.dataset.id; 347 | }); 348 | if (target.classList.contains('counter-minus')) { 349 | food.count--; 350 | if (food.count === 0) { 351 | cart.splice(cart.indexOf(food), 1); 352 | } 353 | } 354 | 355 | if (target.classList.contains('counter-plus')) food.count++; 356 | localStorage.setItem('cartStorage', JSON.stringify(cart)); 357 | 358 | renderCart(); 359 | } 360 | } 361 | 362 | function init() { 363 | getData("./db/partners.json").then(data => { 364 | data.forEach(createCardRestaurant); 365 | }); 366 | 367 | updateTotalItemCart(); 368 | // clear the Cart 369 | buttonClearCart.addEventListener('click', () => { 370 | cart.length = 0; 371 | renderCart(); 372 | localStorage.removeItem('cartStorage'); 373 | }) 374 | 375 | logo.addEventListener("click", returnMain); 376 | 377 | // Change count in the Cart 378 | modalBody.addEventListener('click', changeCount); 379 | 380 | cardsRestaurants.addEventListener("click", openGoods); 381 | 382 | // add click to the Cart 383 | cartButton.addEventListener("click", renderCart); 384 | cartButton.addEventListener("click", toggleModal); 385 | 386 | // work with restaurant cards 387 | closed.addEventListener("click", toggleModal); 388 | 389 | // work with the Cart 390 | cardsMenu.addEventListener('click', addToCart); 391 | 392 | // Add Search by Name and Restaurant 393 | inputSearch.addEventListener('keydown', event => { 394 | 395 | if (event.keyCode === 13) { 396 | const target = event.target; 397 | const value = target.value.toLowerCase().trim(); 398 | target.value = ''; 399 | 400 | if (!value || value.length < 4) { 401 | target.style.backgroundColor = 'pink'; 402 | setTimeout(function () { 403 | target.style.backgroundColor = ''; 404 | }, 2000); 405 | return; 406 | } 407 | 408 | const goods = []; 409 | 410 | getData("./db/partners.json") 411 | .then(function (data) { 412 | const products = data.map(item => item.products); 413 | 414 | products.forEach(function (product) { 415 | getData(`./db/${product}`) 416 | .then(function (data) { 417 | goods.push(...data); 418 | 419 | const searchGoods = goods 420 | .filter(item => { 421 | return item.name.toLowerCase().includes(value); 422 | }); 423 | 424 | cardsMenu.textContent = ""; 425 | containerPromo.classList.add("hide"); 426 | restaurants.classList.add("hide"); 427 | menu.classList.remove("hide"); 428 | 429 | restaurantTitle.textContent = 'Результат поиска'; 430 | rating.textContent = ''; 431 | minPrice.textContent = ''; 432 | category.textContent = ''; 433 | 434 | return searchGoods; 435 | }) 436 | .then(data => data.forEach(createCardGood)); 437 | }); 438 | 439 | }) 440 | 441 | }; 442 | }); 443 | 444 | checkAuth(); 445 | 446 | let swiper = new Swiper(".swiper-container", { 447 | loop: true, 448 | autoplay: true, 449 | speed: 400, 450 | }); 451 | }; 452 | 453 | init(); -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-family: "Roboto", sans-serif; 7 | padding-top: 44px; 8 | } 9 | 10 | a, 11 | button { 12 | cursor: pointer; 13 | color: inherit; 14 | } 15 | 16 | .hide { 17 | display: none; 18 | } 19 | 20 | .container { 21 | max-width: 1200px; 22 | margin: auto; 23 | } 24 | 25 | .header { 26 | display: flex; 27 | align-items: center; 28 | justify-content: space-between; 29 | margin-bottom: 40px; 30 | } 31 | 32 | #login, #password{ 33 | border: 1px solid #d9d9d9; 34 | outline: 0; 35 | } 36 | 37 | .input { 38 | background-color: #ffffff; 39 | border: 1px solid #d9d9d9; 40 | border-radius: 2px; 41 | font-size: 16px; 42 | line-height: 24px; 43 | padding: 8px 8px 8px 35px; 44 | background-repeat: no-repeat; 45 | background-position: left 11px center; 46 | outline: 0; 47 | } 48 | 49 | .address { 50 | flex: 0.8; 51 | } 52 | 53 | .input-address { 54 | width: 100%; 55 | background-image: url(../img/icon/home.svg); 56 | } 57 | 58 | .search { 59 | margin-left: auto; 60 | } 61 | 62 | .input-search { 63 | width: 300px; 64 | background-image: url(../img/icon/search.svg); 65 | 66 | } 67 | 68 | .buttons { 69 | display: flex; 70 | align-items: center; 71 | } 72 | 73 | .button { 74 | display: flex; 75 | align-items: center; 76 | padding: 8px 16px; 77 | background: #ffffff; 78 | border: 1px solid #d9d9d9; 79 | box-sizing: border-box; 80 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.0015); 81 | border-radius: 2px; 82 | color: #595959; 83 | font-size: 16px; 84 | line-height: 24px; 85 | outline: 0; 86 | 87 | } 88 | 89 | .button:hover { 90 | background: #1890ff; 91 | border: 1px solid #1890ff; 92 | color: #fff; 93 | /* box-shadow: 0 0 5px #1890ff; */ 94 | } 95 | 96 | 97 | .button-primary { 98 | background: #1890ff; 99 | border: 1px solid #1890ff; 100 | color: #fff; 101 | margin-right: 10px; 102 | } 103 | 104 | .button-primary:hover { 105 | background: #ffffff; 106 | border: 1px solid #d9d9d9; 107 | color: #595959; 108 | } 109 | 110 | .button-icon { 111 | margin-right: 6px; 112 | } 113 | 114 | .button-card-text { 115 | margin-right: 10px; 116 | } 117 | 118 | .button-auth { 119 | background-position: 20px 13px; 120 | } 121 | 122 | .button-primary .button-auth-svg { 123 | width: 24px; 124 | height: 24px; 125 | background-color: #fff; 126 | -webkit-mask: url("../img/icon/user.svg") no-repeat 50% 50%; 127 | mask: url("../img/icon/user.svg") no-repeat 50% 50%; 128 | background-repeat: no-repeat; 129 | } 130 | 131 | .button-primary:hover .button-auth-svg { 132 | background-color: #595959; 133 | } 134 | 135 | .button .button-cart-svg { 136 | width: 24px; 137 | height: 24px; 138 | background-color: #595959; 139 | -webkit-mask: url("../img/icon/shopping-cart.svg") no-repeat 50% 50%; 140 | mask: url("../img/icon/shopping-cart.svg") no-repeat 50% 50%; 141 | background-repeat: no-repeat; 142 | } 143 | 144 | .button-primary .button-cart-svg { 145 | background-color: #fff; 146 | } 147 | 148 | .button:hover .button-cart-svg { 149 | background-color: #fff; 150 | } 151 | 152 | .button-primary:hover .button-cart-svg { 153 | background-color: #595959; 154 | } 155 | 156 | .button-cart { 157 | display: none; 158 | margin: 0 5px; 159 | } 160 | 161 | .button-out { 162 | display: none; 163 | margin: 0 5px; 164 | } 165 | 166 | .user-name { 167 | display: none; 168 | margin-right: 20px; 169 | font-weight: bold; 170 | font-size: 18px; 171 | } 172 | 173 | .promo-slider { 174 | 175 | width: 600px; 176 | height: 300px; 177 | 178 | } 179 | 180 | .promo { 181 | box-shadow: 0 7px 12px rgba(158, 158, 163, 0.1); 182 | border-radius: 10px; 183 | padding: 68px 70px; 184 | margin-bottom: 56px; 185 | } 186 | 187 | .pizza { 188 | background: #fff1b8 url(../img/promo/pizza.png) no-repeat top -100px right -250px / 830px 189 | } 190 | 191 | .kebab { 192 | background: #D6E4FF url(../img/promo/kebab.png) no-repeat top 45px right 40px / 450px; 193 | } 194 | 195 | .vegetables { 196 | background: #FFF566 url(../img/promo/vegetables.png) no-repeat top 0 right 0 / 825px 197 | } 198 | 199 | .sushi { 200 | background: #FFF1F0 url(../img/promo/sushi.png) no-repeat top 10px right 15px / 500px 201 | } 202 | 203 | .promo-title { 204 | font-style: normal; 205 | font-weight: bold; 206 | font-size: 39px; 207 | line-height: 46px; 208 | color: #302c34; 209 | } 210 | 211 | .promo-text { 212 | font-style: normal; 213 | font-weight: normal; 214 | font-size: 24px; 215 | line-height: 28px; 216 | color: #302c34; 217 | max-width: 538px; 218 | } 219 | 220 | .main { 221 | background: linear-gradient(180deg, rgba(245, 245, 245, 0) 1.04%, #f5f5f5 100%); 222 | } 223 | 224 | .section-heading { 225 | display: flex; 226 | align-items: center; 227 | margin-bottom: 44px; 228 | } 229 | 230 | .section-title { 231 | font-style: normal; 232 | font-weight: bold; 233 | font-size: 36px; 234 | line-height: 42px; 235 | margin: 0 30px 0 0; 236 | color: #000000; 237 | } 238 | 239 | .cards { 240 | display: flex; 241 | align-items: flex-start; 242 | justify-content: space-between; 243 | flex-wrap: wrap; 244 | } 245 | 246 | .card { 247 | background: #ffffff; 248 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 249 | border-radius: 7px; 250 | overflow: hidden; 251 | margin-bottom: 30px; 252 | flex-basis: 31%; 253 | text-decoration: none; 254 | transition: all .2s ease-in-out; 255 | } 256 | 257 | .card:hover{ 258 | transform: scale(1.07); 259 | /* box-shadow: 0 2px 0px #1890ff; */ 260 | 261 | } 262 | 263 | .card-image { 264 | width: 100%; 265 | height: 250px; 266 | object-fit: cover; 267 | } 268 | 269 | 270 | .card-text { 271 | padding: 20px 23px 35px; 272 | min-height: 275px; 273 | display: flex; 274 | flex-direction: column; 275 | } 276 | 277 | 278 | .restaurants .card-text { 279 | min-height: auto; 280 | } 281 | 282 | .card-heading { 283 | display: flex; 284 | align-items: center; 285 | justify-content: space-between; 286 | margin-bottom: 10px; 287 | } 288 | 289 | .card-title { 290 | margin: 0; 291 | font-style: normal; 292 | font-weight: bold; 293 | font-size: 22px; 294 | line-height: 32px; 295 | } 296 | 297 | .card-title-reg { 298 | font-weight: 400; 299 | } 300 | 301 | .card-tag { 302 | font-style: normal; 303 | font-weight: normal; 304 | font-size: 12px; 305 | line-height: 20px; 306 | color: #ffffff; 307 | background: #262626; 308 | border-radius: 2px; 309 | padding: 1px 8px; 310 | } 311 | 312 | .card-info { 313 | display: flex; 314 | align-items: center; 315 | flex-wrap: wrap; 316 | } 317 | 318 | .card-buttons { 319 | display: flex; 320 | margin-top: 24px; 321 | flex-grow: 1; 322 | align-items: flex-end; 323 | } 324 | 325 | .card-price-bold { 326 | font-weight: bold; 327 | font-size: 20px; 328 | line-height: 32px; 329 | margin-left: 30px; 330 | } 331 | 332 | .rating { 333 | background-image: url("../img/icon/rating.svg"); 334 | background-repeat: no-repeat; 335 | background-position: 0 7px; 336 | padding-left: 20px; 337 | margin-right: 26px; 338 | color: #ffc107; 339 | font-weight: bold; 340 | font-size: 18px; 341 | line-height: 32px; 342 | } 343 | 344 | .price, 345 | .category { 346 | color: #8c8c8c; 347 | font-size: 18px; 348 | line-height: 32px; 349 | } 350 | 351 | .price { 352 | margin-right: 10px; 353 | } 354 | 355 | .ingredients { 356 | color: #8c8c8c; 357 | font-size: 18px; 358 | line-height: 21px; 359 | } 360 | 361 | .category { 362 | text-overflow: ellipsis; 363 | overflow: hidden; 364 | white-space: nowrap; 365 | max-width: 150px; 366 | } 367 | 368 | .price:after { 369 | content: ""; 370 | width: 5px; 371 | height: 5px; 372 | background-color: #8c8c8c; 373 | display: inline-block; 374 | vertical-align: middle; 375 | border-radius: 50%; 376 | margin-left: 10px; 377 | } 378 | 379 | .footer { 380 | padding: 60px 0; 381 | } 382 | 383 | .footer-block { 384 | display: flex; 385 | align-items: center; 386 | justify-content: space-between; 387 | } 388 | 389 | .footer-nav { 390 | margin-left: 35px; 391 | margin-right: auto; 392 | } 393 | 394 | .footer-link { 395 | display: inline-block; 396 | color: #595959; 397 | font-style: normal; 398 | font-weight: normal; 399 | font-size: 18px; 400 | line-height: 21px; 401 | text-decoration: none; 402 | } 403 | 404 | .footer-link:not(:last-child) { 405 | margin-right: 15px; 406 | } 407 | 408 | .social-links { 409 | display: flex; 410 | align-items: center; 411 | } 412 | 413 | .social-link:not(:last-child) { 414 | margin-right: 21px; 415 | } 416 | 417 | .modal { 418 | position: fixed; 419 | left: 0; 420 | top: 0; 421 | width: 100%; 422 | height: 100%; 423 | background: rgba(0, 0, 0, 0.4); 424 | display: none; 425 | z-index: 999; 426 | } 427 | 428 | .modal-auth { 429 | position: fixed; 430 | left: 0; 431 | top: 0; 432 | width: 100%; 433 | height: 100%; 434 | background: rgba(0, 0, 0, 0.4); 435 | display: none; 436 | z-index: 999; 437 | } 438 | 439 | .is-open { 440 | display: flex; 441 | } 442 | 443 | .modal-dialog { 444 | max-width: 780px; 445 | width: 95%; 446 | background: #ffffff; 447 | border-radius: 5px; 448 | margin: auto; 449 | padding: 40px 45px; 450 | } 451 | 452 | .modal-dialog-auth { 453 | width: auto; 454 | position: relative; 455 | } 456 | 457 | .label-auth { 458 | display: block; 459 | margin: 30px; 460 | } 461 | 462 | .label-auth span { 463 | width: 80px; 464 | display: inline-block; 465 | } 466 | 467 | .modal-header { 468 | display: flex; 469 | align-items: center; 470 | justify-content: space-between; 471 | margin-bottom: 45px; 472 | } 473 | 474 | .modal-title { 475 | margin: 0; 476 | font-weight: bold; 477 | font-size: 36px; 478 | line-height: 42px; 479 | } 480 | 481 | .close { 482 | font-size: 36px; 483 | border: none; 484 | background-color: transparent; 485 | } 486 | 487 | .close-auth { 488 | font-size: 36px; 489 | border: none; 490 | background-color: transparent; 491 | position: absolute; 492 | top: 10px; 493 | right: 20px; 494 | outline: 0; 495 | } 496 | 497 | .modal-body { 498 | margin-bottom: 22px; 499 | } 500 | 501 | .food-row { 502 | display: flex; 503 | align-items: flex-start; 504 | justify-content: space-between; 505 | padding-bottom: 8px; 506 | border-bottom: 1px solid #d9d9d9; 507 | margin-bottom: 15px; 508 | } 509 | 510 | .food-name { 511 | font-weight: normal; 512 | font-size: 18px; 513 | line-height: 32px; 514 | } 515 | 516 | .food-price { 517 | margin-left: auto; 518 | margin-right: 47px; 519 | font-weight: bold; 520 | font-size: 20px; 521 | line-height: 32px; 522 | } 523 | 524 | .food-counter { 525 | display: flex; 526 | align-items: center; 527 | } 528 | 529 | .counter-button { 530 | display: flex; 531 | align-items: center; 532 | justify-content: center; 533 | width: 39px; 534 | height: 32px; 535 | background: #ffffff; 536 | border: 1px solid #40a9ff; 537 | box-sizing: border-box; 538 | border-radius: 2px; 539 | font-weight: normal; 540 | font-size: 14px; 541 | line-height: 22px; 542 | color: #40a9ff; 543 | } 544 | 545 | .counter-button:hover { 546 | background: #40a9ff; 547 | border: 1px solid #ffffff; 548 | color: #ffffff; 549 | } 550 | 551 | .counter { 552 | font-size: 16px; 553 | line-height: 24px; 554 | margin-left: 10px; 555 | margin-right: 10px; 556 | } 557 | 558 | .modal-footer { 559 | display: flex; 560 | align-items: center; 561 | justify-content: space-between; 562 | } 563 | 564 | .modal-auth .modal-footer { 565 | justify-content: flex-end; 566 | } 567 | 568 | .footer-buttons { 569 | display: flex; 570 | align-items: center; 571 | } 572 | 573 | .modal-pricetag { 574 | background: #262626; 575 | border-radius: 5px; 576 | color: #ffffff; 577 | padding: 15px 20px; 578 | font-size: 20px; 579 | line-height: 23px; 580 | } 581 | 582 | @media (max-width: 1366px) { 583 | .container { 584 | max-width: 960px; 585 | } 586 | 587 | .pizza { 588 | background-position: center right -300px; 589 | background-size: 750px; 590 | } 591 | 592 | 593 | .kebab { 594 | background-position: top -5px right -93px; 595 | background-size: 530px; 596 | } 597 | 598 | .vegetables { 599 | background-position: top 0 right -93px; 600 | background-size: 820px; 601 | } 602 | 603 | .sushi { 604 | background-position: center right -90px; 605 | } 606 | 607 | .rating { 608 | margin-right: 15px; 609 | } 610 | 611 | .category, 612 | .price { 613 | font-size: 14px; 614 | } 615 | } 616 | 617 | @media (max-width: 992px) { 618 | .container { 619 | max-width: 750px; 620 | } 621 | 622 | 623 | 624 | .pizza { 625 | padding: 50px; 626 | background-size: 500px; 627 | background-position: center right -200px; 628 | } 629 | 630 | 631 | .kebab { 632 | background-position: top 55px right -100px; 633 | background-size: 385px; 634 | } 635 | 636 | .vegetables { 637 | background-position: top 0 right -280px; 638 | background-size: 810px; 639 | } 640 | 641 | .sushi { 642 | background-position: top 30px right -175px; 643 | } 644 | 645 | 646 | 647 | .promo-text { 648 | font-size: 18px; 649 | max-width: 400px; 650 | } 651 | 652 | .card { 653 | flex-basis: 49%; 654 | } 655 | 656 | .footer-link { 657 | font-size: 16px; 658 | } 659 | } 660 | 661 | @media (max-width: 768px) { 662 | .container { 663 | max-width: 560px; 664 | } 665 | 666 | .card-info { 667 | flex-wrap: wrap; 668 | } 669 | 670 | .card .rating { 671 | flex-basis: 100%; 672 | } 673 | 674 | .card-title { 675 | font-size: 18px; 676 | } 677 | 678 | .card-text { 679 | min-height: 290px; 680 | } 681 | 682 | .card-price-bold { 683 | margin-left: 20px; 684 | } 685 | 686 | 687 | .pizza { 688 | background-size: 400px; 689 | background-position: bottom 50px right -200px; 690 | } 691 | 692 | 693 | .kebab { 694 | background-position: top -5px right -74px; 695 | background-size: 300px; 696 | } 697 | 698 | .vegetables { 699 | background-position: top 0 right -240px; 700 | background-size: 702px; 701 | } 702 | 703 | .sushi { 704 | background-position: top -24px right -75px; 705 | background-size: 302px; 706 | } 707 | 708 | .promo-title { 709 | font-size: 24px; 710 | line-height: 1.4; 711 | } 712 | 713 | .promo-text { 714 | margin-top: 0; 715 | } 716 | } 717 | 718 | @media (max-width: 578px) { 719 | .container { 720 | width: 90%; 721 | } 722 | 723 | .address { 724 | min-width: 100%; 725 | order: 1; 726 | } 727 | 728 | .header { 729 | flex-wrap: wrap; 730 | } 731 | 732 | .input-address { 733 | margin-top: 15px; 734 | order: 5; 735 | flex: 1; 736 | } 737 | 738 | .promo { 739 | background-image: none; 740 | } 741 | 742 | .promo-title { 743 | margin-bottom: 10px; 744 | } 745 | 746 | .section-title { 747 | font-size: 20px; 748 | } 749 | 750 | .card { 751 | flex-basis: 100%; 752 | } 753 | 754 | .card-text { 755 | min-height: auto; 756 | } 757 | 758 | .card-image { 759 | width: 100%; 760 | } 761 | 762 | .footer { 763 | padding: 30px 0; 764 | } 765 | 766 | .footer-block { 767 | align-items: flex-start; 768 | } 769 | 770 | .footer-nav { 771 | margin-left: 0; 772 | margin-right: 0; 773 | order: 0; 774 | display: flex; 775 | flex-direction: column; 776 | } 777 | 778 | .footer-logo { 779 | margin-right: 15px; 780 | order: 1; 781 | } 782 | 783 | .social-links { 784 | order: 2; 785 | } 786 | } 787 | 788 | @media (max-width: 480px) { 789 | .button-text { 790 | display: none; 791 | } 792 | 793 | .button-icon { 794 | margin: 0; 795 | } 796 | 797 | .user-name { 798 | margin: 10px; 799 | 800 | } 801 | 802 | .buttons { 803 | flex-wrap: wrap; 804 | margin-left: auto; 805 | } 806 | 807 | .button { 808 | min-height: 40px; 809 | padding: 5px 12px; 810 | 811 | } 812 | 813 | .button-out-svg { 814 | width: 24px; 815 | height: 24px; 816 | background-color: #fff; 817 | -webkit-mask: url(../img/icon/logout.svg) no-repeat 50% 50%; 818 | mask: url(../img/icon/logout.svg) no-repeat 50% 50%; 819 | background-repeat: no-repeat; 820 | -webkit-mask-size: 20px; 821 | mask-size: 20px; 822 | } 823 | 824 | .promo { 825 | padding: 20px; 826 | } 827 | 828 | .section-heading { 829 | flex-wrap: wrap; 830 | } 831 | 832 | .footer-block { 833 | flex-wrap: wrap; 834 | flex-direction: column; 835 | align-items: center; 836 | } 837 | 838 | .footer-logo { 839 | order: 0; 840 | margin-bottom: 20px; 841 | } 842 | 843 | .footer-nav { 844 | margin-bottom: 20px; 845 | text-align: center; 846 | } 847 | 848 | .footer-link:not(:last-child) { 849 | margin-right: 0; 850 | } 851 | } --------------------------------------------------------------------------------