├── README.md ├── img └── slider │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ └── 4.jpg ├── icons ├── right.svg ├── left.svg ├── switch.svg ├── facebook.svg ├── veg.svg ├── instagram.svg ├── logo.svg └── Group 5.svg ├── js └── script.js ├── index.html └── css └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # slider-finish -------------------------------------------------------------------------------- /img/slider/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sammibadriddinov/slider-finish/HEAD/img/slider/1.jpg -------------------------------------------------------------------------------- /img/slider/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sammibadriddinov/slider-finish/HEAD/img/slider/2.jpg -------------------------------------------------------------------------------- /img/slider/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sammibadriddinov/slider-finish/HEAD/img/slider/3.jpg -------------------------------------------------------------------------------- /img/slider/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sammibadriddinov/slider-finish/HEAD/img/slider/4.jpg -------------------------------------------------------------------------------- /icons/right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /icons/switch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 13 | 15 | 16 | 18 | image/svg+xml 19 | 21 | 22 | 23 | 24 | 26 | 29 | 33 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /icons/veg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | // 1 2 | const slides = document.querySelectorAll('.offer__slide'), 3 | prev = document.querySelector('.offer__slider-prev'), 4 | next = document.querySelector('.offer__slider-next'), 5 | total = document.querySelector('#total'), 6 | current = document.querySelector('#current'), 7 | slidesWrapper = document.querySelector('.offer__slider-wrapper'), 8 | width = window.getComputedStyle(slidesWrapper).width, 9 | slidesField = document.querySelector('.offer__slider-inner'); 10 | 11 | // 5 12 | let offset = 0; 13 | let slideIndex = 1; 14 | 15 | if (slides.length < 10) { 16 | total.textContent = `0${slides.length}`; 17 | current.textContent = `0${slideIndex}`; 18 | } else { 19 | total.textContent = slides.length; 20 | current.textContent = slideIndex; 21 | } 22 | 23 | // 2 24 | slidesField.style.width = 100 * slides.length + '%'; 25 | 26 | // 4 27 | slidesField.style.display = 'flex'; 28 | slidesField.style.transition = '0.5s all'; 29 | slidesWrapper.style.overflow = 'hidden'; 30 | 31 | // 3 32 | slides.forEach(slide => { 33 | slide.style.width = width; 34 | }); 35 | 36 | // 6 37 | next.addEventListener('click', () => { 38 | if (offset == (+width.slice(0, width.length - 2) * (slides.length - 1))) { 39 | offset = 0; 40 | } else { 41 | offset += +width.slice(0, width.length - 2); 42 | } 43 | 44 | slidesField.style.transform = `translateX(-${offset}px)`; 45 | 46 | // 8 47 | if (slideIndex == slides.length) { 48 | slideIndex = 1; 49 | } else { 50 | slideIndex++; 51 | } 52 | 53 | if (slides.length < 10) { 54 | current.textContent = `0${slideIndex}`; 55 | } else { 56 | current.textContent = slideIndex; 57 | } 58 | }); 59 | 60 | // 7 61 | prev.addEventListener('click', () => { 62 | if (offset == 0) { 63 | offset = +width.slice(0, width.length - 2) * (slides.length - 1); 64 | } else { 65 | offset -= +width.slice(0, width.length - 2); 66 | } 67 | 68 | slidesField.style.transform = `translateX(-${offset}px)`; 69 | 70 | // 9 71 | if (slideIndex == 1) { 72 | slideIndex = slides.length; 73 | } else { 74 | slideIndex--; 75 | } 76 | 77 | if (slides.length < 10) { 78 | current.textContent = `0${slideIndex}`; 79 | } else { 80 | current.textContent = slideIndex; 81 | } 82 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Food 7 | 8 | 9 | 10 |
11 |
12 |
13 |

BMW

14 |
15 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet iure recusandae iusto blanditiis vitae magni reprehenderit illo, repellat necessitatibus quaerat quia labore quos voluptatem, explicabo, odit velit ut tenetur quibusdam! 16 |
17 |

BMW Was Created

18 |
19 | Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Ducimus ullam accusantium voluptas consequuntur iure quaerat explicabo, totam tempore, perferendis distinctio aut, atque sed nobis aliquid asperiores dolorem eos reiciendis vel. 20 |
21 |
22 |
23 |
24 |
25 | prev 26 |
27 | 03 28 | / 29 | 04 30 |
31 | next 32 |
33 |
34 |
35 |
36 |
37 | pepper 38 |
39 |
40 | food 41 |
42 |
43 | oil 44 |
45 |
46 | paprika 47 |
48 |
49 |
50 |
51 |
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /icons/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 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}.show{display:block}.hide{display:none}.fade{animation-name: fade;animation-duration: 1.5s;}@keyframes fade{from{opacity: 0.1;}to{opacity: 1;}} -------------------------------------------------------------------------------- /icons/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/Group 5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | --------------------------------------------------------------------------------