Food

├── js └── script.js ├── README.md ├── img ├── tabs │ ├── elite.jpg │ ├── post.jpg │ ├── vegy.jpg │ └── hamburger.jpg └── slider │ ├── pepper.jpg │ ├── food-12.jpg │ ├── paprika.jpg │ └── olive-oil.jpg ├── .idea ├── .gitignore ├── modules.xml └── tutorial.iml ├── icons ├── right.svg ├── left.svg ├── switch.svg ├── facebook.svg ├── veg.svg ├── instagram.svg ├── logo.svg └── Group 5.svg ├── index.html └── css └── style.css /js/script.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # practise2_tutorial -------------------------------------------------------------------------------- /img/tabs/elite.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sammibadriddinov/practise2_tutorial/HEAD/img/tabs/elite.jpg -------------------------------------------------------------------------------- /img/tabs/post.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sammibadriddinov/practise2_tutorial/HEAD/img/tabs/post.jpg -------------------------------------------------------------------------------- /img/tabs/vegy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sammibadriddinov/practise2_tutorial/HEAD/img/tabs/vegy.jpg -------------------------------------------------------------------------------- /img/slider/pepper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sammibadriddinov/practise2_tutorial/HEAD/img/slider/pepper.jpg -------------------------------------------------------------------------------- /img/slider/food-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sammibadriddinov/practise2_tutorial/HEAD/img/slider/food-12.jpg -------------------------------------------------------------------------------- /img/slider/paprika.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sammibadriddinov/practise2_tutorial/HEAD/img/slider/paprika.jpg -------------------------------------------------------------------------------- /img/tabs/hamburger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sammibadriddinov/practise2_tutorial/HEAD/img/tabs/hamburger.jpg -------------------------------------------------------------------------------- /img/slider/olive-oil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sammibadriddinov/practise2_tutorial/HEAD/img/slider/olive-oil.jpg -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | -------------------------------------------------------------------------------- /icons/right.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /icons/left.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /icons/switch.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /.idea/tutorial.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 39 | -------------------------------------------------------------------------------- /icons/veg.svg: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Food 7 | 8 | 9 | 10 | 11 |

12 |

13 |

14 |

15 |

16 |

vegy

17 |

18 | Меню "Фитнес" - это новый подход к приготовлению блюд: больше свежих овощей и фруктов. Для людей, которые интересуются спортом; активных и здоровых. Это абсолютно новый продукт с оптимальной ценой и высоким качеством! 19 |

20 |

21 |

22 |

elite

23 |

24 | Меню “Премиум” - мы используем не только красивый дизайн упаковки, но и качественное исполнение блюд. Красная рыба, морепродукты, фрукты - ресторанное меню без похода в ресторан! 25 |

26 |

27 |

28 |

post

29 |

30 | Наше специальное “Постное меню” - это тщательный подбор ингредиентов: полное отсутствие продуктов животного происхождения. Полная гармония с собой и природой в каждом элементе! Все будет Ом! 31 |

32 |

33 |

34 |

vegy

35 |

36 | Меню "Сбалансированное" - это соответствие вашего рациона всем научным рекомендациям. Мы тщательно просчитываем вашу потребность в к/б/ж/у и создаем лучшие блюда для вас. 37 |

38 |

39 |

40 |

Выберите стиль питания

41 |

42 |

Фитнес

43 |

Премиум

44 |

Постное

45 |

Сбалансированное

46 |

47 |

48 |

49 |

50 |

51 | 52 |

53 | 54 | 55 | -------------------------------------------------------------------------------- /icons/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 7 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic-ext);*{box-sizing:border-box;margin:0;padding:0;font-family:Roboto,sans-serif}a{text-decoration:none}.btn{width:220px;height:65px;display:flex;justify-content:center;align-items:center;background-color:#fff;font-size:18px;font-weight:700;border:1px solid rgba(0,0,0,.2);box-shadow:0 4px 15px rgba(0,0,0,.2);cursor:pointer;transition:.3s all;outline:0}.btn_white{background-color:#fff}.btn_dark{background-color:#303030;color:#fff;border:none}.btn_min{height:50px}.btn:hover{box-shadow:0 4px 30px rgba(0,0,0,.3)}.container{max-width:1200px;margin:0 auto}.divider{width:330px;height:1px;margin:0 auto;background-color:rgba(0,0,0,.5)}.title{font-size:36px;font-weight:400}.header{display:flex;justify-content:space-between;align-items:center;height:150px;padding:0 100px}.header__left-block{display:flex;justify-content:space-between;min-width:550px}.header__logo{max-width:170px}.header__logo img{width:100%}.header__links{display:flex;align-items:center}.header__link{position:relative;margin-right:45px;font-weight:700;font-size:18px;color:#303030}.header__link:after{content:'';position:absolute;display:block;width:110%;left:-5%;bottom:-1px;z-index:-1;height:8px;background:#54ed39}.header__link:last-child{margin-right:0}.sidepanel{position:fixed;left:60px;top:240px;height:400px;width:25px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.sidepanel__text{width:120px;height:120px;font-size:14px}.sidepanel__text span{display:flex;transform:rotate(-90deg) translateX(-50px)}.sidepanel__divider{width:1px;height:165px;background-color:#000}.sidepanel__icon{width:24px;height:24px}.sidepanel__icon img{width:100%}.preview{padding:28px 0 100px 0;position:relative}.preview__life{font-weight:700;font-size:20px;margin-left:35px;margin-top:35px}.bgc_blue{position:absolute;right:0;top:-155px;width:50vw;height:900px;background:rgba(146,242,255,.15);z-index:-1}.tabcontainer{display:flex;width:1130px;margin:0 auto;box-shadow:0 4px 30px rgba(0,0,0,.25)}.tabcontent{width:850px;position:relative}.tabcontent img{width:100%;height:100%;object-fit:cover}.tabcontent__descr{position:absolute;top:300px;right:-177px;width:550px;height:359px;background:rgba(251,254,93,.8);padding:50px;font-size:24px;font-weight:300;line-height:36px;color:rgba(0,0,0,.7)}.tabheader{width:280px;padding:35px 30px;background-color:#fff}.tabheader h3{font-weight:700;font-size:16px}.tabheader__items{margin-top:35px;padding-left:26px;border-left:1px solid #000}.tabheader__item{font-weight:700;font-size:18px;font-weight:300;margin-top:10px;color:rgba(0,0,0,.6);cursor:pointer;transition:.3s all}.tabheader__item_active{color:#000;font-size:22px;font-weight:700}.offer{padding:70px 0 100px 0;position:relative}.offer .container{display:flex;justify-content:space-between}.offer .bgc_y{position:absolute;width:1109px;height:780px;background:rgba(243,255,222,.45);z-index:-1;top:50px}.offer__text{width:580px}.offer__descr{font-size:18px;margin-top:30px;font-weight:300;line-height:24px}.offer__action{display:flex;align-items:center;justify-content:flex-end}.offer__advantages{width:330px;margin-top:50px}.offer__advantages h2{font-weight:700;font-size:20px;margin-top:20px}.offer__advantages h2:first-child{margin-top:70px}.offer__advantages-text{margin-top:20px;font-size:18px;font-weight:300;line-height:21px}.offer__slider{width:650px;margin-top:50px;display:flex;flex-direction:column;align-items:flex-end}.offer__slider-counter{display:flex;width:180px;align-items:center;font-size:24px;color:rgba(0,0,0,.5)}.offer__slider-wrapper{width:100%;margin-top:15px;box-shadow:0 4px 30px rgba(0,0,0,.25)}.offer__slider-prev{margin-right:10px;cursor:pointer}.offer__slider-next{margin-left:10px;cursor:pointer}.offer__slider #current{font-size:48px;font-weight:700;color:#000}.offer__slide{width:100%;height:390px}.offer__slide img{width:100%;height:100%;object-fit:cover}.calculating{padding:50px 0}.calculating .title{text-align:center}.calculating__field{width:100%;margin-top:50px;background:rgba(146,242,255,.15);padding:30px 0 40px 0}.calculating__subtitle{text-align:center;font-size:18px;font-weight:700;margin-top:30px}.calculating__subtitle:first-child{margin-top:0}.calculating #gender:after{content:'';position:absolute;top:50%;transform:translateY(-50%);display:block;width:16px;height:16px;background:url(../icons/switch.svg) center center/cover no-repeat}.calculating__choose{position:relative;display:flex;margin-top:30px;justify-content:center}.calculating__choose-item{display:flex;align-items:center;justify-content:center;width:170px;height:50px;padding:0 10px;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,.2);border:none;text-align:center;font-size:14px;cursor:pointer;outline:0;transition:.3s all}.calculating__choose-item_active{color:#fff;background-color:#54ed39}.calculating__choose_medium{width:743px;justify-content:space-between;margin:30px auto 0 auto}.calculating__choose_big{width:930px;justify-content:space-between;margin:30px auto 0 auto}.calculating__choose_big .calculating__choose-item{width:200px}.calculating__divider{width:490px;height:1px;margin:40px auto;background-color:rgba(0,0,0,.2)}.calculating__total{width:490px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.calculating__result{font-size:18px;font-weight:700}.calculating__result span{font-size:42px}.menu{padding:40px 0 50px 0}.menu .container{display:flex;justify-content:space-between;align-items:flex-start}.menu .title{text-align:center}.menu__field{margin-top:50px;padding:50px 0;width:100%;background:rgba(249,254,126,.25)}.menu__item{width:320px;min-height:450px;background:#fff;box-shadow:0 4px 25px rgba(0,0,0,.25);font-size:16px;font-weight:300}.menu__item img{width:100%;height:200px;object-fit:cover}.menu__item-subtitle{font-weight:700;font-size:18px;padding:0 20px;margin-top:20px}.menu__item-descr{margin-top:20px;padding:0 20px}.menu__item-divider{width:100%;height:1px;background-color:rgba(0,0,0,.25);margin-top:40px}.menu__item-price{display:flex;justify-content:space-between;align-items:center;padding:10px 20px}.menu__item-price span{font-size:24px;font-weight:700}.order{padding-bottom:80px}.order .title{text-align:center}.order__form{margin-top:70px;padding:0 100px;display:flex;justify-content:space-between;align-items:center}.order__form img{transform:scale(1.5)}.order__input{width:280px;height:50px;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,.2);border:none;font-size:18px;text-align:center;padding:0 20px;outline:0}.promotion{padding:70px 0 240px 0;position:relative}.promotion .container{display:flex}.promotion .bgc_y{position:absolute;width:50%;height:499px;background:rgba(243,255,222,.35);z-index:-1;top:-50px;left:0}.promotion__text{width:50%}.promotion__descr{margin-top:40px;font-size:20px;line-height:24px;font-weight:300}.promotion__descr span{font-weight:700;font-size:26px}.promotion__timer{width:50%}.promotion__timer .title{text-align:right}.promotion__timer .timer{margin-top:60px;padding-left:95px;display:flex;justify-content:space-between;align-items:center}.promotion__timer .timer__block{width:102px;height:120px;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.25);font-size:16px;font-weight:300;text-align:center}.promotion__timer .timer__block span{display:block;margin-top:20px;margin-bottom:5px;font-size:56px;font-weight:700}.footer{min-height:180px;background-color:#303030;padding:45px 0 50px 0;color:#fff}.footer .container{height:100%;display:flex;justify-content:space-between;align-items:flex-end}.footer .subtitle{font-size:20px}.footer .link{display:block;margin-top:15px;font-size:16px;color:#fff}.footer .call{text-align:right}.modal{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;background-color:rgba(0,0,0,.5)}.modal__dialog{max-width:500px;margin:40px auto}.modal__content{position:relative;width:100%;padding:40px;background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:4px;max-height:80vh;overflow-y:auto}.modal__close{position:absolute;top:8px;right:14px;font-size:30px;color:#000;opacity:.5;font-weight:700;border:none;background-color:transparent;cursor:pointer}.modal__title{text-align:center;font-size:22px;text-transform:uppercase}.modal__input{display:block;margin:20px auto 20px auto;width:280px;height:50px;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,.2);border:none;font-size:18px;text-align:center;padding:0 20px;outline:0}.modal .btn{display:block;width:280px;margin:0 auto}; 2 | 3 | .show{ 4 | display: block; 5 | } 6 | .none{ 7 | display: none; 8 | } 9 | .fade{ 10 | animation: fade 1.5s; 11 | } 12 | @keyframes fade { 13 | 0%{opacity: 0.1} 14 | 100%{opacity: 1} 15 | } -------------------------------------------------------------------------------- /icons/logo.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /icons/Group 5.svg: -------------------------------------------------------------------------------- 1 | 25 | --------------------------------------------------------------------------------