├── .DS_Store ├── .gitignore ├── gulpfile.js ├── package.json ├── public ├── .DS_Store ├── cart-empty.html ├── cart.html ├── css │ └── app.css ├── fonts │ ├── .DS_Store │ ├── ProximaNova-Black.eot │ ├── ProximaNova-Black.ttf │ ├── ProximaNova-Black.woff │ ├── ProximaNova-Bold.eot │ ├── ProximaNova-Bold.ttf │ ├── ProximaNova-Bold.woff │ ├── ProximaNova-Extrabld.eot │ ├── ProximaNova-Extrabld.ttf │ ├── ProximaNova-Extrabld.woff │ ├── ProximaNova-Regular.eot │ ├── ProximaNova-Regular.ttf │ ├── ProximaNova-Regular.woff │ ├── ProximaNova-Semibold.eot │ ├── ProximaNova-Semibold.ttf │ └── ProximaNova-Semibold.woff ├── img │ ├── .DS_Store │ ├── arrow-top.svg │ ├── cart.svg │ ├── empty-cart.png │ ├── grey-arrow-left.svg │ ├── pizza-logo.svg │ ├── plus.svg │ └── trash.svg ├── index.html └── js │ └── app.js ├── src ├── ejs │ ├── cart-empty.ejs │ ├── cart.ejs │ ├── components │ │ ├── cart-item.ejs │ │ └── pizza-block.ejs │ └── index.ejs ├── js │ └── app.js └── scss │ ├── _fonts.scss │ ├── _variables.scss │ ├── app.scss │ ├── components │ ├── _all.scss │ ├── _button.scss │ ├── _categories.scss │ ├── _header.scss │ ├── _pizza-block.scss │ └── _sort.scss │ └── libs │ └── _normalize.scss └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const browserSync = require('browser-sync').create(); 3 | const sass = require('gulp-sass'); 4 | const ejs = require('gulp-ejs'); 5 | const plumber = require('gulp-plumber'); 6 | const babel = require('gulp-babel'); 7 | const uglify = require('gulp-uglify'); 8 | const autoprefixer = require('gulp-autoprefixer'); 9 | 10 | gulp.task('scss', () => { 11 | return gulp 12 | .src('src/scss/*.scss') 13 | .pipe( 14 | sass({ includePaths: ['node_modules'], outputStyle: 'compressed', errLogToConsole: true }).on( 15 | 'error', 16 | sass.logError, 17 | ), 18 | ) 19 | .pipe( 20 | sass({ 21 | includePaths: ['node_modules'], 22 | outputStyle: 'compressed', 23 | errLogToConsole: true, 24 | }).on('error', sass.logError), 25 | ) 26 | .pipe( 27 | autoprefixer({ 28 | browsers: ['last 2 versions'], 29 | cascade: false, 30 | }), 31 | ) 32 | .pipe(gulp.dest('public/css')) 33 | .pipe(browserSync.stream()); 34 | }); 35 | 36 | gulp.task('js', () => { 37 | return gulp 38 | .src('src/js/*.js') 39 | .pipe( 40 | babel({ 41 | presets: ['@babel/env'], 42 | }), 43 | ) 44 | .pipe(uglify()) 45 | .pipe(gulp.dest('public/js')); 46 | }); 47 | 48 | gulp.task('ejs', () => { 49 | return gulp 50 | .src(['src/ejs/*.ejs']) 51 | .pipe(plumber()) 52 | .pipe(ejs({}, {}, { ext: '.html' })) 53 | .pipe(gulp.dest('./public')); 54 | }); 55 | 56 | gulp.task('serve', () => { 57 | gulp.watch('src/scss/**/*.scss', gulp.series('scss')); 58 | gulp.watch('src/ejs/**/*.ejs', gulp.series('ejs')); 59 | gulp.watch('src/js/**/*.js', gulp.series('js')); 60 | 61 | browserSync.init({ 62 | server: './public', 63 | port: 4444, 64 | }); 65 | gulp.watch('public/*.html').on('change', browserSync.reload); 66 | gulp.watch('public/js/*.js').on('change', browserSync.reload); 67 | }); 68 | 69 | gulp.task('build', gulp.series('ejs', 'js', 'scss')); 70 | 71 | gulp.task('default', gulp.series('serve')); 72 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "@babel/core": "^7.3.4", 4 | "@babel/preset-env": "^7.3.4", 5 | "bootstrap": "^4.3.1", 6 | "browser-sync": "^2.26.3", 7 | "fullpage.js": "^3.0.4", 8 | "gulp": "^4.0.0", 9 | "gulp-autoprefixer": "^6.0.0", 10 | "gulp-babel": "^8.0.0", 11 | "gulp-concat": "^2.6.1", 12 | "gulp-ejs": "^3.3.0", 13 | "gulp-plumber": "^1.2.1", 14 | "gulp-uglify": "^3.0.2", 15 | "hamburgers": "^1.1.3", 16 | "normalize.css": "^8.0.1" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /public/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/.DS_Store -------------------------------------------------------------------------------- /public/cart-empty.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 | 21 |
22 |
23 | 520 ₽ 24 |
25 | 32 | 39 | 46 | 53 | 54 | 3 55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |

Корзина пустая 😕

63 |

64 | Вероятней всего, вы не заказывали ещё пиццу.
65 | Для того, чтобы заказать пиццу, перейди на главную страницу. 66 |

67 | Empty cart 68 | 69 | Вернуться назад 70 | 71 |
72 |
73 |
74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /public/cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 | 21 |
22 |
23 | 520 ₽ 24 |
25 | 32 | 39 | 46 | 53 | 54 | 3 55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |

64 | 65 | 66 | 67 | 68 | Корзина

69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | Очистить корзину 78 |
79 |
80 |
81 |
82 |
83 | Pizza 88 |
89 |
90 |

Сырный цыпленок

91 |

тонкое тесто, 26 см.

92 |
93 |
94 |
95 | 96 | 97 | 98 | 99 | 100 |
101 | 2 102 |
103 | 104 | 105 | 106 | 107 | 108 |
109 |
110 |
111 | 770 ₽ 112 |
113 |
114 |
115 | 116 | 117 | 118 | 119 | 120 |
121 |
122 |
123 |
124 |
125 | Pizza 130 |
131 |
132 |

Сырный цыпленок

133 |

тонкое тесто, 26 см.

134 |
135 |
136 |
137 | 138 | 139 | 140 | 141 | 142 |
143 | 2 144 |
145 | 146 | 147 | 148 | 149 | 150 |
151 |
152 |
153 | 770 ₽ 154 |
155 |
156 |
157 | 158 | 159 | 160 | 161 | 162 |
163 |
164 |
165 |
166 |
167 | Pizza 172 |
173 |
174 |

Сырный цыпленок

175 |

тонкое тесто, 26 см.

176 |
177 |
178 |
179 | 180 | 181 | 182 | 183 | 184 |
185 | 2 186 |
187 | 188 | 189 | 190 | 191 | 192 |
193 |
194 |
195 | 770 ₽ 196 |
197 |
198 |
199 | 200 | 201 | 202 | 203 | 204 |
205 |
206 |
207 |
208 |
209 | Pizza 214 |
215 |
216 |

Сырный цыпленок

217 |

тонкое тесто, 26 см.

218 |
219 |
220 |
221 | 222 | 223 | 224 | 225 | 226 |
227 | 2 228 |
229 | 230 | 231 | 232 | 233 | 234 |
235 |
236 |
237 | 770 ₽ 238 |
239 |
240 |
241 | 242 | 243 | 244 | 245 | 246 |
247 |
248 |
249 | 250 |
251 |
252 |
253 | Всего пицц: 3 шт. 254 | Сумма заказа: 900 ₽ 255 |
256 |
257 | 258 | 259 | 260 | 261 | 262 | Вернуться назад 263 | 264 |
265 | Оплатить сейчас 266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 | 274 | 275 | -------------------------------------------------------------------------------- /public/css/app.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:'Proxima Nova';src:url("./fonts/ProximaNova-Black.eot");src:local("./fonts/Proxima Nova Black"),local("ProximaNova-Black"),url("./fonts/ProximaNova-Black.eot?#iefix") format("embedded-opentype"),url("./fonts/ProximaNova-Black.woff") format("woff"),url("./fonts/ProximaNova-Black.ttf") format("truetype");font-weight:900;font-style:normal}@font-face{font-family:'Proxima Nova';src:url("./fonts/ProximaNova-Bold.eot");src:local("./fonts/Proxima Nova Bold"),local("ProximaNova-Bold"),url("./fonts/ProximaNova-Bold.eot?#iefix") format("embedded-opentype"),url("./fonts/ProximaNova-Bold.woff") format("woff"),url("./fonts/ProximaNova-Bold.ttf") format("truetype");font-weight:bold;font-style:normal}@font-face{font-family:'Proxima Nova';src:url("./fonts/ProximaNova-Regular.eot");src:local("./fonts/Proxima Nova Regular"),local("ProximaNova-Regular"),url("./fonts/ProximaNova-Regular.eot?#iefix") format("embedded-opentype"),url("./fonts/ProximaNova-Regular.woff") format("woff"),url("./fonts/ProximaNova-Regular.ttf") format("truetype");font-weight:normal;font-style:normal}@font-face{font-family:'Proxima Nova';src:url("./fonts/ProximaNova-Extrabld.eot");src:local("./fonts/Proxima Nova Extrabold"),local("ProximaNova-Extrabld"),url("./fonts/ProximaNova-Extrabld.eot?#iefix") format("embedded-opentype"),url("./fonts/ProximaNova-Extrabld.woff") format("woff"),url("./fonts/ProximaNova-Extrabld.ttf") format("truetype");font-weight:800;font-style:normal}*{padding:0;margin:0;list-style:none;outline:none;font-family:'Proxima Nova', Roboto, system-ui, Tahoma, sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#232323}a,span,p,b,h1,h2,h3,h4,h5{color:#232323}h1{font-size:48px}h2{font-weight:600;font-size:28px;line-height:30px}a{text-decoration:none}.header{border-bottom:1px solid #f6f6f6;padding:40px 0}.header .container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.header__logo{display:-webkit-box;display:-ms-flexbox;display:flex}.header__logo img{margin-right:15px}.header__logo h1{color:#181818;font-size:24px;letter-spacing:1%;text-transform:uppercase;font-weight:800}.header__logo p{color:#7b7b7b}.button{display:inline-block;background-color:#fe5f1e;border-radius:30px;padding:10px 20px;min-width:100px;text-align:center;cursor:pointer;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out;border:1px solid transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.button,.button span{color:#fff}.button i,.button span,.button path,.button svg{-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out}.button:hover{background-color:#f24701}.button:active{background-color:#de4101;-webkit-transform:translateY(1px);transform:translateY(1px)}.button--circle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:32px;height:32px;min-width:32px;padding:0;border-width:2px}.button--black{background-color:#232323}.button--black:hover,.button--black:active{background-color:#3d3d3d}.button--outline{background-color:#fff;border-color:#fe5f1e}.button--outline,.button--outline span{color:#fe5f1e}.button--outline svg path{fill:#fe5f1e}.button--outline:hover{background-color:#fe5f1e}.button--outline:hover,.button--outline:hover span{color:#fff}.button--outline:hover svg path{fill:#fff}.button--outline:active{background-color:#f24701}.button__delimiter{width:1px;height:25px;background-color:rgba(255,255,255,0.25);margin-left:14px;margin-right:14px}.button--add svg{margin-right:2px}.button--add span{font-weight:600;font-size:16px}.button--add:hover i{background-color:#fff;color:#fe5f1e}.button--add i{display:inline-block;border-radius:30px;background-color:#fe5f1e;color:#fff;font-weight:600;width:22px;height:22px;font-style:normal;font-size:13px;line-height:22px;position:relative;top:-1px;left:3px}.button--cart{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:23px;padding:12px 25px}.button--cart svg{margin-right:8px;margin-bottom:1px}.button--cart span{font-weight:600;font-size:16px}.categories ul{display:-webkit-box;display:-ms-flexbox;display:flex}.categories ul li{background-color:#f9f9f9;padding:13px 30px;border-radius:30px;margin-right:10px;font-weight:bold;cursor:pointer;-webkit-transition:background-color 0.1s ease-in-out;transition:background-color 0.1s ease-in-out;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.categories ul li:hover{background-color:#f4f4f4}.categories ul li:active{background-color:#ececec}.categories ul li.active{background-color:#282828;color:#fff}.sort{position:relative}.sort__label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.sort__label svg{margin-right:8px}.sort__label b{margin-right:8px}.sort__label span{color:#fe5f1e;border-bottom:1px dashed #fe5f1e;cursor:pointer}.sort__popup{position:absolute;right:0;margin-top:15px;background:#ffffff;-webkit-box-shadow:0px 5px 15px rgba(0,0,0,0.09);box-shadow:0px 5px 15px rgba(0,0,0,0.09);border-radius:10px;overflow:hidden;padding:10px 0;width:160px}.sort__popup ul{overflow:hidden}.sort__popup ul li{padding:12px 20px;cursor:pointer}.sort__popup ul li.active,.sort__popup ul li:hover{background:rgba(254,95,30,0.05)}.sort__popup ul li.active{font-weight:bold;color:#fe5f1e}.pizza-block{width:280px;text-align:center;margin-bottom:65px}.pizza-block:not(:nth-of-type(4n)){margin-right:35px}.pizza-block__image{width:260px}.pizza-block__title{font-size:20px;font-weight:900;letter-spacing:1%;margin-bottom:20px}.pizza-block__selector{display:-webkit-box;display:-ms-flexbox;display:flex;background-color:#f3f3f3;border-radius:10px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:6px}.pizza-block__selector ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1}.pizza-block__selector ul:first-of-type{margin-bottom:6px}.pizza-block__selector ul li{padding:8px;-webkit-box-flex:1;-ms-flex:1;flex:1;cursor:pointer;font-weight:600;font-size:14px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pizza-block__selector ul li.active{background:#ffffff;-webkit-box-shadow:0px 2px 4px rgba(0,0,0,0.04);box-shadow:0px 2px 4px rgba(0,0,0,0.04);border-radius:5px;cursor:auto}.pizza-block__bottom{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:20px}.pizza-block__price{font-weight:bold;font-size:22px;line-height:27px;letter-spacing:0.015em}body{background-color:#ffdf8c}.wrapper{width:calc(100vw - 100px);height:100%;background-color:#fff;margin:50px auto;border-radius:10px;max-width:1400px}.content{padding:40px 0}.content__title{margin:35px 0}.content__items{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.content__top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.container{width:90%;margin:0 auto}.container--cart{max-width:820px;margin:90px auto}.container--cart .content__title{margin:0}.cart__top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.cart .content__title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:32px}.cart .content__title svg{position:relative;top:-2px;width:30px;height:30px;margin-right:10px}.cart .content__title svg path{stroke:#232323;stroke-width:1.9}.cart__clear{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cart__clear span{display:inline-block;margin-left:7px;color:#b6b6b6;font-size:18px}.cart__clear span,.cart__clear svg,.cart__clear path{-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out}.cart__clear:hover svg path{stroke:#373737}.cart__clear:hover span{color:#373737}.cart__item{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;border-top:1px solid #f6f6f6;padding-top:30px;margin-top:30px}.cart__item-img{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:15px;width:10%}.cart__item-img img{width:80px;height:80px}.cart__item-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40%}.cart__item-info h3{font-weight:bold;font-size:22px;line-height:27px;letter-spacing:0.01em}.cart__item-info p{font-size:18px;color:#8d8d8d}.cart__item-count{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:13%}.cart__item-count-minus svg path:first-of-type{display:none}.cart__item-count b{font-size:22px}.cart__item-price{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:33%}.cart__item-price b{font-weight:bold;font-size:22px;letter-spacing:0.01em}.cart__item-remove{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;width:4%}.cart__item-remove .button{border-color:#ddd}.cart__item-remove svg{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.cart__item-remove svg path{fill:#d0d0d0}.cart__item-remove .button svg{width:11.5px;height:11.5px;position:relative}.cart__item-remove .button:hover,.cart__item-remove .button:active{border-color:#2a2a2a;background-color:#2a2a2a}.cart__bottom{margin:50px 0}.cart__bottom-details{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.cart__bottom-details span{font-size:22px}.cart__bottom-details span:last-of-type b{color:#fe5f1e}.cart__bottom-buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:40px}.cart__bottom-buttons .go-back-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:210px;border-color:#ddd}.cart__bottom-buttons .go-back-btn span{color:#c3c3c3;font-weight:500;font-weight:600}.cart__bottom-buttons .go-back-btn:hover{background-color:#111;border-color:#111}.cart__bottom-buttons .go-back-btn:hover span{color:#f6f6f6}.cart__bottom-buttons .go-back-btn svg{margin-right:12px}.cart__bottom-buttons .go-back-btn svg path{fill:transparent;stroke-width:2}.cart__bottom-buttons .pay-btn{font-size:16px;font-weight:600;width:210px;padding:16px}.cart--empty{margin:0 auto;width:560px;text-align:center}.cart--empty h2{font-size:32px;margin-bottom:10px}.cart--empty p{font-size:18px;line-height:145.4%;letter-spacing:0.01em;color:#777777}.cart--empty icon{position:relative;top:2px}.cart--empty img{display:block;width:300px;margin:45px auto 60px}.cart--empty .button--black{padding:12px 0 14px;width:230px;margin:0 auto;font-weight:600;font-size:18px} 2 | -------------------------------------------------------------------------------- /public/fonts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/.DS_Store -------------------------------------------------------------------------------- /public/fonts/ProximaNova-Black.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/ProximaNova-Black.eot -------------------------------------------------------------------------------- /public/fonts/ProximaNova-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/ProximaNova-Black.ttf -------------------------------------------------------------------------------- /public/fonts/ProximaNova-Black.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/ProximaNova-Black.woff -------------------------------------------------------------------------------- /public/fonts/ProximaNova-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/ProximaNova-Bold.eot -------------------------------------------------------------------------------- /public/fonts/ProximaNova-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/ProximaNova-Bold.ttf -------------------------------------------------------------------------------- /public/fonts/ProximaNova-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/ProximaNova-Bold.woff -------------------------------------------------------------------------------- /public/fonts/ProximaNova-Extrabld.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/ProximaNova-Extrabld.eot -------------------------------------------------------------------------------- /public/fonts/ProximaNova-Extrabld.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/ProximaNova-Extrabld.ttf -------------------------------------------------------------------------------- /public/fonts/ProximaNova-Extrabld.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/ProximaNova-Extrabld.woff -------------------------------------------------------------------------------- /public/fonts/ProximaNova-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/ProximaNova-Regular.eot -------------------------------------------------------------------------------- /public/fonts/ProximaNova-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/ProximaNova-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/ProximaNova-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/ProximaNova-Regular.woff -------------------------------------------------------------------------------- /public/fonts/ProximaNova-Semibold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/ProximaNova-Semibold.eot -------------------------------------------------------------------------------- /public/fonts/ProximaNova-Semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/ProximaNova-Semibold.ttf -------------------------------------------------------------------------------- /public/fonts/ProximaNova-Semibold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/fonts/ProximaNova-Semibold.woff -------------------------------------------------------------------------------- /public/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/img/.DS_Store -------------------------------------------------------------------------------- /public/img/arrow-top.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/img/cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/img/empty-cart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-pizza-html/64644758c6ae685f1a63d5007e0f9f5c5426753c/public/img/empty-cart.png -------------------------------------------------------------------------------- /public/img/grey-arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/img/pizza-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/img/trash.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 | 21 |
22 | 23 | 520 ₽ 24 |
25 | 32 | 39 | 46 | 53 | 54 | 3 55 | 56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
    64 |
  • Все
    • 65 |
  • Мясные
    • 66 |
  • Вегетарианская
    • 67 |
  • Гриль
    • 68 |
  • Острые
    • 69 |
  • Закрытые
    • 70 |
71 |
72 |
73 |
74 | 81 | 85 | 86 | Сортировка по: 87 | популярности 88 |
89 |
90 |
    91 |
  • популярности
    • 92 |
  • цене
    • 93 |
  • алфавиту
    • 94 |
95 |
96 |
97 |
98 |

Все пиццы

99 |
100 |
101 | Pizza 106 |

Чизбургер-пицца

107 |
108 |
    109 |
  • тонкое
    • 110 |
  • традиционное
    • 111 |
112 |
    113 |
  • 26 см.
    • 114 |
  • 30 см.
    • 115 |
  • 40 см.
    • 116 |
117 |
118 |
119 |
от 395 ₽
120 |
121 | 128 | 132 | 133 | Добавить 134 | 2 135 |
136 |
137 |
138 | Pizza 143 |

Чизбургер-пицца

144 |
145 |
    146 |
  • тонкое
    • 147 |
  • традиционное
    • 148 |
149 |
    150 |
  • 26 см.
    • 151 |
  • 30 см.
    • 152 |
  • 40 см.
    • 153 |
154 |
155 |
156 |
от 395 ₽
157 |
158 | 165 | 169 | 170 | Добавить 171 | 2 172 |
173 |
174 |
175 | Pizza 180 |

Чизбургер-пицца

181 |
182 |
    183 |
  • тонкое
    • 184 |
  • традиционное
    • 185 |
186 |
    187 |
  • 26 см.
    • 188 |
  • 30 см.
    • 189 |
  • 40 см.
    • 190 |
191 |
192 |
193 |
от 395 ₽
194 |
195 | 202 | 206 | 207 | Добавить 208 | 2 209 |
210 |
211 |
212 | Pizza 217 |

Чизбургер-пицца

218 |
219 |
    220 |
  • тонкое
    • 221 |
  • традиционное
    • 222 |
223 |
    224 |
  • 26 см.
    • 225 |
  • 30 см.
    • 226 |
  • 40 см.
    • 227 |
228 |
229 |
230 |
от 395 ₽
231 |
232 | 239 | 243 | 244 | Добавить 245 | 2 246 |
247 |
248 |
249 | Pizza 254 |

Чизбургер-пицца

255 |
256 |
    257 |
  • тонкое
    • 258 |
  • традиционное
    • 259 |
260 |
    261 |
  • 26 см.
    • 262 |
  • 30 см.
    • 263 |
  • 40 см.
    • 264 |
265 |
266 |
267 |
от 395 ₽
268 |
269 | 276 | 280 | 281 | Добавить 282 | 2 283 |
284 |
285 |
286 | Pizza 291 |

Чизбургер-пицца

292 |
293 |
    294 |
  • тонкое
    • 295 |
  • традиционное
    • 296 |
297 |
    298 |
  • 26 см.
    • 299 |
  • 30 см.
    • 300 |
  • 40 см.
    • 301 |
302 |
303 |
304 |
от 395 ₽
305 |
306 | 313 | 317 | 318 | Добавить 319 | 2 320 |
321 |
322 |
323 | Pizza 328 |

Чизбургер-пицца

329 |
330 |
    331 |
  • тонкое
    • 332 |
  • традиционное
    • 333 |
334 |
    335 |
  • 26 см.
    • 336 |
  • 30 см.
    • 337 |
  • 40 см.
    • 338 |
339 |
340 |
341 |
от 395 ₽
342 |
343 | 350 | 354 | 355 | Добавить 356 | 2 357 |
358 |
359 |
360 | Pizza 365 |

Чизбургер-пицца

366 |
367 |
    368 |
  • тонкое
    • 369 |
  • традиционное
    • 370 |
371 |
    372 |
  • 26 см.
    • 373 |
  • 30 см.
    • 374 |
  • 40 см.
    • 375 |
376 |
377 |
378 |
от 395 ₽
379 |
380 | 387 | 391 | 392 | Добавить 393 | 2 394 |
395 |
396 |
397 | Pizza 402 |

Чизбургер-пицца

403 |
404 |
    405 |
  • тонкое
    • 406 |
  • традиционное
    • 407 |
408 |
    409 |
  • 26 см.
    • 410 |
  • 30 см.
    • 411 |
  • 40 см.
    • 412 |
413 |
414 |
415 |
от 395 ₽
416 |
417 | 424 | 428 | 429 | Добавить 430 | 2 431 |
432 |
433 |
434 |
435 |
436 |
437 |
438 | 439 | 440 | -------------------------------------------------------------------------------- /public/js/app.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var prevScrollpos = window.pageYOffset; 4 | var sliderIndex = 1; 5 | var scrolled = window.scrollY >= 100; 6 | var isScrolling = false; 7 | var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); 8 | var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); 9 | 10 | function scrollToBlock() { 11 | var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 12 | isScrolling = true; 13 | $('html,body').animate({ 14 | scrollTop: $(obj.block || '.drimclub-benefit').offset().top - (obj.offsetY || 0) 15 | }, 1000, function () { 16 | isScrolling = false; 17 | }); 18 | } 19 | 20 | $(document).bind('mousewheel DOMMouseScroll', function (event) { 21 | if (!scrolled || isScrolling) { 22 | event.preventDefault(); 23 | } 24 | 25 | var delta = -event.originalEvent.wheelDelta || event.originalEvent.detail; 26 | 27 | if (!scrolled && delta > 0) { 28 | scrollToBlock(); 29 | scrolled = true; 30 | } 31 | 32 | if (scrolled && window.scrollY <= $('.drimclub-benefit').offset().top && delta < 0) { 33 | isScrolling = true; 34 | $('html,body').animate({ 35 | scrollTop: 0 36 | }, 1000, function () { 37 | isScrolling = false; 38 | 39 | if ($('.header').hasClass('header--hide')) {// $('.header').removeClass('header--hide'); 40 | } 41 | }); 42 | $('.header').removeClass('header--in-white'); 43 | scrolled = false; 44 | } 45 | }); 46 | 47 | document.onkeydown = function (_ref) { 48 | var keyCode = _ref.keyCode; 49 | 50 | if (keyCode === 40 && !scrolled) { 51 | scrollToBlock(); 52 | } 53 | }; 54 | 55 | $(window).on('scroll', function (a, b, c) { 56 | var headerOffset = $('.header').outerHeight(); 57 | 58 | if ($(window).scrollTop() + headerOffset >= $('.drimclub-benefit').offset().top && $(window).scrollTop() + headerOffset < $('.drimclub-benefit').outerHeight() + $('.drimclub-benefit').offset().top) { 59 | $('.header').addClass('header--in-white'); 60 | } else { 61 | $('.header').removeClass('header--in-white'); 62 | } 63 | 64 | if ($(window).scrollTop() + headerOffset >= $('.big-slider').offset().top && $(window).scrollTop() + headerOffset < $('.big-slider').outerHeight() + $('.big-slider').offset().top) { 65 | $('.header').addClass('header--in-gray'); 66 | } else { 67 | $('.header').removeClass('header--in-gray'); 68 | } 69 | 70 | if ($(window).scrollTop() + headerOffset >= $('.discounts-block').offset().top && $(window).scrollTop() + headerOffset < $('.discounts-block').outerHeight() + $('.discounts-block').offset().top) { 71 | $('.header').addClass('header--in-white'); 72 | } 73 | 74 | if ($(window).scrollTop() + headerOffset >= $('.recomended-drimclub').offset().top && $(window).scrollTop() + headerOffset < $('.recomended-drimclub').outerHeight() + $('.recomended-drimclub').offset().top) { 75 | $('.header').addClass('header--in-gray'); 76 | } 77 | 78 | if ($(window).scrollTop() + 350 >= $('.discounts-block__audio-courses').offset().top && $(window).scrollTop() + 350 < $('.discounts-block__audio-courses').outerHeight() + $('.discounts-block__audio-courses').offset().top) { 79 | $('.discounts-block__audio-courses-waves').addClass('discounts-block__audio-courses-waves--show'); 80 | } 81 | 82 | if ($(window).scrollTop() + headerOffset >= $('.connect-drimclub').offset().top && $(window).scrollTop() + headerOffset < $('.connect-drimclub').outerHeight() + $('.connect-drimclub').offset().top) { 83 | $('.header').addClass('header--in-white'); 84 | } 85 | 86 | var currentScrollPos = window.pageYOffset; 87 | var notHideInMobileMain = window.scrollY < 300; 88 | 89 | if (prevScrollpos > currentScrollPos && !isScrolling) { 90 | if (isMobile && notHideInMobileMain) { 91 | return; 92 | } // $('.header').removeClass('header--hide'); 93 | 94 | } else {// $('.header').addClass('header--hide'); 95 | } 96 | 97 | prevScrollpos = currentScrollPos; 98 | }); // $(window).mousemove(function(e) { 99 | // var xpos = e.clientX; 100 | // var ypos = e.clientY; 101 | // var xpos = xpos * 1.2; 102 | // ypos = ypos * 1.2; 103 | // $(".main-block .parallax").css( 104 | // "transform", 105 | // `translateY(${0 + ypos / 50}px) translateX(${0 + xpos / 80}px)` 106 | // ); 107 | // }); 108 | 109 | function setBigSlide(obj) { 110 | switch (obj.method) { 111 | case 'init': 112 | sliderIndex = obj.index; 113 | break; 114 | 115 | case 'next': 116 | sliderIndex++; 117 | 118 | if (sliderIndex > 3) { 119 | sliderIndex = 3; 120 | return; 121 | } 122 | 123 | break; 124 | 125 | case 'prev': 126 | sliderIndex--; 127 | 128 | if (sliderIndex < 1) { 129 | sliderIndex = 1; 130 | return; 131 | } 132 | 133 | break; 134 | 135 | default: 136 | break; 137 | } 138 | 139 | if (sliderIndex > 1) { 140 | $('.big-slider .button--prev').addClass('visible'); 141 | } else { 142 | $('.big-slider .button--prev').removeClass('visible'); 143 | } 144 | 145 | if (sliderIndex === 3) { 146 | $('.big-slider .button--next').animate({ 147 | opacity: 0 148 | }, 150, function () { 149 | $(this).hide(); 150 | }); 151 | } else { 152 | $('.big-slider .button--next').show().animate({ 153 | opacity: 1 154 | }, 150); 155 | } // let lastIndex = sliderIndex - 1; 156 | // $(".big-slider__images ul li") 157 | // .removeClass("active") 158 | // .animate({ opacity: 0 }, 200); 159 | // $('.big-slider__images ul li[data-index="' + sliderIndex + '"]') 160 | // .addClass("active") 161 | // .animate({ opacity: 1 }, 200); 162 | 163 | 164 | $('.big-slider__images ul li').removeClass('active').animate({ 165 | opacity: 0 166 | }, 300); 167 | $('.big-slider__images ul li[data-index="' + sliderIndex + '"]').addClass('active').animate({ 168 | opacity: 1 169 | }, 300); 170 | $('.big-slider__informations ul li').removeClass('active'); 171 | $('.big-slider__informations ul li[data-index="' + sliderIndex + '"]').addClass('active'); 172 | } 173 | 174 | $(document).ready(function () { 175 | new Typewriter(document.querySelector('.main-block__title-animated'), { 176 | loop: true 177 | }).typeString('Дримклуб').pauseFor(2500).deleteAll().typeString('Дримсим').pauseFor(2500).start(); 178 | setBigSlide({ 179 | method: 'init', 180 | index: 1 181 | }); 182 | 183 | if (!is_safari) { 184 | $('.main-block').mousemove(function (e) { 185 | parallaxIt(e, '#Path-Copy-3', -15); 186 | parallaxIt(e, '#mask-8', 15); 187 | parallaxIt(e, '#Path-Copy-4', -20); 188 | parallaxIt(e, '#Path-Copy-5', -30); 189 | parallaxIt(e, '#Oval', -20); 190 | parallaxIt(e, '#Combined-Shape', -40); 191 | parallaxIt(e, '#wave-1', -30); 192 | parallaxIt(e, '#wave-2', -30); 193 | parallaxIt(e, '#kit', -20); 194 | }); 195 | } 196 | 197 | function parallaxIt(e, target, movement) { 198 | var $this = $('.main-block'); 199 | var relX = e.pageX - $this.offset().left; 200 | var relY = e.pageY - $this.offset().top; 201 | TweenMax.to(target, 1, { 202 | x: (relX - $this.width() / 2) / $this.width() * movement, 203 | y: (relY - $this.height() / 2) / $this.height() * movement 204 | }); 205 | } 206 | 207 | $('.big-slider button.button--next').click(function () { 208 | if (sliderIndex < 3) { 209 | setBigSlide({ 210 | method: 'next' 211 | }); 212 | } else { 213 | setBigSlide({ 214 | method: 'prev' 215 | }); 216 | } 217 | }); 218 | $('.hamburger').click(function () { 219 | $(this).toggleClass('is-active'); 220 | 221 | if ($(this).hasClass('is-active')) { 222 | $('.header__mobile-menu').addClass('header__mobile-menu--show'); 223 | setTimeout(function () { 224 | $('.header__mobile-menu ul').css({ 225 | transform: 'translateY(0)' 226 | }); 227 | }); 228 | } else { 229 | $('.header__mobile-menu ul').css({ 230 | transform: 'translateY(-550px)' 231 | }); 232 | setTimeout(function () { 233 | $('.header__mobile-menu').removeClass('header__mobile-menu--show'); 234 | }, 400); 235 | } 236 | }); 237 | $('.big-slider button.button--prev').click(function () { 238 | setBigSlide({ 239 | method: 'prev' 240 | }); 241 | }); 242 | $('.drimclub-benefit__blocks-item').click(function () { 243 | var block = $(this).data('scroll-block'); 244 | var offset = 0; 245 | 246 | if (block === 'discounts-block__audio-courses') { 247 | offset = 120; 248 | } else { 249 | offset = 0; 250 | } 251 | 252 | if (isMobile) { 253 | offset += 40; 254 | } 255 | 256 | if (isMobile && block === 'discounts-block__audio-courses') { 257 | offset -= 20; 258 | } 259 | 260 | scrollToBlock({ 261 | block: ".".concat(block), 262 | offsetY: offset 263 | }); 264 | }); 265 | }); -------------------------------------------------------------------------------- /src/ejs/cart-empty.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 | 21 |
22 |
23 | 520 ₽ 24 |
25 | 32 | 39 | 46 | 53 | 54 | 3 55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |

Корзина пустая 😕

63 |

64 | Вероятней всего, вы не заказывали ещё пиццу.
65 | Для того, чтобы заказать пиццу, перейди на главную страницу. 66 |

67 | Empty cart 68 | 69 | Вернуться назад 70 | 71 |
72 |
73 |
74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /src/ejs/cart.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 | 21 |
22 |
23 | 520 ₽ 24 |
25 | 32 | 39 | 46 | 53 | 54 | 3 55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |

<% include ../../public/img/cart.svg %> Корзина

64 |
65 | <% include ../../public/img/trash.svg %> 66 | Очистить корзину 67 |
68 |
69 |
70 | <% include components/cart-item.ejs %> <% include components/cart-item.ejs %> <% 71 | include components/cart-item.ejs %> <% include components/cart-item.ejs %> 72 |
73 |
74 |
75 | Всего пицц: 3 шт. 76 | Сумма заказа: 900 ₽ 77 |
78 |
79 | 80 | <% include ../../public/img/grey-arrow-left.svg %> 81 | Вернуться назад 82 | 83 |
84 | Оплатить сейчас 85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 | 93 | 94 | -------------------------------------------------------------------------------- /src/ejs/components/cart-item.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 | Pizza 8 |
9 |
10 |

Сырный цыпленок

11 |

тонкое тесто, 26 см.

12 |
13 |
14 |
15 | <% include ../../../public/img/plus.svg %> 16 |
17 | 2 18 |
19 | <% include ../../../public/img/plus.svg %> 20 |
21 |
22 |
23 | 770 ₽ 24 |
25 |
26 |
27 | <% include ../../../public/img/plus.svg %> 28 |
29 |
30 |
31 | -------------------------------------------------------------------------------- /src/ejs/components/pizza-block.ejs: -------------------------------------------------------------------------------- 1 |
2 | Pizza 7 |

Чизбургер-пицца

8 |
9 | 13 | 18 |
19 |
20 |
от 395 ₽
21 |
22 | 29 | 33 | 34 | Добавить 35 | 2 36 |
37 |
38 |
-------------------------------------------------------------------------------- /src/ejs/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 | 21 |
22 | 23 | 520 ₽ 24 |
25 | 32 | 39 | 46 | 53 | 54 | 3 55 | 56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
    64 |
  • Все
    • 65 |
  • Мясные
    • 66 |
  • Вегетарианская
    • 67 |
  • Гриль
    • 68 |
  • Острые
    • 69 |
  • Закрытые
    • 70 |
71 |
72 |
73 |
74 | 81 | 85 | 86 | Сортировка по: 87 | популярности 88 |
89 |
90 |
    91 |
  • популярности
    • 92 |
  • цене
    • 93 |
  • алфавиту
    • 94 |
95 |
96 |
97 |
98 |

Все пиццы

99 |
100 | <% include components/pizza-block.ejs %> <% include components/pizza-block.ejs %> <% 101 | include components/pizza-block.ejs %> <% include components/pizza-block.ejs %> <% 102 | include components/pizza-block.ejs %> <% include components/pizza-block.ejs %> <% 103 | include components/pizza-block.ejs %> <% include components/pizza-block.ejs %> <% 104 | include components/pizza-block.ejs %> 105 |
106 |
107 |
108 |
109 | 110 | 111 | -------------------------------------------------------------------------------- /src/js/app.js: -------------------------------------------------------------------------------- 1 | var prevScrollpos = window.pageYOffset; 2 | let sliderIndex = 1; 3 | let scrolled = window.scrollY >= 100; 4 | let isScrolling = false; 5 | let isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( 6 | navigator.userAgent, 7 | ); 8 | const is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); 9 | 10 | function scrollToBlock(obj = {}) { 11 | isScrolling = true; 12 | $('html,body').animate( 13 | { 14 | scrollTop: $(obj.block || '.drimclub-benefit').offset().top - (obj.offsetY || 0), 15 | }, 16 | 1000, 17 | function() { 18 | isScrolling = false; 19 | }, 20 | ); 21 | } 22 | 23 | $(document).bind('mousewheel DOMMouseScroll', function(event) { 24 | if (!scrolled || isScrolling) { 25 | event.preventDefault(); 26 | } 27 | var delta = -event.originalEvent.wheelDelta || event.originalEvent.detail; 28 | if (!scrolled && delta > 0) { 29 | scrollToBlock(); 30 | scrolled = true; 31 | } 32 | if (scrolled && window.scrollY <= $('.drimclub-benefit').offset().top && delta < 0) { 33 | isScrolling = true; 34 | $('html,body').animate({ scrollTop: 0 }, 1000, function() { 35 | isScrolling = false; 36 | if ($('.header').hasClass('header--hide')) { 37 | // $('.header').removeClass('header--hide'); 38 | } 39 | }); 40 | $('.header').removeClass('header--in-white'); 41 | scrolled = false; 42 | } 43 | }); 44 | 45 | document.onkeydown = ({ keyCode }) => { 46 | if (keyCode === 40 && !scrolled) { 47 | scrollToBlock(); 48 | } 49 | }; 50 | 51 | $(window).on('scroll', function(a, b, c) { 52 | const headerOffset = $('.header').outerHeight(); 53 | if ( 54 | $(window).scrollTop() + headerOffset >= $('.drimclub-benefit').offset().top && 55 | $(window).scrollTop() + headerOffset < 56 | $('.drimclub-benefit').outerHeight() + $('.drimclub-benefit').offset().top 57 | ) { 58 | $('.header').addClass('header--in-white'); 59 | } else { 60 | $('.header').removeClass('header--in-white'); 61 | } 62 | 63 | if ( 64 | $(window).scrollTop() + headerOffset >= $('.big-slider').offset().top && 65 | $(window).scrollTop() + headerOffset < 66 | $('.big-slider').outerHeight() + $('.big-slider').offset().top 67 | ) { 68 | $('.header').addClass('header--in-gray'); 69 | } else { 70 | $('.header').removeClass('header--in-gray'); 71 | } 72 | 73 | if ( 74 | $(window).scrollTop() + headerOffset >= $('.discounts-block').offset().top && 75 | $(window).scrollTop() + headerOffset < 76 | $('.discounts-block').outerHeight() + $('.discounts-block').offset().top 77 | ) { 78 | $('.header').addClass('header--in-white'); 79 | } 80 | 81 | if ( 82 | $(window).scrollTop() + headerOffset >= $('.recomended-drimclub').offset().top && 83 | $(window).scrollTop() + headerOffset < 84 | $('.recomended-drimclub').outerHeight() + $('.recomended-drimclub').offset().top 85 | ) { 86 | $('.header').addClass('header--in-gray'); 87 | } 88 | 89 | if ( 90 | $(window).scrollTop() + 350 >= $('.discounts-block__audio-courses').offset().top && 91 | $(window).scrollTop() + 350 < 92 | $('.discounts-block__audio-courses').outerHeight() + 93 | $('.discounts-block__audio-courses').offset().top 94 | ) { 95 | $('.discounts-block__audio-courses-waves').addClass( 96 | 'discounts-block__audio-courses-waves--show', 97 | ); 98 | } 99 | 100 | if ( 101 | $(window).scrollTop() + headerOffset >= $('.connect-drimclub').offset().top && 102 | $(window).scrollTop() + headerOffset < 103 | $('.connect-drimclub').outerHeight() + $('.connect-drimclub').offset().top 104 | ) { 105 | $('.header').addClass('header--in-white'); 106 | } 107 | 108 | var currentScrollPos = window.pageYOffset; 109 | var notHideInMobileMain = window.scrollY < 300; 110 | if (prevScrollpos > currentScrollPos && !isScrolling) { 111 | if (isMobile && notHideInMobileMain) { 112 | return; 113 | } 114 | // $('.header').removeClass('header--hide'); 115 | } else { 116 | // $('.header').addClass('header--hide'); 117 | } 118 | prevScrollpos = currentScrollPos; 119 | }); 120 | 121 | // $(window).mousemove(function(e) { 122 | // var xpos = e.clientX; 123 | // var ypos = e.clientY; 124 | // var xpos = xpos * 1.2; 125 | // ypos = ypos * 1.2; 126 | // $(".main-block .parallax").css( 127 | // "transform", 128 | // `translateY(${0 + ypos / 50}px) translateX(${0 + xpos / 80}px)` 129 | // ); 130 | // }); 131 | 132 | function setBigSlide(obj) { 133 | switch (obj.method) { 134 | case 'init': 135 | sliderIndex = obj.index; 136 | break; 137 | case 'next': 138 | sliderIndex++; 139 | if (sliderIndex > 3) { 140 | sliderIndex = 3; 141 | return; 142 | } 143 | break; 144 | case 'prev': 145 | sliderIndex--; 146 | if (sliderIndex < 1) { 147 | sliderIndex = 1; 148 | return; 149 | } 150 | break; 151 | default: 152 | break; 153 | } 154 | 155 | if (sliderIndex > 1) { 156 | $('.big-slider .button--prev').addClass('visible'); 157 | } else { 158 | $('.big-slider .button--prev').removeClass('visible'); 159 | } 160 | 161 | if (sliderIndex === 3) { 162 | $('.big-slider .button--next').animate({ opacity: 0 }, 150, function() { 163 | $(this).hide(); 164 | }); 165 | } else { 166 | $('.big-slider .button--next') 167 | .show() 168 | .animate({ opacity: 1 }, 150); 169 | } 170 | 171 | // let lastIndex = sliderIndex - 1; 172 | // $(".big-slider__images ul li") 173 | // .removeClass("active") 174 | // .animate({ opacity: 0 }, 200); 175 | // $('.big-slider__images ul li[data-index="' + sliderIndex + '"]') 176 | // .addClass("active") 177 | // .animate({ opacity: 1 }, 200); 178 | 179 | $('.big-slider__images ul li') 180 | .removeClass('active') 181 | .animate({ opacity: 0 }, 300); 182 | $('.big-slider__images ul li[data-index="' + sliderIndex + '"]') 183 | .addClass('active') 184 | .animate({ opacity: 1 }, 300); 185 | 186 | $('.big-slider__informations ul li').removeClass('active'); 187 | $('.big-slider__informations ul li[data-index="' + sliderIndex + '"]').addClass('active'); 188 | } 189 | 190 | $(document).ready(() => { 191 | new Typewriter(document.querySelector('.main-block__title-animated'), { 192 | loop: true, 193 | }) 194 | .typeString('Дримклуб') 195 | .pauseFor(2500) 196 | .deleteAll() 197 | .typeString('Дримсим') 198 | .pauseFor(2500) 199 | .start(); 200 | 201 | setBigSlide({ 202 | method: 'init', 203 | index: 1, 204 | }); 205 | 206 | if (!is_safari) { 207 | $('.main-block').mousemove(function(e) { 208 | parallaxIt(e, '#Path-Copy-3', -15); 209 | parallaxIt(e, '#mask-8', 15); 210 | parallaxIt(e, '#Path-Copy-4', -20); 211 | parallaxIt(e, '#Path-Copy-5', -30); 212 | parallaxIt(e, '#Oval', -20); 213 | parallaxIt(e, '#Combined-Shape', -40); 214 | parallaxIt(e, '#wave-1', -30); 215 | parallaxIt(e, '#wave-2', -30); 216 | parallaxIt(e, '#kit', -20); 217 | }); 218 | } 219 | 220 | function parallaxIt(e, target, movement) { 221 | var $this = $('.main-block'); 222 | var relX = e.pageX - $this.offset().left; 223 | var relY = e.pageY - $this.offset().top; 224 | 225 | TweenMax.to(target, 1, { 226 | x: ((relX - $this.width() / 2) / $this.width()) * movement, 227 | y: ((relY - $this.height() / 2) / $this.height()) * movement, 228 | }); 229 | } 230 | 231 | $('.big-slider button.button--next').click(() => { 232 | if (sliderIndex < 3) { 233 | setBigSlide({ 234 | method: 'next', 235 | }); 236 | } else { 237 | setBigSlide({ 238 | method: 'prev', 239 | }); 240 | } 241 | }); 242 | 243 | $('.hamburger').click(function() { 244 | $(this).toggleClass('is-active'); 245 | if ($(this).hasClass('is-active')) { 246 | $('.header__mobile-menu').addClass('header__mobile-menu--show'); 247 | setTimeout(() => { 248 | $('.header__mobile-menu ul').css({ transform: 'translateY(0)' }); 249 | }); 250 | } else { 251 | $('.header__mobile-menu ul').css({ transform: 'translateY(-550px)' }); 252 | setTimeout(() => { 253 | $('.header__mobile-menu').removeClass('header__mobile-menu--show'); 254 | }, 400); 255 | } 256 | }); 257 | 258 | $('.big-slider button.button--prev').click(() => { 259 | setBigSlide({ 260 | method: 'prev', 261 | }); 262 | }); 263 | 264 | $('.drimclub-benefit__blocks-item').click(function() { 265 | const block = $(this).data('scroll-block'); 266 | let offset = 0; 267 | if (block === 'discounts-block__audio-courses') { 268 | offset = 120; 269 | } else { 270 | offset = 0; 271 | } 272 | if (isMobile) { 273 | offset += 40; 274 | } 275 | if (isMobile && block === 'discounts-block__audio-courses') { 276 | offset -= 20; 277 | } 278 | scrollToBlock({ 279 | block: `.${block}`, 280 | offsetY: offset, 281 | }); 282 | }); 283 | }); 284 | -------------------------------------------------------------------------------- /src/scss/_fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Proxima Nova'; 3 | src: url('./fonts/ProximaNova-Black.eot'); 4 | src: local('./fonts/Proxima Nova Black'), local('ProximaNova-Black'), 5 | url('./fonts/ProximaNova-Black.eot?#iefix') format('embedded-opentype'), 6 | url('./fonts/ProximaNova-Black.woff') format('woff'), 7 | url('./fonts/ProximaNova-Black.ttf') format('truetype'); 8 | font-weight: 900; 9 | font-style: normal; 10 | } 11 | 12 | @font-face { 13 | font-family: 'Proxima Nova'; 14 | src: url('./fonts/ProximaNova-Bold.eot'); 15 | src: local('./fonts/Proxima Nova Bold'), local('ProximaNova-Bold'), 16 | url('./fonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'), 17 | url('./fonts/ProximaNova-Bold.woff') format('woff'), 18 | url('./fonts/ProximaNova-Bold.ttf') format('truetype'); 19 | font-weight: bold; 20 | font-style: normal; 21 | } 22 | 23 | @font-face { 24 | font-family: 'Proxima Nova'; 25 | src: url('./fonts/ProximaNova-Regular.eot'); 26 | src: local('./fonts/Proxima Nova Regular'), local('ProximaNova-Regular'), 27 | url('./fonts/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'), 28 | url('./fonts/ProximaNova-Regular.woff') format('woff'), 29 | url('./fonts/ProximaNova-Regular.ttf') format('truetype'); 30 | font-weight: normal; 31 | font-style: normal; 32 | } 33 | 34 | @font-face { 35 | font-family: 'Proxima Nova'; 36 | src: url('./fonts/ProximaNova-Extrabld.eot'); 37 | src: local('./fonts/Proxima Nova Extrabold'), local('ProximaNova-Extrabld'), 38 | url('./fonts/ProximaNova-Extrabld.eot?#iefix') format('embedded-opentype'), 39 | url('./fonts/ProximaNova-Extrabld.woff') format('woff'), 40 | url('./fonts/ProximaNova-Extrabld.ttf') format('truetype'); 41 | font-weight: 800; 42 | font-style: normal; 43 | } 44 | -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | $black: #232323; 2 | $background: #ffdf8c; 3 | $gray-line: #f6f6f6; 4 | $orange: #fe5f1e; 5 | 6 | $container-width: 90%; 7 | 8 | $duration: 0.15s; 9 | -------------------------------------------------------------------------------- /src/scss/app.scss: -------------------------------------------------------------------------------- 1 | @import 'fonts'; 2 | @import 'variables'; 3 | @import 'libs/normalize'; 4 | 5 | @import 'components/all'; 6 | 7 | body { 8 | background-color: $background; 9 | } 10 | 11 | .wrapper { 12 | width: calc(100vw - 100px); 13 | height: 100%; 14 | background-color: #fff; 15 | margin: 50px auto; 16 | border-radius: 10px; 17 | max-width: 1400px; 18 | } 19 | 20 | .content { 21 | padding: 40px 0; 22 | 23 | &__title { 24 | margin: 35px 0; 25 | } 26 | 27 | &__items { 28 | display: flex; 29 | flex-wrap: wrap; 30 | justify-content: space-between; 31 | } 32 | 33 | &__top { 34 | display: flex; 35 | align-items: center; 36 | justify-content: space-between; 37 | } 38 | } 39 | 40 | .container { 41 | width: $container-width; 42 | margin: 0 auto; 43 | 44 | &--cart { 45 | max-width: 820px; 46 | margin: 90px auto; 47 | .content__title { 48 | margin: 0; 49 | } 50 | } 51 | } 52 | 53 | .cart { 54 | &__top { 55 | display: flex; 56 | justify-content: space-between; 57 | align-items: center; 58 | } 59 | 60 | .content__title { 61 | display: flex; 62 | align-items: center; 63 | font-size: 32px; 64 | 65 | svg { 66 | position: relative; 67 | top: -2px; 68 | width: 30px; 69 | height: 30px; 70 | margin-right: 10px; 71 | path { 72 | stroke: $black; 73 | stroke-width: 1.9; 74 | } 75 | } 76 | } 77 | 78 | &__clear { 79 | display: flex; 80 | align-items: center; 81 | cursor: pointer; 82 | @include noselect(); 83 | 84 | span { 85 | display: inline-block; 86 | margin-left: 7px; 87 | color: #b6b6b6; 88 | font-size: 18px; 89 | } 90 | 91 | span, 92 | svg, 93 | path { 94 | transition: all $duration ease-in-out; 95 | } 96 | 97 | &:hover { 98 | svg { 99 | path { 100 | stroke: darken($color: #b6b6b6, $amount: 50); 101 | } 102 | } 103 | span { 104 | color: darken($color: #b6b6b6, $amount: 50); 105 | } 106 | } 107 | } 108 | 109 | &__item { 110 | display: flex; 111 | width: 100%; 112 | border-top: 1px solid $gray-line; 113 | padding-top: 30px; 114 | margin-top: 30px; 115 | 116 | &-img { 117 | display: flex; 118 | align-items: center; 119 | margin-right: 15px; 120 | width: 10%; 121 | 122 | img { 123 | width: 80px; 124 | height: 80px; 125 | } 126 | } 127 | 128 | &-info { 129 | display: flex; 130 | flex-direction: column; 131 | justify-content: center; 132 | width: 40%; 133 | 134 | h3 { 135 | font-weight: bold; 136 | font-size: 22px; 137 | line-height: 27px; 138 | letter-spacing: 0.01em; 139 | } 140 | 141 | p { 142 | font-size: 18px; 143 | color: #8d8d8d; 144 | } 145 | } 146 | 147 | &-count { 148 | display: flex; 149 | align-items: center; 150 | justify-content: space-between; 151 | width: 13%; 152 | 153 | &-minus { 154 | svg { 155 | path:first-of-type { 156 | display: none; 157 | } 158 | } 159 | } 160 | 161 | b { 162 | font-size: 22px; 163 | } 164 | } 165 | 166 | &-price { 167 | display: flex; 168 | align-items: center; 169 | justify-content: center; 170 | width: 33%; 171 | 172 | b { 173 | font-weight: bold; 174 | font-size: 22px; 175 | letter-spacing: 0.01em; 176 | } 177 | } 178 | 179 | &-remove { 180 | display: flex; 181 | align-items: center; 182 | justify-content: flex-end; 183 | width: 4%; 184 | 185 | .button { 186 | border-color: darken($color: $gray-line, $amount: 10); 187 | } 188 | 189 | svg { 190 | transform: rotate(45deg); 191 | 192 | path { 193 | fill: darken($color: $gray-line, $amount: 15); 194 | } 195 | } 196 | 197 | .button { 198 | svg { 199 | width: 11.5px; 200 | height: 11.5px; 201 | position: relative; 202 | } 203 | &:hover, 204 | &:active { 205 | border-color: darken($color: $gray-line, $amount: 80); 206 | background-color: darken($color: $gray-line, $amount: 80); 207 | } 208 | } 209 | } 210 | } 211 | 212 | &__bottom { 213 | margin: 50px 0; 214 | 215 | &-details { 216 | display: flex; 217 | justify-content: space-between; 218 | 219 | span { 220 | font-size: 22px; 221 | 222 | &:last-of-type { 223 | b { 224 | color: $orange; 225 | } 226 | } 227 | } 228 | } 229 | 230 | &-buttons { 231 | display: flex; 232 | justify-content: space-between; 233 | margin-top: 40px; 234 | 235 | .go-back-btn { 236 | display: flex; 237 | align-items: center; 238 | justify-content: center; 239 | width: 210px; 240 | 241 | border-color: darken($color: $gray-line, $amount: 10); 242 | 243 | span { 244 | color: darken($color: $gray-line, $amount: 20); 245 | font-weight: 500; 246 | font-weight: 600; 247 | } 248 | 249 | &:hover { 250 | background-color: darken($color: $gray-line, $amount: 90); 251 | border-color: darken($color: $gray-line, $amount: 90); 252 | 253 | span { 254 | color: $gray-line; 255 | } 256 | } 257 | 258 | svg { 259 | margin-right: 12px; 260 | path { 261 | fill: transparent; 262 | stroke-width: 2; 263 | } 264 | } 265 | } 266 | 267 | .pay-btn { 268 | font-size: 16px; 269 | font-weight: 600; 270 | width: 210px; 271 | padding: 16px; 272 | } 273 | } 274 | } 275 | 276 | &--empty { 277 | margin: 0 auto; 278 | width: 560px; 279 | text-align: center; 280 | 281 | h2 { 282 | font-size: 32px; 283 | margin-bottom: 10px; 284 | } 285 | 286 | p { 287 | font-size: 18px; 288 | line-height: 145.4%; 289 | letter-spacing: 0.01em; 290 | color: #777777; 291 | } 292 | 293 | icon { 294 | position: relative; 295 | top: 2px; 296 | } 297 | 298 | img { 299 | display: block; 300 | width: 300px; 301 | margin: 45px auto 60px; 302 | } 303 | 304 | .button--black { 305 | padding: 12px 0 14px; 306 | width: 230px; 307 | margin: 0 auto; 308 | font-weight: 600; 309 | font-size: 18px; 310 | } 311 | } 312 | } 313 | -------------------------------------------------------------------------------- /src/scss/components/_all.scss: -------------------------------------------------------------------------------- 1 | @import './header'; 2 | @import './button'; 3 | @import './categories'; 4 | @import './sort'; 5 | @import './pizza-block'; 6 | -------------------------------------------------------------------------------- /src/scss/components/_button.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | .button { 4 | display: inline-block; 5 | background-color: $orange; 6 | border-radius: 30px; 7 | padding: 10px 20px; 8 | min-width: 100px; 9 | text-align: center; 10 | cursor: pointer; 11 | transition: background-color $duration ease-in-out, border-color $duration ease-in-out; 12 | border: 1px solid transparent; 13 | @include noselect(); 14 | 15 | &, 16 | span { 17 | color: #fff; 18 | } 19 | 20 | i, 21 | span, 22 | path, 23 | svg { 24 | transition: all $duration ease-in-out; 25 | } 26 | 27 | &:hover { 28 | background-color: darken($orange, 8%); 29 | } 30 | 31 | &:active { 32 | background-color: darken($orange, 12%); 33 | transform: translateY(1px); 34 | } 35 | 36 | &--circle { 37 | display: flex; 38 | align-items: center; 39 | justify-content: center; 40 | width: 32px; 41 | height: 32px; 42 | min-width: 32px; 43 | padding: 0; 44 | border-width: 2px; 45 | } 46 | 47 | &--black { 48 | background-color: $black; 49 | 50 | &:hover, 51 | &:active { 52 | background-color: lighten($color: $black, $amount: 10); 53 | } 54 | } 55 | 56 | &--outline { 57 | background-color: #fff; 58 | border-color: $orange; 59 | &, 60 | span { 61 | color: $orange; 62 | } 63 | 64 | svg { 65 | path { 66 | fill: $orange; 67 | } 68 | } 69 | 70 | &:hover { 71 | background-color: $orange; 72 | 73 | &, 74 | span { 75 | color: #fff; 76 | } 77 | 78 | svg { 79 | path { 80 | fill: #fff; 81 | } 82 | } 83 | } 84 | 85 | &:active { 86 | background-color: darken($orange, 8%); 87 | } 88 | } 89 | 90 | &__delimiter { 91 | width: 1px; 92 | height: 25px; 93 | background-color: rgba(255, 255, 255, 0.25); 94 | margin-left: 14px; 95 | margin-right: 14px; 96 | } 97 | 98 | &--add { 99 | svg { 100 | margin-right: 2px; 101 | } 102 | 103 | span { 104 | font-weight: 600; 105 | font-size: 16px; 106 | } 107 | 108 | &:hover { 109 | i { 110 | background-color: #fff; 111 | color: $orange; 112 | } 113 | } 114 | 115 | i { 116 | display: inline-block; 117 | border-radius: 30px; 118 | background-color: $orange; 119 | color: #fff; 120 | font-weight: 600; 121 | width: 22px; 122 | height: 22px; 123 | font-style: normal; 124 | font-size: 13px; 125 | line-height: 22px; 126 | position: relative; 127 | top: -1px; 128 | left: 3px; 129 | } 130 | } 131 | 132 | &--cart { 133 | display: flex; 134 | align-items: center; 135 | line-height: 23px; 136 | padding: 12px 25px; 137 | 138 | svg { 139 | margin-right: 8px; 140 | margin-bottom: 1px; 141 | } 142 | 143 | span { 144 | font-weight: 600; 145 | font-size: 16px; 146 | } 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /src/scss/components/_categories.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | .categories { 4 | ul { 5 | display: flex; 6 | 7 | li { 8 | background-color: #f9f9f9; 9 | padding: 13px 30px; 10 | border-radius: 30px; 11 | margin-right: 10px; 12 | font-weight: bold; 13 | cursor: pointer; 14 | transition: background-color 0.1s ease-in-out; 15 | @include noselect(); 16 | 17 | &:hover { 18 | background-color: darken(#f9f9f9, 2%); 19 | } 20 | 21 | &:active { 22 | background-color: darken(#f9f9f9, 5%); 23 | } 24 | 25 | &.active { 26 | background-color: #282828; 27 | color: #fff; 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/scss/components/_header.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | .header { 4 | border-bottom: 1px solid $gray-line; 5 | padding: 40px 0; 6 | 7 | .container { 8 | display: flex; 9 | align-items: center; 10 | justify-content: space-between; 11 | } 12 | 13 | &__logo { 14 | display: flex; 15 | 16 | img { 17 | margin-right: 15px; 18 | } 19 | 20 | h1 { 21 | color: #181818; 22 | font-size: 24px; 23 | letter-spacing: 1%; 24 | text-transform: uppercase; 25 | font-weight: 800; 26 | } 27 | 28 | p { 29 | color: #7b7b7b; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/scss/components/_pizza-block.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | .pizza-block { 4 | width: 280px; 5 | text-align: center; 6 | margin-bottom: 65px; 7 | 8 | &:not(:nth-of-type(4n)) { 9 | margin-right: 35px; 10 | } 11 | 12 | &__image { 13 | width: 260px; 14 | } 15 | 16 | &__title { 17 | font-size: 20px; 18 | font-weight: 900; 19 | letter-spacing: 1%; 20 | margin-bottom: 20px; 21 | } 22 | 23 | &__selector { 24 | display: flex; 25 | background-color: #f3f3f3; 26 | border-radius: 10px; 27 | flex-direction: column; 28 | padding: 6px; 29 | 30 | ul { 31 | display: flex; 32 | flex: 1; 33 | 34 | &:first-of-type { 35 | margin-bottom: 6px; 36 | } 37 | 38 | li { 39 | padding: 8px; 40 | flex: 1; 41 | cursor: pointer; 42 | font-weight: 600; 43 | font-size: 14px; 44 | @include noselect(); 45 | &.active { 46 | background: #ffffff; 47 | box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04); 48 | border-radius: 5px; 49 | cursor: auto; 50 | } 51 | } 52 | } 53 | } 54 | 55 | &__bottom { 56 | display: flex; 57 | align-items: center; 58 | justify-content: space-between; 59 | margin-top: 20px; 60 | } 61 | 62 | &__price { 63 | font-weight: bold; 64 | font-size: 22px; 65 | line-height: 27px; 66 | letter-spacing: 0.015em; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/scss/components/_sort.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | 3 | .sort { 4 | position: relative; 5 | &__label { 6 | display: flex; 7 | align-items: center; 8 | 9 | svg { 10 | margin-right: 8px; 11 | } 12 | 13 | b { 14 | margin-right: 8px; 15 | } 16 | 17 | span { 18 | color: $orange; 19 | border-bottom: 1px dashed $orange; 20 | cursor: pointer; 21 | } 22 | } 23 | 24 | &__popup { 25 | position: absolute; 26 | right: 0; 27 | margin-top: 15px; 28 | background: #ffffff; 29 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.09); 30 | border-radius: 10px; 31 | overflow: hidden; 32 | padding: 10px 0; 33 | width: 160px; 34 | 35 | ul { 36 | overflow: hidden; 37 | li { 38 | padding: 12px 20px; 39 | cursor: pointer; 40 | 41 | &.active, 42 | &:hover { 43 | background: rgba(254, 95, 30, 0.05); 44 | } 45 | 46 | &.active { 47 | font-weight: bold; 48 | color: $orange; 49 | } 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/scss/libs/_normalize.scss: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | outline: none; 6 | font-family: 'Proxima Nova', Roboto, system-ui, Tahoma, sans-serif; 7 | box-sizing: border-box; 8 | } 9 | 10 | html { 11 | -ms-text-size-adjust: 100%; 12 | -webkit-text-size-adjust: 100%; 13 | } 14 | 15 | body { 16 | -moz-osx-font-smoothing: grayscale; 17 | -webkit-font-smoothing: antialiased; 18 | color: $black; 19 | } 20 | 21 | a, 22 | span, 23 | p, 24 | b, 25 | h1, 26 | h2, 27 | h3, 28 | h4, 29 | h5 { 30 | color: $black; 31 | } 32 | 33 | h1 { 34 | font-size: 48px; 35 | } 36 | 37 | h2 { 38 | font-weight: 600; 39 | font-size: 28px; 40 | line-height: 30px; 41 | } 42 | 43 | a { 44 | text-decoration: none; 45 | } 46 | 47 | @mixin noselect { 48 | -webkit-touch-callout: none; /* iOS Safari */ 49 | -webkit-user-select: none; /* Safari */ 50 | -khtml-user-select: none; /* Konqueror HTML */ 51 | -moz-user-select: none; /* Old versions of Firefox */ 52 | -ms-user-select: none; /* Internet Explorer/Edge */ 53 | user-select: none; /* Non-prefixed version, currently 54 | supported by Chrome, Opera and Firefox */ 55 | } 56 | --------------------------------------------------------------------------------