├── .DS_Store ├── README.md ├── assets ├── .DS_Store ├── font │ ├── CerebriSansPro-Bold.woff │ ├── CerebriSansPro-Bold.woff2 │ ├── CerebriSansPro-BoldItalic.woff │ ├── CerebriSansPro-BoldItalic.woff2 │ ├── CerebriSansPro-ExtraBold.woff │ ├── CerebriSansPro-ExtraBold.woff2 │ ├── CerebriSansPro-ExtraBoldItalic.woff │ ├── CerebriSansPro-ExtraBoldItalic.woff2 │ ├── CerebriSansPro-ExtraLight.woff │ ├── CerebriSansPro-ExtraLight.woff2 │ ├── CerebriSansPro-ExtraLightItalic.woff │ ├── CerebriSansPro-ExtraLightItalic.woff2 │ ├── CerebriSansPro-Heavy.woff │ ├── CerebriSansPro-Heavy.woff2 │ ├── CerebriSansPro-HeavyItalic.woff │ ├── CerebriSansPro-HeavyItalic.woff2 │ ├── CerebriSansPro-Italic.woff │ ├── CerebriSansPro-Italic.woff2 │ ├── CerebriSansPro-Light.woff │ ├── CerebriSansPro-Light.woff2 │ ├── CerebriSansPro-LightItalic.woff │ ├── CerebriSansPro-LightItalic.woff2 │ ├── CerebriSansPro-Medium.woff │ ├── CerebriSansPro-Medium.woff2 │ ├── CerebriSansPro-MediumItalic.woff │ ├── CerebriSansPro-MediumItalic.woff2 │ ├── CerebriSansPro-Regular.woff │ ├── CerebriSansPro-Regular.woff2 │ ├── demo.html │ └── stylesheet.css ├── images │ ├── .DS_Store │ ├── dog.png │ ├── girl-3.png │ ├── girl.png │ ├── hand-and-phone.png │ ├── hand.png │ ├── man-2.png │ ├── man-3.png │ └── man.png └── svg │ ├── bell.svg │ └── lines.svg ├── css ├── _mixins.scss ├── style.css ├── style.css.map └── style.scss ├── index.html ├── js ├── debouncer.js └── project.js └── page-shots ├── .DS_Store ├── shot-1.png ├── shot-2.png ├── shot-3.png └── shot-4.png /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # No Dey Beg 2 | A go at abeg.app's old web page. 3 | 4 | # The challenge 5 | The challenge was not to just re-create the web page, but to re-create it using nothing but vanilla HTML, CSS and JAVASCRIPT. Notable parts of the code are the custom debouncer in the JS folder, keyframes animation in SCSS, and the for loops in the SCSS. 6 | 7 | # Shots 8 | 9 | ![Screen Shot](/page-shots/shot-1.png) 10 | 11 | ![Screen Shot](/page-shots/shot-2.png) 12 | 13 | ![Screen Shot](/page-shots/shot-3.png) 14 | 15 | ![Screen Shot](/page-shots/shot-4.png) 16 | -------------------------------------------------------------------------------- /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/.DS_Store -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-Bold.woff -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-Bold.woff2 -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-BoldItalic.woff -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-BoldItalic.woff2 -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-ExtraBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-ExtraBold.woff -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-ExtraBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-ExtraBold.woff2 -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-ExtraBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-ExtraBoldItalic.woff -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-ExtraBoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-ExtraBoldItalic.woff2 -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-ExtraLight.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-ExtraLight.woff -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-ExtraLight.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-ExtraLight.woff2 -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-ExtraLightItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-ExtraLightItalic.woff -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-ExtraLightItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-ExtraLightItalic.woff2 -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-Heavy.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-Heavy.woff -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-Heavy.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-Heavy.woff2 -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-HeavyItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-HeavyItalic.woff -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-HeavyItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-HeavyItalic.woff2 -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-Italic.woff -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-Italic.woff2 -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-Light.woff -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-Light.woff2 -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-LightItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-LightItalic.woff -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-LightItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-LightItalic.woff2 -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-Medium.woff -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-Medium.woff2 -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-MediumItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-MediumItalic.woff -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-MediumItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-MediumItalic.woff2 -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-Regular.woff -------------------------------------------------------------------------------- /assets/font/CerebriSansPro-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/font/CerebriSansPro-Regular.woff2 -------------------------------------------------------------------------------- /assets/font/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Transfonter demo 10 | 11 | 176 | 177 | 178 |
179 |
180 |

Cerebri Sans Pro Bold Italic

181 |
.your-style {
182 |     font-family: 'Cerebri Sans Pro';
183 |     font-weight: bold;
184 |     font-style: italic;
185 | }
186 |
187 |

188 | abcdefghijklmnopqrstuvwxyz
189 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
190 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 191 |

192 |

The quick brown fox jumps over the lazy dog.

193 |

The quick brown fox jumps over the lazy dog.

194 |

The quick brown fox jumps over the lazy dog.

195 |

The quick brown fox jumps over the lazy dog.

196 |

The quick brown fox jumps over the lazy dog.

197 |

The quick brown fox jumps over the lazy dog.

198 |

The quick brown fox jumps over the lazy dog.

199 |

The quick brown fox jumps over the lazy dog.

200 |

The quick brown fox jumps over the lazy dog.

201 |

The quick brown fox jumps over the lazy dog.

202 |

The quick brown fox jumps over the lazy dog.

203 |
204 |
205 |
206 |

Cerebri Sans Pro Bold

207 |
.your-style {
208 |     font-family: 'Cerebri Sans Pro';
209 |     font-weight: bold;
210 |     font-style: normal;
211 | }
212 |
213 |

214 | abcdefghijklmnopqrstuvwxyz
215 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
216 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 217 |

218 |

The quick brown fox jumps over the lazy dog.

219 |

The quick brown fox jumps over the lazy dog.

220 |

The quick brown fox jumps over the lazy dog.

221 |

The quick brown fox jumps over the lazy dog.

222 |

The quick brown fox jumps over the lazy dog.

223 |

The quick brown fox jumps over the lazy dog.

224 |

The quick brown fox jumps over the lazy dog.

225 |

The quick brown fox jumps over the lazy dog.

226 |

The quick brown fox jumps over the lazy dog.

227 |

The quick brown fox jumps over the lazy dog.

228 |

The quick brown fox jumps over the lazy dog.

229 |
230 |
231 |
232 |

Cerebri Sans Pro Bold

233 |
.your-style {
234 |     font-family: 'Cerebri Sans Pro';
235 |     font-weight: bold;
236 |     font-style: normal;
237 | }
238 |
239 |

240 | abcdefghijklmnopqrstuvwxyz
241 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
242 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 243 |

244 |

The quick brown fox jumps over the lazy dog.

245 |

The quick brown fox jumps over the lazy dog.

246 |

The quick brown fox jumps over the lazy dog.

247 |

The quick brown fox jumps over the lazy dog.

248 |

The quick brown fox jumps over the lazy dog.

249 |

The quick brown fox jumps over the lazy dog.

250 |

The quick brown fox jumps over the lazy dog.

251 |

The quick brown fox jumps over the lazy dog.

252 |

The quick brown fox jumps over the lazy dog.

253 |

The quick brown fox jumps over the lazy dog.

254 |

The quick brown fox jumps over the lazy dog.

255 |
256 |
257 |
258 |

Cerebri Sans Pro ExtraBold

259 |
.your-style {
260 |     font-family: 'Cerebri Sans Pro';
261 |     font-weight: 800;
262 |     font-style: normal;
263 | }
264 |
265 |

266 | abcdefghijklmnopqrstuvwxyz
267 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
268 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 269 |

270 |

The quick brown fox jumps over the lazy dog.

271 |

The quick brown fox jumps over the lazy dog.

272 |

The quick brown fox jumps over the lazy dog.

273 |

The quick brown fox jumps over the lazy dog.

274 |

The quick brown fox jumps over the lazy dog.

275 |

The quick brown fox jumps over the lazy dog.

276 |

The quick brown fox jumps over the lazy dog.

277 |

The quick brown fox jumps over the lazy dog.

278 |

The quick brown fox jumps over the lazy dog.

279 |

The quick brown fox jumps over the lazy dog.

280 |

The quick brown fox jumps over the lazy dog.

281 |
282 |
283 |
284 |

Cerebri Sans Pro Bold Italic

285 |
.your-style {
286 |     font-family: 'Cerebri Sans Pro';
287 |     font-weight: bold;
288 |     font-style: italic;
289 | }
290 |
291 |

292 | abcdefghijklmnopqrstuvwxyz
293 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
294 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 295 |

296 |

The quick brown fox jumps over the lazy dog.

297 |

The quick brown fox jumps over the lazy dog.

298 |

The quick brown fox jumps over the lazy dog.

299 |

The quick brown fox jumps over the lazy dog.

300 |

The quick brown fox jumps over the lazy dog.

301 |

The quick brown fox jumps over the lazy dog.

302 |

The quick brown fox jumps over the lazy dog.

303 |

The quick brown fox jumps over the lazy dog.

304 |

The quick brown fox jumps over the lazy dog.

305 |

The quick brown fox jumps over the lazy dog.

306 |

The quick brown fox jumps over the lazy dog.

307 |
308 |
309 |
310 |

Cerebri Sans Pro ExtraBold

311 |
.your-style {
312 |     font-family: 'Cerebri Sans Pro';
313 |     font-weight: 800;
314 |     font-style: normal;
315 | }
316 |
317 |

318 | abcdefghijklmnopqrstuvwxyz
319 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
320 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 321 |

322 |

The quick brown fox jumps over the lazy dog.

323 |

The quick brown fox jumps over the lazy dog.

324 |

The quick brown fox jumps over the lazy dog.

325 |

The quick brown fox jumps over the lazy dog.

326 |

The quick brown fox jumps over the lazy dog.

327 |

The quick brown fox jumps over the lazy dog.

328 |

The quick brown fox jumps over the lazy dog.

329 |

The quick brown fox jumps over the lazy dog.

330 |

The quick brown fox jumps over the lazy dog.

331 |

The quick brown fox jumps over the lazy dog.

332 |

The quick brown fox jumps over the lazy dog.

333 |
334 |
335 |
336 |

Cerebri Sans Pro ExtraBold Italic

337 |
.your-style {
338 |     font-family: 'Cerebri Sans Pro';
339 |     font-weight: 800;
340 |     font-style: italic;
341 | }
342 |
343 |

344 | abcdefghijklmnopqrstuvwxyz
345 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
346 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 347 |

348 |

The quick brown fox jumps over the lazy dog.

349 |

The quick brown fox jumps over the lazy dog.

350 |

The quick brown fox jumps over the lazy dog.

351 |

The quick brown fox jumps over the lazy dog.

352 |

The quick brown fox jumps over the lazy dog.

353 |

The quick brown fox jumps over the lazy dog.

354 |

The quick brown fox jumps over the lazy dog.

355 |

The quick brown fox jumps over the lazy dog.

356 |

The quick brown fox jumps over the lazy dog.

357 |

The quick brown fox jumps over the lazy dog.

358 |

The quick brown fox jumps over the lazy dog.

359 |
360 |
361 |
362 |

Cerebri Sans Pro ExtraBold Italic

363 |
.your-style {
364 |     font-family: 'Cerebri Sans Pro ExBold';
365 |     font-weight: 800;
366 |     font-style: italic;
367 | }
368 |
369 |

370 | abcdefghijklmnopqrstuvwxyz
371 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
372 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 373 |

374 |

The quick brown fox jumps over the lazy dog.

375 |

The quick brown fox jumps over the lazy dog.

376 |

The quick brown fox jumps over the lazy dog.

377 |

The quick brown fox jumps over the lazy dog.

378 |

The quick brown fox jumps over the lazy dog.

379 |

The quick brown fox jumps over the lazy dog.

380 |

The quick brown fox jumps over the lazy dog.

381 |

The quick brown fox jumps over the lazy dog.

382 |

The quick brown fox jumps over the lazy dog.

383 |

The quick brown fox jumps over the lazy dog.

384 |

The quick brown fox jumps over the lazy dog.

385 |
386 |
387 |
388 |

Cerebri Sans Pro ExtraLight

389 |
.your-style {
390 |     font-family: 'Cerebri Sans Pro';
391 |     font-weight: 200;
392 |     font-style: normal;
393 | }
394 |
395 |

396 | abcdefghijklmnopqrstuvwxyz
397 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
398 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 399 |

400 |

The quick brown fox jumps over the lazy dog.

401 |

The quick brown fox jumps over the lazy dog.

402 |

The quick brown fox jumps over the lazy dog.

403 |

The quick brown fox jumps over the lazy dog.

404 |

The quick brown fox jumps over the lazy dog.

405 |

The quick brown fox jumps over the lazy dog.

406 |

The quick brown fox jumps over the lazy dog.

407 |

The quick brown fox jumps over the lazy dog.

408 |

The quick brown fox jumps over the lazy dog.

409 |

The quick brown fox jumps over the lazy dog.

410 |

The quick brown fox jumps over the lazy dog.

411 |
412 |
413 |
414 |

Cerebri Sans Pro ExtraLight Italic

415 |
.your-style {
416 |     font-family: 'Cerebri Sans Pro';
417 |     font-weight: 200;
418 |     font-style: italic;
419 | }
420 |
421 |

422 | abcdefghijklmnopqrstuvwxyz
423 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
424 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 425 |

426 |

The quick brown fox jumps over the lazy dog.

427 |

The quick brown fox jumps over the lazy dog.

428 |

The quick brown fox jumps over the lazy dog.

429 |

The quick brown fox jumps over the lazy dog.

430 |

The quick brown fox jumps over the lazy dog.

431 |

The quick brown fox jumps over the lazy dog.

432 |

The quick brown fox jumps over the lazy dog.

433 |

The quick brown fox jumps over the lazy dog.

434 |

The quick brown fox jumps over the lazy dog.

435 |

The quick brown fox jumps over the lazy dog.

436 |

The quick brown fox jumps over the lazy dog.

437 |
438 |
439 |
440 |

Cerebri Sans Pro ExtraLight

441 |
.your-style {
442 |     font-family: 'Cerebri Sans Pro';
443 |     font-weight: 200;
444 |     font-style: normal;
445 | }
446 |
447 |

448 | abcdefghijklmnopqrstuvwxyz
449 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
450 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 451 |

452 |

The quick brown fox jumps over the lazy dog.

453 |

The quick brown fox jumps over the lazy dog.

454 |

The quick brown fox jumps over the lazy dog.

455 |

The quick brown fox jumps over the lazy dog.

456 |

The quick brown fox jumps over the lazy dog.

457 |

The quick brown fox jumps over the lazy dog.

458 |

The quick brown fox jumps over the lazy dog.

459 |

The quick brown fox jumps over the lazy dog.

460 |

The quick brown fox jumps over the lazy dog.

461 |

The quick brown fox jumps over the lazy dog.

462 |

The quick brown fox jumps over the lazy dog.

463 |
464 |
465 |
466 |

Cerebri Sans Pro Heavy

467 |
.your-style {
468 |     font-family: 'Cerebri Sans Pro';
469 |     font-weight: 900;
470 |     font-style: normal;
471 | }
472 |
473 |

474 | abcdefghijklmnopqrstuvwxyz
475 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
476 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 477 |

478 |

The quick brown fox jumps over the lazy dog.

479 |

The quick brown fox jumps over the lazy dog.

480 |

The quick brown fox jumps over the lazy dog.

481 |

The quick brown fox jumps over the lazy dog.

482 |

The quick brown fox jumps over the lazy dog.

483 |

The quick brown fox jumps over the lazy dog.

484 |

The quick brown fox jumps over the lazy dog.

485 |

The quick brown fox jumps over the lazy dog.

486 |

The quick brown fox jumps over the lazy dog.

487 |

The quick brown fox jumps over the lazy dog.

488 |

The quick brown fox jumps over the lazy dog.

489 |
490 |
491 |
492 |

Cerebri Sans Pro ExtraLight Italic

493 |
.your-style {
494 |     font-family: 'Cerebri Sans Pro ExLight';
495 |     font-weight: 200;
496 |     font-style: italic;
497 | }
498 |
499 |

500 | abcdefghijklmnopqrstuvwxyz
501 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
502 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 503 |

504 |

The quick brown fox jumps over the lazy dog.

505 |

The quick brown fox jumps over the lazy dog.

506 |

The quick brown fox jumps over the lazy dog.

507 |

The quick brown fox jumps over the lazy dog.

508 |

The quick brown fox jumps over the lazy dog.

509 |

The quick brown fox jumps over the lazy dog.

510 |

The quick brown fox jumps over the lazy dog.

511 |

The quick brown fox jumps over the lazy dog.

512 |

The quick brown fox jumps over the lazy dog.

513 |

The quick brown fox jumps over the lazy dog.

514 |

The quick brown fox jumps over the lazy dog.

515 |
516 |
517 |
518 |

Cerebri Sans Pro Heavy

519 |
.your-style {
520 |     font-family: 'Cerebri Sans Pro';
521 |     font-weight: 900;
522 |     font-style: normal;
523 | }
524 |
525 |

526 | abcdefghijklmnopqrstuvwxyz
527 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
528 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 529 |

530 |

The quick brown fox jumps over the lazy dog.

531 |

The quick brown fox jumps over the lazy dog.

532 |

The quick brown fox jumps over the lazy dog.

533 |

The quick brown fox jumps over the lazy dog.

534 |

The quick brown fox jumps over the lazy dog.

535 |

The quick brown fox jumps over the lazy dog.

536 |

The quick brown fox jumps over the lazy dog.

537 |

The quick brown fox jumps over the lazy dog.

538 |

The quick brown fox jumps over the lazy dog.

539 |

The quick brown fox jumps over the lazy dog.

540 |

The quick brown fox jumps over the lazy dog.

541 |
542 |
543 |
544 |

Cerebri Sans Pro Heavy Italic

545 |
.your-style {
546 |     font-family: 'Cerebri Sans Pro';
547 |     font-weight: 900;
548 |     font-style: italic;
549 | }
550 |
551 |

552 | abcdefghijklmnopqrstuvwxyz
553 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
554 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 555 |

556 |

The quick brown fox jumps over the lazy dog.

557 |

The quick brown fox jumps over the lazy dog.

558 |

The quick brown fox jumps over the lazy dog.

559 |

The quick brown fox jumps over the lazy dog.

560 |

The quick brown fox jumps over the lazy dog.

561 |

The quick brown fox jumps over the lazy dog.

562 |

The quick brown fox jumps over the lazy dog.

563 |

The quick brown fox jumps over the lazy dog.

564 |

The quick brown fox jumps over the lazy dog.

565 |

The quick brown fox jumps over the lazy dog.

566 |

The quick brown fox jumps over the lazy dog.

567 |
568 |
569 |
570 |

Cerebri Sans Pro Italic

571 |
.your-style {
572 |     font-family: 'Cerebri Sans Pro';
573 |     font-weight: normal;
574 |     font-style: italic;
575 | }
576 |
577 |

578 | abcdefghijklmnopqrstuvwxyz
579 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
580 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 581 |

582 |

The quick brown fox jumps over the lazy dog.

583 |

The quick brown fox jumps over the lazy dog.

584 |

The quick brown fox jumps over the lazy dog.

585 |

The quick brown fox jumps over the lazy dog.

586 |

The quick brown fox jumps over the lazy dog.

587 |

The quick brown fox jumps over the lazy dog.

588 |

The quick brown fox jumps over the lazy dog.

589 |

The quick brown fox jumps over the lazy dog.

590 |

The quick brown fox jumps over the lazy dog.

591 |

The quick brown fox jumps over the lazy dog.

592 |

The quick brown fox jumps over the lazy dog.

593 |
594 |
595 |
596 |

Cerebri Sans Pro Heavy Italic

597 |
.your-style {
598 |     font-family: 'Cerebri Sans Pro';
599 |     font-weight: 900;
600 |     font-style: italic;
601 | }
602 |
603 |

604 | abcdefghijklmnopqrstuvwxyz
605 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
606 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 607 |

608 |

The quick brown fox jumps over the lazy dog.

609 |

The quick brown fox jumps over the lazy dog.

610 |

The quick brown fox jumps over the lazy dog.

611 |

The quick brown fox jumps over the lazy dog.

612 |

The quick brown fox jumps over the lazy dog.

613 |

The quick brown fox jumps over the lazy dog.

614 |

The quick brown fox jumps over the lazy dog.

615 |

The quick brown fox jumps over the lazy dog.

616 |

The quick brown fox jumps over the lazy dog.

617 |

The quick brown fox jumps over the lazy dog.

618 |

The quick brown fox jumps over the lazy dog.

619 |
620 |
621 |
622 |

Cerebri Sans Pro Light

623 |
.your-style {
624 |     font-family: 'Cerebri Sans Pro';
625 |     font-weight: 300;
626 |     font-style: normal;
627 | }
628 |
629 |

630 | abcdefghijklmnopqrstuvwxyz
631 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
632 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 633 |

634 |

The quick brown fox jumps over the lazy dog.

635 |

The quick brown fox jumps over the lazy dog.

636 |

The quick brown fox jumps over the lazy dog.

637 |

The quick brown fox jumps over the lazy dog.

638 |

The quick brown fox jumps over the lazy dog.

639 |

The quick brown fox jumps over the lazy dog.

640 |

The quick brown fox jumps over the lazy dog.

641 |

The quick brown fox jumps over the lazy dog.

642 |

The quick brown fox jumps over the lazy dog.

643 |

The quick brown fox jumps over the lazy dog.

644 |

The quick brown fox jumps over the lazy dog.

645 |
646 |
647 |
648 |

Cerebri Sans Pro Italic

649 |
.your-style {
650 |     font-family: 'Cerebri Sans Pro';
651 |     font-weight: normal;
652 |     font-style: italic;
653 | }
654 |
655 |

656 | abcdefghijklmnopqrstuvwxyz
657 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
658 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 659 |

660 |

The quick brown fox jumps over the lazy dog.

661 |

The quick brown fox jumps over the lazy dog.

662 |

The quick brown fox jumps over the lazy dog.

663 |

The quick brown fox jumps over the lazy dog.

664 |

The quick brown fox jumps over the lazy dog.

665 |

The quick brown fox jumps over the lazy dog.

666 |

The quick brown fox jumps over the lazy dog.

667 |

The quick brown fox jumps over the lazy dog.

668 |

The quick brown fox jumps over the lazy dog.

669 |

The quick brown fox jumps over the lazy dog.

670 |

The quick brown fox jumps over the lazy dog.

671 |
672 |
673 |
674 |

Cerebri Sans Pro Light Italic

675 |
.your-style {
676 |     font-family: 'Cerebri Sans Pro';
677 |     font-weight: 300;
678 |     font-style: italic;
679 | }
680 |
681 |

682 | abcdefghijklmnopqrstuvwxyz
683 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
684 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 685 |

686 |

The quick brown fox jumps over the lazy dog.

687 |

The quick brown fox jumps over the lazy dog.

688 |

The quick brown fox jumps over the lazy dog.

689 |

The quick brown fox jumps over the lazy dog.

690 |

The quick brown fox jumps over the lazy dog.

691 |

The quick brown fox jumps over the lazy dog.

692 |

The quick brown fox jumps over the lazy dog.

693 |

The quick brown fox jumps over the lazy dog.

694 |

The quick brown fox jumps over the lazy dog.

695 |

The quick brown fox jumps over the lazy dog.

696 |

The quick brown fox jumps over the lazy dog.

697 |
698 |
699 |
700 |

Cerebri Sans Pro Light

701 |
.your-style {
702 |     font-family: 'Cerebri Sans Pro';
703 |     font-weight: 300;
704 |     font-style: normal;
705 | }
706 |
707 |

708 | abcdefghijklmnopqrstuvwxyz
709 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
710 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 711 |

712 |

The quick brown fox jumps over the lazy dog.

713 |

The quick brown fox jumps over the lazy dog.

714 |

The quick brown fox jumps over the lazy dog.

715 |

The quick brown fox jumps over the lazy dog.

716 |

The quick brown fox jumps over the lazy dog.

717 |

The quick brown fox jumps over the lazy dog.

718 |

The quick brown fox jumps over the lazy dog.

719 |

The quick brown fox jumps over the lazy dog.

720 |

The quick brown fox jumps over the lazy dog.

721 |

The quick brown fox jumps over the lazy dog.

722 |

The quick brown fox jumps over the lazy dog.

723 |
724 |
725 |
726 |

Cerebri Sans Pro Medium

727 |
.your-style {
728 |     font-family: 'Cerebri Sans Pro';
729 |     font-weight: 500;
730 |     font-style: normal;
731 | }
732 |
733 |

734 | abcdefghijklmnopqrstuvwxyz
735 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
736 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 737 |

738 |

The quick brown fox jumps over the lazy dog.

739 |

The quick brown fox jumps over the lazy dog.

740 |

The quick brown fox jumps over the lazy dog.

741 |

The quick brown fox jumps over the lazy dog.

742 |

The quick brown fox jumps over the lazy dog.

743 |

The quick brown fox jumps over the lazy dog.

744 |

The quick brown fox jumps over the lazy dog.

745 |

The quick brown fox jumps over the lazy dog.

746 |

The quick brown fox jumps over the lazy dog.

747 |

The quick brown fox jumps over the lazy dog.

748 |

The quick brown fox jumps over the lazy dog.

749 |
750 |
751 |
752 |

Cerebri Sans Pro Medium Italic

753 |
.your-style {
754 |     font-family: 'Cerebri Sans Pro';
755 |     font-weight: 500;
756 |     font-style: italic;
757 | }
758 |
759 |

760 | abcdefghijklmnopqrstuvwxyz
761 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
762 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 763 |

764 |

The quick brown fox jumps over the lazy dog.

765 |

The quick brown fox jumps over the lazy dog.

766 |

The quick brown fox jumps over the lazy dog.

767 |

The quick brown fox jumps over the lazy dog.

768 |

The quick brown fox jumps over the lazy dog.

769 |

The quick brown fox jumps over the lazy dog.

770 |

The quick brown fox jumps over the lazy dog.

771 |

The quick brown fox jumps over the lazy dog.

772 |

The quick brown fox jumps over the lazy dog.

773 |

The quick brown fox jumps over the lazy dog.

774 |

The quick brown fox jumps over the lazy dog.

775 |
776 |
777 |
778 |

Cerebri Sans Pro Light Italic

779 |
.your-style {
780 |     font-family: 'Cerebri Sans Pro';
781 |     font-weight: 300;
782 |     font-style: italic;
783 | }
784 |
785 |

786 | abcdefghijklmnopqrstuvwxyz
787 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
788 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 789 |

790 |

The quick brown fox jumps over the lazy dog.

791 |

The quick brown fox jumps over the lazy dog.

792 |

The quick brown fox jumps over the lazy dog.

793 |

The quick brown fox jumps over the lazy dog.

794 |

The quick brown fox jumps over the lazy dog.

795 |

The quick brown fox jumps over the lazy dog.

796 |

The quick brown fox jumps over the lazy dog.

797 |

The quick brown fox jumps over the lazy dog.

798 |

The quick brown fox jumps over the lazy dog.

799 |

The quick brown fox jumps over the lazy dog.

800 |

The quick brown fox jumps over the lazy dog.

801 |
802 |
803 |
804 |

Cerebri Sans Pro Regular

805 |
.your-style {
806 |     font-family: 'Cerebri Sans Pro';
807 |     font-weight: normal;
808 |     font-style: normal;
809 | }
810 |
811 |

812 | abcdefghijklmnopqrstuvwxyz
813 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
814 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 815 |

816 |

The quick brown fox jumps over the lazy dog.

817 |

The quick brown fox jumps over the lazy dog.

818 |

The quick brown fox jumps over the lazy dog.

819 |

The quick brown fox jumps over the lazy dog.

820 |

The quick brown fox jumps over the lazy dog.

821 |

The quick brown fox jumps over the lazy dog.

822 |

The quick brown fox jumps over the lazy dog.

823 |

The quick brown fox jumps over the lazy dog.

824 |

The quick brown fox jumps over the lazy dog.

825 |

The quick brown fox jumps over the lazy dog.

826 |

The quick brown fox jumps over the lazy dog.

827 |
828 |
829 |
830 |

Cerebri Sans Pro Medium

831 |
.your-style {
832 |     font-family: 'Cerebri Sans Pro';
833 |     font-weight: 500;
834 |     font-style: normal;
835 | }
836 |
837 |

838 | abcdefghijklmnopqrstuvwxyz
839 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
840 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 841 |

842 |

The quick brown fox jumps over the lazy dog.

843 |

The quick brown fox jumps over the lazy dog.

844 |

The quick brown fox jumps over the lazy dog.

845 |

The quick brown fox jumps over the lazy dog.

846 |

The quick brown fox jumps over the lazy dog.

847 |

The quick brown fox jumps over the lazy dog.

848 |

The quick brown fox jumps over the lazy dog.

849 |

The quick brown fox jumps over the lazy dog.

850 |

The quick brown fox jumps over the lazy dog.

851 |

The quick brown fox jumps over the lazy dog.

852 |

The quick brown fox jumps over the lazy dog.

853 |
854 |
855 |
856 |

Cerebri Sans Pro Medium Italic

857 |
.your-style {
858 |     font-family: 'Cerebri Sans Pro';
859 |     font-weight: 500;
860 |     font-style: italic;
861 | }
862 |
863 |

864 | abcdefghijklmnopqrstuvwxyz
865 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
866 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 867 |

868 |

The quick brown fox jumps over the lazy dog.

869 |

The quick brown fox jumps over the lazy dog.

870 |

The quick brown fox jumps over the lazy dog.

871 |

The quick brown fox jumps over the lazy dog.

872 |

The quick brown fox jumps over the lazy dog.

873 |

The quick brown fox jumps over the lazy dog.

874 |

The quick brown fox jumps over the lazy dog.

875 |

The quick brown fox jumps over the lazy dog.

876 |

The quick brown fox jumps over the lazy dog.

877 |

The quick brown fox jumps over the lazy dog.

878 |

The quick brown fox jumps over the lazy dog.

879 |
880 |
881 |
882 |

Cerebri Sans Pro Regular

883 |
.your-style {
884 |     font-family: 'Cerebri Sans Pro';
885 |     font-weight: normal;
886 |     font-style: normal;
887 | }
888 |
889 |

890 | abcdefghijklmnopqrstuvwxyz
891 | ABCDEFGHIJKLMNOPQRSTUVWXYZ
892 | 0123456789.:,;()*!?'@#<>$%&^+-=~ 893 |

894 |

The quick brown fox jumps over the lazy dog.

895 |

The quick brown fox jumps over the lazy dog.

896 |

The quick brown fox jumps over the lazy dog.

897 |

The quick brown fox jumps over the lazy dog.

898 |

The quick brown fox jumps over the lazy dog.

899 |

The quick brown fox jumps over the lazy dog.

900 |

The quick brown fox jumps over the lazy dog.

901 |

The quick brown fox jumps over the lazy dog.

902 |

The quick brown fox jumps over the lazy dog.

903 |

The quick brown fox jumps over the lazy dog.

904 |

The quick brown fox jumps over the lazy dog.

905 |
906 |
907 |
908 | 909 | -------------------------------------------------------------------------------- /assets/font/stylesheet.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Cerebri Sans Pro'; 3 | src: url('CerebriSansPro-BoldItalic.woff2') format('woff2'), 4 | url('CerebriSansPro-BoldItalic.woff') format('woff'); 5 | font-weight: bold; 6 | font-style: italic; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: 'Cerebri Sans Pro'; 12 | src: url('CerebriSansPro-Bold.woff2') format('woff2'), 13 | url('CerebriSansPro-Bold.woff') format('woff'); 14 | font-weight: bold; 15 | font-style: normal; 16 | font-display: swap; 17 | } 18 | 19 | @font-face { 20 | font-family: 'Cerebri Sans Pro'; 21 | src: url('CerebriSansPro-Bold.woff2') format('woff2'), 22 | url('CerebriSansPro-Bold.woff') format('woff'); 23 | font-weight: bold; 24 | font-style: normal; 25 | font-display: swap; 26 | } 27 | 28 | @font-face { 29 | font-family: 'Cerebri Sans Pro'; 30 | src: url('CerebriSansPro-ExtraBold.woff2') format('woff2'), 31 | url('CerebriSansPro-ExtraBold.woff') format('woff'); 32 | font-weight: 800; 33 | font-style: normal; 34 | font-display: swap; 35 | } 36 | 37 | @font-face { 38 | font-family: 'Cerebri Sans Pro'; 39 | src: url('CerebriSansPro-BoldItalic.woff2') format('woff2'), 40 | url('CerebriSansPro-BoldItalic.woff') format('woff'); 41 | font-weight: bold; 42 | font-style: italic; 43 | font-display: swap; 44 | } 45 | 46 | @font-face { 47 | font-family: 'Cerebri Sans Pro'; 48 | src: url('CerebriSansPro-ExtraBold.woff2') format('woff2'), 49 | url('CerebriSansPro-ExtraBold.woff') format('woff'); 50 | font-weight: 800; 51 | font-style: normal; 52 | font-display: swap; 53 | } 54 | 55 | @font-face { 56 | font-family: 'Cerebri Sans Pro'; 57 | src: url('CerebriSansPro-ExtraBoldItalic.woff2') format('woff2'), 58 | url('CerebriSansPro-ExtraBoldItalic.woff') format('woff'); 59 | font-weight: 800; 60 | font-style: italic; 61 | font-display: swap; 62 | } 63 | 64 | @font-face { 65 | font-family: 'Cerebri Sans Pro ExBold'; 66 | src: url('CerebriSansPro-ExtraBoldItalic.woff2') format('woff2'), 67 | url('CerebriSansPro-ExtraBoldItalic.woff') format('woff'); 68 | font-weight: 800; 69 | font-style: italic; 70 | font-display: swap; 71 | } 72 | 73 | @font-face { 74 | font-family: 'Cerebri Sans Pro'; 75 | src: url('CerebriSansPro-ExtraLight.woff2') format('woff2'), 76 | url('CerebriSansPro-ExtraLight.woff') format('woff'); 77 | font-weight: 200; 78 | font-style: normal; 79 | font-display: swap; 80 | } 81 | 82 | @font-face { 83 | font-family: 'Cerebri Sans Pro'; 84 | src: url('CerebriSansPro-ExtraLightItalic.woff2') format('woff2'), 85 | url('CerebriSansPro-ExtraLightItalic.woff') format('woff'); 86 | font-weight: 200; 87 | font-style: italic; 88 | font-display: swap; 89 | } 90 | 91 | @font-face { 92 | font-family: 'Cerebri Sans Pro'; 93 | src: url('CerebriSansPro-ExtraLight.woff2') format('woff2'), 94 | url('CerebriSansPro-ExtraLight.woff') format('woff'); 95 | font-weight: 200; 96 | font-style: normal; 97 | font-display: swap; 98 | } 99 | 100 | @font-face { 101 | font-family: 'Cerebri Sans Pro'; 102 | src: url('CerebriSansPro-Heavy.woff2') format('woff2'), 103 | url('CerebriSansPro-Heavy.woff') format('woff'); 104 | font-weight: 900; 105 | font-style: normal; 106 | font-display: swap; 107 | } 108 | 109 | @font-face { 110 | font-family: 'Cerebri Sans Pro ExLight'; 111 | src: url('CerebriSansPro-ExtraLightItalic.woff2') format('woff2'), 112 | url('CerebriSansPro-ExtraLightItalic.woff') format('woff'); 113 | font-weight: 200; 114 | font-style: italic; 115 | font-display: swap; 116 | } 117 | 118 | @font-face { 119 | font-family: 'Cerebri Sans Pro'; 120 | src: url('CerebriSansPro-Heavy.woff2') format('woff2'), 121 | url('CerebriSansPro-Heavy.woff') format('woff'); 122 | font-weight: 900; 123 | font-style: normal; 124 | font-display: swap; 125 | } 126 | 127 | @font-face { 128 | font-family: 'Cerebri Sans Pro'; 129 | src: url('CerebriSansPro-HeavyItalic.woff2') format('woff2'), 130 | url('CerebriSansPro-HeavyItalic.woff') format('woff'); 131 | font-weight: 900; 132 | font-style: italic; 133 | font-display: swap; 134 | } 135 | 136 | @font-face { 137 | font-family: 'Cerebri Sans Pro'; 138 | src: url('CerebriSansPro-Italic.woff2') format('woff2'), 139 | url('CerebriSansPro-Italic.woff') format('woff'); 140 | font-weight: normal; 141 | font-style: italic; 142 | font-display: swap; 143 | } 144 | 145 | @font-face { 146 | font-family: 'Cerebri Sans Pro'; 147 | src: url('CerebriSansPro-HeavyItalic.woff2') format('woff2'), 148 | url('CerebriSansPro-HeavyItalic.woff') format('woff'); 149 | font-weight: 900; 150 | font-style: italic; 151 | font-display: swap; 152 | } 153 | 154 | @font-face { 155 | font-family: 'Cerebri Sans Pro'; 156 | src: url('CerebriSansPro-Light.woff2') format('woff2'), 157 | url('CerebriSansPro-Light.woff') format('woff'); 158 | font-weight: 300; 159 | font-style: normal; 160 | font-display: swap; 161 | } 162 | 163 | @font-face { 164 | font-family: 'Cerebri Sans Pro'; 165 | src: url('CerebriSansPro-Italic.woff2') format('woff2'), 166 | url('CerebriSansPro-Italic.woff') format('woff'); 167 | font-weight: normal; 168 | font-style: italic; 169 | font-display: swap; 170 | } 171 | 172 | @font-face { 173 | font-family: 'Cerebri Sans Pro'; 174 | src: url('CerebriSansPro-LightItalic.woff2') format('woff2'), 175 | url('CerebriSansPro-LightItalic.woff') format('woff'); 176 | font-weight: 300; 177 | font-style: italic; 178 | font-display: swap; 179 | } 180 | 181 | @font-face { 182 | font-family: 'Cerebri Sans Pro'; 183 | src: url('CerebriSansPro-Light.woff2') format('woff2'), 184 | url('CerebriSansPro-Light.woff') format('woff'); 185 | font-weight: 300; 186 | font-style: normal; 187 | font-display: swap; 188 | } 189 | 190 | @font-face { 191 | font-family: 'Cerebri Sans Pro'; 192 | src: url('CerebriSansPro-Medium.woff2') format('woff2'), 193 | url('CerebriSansPro-Medium.woff') format('woff'); 194 | font-weight: 500; 195 | font-style: normal; 196 | font-display: swap; 197 | } 198 | 199 | @font-face { 200 | font-family: 'Cerebri Sans Pro'; 201 | src: url('CerebriSansPro-MediumItalic.woff2') format('woff2'), 202 | url('CerebriSansPro-MediumItalic.woff') format('woff'); 203 | font-weight: 500; 204 | font-style: italic; 205 | font-display: swap; 206 | } 207 | 208 | @font-face { 209 | font-family: 'Cerebri Sans Pro'; 210 | src: url('CerebriSansPro-LightItalic.woff2') format('woff2'), 211 | url('CerebriSansPro-LightItalic.woff') format('woff'); 212 | font-weight: 300; 213 | font-style: italic; 214 | font-display: swap; 215 | } 216 | 217 | @font-face { 218 | font-family: 'Cerebri Sans Pro'; 219 | src: url('CerebriSansPro-Regular.woff2') format('woff2'), 220 | url('CerebriSansPro-Regular.woff') format('woff'); 221 | font-weight: normal; 222 | font-style: normal; 223 | font-display: swap; 224 | } 225 | 226 | @font-face { 227 | font-family: 'Cerebri Sans Pro'; 228 | src: url('CerebriSansPro-Medium.woff2') format('woff2'), 229 | url('CerebriSansPro-Medium.woff') format('woff'); 230 | font-weight: 500; 231 | font-style: normal; 232 | font-display: swap; 233 | } 234 | 235 | @font-face { 236 | font-family: 'Cerebri Sans Pro'; 237 | src: url('CerebriSansPro-MediumItalic.woff2') format('woff2'), 238 | url('CerebriSansPro-MediumItalic.woff') format('woff'); 239 | font-weight: 500; 240 | font-style: italic; 241 | font-display: swap; 242 | } 243 | 244 | @font-face { 245 | font-family: 'Cerebri Sans Pro'; 246 | src: url('CerebriSansPro-Regular.woff2') format('woff2'), 247 | url('CerebriSansPro-Regular.woff') format('woff'); 248 | font-weight: normal; 249 | font-style: normal; 250 | font-display: swap; 251 | } 252 | 253 | -------------------------------------------------------------------------------- /assets/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/images/.DS_Store -------------------------------------------------------------------------------- /assets/images/dog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/images/dog.png -------------------------------------------------------------------------------- /assets/images/girl-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/images/girl-3.png -------------------------------------------------------------------------------- /assets/images/girl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/images/girl.png -------------------------------------------------------------------------------- /assets/images/hand-and-phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/images/hand-and-phone.png -------------------------------------------------------------------------------- /assets/images/hand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/images/hand.png -------------------------------------------------------------------------------- /assets/images/man-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/images/man-2.png -------------------------------------------------------------------------------- /assets/images/man-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/images/man-3.png -------------------------------------------------------------------------------- /assets/images/man.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/assets/images/man.png -------------------------------------------------------------------------------- /assets/svg/bell.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/svg/lines.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /css/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin mobile { 2 | @media (max-width: 600px) { 3 | @content; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | -webkit-box-sizing: border-box; 5 | box-sizing: border-box; 6 | text-decoration: none; 7 | } 8 | 9 | body { 10 | background: #020e18; 11 | overflow: hidden; 12 | color: #fff; 13 | font-size: 16px; 14 | font-family: "Cerebri Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 15 | } 16 | 17 | @media (max-width: 600px) { 18 | body { 19 | background: linear-gradient(45deg, #05111c, #071827); 20 | min-height: 100vh; 21 | } 22 | } 23 | 24 | a { 25 | color: inherit; 26 | } 27 | 28 | a:hover { 29 | color: #17bd70; 30 | } 31 | 32 | main { 33 | position: relative; 34 | width: 100vw; 35 | height: 100vh; 36 | } 37 | 38 | @media (max-width: 600px) { 39 | main { 40 | display: none; 41 | } 42 | } 43 | 44 | ._mobile_message { 45 | display: none; 46 | } 47 | 48 | @media (max-width: 600px) { 49 | ._mobile_message { 50 | padding: 80px 20px; 51 | display: block; 52 | line-height: 1.7; 53 | } 54 | } 55 | 56 | .line_bg { 57 | will-change: transform; 58 | height: 150vh; 59 | top: -250px; 60 | left: -460px; 61 | position: fixed; 62 | } 63 | 64 | ._project { 65 | position: absolute; 66 | top: 0; 67 | left: 50%; 68 | -webkit-transform: translate(-50%, 0); 69 | transform: translate(-50%, 0); 70 | pointer-events: none; 71 | max-width: 1270px; 72 | height: 100vh; 73 | width: 100%; 74 | display: -webkit-box; 75 | display: -ms-flexbox; 76 | display: flex; 77 | -webkit-box-align: center; 78 | -ms-flex-align: center; 79 | align-items: center; 80 | -webkit-box-pack: center; 81 | -ms-flex-pack: center; 82 | justify-content: center; 83 | padding-right: 60px; 84 | padding-left: 60px; 85 | } 86 | 87 | ._project .text_holder, 88 | ._project .image_holder { 89 | -webkit-box-flex: 1; 90 | -ms-flex: 1; 91 | flex: 1; 92 | } 93 | 94 | ._project .animated_down__wrapper { 95 | overflow: hidden; 96 | height: -webkit-fit-content; 97 | height: -moz-fit-content; 98 | height: fit-content; 99 | } 100 | 101 | ._project .animated_down { 102 | opacity: 0; 103 | -webkit-transform: translate(0, 90%); 104 | transform: translate(0, 90%); 105 | -webkit-transition: 0.5s ease; 106 | transition: 0.5s ease; 107 | display: block; 108 | will-change: transform opacity; 109 | -webkit-transition-delay: 0.6s; 110 | transition-delay: 0.6s; 111 | } 112 | 113 | ._project.active { 114 | pointer-events: unset; 115 | } 116 | 117 | ._project.active .animated_down { 118 | opacity: 1; 119 | -webkit-transform: translate(0, 0) !important; 120 | transform: translate(0, 0) !important; 121 | -webkit-transition-delay: 1.1s; 122 | transition-delay: 1.1s; 123 | } 124 | 125 | ._project h1 { 126 | font-size: 50px; 127 | margin-bottom: 10px; 128 | } 129 | 130 | ._project .text_holder ._description { 131 | line-height: 2.3; 132 | margin-top: 30px; 133 | font-size: 18px; 134 | max-width: 400px; 135 | -webkit-transform: translate(0, 40px); 136 | transform: translate(0, 40px); 137 | color: #ffffffaf; 138 | } 139 | 140 | ._project .image_holder { 141 | height: 500px; 142 | -webkit-transform: translate(0, 100px); 143 | transform: translate(0, 100px); 144 | display: -webkit-box; 145 | display: -ms-flexbox; 146 | display: flex; 147 | -webkit-box-align: center; 148 | -ms-flex-align: center; 149 | align-items: center; 150 | } 151 | 152 | ._navigation_bar { 153 | max-width: 1270px; 154 | position: fixed; 155 | width: 100%; 156 | left: 50%; 157 | -webkit-transform: translate(-50%, 0); 158 | transform: translate(-50%, 0); 159 | padding-right: 60px; 160 | padding-left: 60px; 161 | padding-top: 50px; 162 | display: -webkit-box; 163 | display: -ms-flexbox; 164 | display: flex; 165 | -webkit-box-align: center; 166 | -ms-flex-align: center; 167 | align-items: center; 168 | -webkit-box-pack: justify; 169 | -ms-flex-pack: justify; 170 | justify-content: space-between; 171 | z-index: 10; 172 | } 173 | 174 | ._navigation_bar .logo { 175 | font-weight: 600; 176 | font-style: italic; 177 | font-size: 22px; 178 | } 179 | 180 | ._navigation_bar p { 181 | font-weight: 700; 182 | font-style: italic; 183 | } 184 | 185 | ._navigation_bar ._faint { 186 | opacity: 0.8; 187 | } 188 | 189 | ._footer { 190 | position: fixed; 191 | bottom: 50px; 192 | max-width: 1270px; 193 | display: -webkit-box; 194 | display: -ms-flexbox; 195 | display: flex; 196 | -webkit-box-align: center; 197 | -ms-flex-align: center; 198 | align-items: center; 199 | -webkit-box-pack: justify; 200 | -ms-flex-pack: justify; 201 | justify-content: space-between; 202 | width: 100%; 203 | left: 50%; 204 | -webkit-transform: translate(-50%, 0); 205 | transform: translate(-50%, 0); 206 | padding-right: 60px; 207 | padding-left: 60px; 208 | } 209 | 210 | ._footer .track { 211 | position: absolute; 212 | width: calc(100% - 120px); 213 | height: 2px; 214 | background: #ffffff27; 215 | } 216 | 217 | ._footer .track .thumb { 218 | display: block; 219 | position: absolute; 220 | width: 0%; 221 | height: 100%; 222 | background: rgba(23, 189, 112, 0.397); 223 | -webkit-transition: 1s ease-out; 224 | transition: 1s ease-out; 225 | will-change: width; 226 | } 227 | 228 | ._footer ._num { 229 | background: #17bd70; 230 | -webkit-box-shadow: 0 0 0 5px #020e18; 231 | box-shadow: 0 0 0 5px #020e18; 232 | height: 8px; 233 | width: 8px; 234 | border-radius: 100vh; 235 | display: -webkit-box; 236 | display: -ms-flexbox; 237 | display: flex; 238 | -webkit-box-align: center; 239 | -ms-flex-align: center; 240 | align-items: center; 241 | -webkit-box-pack: center; 242 | -ms-flex-pack: center; 243 | justify-content: center; 244 | position: relative; 245 | z-index: 1; 246 | font-size: 12px; 247 | position: relative; 248 | color: transparent; 249 | -webkit-transition: 0.5s ease-out; 250 | transition: 0.5s ease-out; 251 | cursor: pointer; 252 | } 253 | 254 | ._footer ._num:after, ._footer ._num::before { 255 | content: ""; 256 | height: 200%; 257 | width: 200%; 258 | position: absolute; 259 | border: 1px solid rgba(23, 189, 112, 0.774); 260 | border-radius: 100vh; 261 | opacity: 0; 262 | -webkit-transition: 0.5s ease-out; 263 | transition: 0.5s ease-out; 264 | } 265 | 266 | ._footer ._num::before { 267 | height: 400%; 268 | width: 400%; 269 | border: 1px solid rgba(23, 189, 112, 0.151); 270 | } 271 | 272 | ._footer ._num.active { 273 | background: #17bd6f; 274 | -webkit-transition-delay: 0.5s; 275 | transition-delay: 0.5s; 276 | margin: 0; 277 | } 278 | 279 | ._footer ._num.active::after, ._footer ._num.active::before { 280 | opacity: 1; 281 | -webkit-transition-delay: 0.6s; 282 | transition-delay: 0.6s; 283 | } 284 | 285 | ._footer ._num.active::before { 286 | opacity: 1; 287 | -webkit-transition-delay: 0.7s; 288 | transition-delay: 0.7s; 289 | } 290 | 291 | .project_one.active .cirs_holder span { 292 | -webkit-transform: scale(0); 293 | transform: scale(0); 294 | opacity: 0; 295 | -webkit-animation-name: bounceIn; 296 | animation-name: bounceIn; 297 | -webkit-animation-duration: 0.5s; 298 | animation-duration: 0.5s; 299 | } 300 | 301 | .project_one.active .cirs_holder span:nth-child(0) { 302 | -webkit-animation-delay: 1.1s; 303 | animation-delay: 1.1s; 304 | } 305 | 306 | .project_one.active .cirs_holder span:nth-child(1) { 307 | -webkit-animation-delay: 1.2s; 308 | animation-delay: 1.2s; 309 | } 310 | 311 | .project_one.active .cirs_holder span:nth-child(2) { 312 | -webkit-animation-delay: 1.3s; 313 | animation-delay: 1.3s; 314 | } 315 | 316 | .project_one.active .cirs_holder span:nth-child(3) { 317 | -webkit-animation-delay: 1.4s; 318 | animation-delay: 1.4s; 319 | } 320 | 321 | .project_one.active .cirs_holder span:nth-child(4) { 322 | -webkit-animation-delay: 1.5s; 323 | animation-delay: 1.5s; 324 | } 325 | 326 | .project_one.active .cirs_holder span:nth-child(5) { 327 | -webkit-animation-delay: 1.6s; 328 | animation-delay: 1.6s; 329 | } 330 | 331 | .cirs_holder { 332 | position: relative; 333 | height: 500px; 334 | width: 500px; 335 | } 336 | 337 | .cirs_holder > span { 338 | width: 100px; 339 | height: 100px; 340 | display: block; 341 | position: absolute; 342 | background-repeat: no-repeat; 343 | background-position: center; 344 | background-size: contain; 345 | -webkit-animation-duration: 0.3s; 346 | animation-duration: 0.3s; 347 | -webkit-animation-fill-mode: forwards; 348 | animation-fill-mode: forwards; 349 | -webkit-animation-name: bounceOut; 350 | animation-name: bounceOut; 351 | } 352 | 353 | .cirs_holder > span:nth-child(0) { 354 | -webkit-animation-delay: 0s; 355 | animation-delay: 0s; 356 | } 357 | 358 | .cirs_holder > span:nth-child(1) { 359 | -webkit-animation-delay: 0.1s; 360 | animation-delay: 0.1s; 361 | } 362 | 363 | .cirs_holder > span:nth-child(2) { 364 | -webkit-animation-delay: 0.2s; 365 | animation-delay: 0.2s; 366 | } 367 | 368 | .cirs_holder > span:nth-child(3) { 369 | -webkit-animation-delay: 0.3s; 370 | animation-delay: 0.3s; 371 | } 372 | 373 | .cirs_holder > span:nth-child(4) { 374 | -webkit-animation-delay: 0.4s; 375 | animation-delay: 0.4s; 376 | } 377 | 378 | .cirs_holder > span:nth-child(5) { 379 | -webkit-animation-delay: 0.5s; 380 | animation-delay: 0.5s; 381 | } 382 | 383 | .cirs_holder > span:nth-child(1) { 384 | top: 40%; 385 | left: 35%; 386 | width: 186px; 387 | height: 186px; 388 | } 389 | 390 | .cirs_holder > span:nth-child(2) { 391 | right: 0; 392 | width: 146px; 393 | height: 146px; 394 | } 395 | 396 | .cirs_holder > span:nth-child(3) { 397 | width: 204px; 398 | height: 204px; 399 | } 400 | 401 | .cirs_holder > span:nth-child(4) { 402 | bottom: 0; 403 | width: 136px; 404 | height: 136px; 405 | } 406 | 407 | .cirs_holder > span:nth-child(5) { 408 | bottom: 0; 409 | right: 0; 410 | width: 126px; 411 | height: 126px; 412 | } 413 | 414 | .project_two.active .image_holder span { 415 | -webkit-transform: scale(0); 416 | transform: scale(0); 417 | opacity: 0; 418 | -webkit-animation-name: bounceIn; 419 | animation-name: bounceIn; 420 | -webkit-animation-duration: 1.5s; 421 | animation-duration: 1.5s; 422 | } 423 | 424 | .project_two.active .image_holder span:nth-child(0) { 425 | height: 0px; 426 | width: 0px; 427 | -webkit-animation-delay: 1.1s; 428 | animation-delay: 1.1s; 429 | } 430 | 431 | .project_two.active .image_holder span:nth-child(1) { 432 | height: 105px; 433 | width: 105px; 434 | -webkit-animation-delay: 1.2s; 435 | animation-delay: 1.2s; 436 | } 437 | 438 | .project_two.active .image_holder span:nth-child(2) { 439 | height: 210px; 440 | width: 210px; 441 | -webkit-animation-delay: 1.3s; 442 | animation-delay: 1.3s; 443 | } 444 | 445 | .project_two.active .image_holder span:nth-child(3) { 446 | height: 315px; 447 | width: 315px; 448 | -webkit-animation-delay: 1.4s; 449 | animation-delay: 1.4s; 450 | } 451 | 452 | .project_two.active .image_holder span:nth-child(4) { 453 | height: 420px; 454 | width: 420px; 455 | -webkit-animation-delay: 1.5s; 456 | animation-delay: 1.5s; 457 | } 458 | 459 | .project_two.active .image_holder span:nth-child(5) { 460 | height: 525px; 461 | width: 525px; 462 | -webkit-animation-delay: 1.6s; 463 | animation-delay: 1.6s; 464 | } 465 | 466 | .project_two.active .image_holder .center_icon { 467 | -webkit-transition-delay: 1.2s; 468 | transition-delay: 1.2s; 469 | -webkit-transform: rotate(0deg) scale(1) !important; 470 | transform: rotate(0deg) scale(1) !important; 471 | opacity: 1 !important; 472 | } 473 | 474 | .project_two .image_holder { 475 | background: linear-gradient(45deg, #05111c, #071827); 476 | height: 550px; 477 | border-radius: 0 50px 0 50px; 478 | position: relative; 479 | display: -webkit-box; 480 | display: -ms-flexbox; 481 | display: flex; 482 | -webkit-box-align: center; 483 | -ms-flex-align: center; 484 | align-items: center; 485 | -webkit-box-pack: center; 486 | -ms-flex-pack: center; 487 | justify-content: center; 488 | border-radius: 100vh 300px 400px 200px; 489 | } 490 | 491 | .project_two .image_holder span { 492 | height: 100px; 493 | width: 100px; 494 | display: block; 495 | border: 2px solid rgba(0, 255, 184, 0.538); 496 | position: absolute; 497 | border-radius: 100vh; 498 | -webkit-animation-duration: 1s; 499 | animation-duration: 1s; 500 | -webkit-animation-fill-mode: forwards; 501 | animation-fill-mode: forwards; 502 | -webkit-animation-name: bounceOut; 503 | animation-name: bounceOut; 504 | } 505 | 506 | .project_two .image_holder span:nth-child(0) { 507 | height: 0px; 508 | width: 0px; 509 | -webkit-animation-delay: 0s; 510 | animation-delay: 0s; 511 | } 512 | 513 | .project_two .image_holder span:nth-child(1) { 514 | height: 105px; 515 | width: 105px; 516 | -webkit-animation-delay: 0.1s; 517 | animation-delay: 0.1s; 518 | } 519 | 520 | .project_two .image_holder span:nth-child(2) { 521 | height: 210px; 522 | width: 210px; 523 | -webkit-animation-delay: 0.2s; 524 | animation-delay: 0.2s; 525 | } 526 | 527 | .project_two .image_holder span:nth-child(3) { 528 | height: 315px; 529 | width: 315px; 530 | -webkit-animation-delay: 0.3s; 531 | animation-delay: 0.3s; 532 | } 533 | 534 | .project_two .image_holder span:nth-child(4) { 535 | height: 420px; 536 | width: 420px; 537 | -webkit-animation-delay: 0.4s; 538 | animation-delay: 0.4s; 539 | } 540 | 541 | .project_two .image_holder span:nth-child(5) { 542 | height: 525px; 543 | width: 525px; 544 | -webkit-animation-delay: 0.5s; 545 | animation-delay: 0.5s; 546 | } 547 | 548 | .project_two .image_holder span:nth-child(2) { 549 | border: 2px solid rgba(0, 255, 184, 0.385); 550 | } 551 | 552 | .project_two .image_holder span:nth-child(3) { 553 | border: 2px solid rgba(0, 255, 184, 0.221); 554 | } 555 | 556 | .project_two .image_holder span:nth-child(4) { 557 | border: 2px solid rgba(0, 255, 184, 0.16); 558 | } 559 | 560 | .project_two .image_holder span:nth-child(5) { 561 | border: 2px solid rgba(0, 255, 184, 0.075); 562 | } 563 | 564 | .project_two .image_holder .center_icon { 565 | height: 54px; 566 | width: 54px; 567 | display: block; 568 | background: #082136; 569 | position: absolute; 570 | border-radius: 100vh; 571 | border: none; 572 | display: -webkit-box; 573 | display: -ms-flexbox; 574 | display: flex; 575 | -webkit-box-align: center; 576 | -ms-flex-align: center; 577 | align-items: center; 578 | -webkit-box-pack: center; 579 | -ms-flex-pack: center; 580 | justify-content: center; 581 | -webkit-animation-name: none !important; 582 | animation-name: none !important; 583 | -webkit-transform: rotate(45deg) scale(1) !important; 584 | transform: rotate(45deg) scale(1) !important; 585 | opacity: 0 !important; 586 | -webkit-transition: 0.3s ease-out; 587 | transition: 0.3s ease-out; 588 | } 589 | 590 | .project_two .image_holder .center_icon img { 591 | height: 28px; 592 | width: 28px; 593 | } 594 | 595 | .project_three.active .image_holder ._phone, 596 | .project_four.active .image_holder ._phone, 597 | .project_six.active .image_holder ._phone { 598 | -webkit-transform: rotate(45deg); 599 | transform: rotate(45deg); 600 | opacity: 0; 601 | -webkit-animation-name: rotateIn; 602 | animation-name: rotateIn; 603 | -webkit-animation-duration: 0.5s; 604 | animation-duration: 0.5s; 605 | -webkit-animation-delay: 1.1s; 606 | animation-delay: 1.1s; 607 | } 608 | 609 | .project_three ._bg, 610 | .project_four ._bg, 611 | .project_six ._bg { 612 | background: linear-gradient(20deg, #05111c, #071827); 613 | height: 100%; 614 | width: 100%; 615 | border-radius: 100vh 300px 400px 200px; 616 | position: absolute; 617 | display: -webkit-box; 618 | display: -ms-flexbox; 619 | display: flex; 620 | -webkit-box-align: end; 621 | -ms-flex-align: end; 622 | align-items: flex-end; 623 | -webkit-box-pack: center; 624 | -ms-flex-pack: center; 625 | justify-content: center; 626 | overflow: visible; 627 | } 628 | 629 | .project_three .image_holder, 630 | .project_four .image_holder, 631 | .project_six .image_holder { 632 | height: 550px; 633 | display: -webkit-box; 634 | display: -ms-flexbox; 635 | display: flex; 636 | -webkit-box-align: end; 637 | -ms-flex-align: end; 638 | align-items: flex-end; 639 | -webkit-box-pack: center; 640 | -ms-flex-pack: center; 641 | justify-content: center; 642 | } 643 | 644 | .project_three .image_holder ._phone, 645 | .project_four .image_holder ._phone, 646 | .project_six .image_holder ._phone { 647 | bottom: 0; 648 | width: 110%; 649 | position: relative; 650 | z-index: 1; 651 | margin-bottom: -50px; 652 | -webkit-animation-duration: 0.3s; 653 | animation-duration: 0.3s; 654 | -webkit-animation-fill-mode: forwards; 655 | animation-fill-mode: forwards; 656 | -webkit-animation-name: rotateOut; 657 | animation-name: rotateOut; 658 | -webkit-animation-delay: 0.6s; 659 | animation-delay: 0.6s; 660 | } 661 | 662 | .project_five { 663 | text-align: center; 664 | -webkit-box-pack: center; 665 | -ms-flex-pack: center; 666 | justify-content: center; 667 | position: relative; 668 | } 669 | 670 | .project_five.active ._react_bg { 671 | width: 0%; 672 | -webkit-animation-name: open; 673 | animation-name: open; 674 | -webkit-animation-delay: 1.5s; 675 | animation-delay: 1.5s; 676 | } 677 | 678 | .project_five ._description { 679 | margin-right: auto; 680 | margin-left: auto; 681 | } 682 | 683 | .project_five .text_holder { 684 | position: relative; 685 | z-index: 1; 686 | } 687 | 688 | .project_five .image_holder { 689 | position: absolute; 690 | height: 100%; 691 | width: 100%; 692 | display: -webkit-box; 693 | display: -ms-flexbox; 694 | display: flex; 695 | -webkit-box-pack: center; 696 | -ms-flex-pack: center; 697 | justify-content: center; 698 | } 699 | 700 | .project_five ._react_bg { 701 | height: 100%; 702 | width: 100%; 703 | max-width: 900px; 704 | background: linear-gradient(45deg, #05111c, #071827); 705 | height: 400px; 706 | -webkit-animation-duration: 0.7s; 707 | animation-duration: 0.7s; 708 | -webkit-animation-fill-mode: forwards; 709 | animation-fill-mode: forwards; 710 | -webkit-animation-name: close; 711 | animation-name: close; 712 | border-radius: 10px; 713 | } 714 | 715 | @-webkit-keyframes rotateIn { 716 | 0% { 717 | -webkit-transform: rotate(20deg); 718 | transform: rotate(20deg); 719 | opacity: 0; 720 | } 721 | 100% { 722 | -webkit-transform: rotate(0); 723 | transform: rotate(0); 724 | opacity: 1; 725 | } 726 | } 727 | 728 | @keyframes rotateIn { 729 | 0% { 730 | -webkit-transform: rotate(20deg); 731 | transform: rotate(20deg); 732 | opacity: 0; 733 | } 734 | 100% { 735 | -webkit-transform: rotate(0); 736 | transform: rotate(0); 737 | opacity: 1; 738 | } 739 | } 740 | 741 | @-webkit-keyframes rotateOut { 742 | 0% { 743 | -webkit-transform: rotate(0); 744 | transform: rotate(0); 745 | opacity: 1; 746 | } 747 | 100% { 748 | -webkit-transform: rotate(20deg); 749 | transform: rotate(20deg); 750 | opacity: 0; 751 | } 752 | } 753 | 754 | @keyframes rotateOut { 755 | 0% { 756 | -webkit-transform: rotate(0); 757 | transform: rotate(0); 758 | opacity: 1; 759 | } 760 | 100% { 761 | -webkit-transform: rotate(20deg); 762 | transform: rotate(20deg); 763 | opacity: 0; 764 | } 765 | } 766 | 767 | @-webkit-keyframes close { 768 | 0% { 769 | width: 100%; 770 | } 771 | 100% { 772 | width: 0%; 773 | } 774 | } 775 | 776 | @keyframes close { 777 | 0% { 778 | width: 100%; 779 | } 780 | 100% { 781 | width: 0%; 782 | } 783 | } 784 | 785 | @-webkit-keyframes open { 786 | 0% { 787 | width: 0%; 788 | } 789 | 100% { 790 | width: 100%; 791 | } 792 | } 793 | 794 | @keyframes open { 795 | 0% { 796 | width: 0%; 797 | } 798 | 100% { 799 | width: 100%; 800 | } 801 | } 802 | 803 | @-webkit-keyframes bounceIn { 804 | 0% { 805 | -webkit-transform: scale(0); 806 | transform: scale(0); 807 | opacity: 0; 808 | } 809 | 30% { 810 | -webkit-transform: scale(1.3); 811 | transform: scale(1.3); 812 | opacity: 1; 813 | } 814 | 60% { 815 | -webkit-transform: scale(1); 816 | transform: scale(1); 817 | opacity: 1; 818 | } 819 | 80% { 820 | -webkit-transform: scale(1.1); 821 | transform: scale(1.1); 822 | opacity: 1; 823 | } 824 | 100% { 825 | -webkit-transform: scale(1); 826 | transform: scale(1); 827 | opacity: 1; 828 | } 829 | } 830 | 831 | @keyframes bounceIn { 832 | 0% { 833 | -webkit-transform: scale(0); 834 | transform: scale(0); 835 | opacity: 0; 836 | } 837 | 30% { 838 | -webkit-transform: scale(1.3); 839 | transform: scale(1.3); 840 | opacity: 1; 841 | } 842 | 60% { 843 | -webkit-transform: scale(1); 844 | transform: scale(1); 845 | opacity: 1; 846 | } 847 | 80% { 848 | -webkit-transform: scale(1.1); 849 | transform: scale(1.1); 850 | opacity: 1; 851 | } 852 | 100% { 853 | -webkit-transform: scale(1); 854 | transform: scale(1); 855 | opacity: 1; 856 | } 857 | } 858 | 859 | @-webkit-keyframes bounceOut { 860 | 0% { 861 | -webkit-transform: scale(1); 862 | transform: scale(1); 863 | opacity: 1; 864 | } 865 | 100% { 866 | -webkit-transform: scale(0); 867 | transform: scale(0); 868 | opacity: 0; 869 | } 870 | } 871 | 872 | @keyframes bounceOut { 873 | 0% { 874 | -webkit-transform: scale(1); 875 | transform: scale(1); 876 | opacity: 1; 877 | } 878 | 100% { 879 | -webkit-transform: scale(0); 880 | transform: scale(0); 881 | opacity: 0; 882 | } 883 | } 884 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /css/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAEA,AAAA,CAAC,CAAC;EACA,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;EACtB,eAAe,EAAE,IAAI;CACtB;;AAED,AAAA,IAAI,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,MAAM;EAChB,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,+IACiE;CAM/E;;ACpBC,MAAM,EAAE,SAAS,EAAE,KAAK;EDQ1B,AAAA,IAAI,CAAC;IASD,UAAU,EAAE,wCAAwC;IACpD,UAAU,EAAE,KAAK;GAEpB;;;AAED,AAAA,CAAC,CAAC;EACA,KAAK,EAAE,OAAO;CAIf;;AALD,AAEE,CAFD,AAEE,MAAM,CAAC;EACN,KAAK,EAAE,OAAO;CACf;;AAGH,AAAA,IAAI,CAAC;EACH,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;CAId;;ACpCC,MAAM,EAAE,SAAS,EAAE,KAAK;ED6B1B,AAAA,IAAI,CAAC;IAKD,OAAO,EAAE,IAAI;GAEhB;;;AAED,AAAA,gBAAgB,CAAC;EACf,OAAO,EAAE,IAAI;CAMd;;AC7CC,MAAM,EAAE,SAAS,EAAE,KAAK;EDsC1B,AAAA,gBAAgB,CAAC;IAGb,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,KAAK;IACd,WAAW,EAAE,GAAG;GAEnB;;;AAED,AAAA,QAAQ,CAAC;EACP,WAAW,EAAE,SAAS;EACtB,MAAM,EAAE,KAAK;EACb,GAAG,EAAE,MAAM;EACX,IAAI,EAAE,MAAM;EACZ,QAAQ,EAAE,KAAK;CAChB;;AAED,AAAA,SAAS,CAAC;EACR,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,kBAAkB;EAC7B,cAAc,EAAE,IAAI;EACpB,SAAS,EAAE,MAAM;EACjB,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,aAAa,EAAE,IAAI;EACnB,YAAY,EAAE,IAAI;CAsDnB;;AAnED,AAeE,SAfO,CAeP,YAAY;AAfd,SAAS,CAgBP,aAAa,CAAC;EACZ,IAAI,EAAE,CAAC;CACR;;AAlBH,AAqBE,SArBO,CAqBP,uBAAuB,CAAC;EACtB,QAAQ,EAAE,MAAM;EAChB,MAAM,EAAE,WAAW;CACpB;;AAxBH,AA0BE,SA1BO,CA0BP,cAAc,CAAC;EACb,OAAO,EAAE,CAAC;EACV,SAAS,EAAE,iBAAiB;EAC5B,UAAU,EAAE,SAAS;EACrB,OAAO,EAAE,KAAK;EACd,WAAW,EAAE,iBAAiB;EAC9B,gBAAgB,EAAE,IAAI;CACvB;;AAjCH,AAmCE,SAnCO,AAmCN,OAAO,CAAC;EACP,cAAc,EAAE,KAAK;CAOtB;;AA3CH,AAsCI,SAtCK,AAmCN,OAAO,CAGN,cAAc,CAAC;EACb,OAAO,EAAE,CAAC;EACV,SAAS,EAAE,eAAe,CAAC,UAAU;EACrC,gBAAgB,EAAE,IAAI;CACvB;;AA1CL,AA8CE,SA9CO,CA8CP,EAAE,CAAC;EACD,SAAS,EAAE,IAAI;EACf,aAAa,EAAE,IAAI;CACpB;;AAjDH,AAoDI,SApDK,CAmDP,YAAY,CACV,aAAa,CAAC;EACZ,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;EAChB,SAAS,EAAE,IAAI;EACf,SAAS,EAAE,KAAK;EAChB,SAAS,EAAE,kBAAkB;EAC7B,KAAK,EAAE,SAAS;CACjB;;AA3DL,AA6DE,SA7DO,CA6DP,aAAa,CAAC;EACZ,MAAM,EAAE,KAAK;EACb,SAAS,EAAE,mBAAmB;EAC9B,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;CACpB;;AAGH,AAAA,gBAAgB,CAAC;EACf,SAAS,EAAE,MAAM;EACjB,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,IAAI;EACX,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,kBAAkB;EAC7B,aAAa,EAAE,IAAI;EACnB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,aAAa;EAC9B,OAAO,EAAE,EAAE;CAcZ;;AA1BD,AAcE,gBAdc,CAcd,KAAK,CAAC;EACJ,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,IAAI;CAChB;;AAlBH,AAmBE,gBAnBc,CAmBd,CAAC,CAAC;EACA,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,MAAM;CACnB;;AAtBH,AAuBE,gBAvBc,CAuBd,OAAO,CAAC;EACN,OAAO,EAAE,GAAG;CACb;;AAGH,AAAA,QAAQ,CAAC;EACP,QAAQ,EAAE,KAAK;EACf,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,MAAM;EACjB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,aAAa;EAE9B,KAAK,EAAE,IAAI;EACX,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,kBAAkB;EAE7B,aAAa,EAAE,IAAI;EACnB,YAAY,EAAE,IAAI;CAqEnB;;AAlFD,AAeE,QAfM,CAeN,MAAM,CAAC;EACL,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,kBAAkB;EACzB,MAAM,EAAE,GAAG;EACX,UAAU,EAAE,SAAS;CAWtB;;AA9BH,AAqBI,QArBI,CAeN,MAAM,CAMJ,MAAM,CAAC;EACL,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,EAAE;EACT,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,yBAAyB;EACrC,UAAU,EAAE,WAAW;EACvB,WAAW,EAAE,KAAK;CACnB;;AA7BL,AA+BE,QA/BM,CA+BN,KAAK,CAAC;EACJ,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,iBAAiB;EAC7B,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,GAAG;EACV,aAAa,EAAE,KAAK;EACpB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,CAAC;EACV,SAAS,EAAE,IAAI;EACf,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,WAAW;EAClB,UAAU,EAAE,aAAa;EACzB,MAAM,EAAE,OAAO;CAmChB;;AAjFH,AAgDI,QAhDI,CA+BN,KAAK,AAiBF,MAAM,EAhDX,QAAQ,CA+BN,KAAK,AAkBF,QAAQ,CAAC;EACR,OAAO,EAAE,EAAE;EACX,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,yBAAyB;EAC3C,aAAa,EAAE,KAAK;EAEpB,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,aAAa;CAC1B;;AA3DL,AA4DI,QA5DI,CA+BN,KAAK,AA6BF,QAAQ,CAAC;EACR,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,yBAAyB;CAC5C;;AAhEL,AAiEI,QAjEI,CA+BN,KAAK,AAkCF,OAAO,CAAC;EACP,UAAU,EAAE,OAAiB;EAC7B,gBAAgB,EAAE,IAAI;EACtB,MAAM,EAAE,CAAC;CAYV;;AAhFL,AAqEM,QArEE,CA+BN,KAAK,AAkCF,OAAO,AAIL,OAAO,EArEd,QAAQ,CA+BN,KAAK,AAkCF,OAAO,AAKL,QAAQ,CAAC;EAER,OAAO,EAAE,CAAC;EACV,gBAAgB,EAAE,IAAI;CACvB;;AA1EP,AA2EM,QA3EE,CA+BN,KAAK,AAkCF,OAAO,AAUL,QAAQ,CAAC;EAER,OAAO,EAAE,CAAC;EACV,gBAAgB,EAAE,IAAI;CACvB;;AAMP,AAGM,YAHM,AACT,OAAO,CACN,YAAY,CACV,IAAI,CAAC;EACH,SAAS,EAAE,QAAQ;EACnB,OAAO,EAAE,CAAC;EAEV,cAAc,EAAE,QAAQ;EACxB,kBAAkB,EAAE,IAAI;CAOzB;;AAfP,AAWU,YAXE,AACT,OAAO,CACN,YAAY,CACV,IAAI,AAQC,UAAW,CAAA,CAAC,EAAM;EACjB,eAAe,EAAE,IAAiB;CACnC;;AAbX,AAWU,YAXE,AACT,OAAO,CACN,YAAY,CACV,IAAI,AAQC,UAAW,CAAA,CAAC,EAAM;EACjB,eAAe,EAAE,IAAiB;CACnC;;AAbX,AAWU,YAXE,AACT,OAAO,CACN,YAAY,CACV,IAAI,AAQC,UAAW,CAAA,CAAC,EAAM;EACjB,eAAe,EAAE,IAAiB;CACnC;;AAbX,AAWU,YAXE,AACT,OAAO,CACN,YAAY,CACV,IAAI,AAQC,UAAW,CAAA,CAAC,EAAM;EACjB,eAAe,EAAE,IAAiB;CACnC;;AAbX,AAWU,YAXE,AACT,OAAO,CACN,YAAY,CACV,IAAI,AAQC,UAAW,CAAA,CAAC,EAAM;EACjB,eAAe,EAAE,IAAiB;CACnC;;AAbX,AAWU,YAXE,AACT,OAAO,CACN,YAAY,CACV,IAAI,AAQC,UAAW,CAAA,CAAC,EAAM;EACjB,eAAe,EAAE,IAAiB;CACnC;;AAMX,AAAA,YAAY,CAAC;EACX,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,KAAK;CA8Cb;;AAjDD,AAKE,YALU,GAKR,IAAI,CAAC;EACL,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,QAAQ;EAClB,iBAAiB,EAAE,SAAS;EAC5B,mBAAmB,EAAE,MAAM;EAC3B,eAAe,EAAE,OAAO;EACxB,kBAAkB,EAAE,IAAI;EACxB,mBAAmB,EAAE,QAAQ;EAC7B,cAAc,EAAE,SAAS;CAiC1B;;AAhDH,AAkBM,YAlBM,GAKR,IAAI,AAaD,UAAW,CAAA,CAAC,EAAM;EACjB,eAAe,EAAE,EAAe;CACjC;;AApBP,AAkBM,YAlBM,GAKR,IAAI,AAaD,UAAW,CAAA,CAAC,EAAM;EACjB,eAAe,EAAE,IAAe;CACjC;;AApBP,AAkBM,YAlBM,GAKR,IAAI,AAaD,UAAW,CAAA,CAAC,EAAM;EACjB,eAAe,EAAE,IAAe;CACjC;;AApBP,AAkBM,YAlBM,GAKR,IAAI,AAaD,UAAW,CAAA,CAAC,EAAM;EACjB,eAAe,EAAE,IAAe;CACjC;;AApBP,AAkBM,YAlBM,GAKR,IAAI,AAaD,UAAW,CAAA,CAAC,EAAM;EACjB,eAAe,EAAE,IAAe;CACjC;;AApBP,AAkBM,YAlBM,GAKR,IAAI,AAaD,UAAW,CAAA,CAAC,EAAM;EACjB,eAAe,EAAE,IAAe;CACjC;;AApBP,AAsBI,YAtBQ,GAKR,IAAI,AAiBH,UAAW,CAAA,CAAC,EAAE;EACb,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;CACd;;AA3BL,AA4BI,YA5BQ,GAKR,IAAI,AAuBH,UAAW,CAAA,CAAC,EAAE;EACb,KAAK,EAAE,CAAC;EACR,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;CACd;;AAhCL,AAiCI,YAjCQ,GAKR,IAAI,AA4BH,UAAW,CAAA,CAAC,EAAE;EACb,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;CACd;;AApCL,AAqCI,YArCQ,GAKR,IAAI,AAgCH,UAAW,CAAA,CAAC,EAAE;EACb,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;CACd;;AAzCL,AA0CI,YA1CQ,GAKR,IAAI,AAqCH,UAAW,CAAA,CAAC,EAAE;EACb,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,CAAC;EACR,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;CACd;;AAKL,AAGM,YAHM,AACT,OAAO,CACN,aAAa,CACX,IAAI,CAAC;EACH,SAAS,EAAE,QAAQ;EACnB,OAAO,EAAE,CAAC;EACV,cAAc,EAAE,QAAQ;EACxB,kBAAkB,EAAE,IAAI;CASzB;;AAhBP,AAUU,YAVE,AACT,OAAO,CACN,aAAa,CACX,IAAI,AAOC,UAAW,CAAA,CAAC,EAAM;EACjB,MAAM,EAAE,GAAU;EAClB,KAAK,EAAE,GAAU;EACjB,eAAe,EAAE,IAAiB;CACnC;;AAdX,AAUU,YAVE,AACT,OAAO,CACN,aAAa,CACX,IAAI,AAOC,UAAW,CAAA,CAAC,EAAM;EACjB,MAAM,EAAE,KAAU;EAClB,KAAK,EAAE,KAAU;EACjB,eAAe,EAAE,IAAiB;CACnC;;AAdX,AAUU,YAVE,AACT,OAAO,CACN,aAAa,CACX,IAAI,AAOC,UAAW,CAAA,CAAC,EAAM;EACjB,MAAM,EAAE,KAAU;EAClB,KAAK,EAAE,KAAU;EACjB,eAAe,EAAE,IAAiB;CACnC;;AAdX,AAUU,YAVE,AACT,OAAO,CACN,aAAa,CACX,IAAI,AAOC,UAAW,CAAA,CAAC,EAAM;EACjB,MAAM,EAAE,KAAU;EAClB,KAAK,EAAE,KAAU;EACjB,eAAe,EAAE,IAAiB;CACnC;;AAdX,AAUU,YAVE,AACT,OAAO,CACN,aAAa,CACX,IAAI,AAOC,UAAW,CAAA,CAAC,EAAM;EACjB,MAAM,EAAE,KAAU;EAClB,KAAK,EAAE,KAAU;EACjB,eAAe,EAAE,IAAiB;CACnC;;AAdX,AAUU,YAVE,AACT,OAAO,CACN,aAAa,CACX,IAAI,AAOC,UAAW,CAAA,CAAC,EAAM;EACjB,MAAM,EAAE,KAAU;EAClB,KAAK,EAAE,KAAU;EACjB,eAAe,EAAE,IAAiB;CACnC;;AAdX,AAiBM,YAjBM,AACT,OAAO,CACN,aAAa,CAeX,YAAY,CAAC;EAEX,gBAAgB,EAAE,IAAI;EACtB,SAAS,EAAE,YAAY,CAAC,QAAQ,CAAC,UAAU;EAC3C,OAAO,EAAE,YAAY;CACtB;;AAtBP,AAyBE,YAzBU,CAyBV,aAAa,CAAC;EACZ,UAAU,EAAE,wCAAwC;EACpD,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,aAAa;EAC5B,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,aAAa,EAAE,uBAAuB;CAwDvC;;AAzFH,AAmCI,YAnCQ,CAyBV,aAAa,CAUX,IAAI,CAAC;EACH,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,wBAAwB;EAC1C,QAAQ,EAAE,QAAQ;EAClB,aAAa,EAAE,KAAK;EAEpB,kBAAkB,EAAE,EAAE;EACtB,mBAAmB,EAAE,QAAQ;EAC7B,cAAc,EAAE,SAAS;CAqB1B;;AAlEL,AAgDQ,YAhDI,CAyBV,aAAa,CAUX,IAAI,AAaC,UAAW,CAAA,CAAC,EAAM;EACjB,MAAM,EAAE,GAAU;EAClB,KAAK,EAAE,GAAU;EACjB,eAAe,EAAE,EAAe;CACjC;;AApDT,AAgDQ,YAhDI,CAyBV,aAAa,CAUX,IAAI,AAaC,UAAW,CAAA,CAAC,EAAM;EACjB,MAAM,EAAE,KAAU;EAClB,KAAK,EAAE,KAAU;EACjB,eAAe,EAAE,IAAe;CACjC;;AApDT,AAgDQ,YAhDI,CAyBV,aAAa,CAUX,IAAI,AAaC,UAAW,CAAA,CAAC,EAAM;EACjB,MAAM,EAAE,KAAU;EAClB,KAAK,EAAE,KAAU;EACjB,eAAe,EAAE,IAAe;CACjC;;AApDT,AAgDQ,YAhDI,CAyBV,aAAa,CAUX,IAAI,AAaC,UAAW,CAAA,CAAC,EAAM;EACjB,MAAM,EAAE,KAAU;EAClB,KAAK,EAAE,KAAU;EACjB,eAAe,EAAE,IAAe;CACjC;;AApDT,AAgDQ,YAhDI,CAyBV,aAAa,CAUX,IAAI,AAaC,UAAW,CAAA,CAAC,EAAM;EACjB,MAAM,EAAE,KAAU;EAClB,KAAK,EAAE,KAAU;EACjB,eAAe,EAAE,IAAe;CACjC;;AApDT,AAgDQ,YAhDI,CAyBV,aAAa,CAUX,IAAI,AAaC,UAAW,CAAA,CAAC,EAAM;EACjB,MAAM,EAAE,KAAU;EAClB,KAAK,EAAE,KAAU;EACjB,eAAe,EAAE,IAAe;CACjC;;AApDT,AAsDM,YAtDM,CAyBV,aAAa,CAUX,IAAI,AAmBD,UAAW,CAAA,CAAC,EAAE;EACb,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,wBAAwB;CAC3C;;AAxDP,AAyDM,YAzDM,CAyBV,aAAa,CAUX,IAAI,AAsBD,UAAW,CAAA,CAAC,EAAE;EACb,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,wBAAwB;CAC3C;;AA3DP,AA4DM,YA5DM,CAyBV,aAAa,CAUX,IAAI,AAyBD,UAAW,CAAA,CAAC,EAAE;EACb,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,uBAAuB;CAC1C;;AA9DP,AA+DM,YA/DM,CAyBV,aAAa,CAUX,IAAI,AA4BD,UAAW,CAAA,CAAC,EAAE;EACb,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,wBAAwB;CAC3C;;AAjEP,AAmEI,YAnEQ,CAyBV,aAAa,CA0CX,YAAY,CAAC;EACX,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,KAAK;EACd,UAAU,EAAE,OAAO;EACnB,QAAQ,EAAE,QAAQ;EAClB,aAAa,EAAE,KAAK;EACpB,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,cAAc,EAAE,eAAe;EAE/B,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,UAAU;EAC5C,OAAO,EAAE,YAAY;EAErB,UAAU,EAAE,aAAa;CAK1B;;AAxFL,AAoFM,YApFM,CAyBV,aAAa,CA0CX,YAAY,CAiBV,GAAG,CAAC;EACF,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;CACZ;;AAMP,AAKM,cALQ,AAGX,OAAO,CACN,aAAa,CACX,OAAO;AAJb,aAAa,AAEV,OAAO,CACN,aAAa,CACX,OAAO;AAHb,YAAY,AACT,OAAO,CACN,aAAa,CACX,OAAO,CAAC;EACN,SAAS,EAAE,aAAa;EACxB,OAAO,EAAE,CAAC;EAEV,cAAc,EAAE,QAAQ;EACxB,kBAAkB,EAAE,IAAI;EACxB,eAAe,EAAE,IAAI;CACtB;;AAZP,AAeE,cAfY,CAeZ,IAAI;AAdN,aAAa,CAcX,IAAI;AAbN,YAAY,CAaV,IAAI,CAAC;EACH,UAAU,EAAE,wCAAwC;EACpD,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,uBAAuB;EACtC,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,QAAQ;EACrB,eAAe,EAAE,MAAM;EACvB,QAAQ,EAAE,OAAO;CAClB;;AAzBH,AA0BE,cA1BY,CA0BZ,aAAa;AAzBf,aAAa,CAyBX,aAAa;AAxBf,YAAY,CAwBV,aAAa,CAAC;EACZ,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,QAAQ;EACrB,eAAe,EAAE,MAAM;CAaxB;;AA3CH,AAgCI,cAhCU,CA0BZ,aAAa,CAMX,OAAO;AA/BX,aAAa,CAyBX,aAAa,CAMX,OAAO;AA9BX,YAAY,CAwBV,aAAa,CAMX,OAAO,CAAC;EACN,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,CAAC;EACV,aAAa,EAAE,KAAK;EACpB,kBAAkB,EAAE,IAAI;EACxB,mBAAmB,EAAE,QAAQ;EAC7B,cAAc,EAAE,SAAS;EACzB,eAAe,EAAE,IAAI;CACtB;;AAIL,AAAA,aAAa,CAAC;EACZ,UAAU,EAAE,MAAM;EAClB,eAAe,EAAE,MAAM;EACvB,QAAQ,EAAE,QAAQ;CAsCnB;;AAzCD,AAMI,aANS,AAKV,OAAO,CACN,UAAU,CAAC;EACT,KAAK,EAAE,EAAE;EACT,cAAc,EAAE,IAAI;EACpB,eAAe,EAAE,IAAI;CACtB;;AAVL,AAaE,aAbW,CAaX,aAAa,CAAC;EACZ,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;CAClB;;AAhBH,AAkBE,aAlBW,CAkBX,YAAY,CAAC;EACX,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,CAAC;CACX;;AArBH,AAuBE,aAvBW,CAuBX,aAAa,CAAC;EACZ,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;CACxB;;AA7BH,AA8BE,aA9BW,CA8BX,UAAU,CAAC;EACT,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,wCAAwC;EACpD,MAAM,EAAE,KAAK;EACb,kBAAkB,EAAE,IAAI;EACxB,mBAAmB,EAAE,QAAQ;EAC7B,cAAc,EAAE,KAAK;EACrB,aAAa,EAAE,IAAI;CACpB;;AAGH,UAAU,CAAV,QAAU;EACR,EAAE;IACA,SAAS,EAAE,aAAa;IACxB,OAAO,EAAE,CAAC;;EAEZ,IAAI;IACF,SAAS,EAAE,SAAS;IACpB,OAAO,EAAE,CAAC;;;;AAId,UAAU,CAAV,SAAU;EACR,EAAE;IACA,SAAS,EAAE,SAAS;IACpB,OAAO,EAAE,CAAC;;EAEZ,IAAI;IACF,SAAS,EAAE,aAAa;IACxB,OAAO,EAAE,CAAC;;;;AAId,UAAU,CAAV,KAAU;EACR,EAAE;IACA,KAAK,EAAE,IAAI;;EAEb,IAAI;IACF,KAAK,EAAE,EAAE;;;;AAIb,UAAU,CAAV,IAAU;EACR,EAAE;IACA,KAAK,EAAE,EAAE;;EAEX,IAAI;IACF,KAAK,EAAE,IAAI;;;;AAIf,UAAU,CAAV,QAAU;EACR,EAAE;IACA,SAAS,EAAE,QAAQ;IACnB,OAAO,EAAE,CAAC;;EAEZ,GAAG;IACD,SAAS,EAAE,UAAU;IACrB,OAAO,EAAE,CAAC;;EAEZ,GAAG;IACD,SAAS,EAAE,QAAQ;IACnB,OAAO,EAAE,CAAC;;EAEZ,GAAG;IACD,SAAS,EAAE,UAAU;IACrB,OAAO,EAAE,CAAC;;EAEZ,IAAI;IACF,SAAS,EAAE,QAAQ;IACnB,OAAO,EAAE,CAAC;;;;AAId,UAAU,CAAV,SAAU;EACR,EAAE;IACA,SAAS,EAAE,QAAQ;IACnB,OAAO,EAAE,CAAC;;EAEZ,IAAI;IACF,SAAS,EAAE,QAAQ;IACnB,OAAO,EAAE,CAAC", 4 | "sources": [ 5 | "style.scss", 6 | "_mixins.scss" 7 | ], 8 | "names": [], 9 | "file": "style.css" 10 | } -------------------------------------------------------------------------------- /css/style.scss: -------------------------------------------------------------------------------- 1 | @import "../css/mixins"; 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | text-decoration: none; 8 | } 9 | 10 | body { 11 | background: #020e18; 12 | overflow: hidden; 13 | color: #fff; 14 | font-size: 16px; 15 | font-family: "Cerebri Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", 16 | Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 17 | 18 | @include mobile { 19 | background: linear-gradient(45deg, #05111c, #071827); 20 | min-height: 100vh; 21 | } 22 | } 23 | 24 | a { 25 | color: inherit; 26 | &:hover { 27 | color: #17bd70; 28 | } 29 | } 30 | 31 | main { 32 | position: relative; 33 | width: 100vw; 34 | height: 100vh; 35 | @include mobile { 36 | display: none; 37 | } 38 | } 39 | 40 | ._mobile_message { 41 | display: none; 42 | @include mobile { 43 | padding: 80px 20px; 44 | display: block; 45 | line-height: 1.7; 46 | } 47 | } 48 | 49 | .line_bg { 50 | will-change: transform; 51 | height: 150vh; 52 | top: -250px; 53 | left: -460px; 54 | position: fixed; 55 | } 56 | 57 | ._project { 58 | position: absolute; 59 | top: 0; 60 | left: 50%; 61 | transform: translate(-50%, 0); 62 | pointer-events: none; 63 | max-width: 1270px; 64 | height: 100vh; 65 | width: 100%; 66 | display: flex; 67 | align-items: center; 68 | justify-content: center; 69 | padding-right: 60px; 70 | padding-left: 60px; 71 | 72 | .text_holder, 73 | .image_holder { 74 | flex: 1; 75 | } 76 | 77 | // ------ animtions ------ 78 | .animated_down__wrapper { 79 | overflow: hidden; 80 | height: fit-content; 81 | } 82 | 83 | .animated_down { 84 | opacity: 0; 85 | transform: translate(0, 90%); 86 | transition: 0.5s ease; 87 | display: block; 88 | will-change: transform opacity; 89 | transition-delay: 0.6s; 90 | } 91 | 92 | &.active { 93 | pointer-events: unset; 94 | 95 | .animated_down { 96 | opacity: 1; 97 | transform: translate(0, 0) !important; 98 | transition-delay: 1.1s; 99 | } 100 | } 101 | 102 | // layout 103 | h1 { 104 | font-size: 50px; 105 | margin-bottom: 10px; 106 | } 107 | 108 | .text_holder { 109 | ._description { 110 | line-height: 2.3; 111 | margin-top: 30px; 112 | font-size: 18px; 113 | max-width: 400px; 114 | transform: translate(0, 40px); 115 | color: #ffffffaf; 116 | } 117 | } 118 | .image_holder { 119 | height: 500px; 120 | transform: translate(0, 100px); 121 | display: flex; 122 | align-items: center; 123 | } 124 | } 125 | 126 | ._navigation_bar { 127 | max-width: 1270px; 128 | position: fixed; 129 | width: 100%; 130 | left: 50%; 131 | transform: translate(-50%, 0); 132 | padding-right: 60px; 133 | padding-left: 60px; 134 | padding-top: 50px; 135 | display: flex; 136 | align-items: center; 137 | justify-content: space-between; 138 | z-index: 10; 139 | 140 | .logo { 141 | font-weight: 600; 142 | font-style: italic; 143 | font-size: 22px; 144 | } 145 | p { 146 | font-weight: 700; 147 | font-style: italic; 148 | } 149 | ._faint { 150 | opacity: 0.8; 151 | } 152 | } 153 | 154 | ._footer { 155 | position: fixed; 156 | bottom: 50px; 157 | max-width: 1270px; 158 | display: flex; 159 | align-items: center; 160 | justify-content: space-between; 161 | 162 | width: 100%; 163 | left: 50%; 164 | transform: translate(-50%, 0); 165 | 166 | padding-right: 60px; 167 | padding-left: 60px; 168 | 169 | .track { 170 | position: absolute; 171 | width: calc(100% - 120px); 172 | height: 2px; 173 | background: #ffffff27; 174 | 175 | .thumb { 176 | display: block; 177 | position: absolute; 178 | width: 0%; 179 | height: 100%; 180 | background: rgba(23, 189, 112, 0.397); 181 | transition: 1s ease-out; 182 | will-change: width; 183 | } 184 | } 185 | ._num { 186 | background: #17bd70; 187 | box-shadow: 0 0 0 5px #020e18; 188 | height: 8px; 189 | width: 8px; 190 | border-radius: 100vh; 191 | display: flex; 192 | align-items: center; 193 | justify-content: center; 194 | position: relative; 195 | z-index: 1; 196 | font-size: 12px; 197 | position: relative; 198 | color: transparent; 199 | transition: 0.5s ease-out; 200 | cursor: pointer; 201 | 202 | &:after, 203 | &::before { 204 | content: ""; 205 | height: 200%; 206 | width: 200%; 207 | position: absolute; 208 | border: 1px solid rgba(23, 189, 112, 0.774); 209 | border-radius: 100vh; 210 | //hide 211 | opacity: 0; 212 | transition: 0.5s ease-out; 213 | } 214 | &::before { 215 | height: 400%; 216 | width: 400%; 217 | border: 1px solid rgba(23, 189, 112, 0.151); 218 | } 219 | &.active { 220 | background: rgb(23, 189, 111); 221 | transition-delay: 0.5s; 222 | margin: 0; 223 | &::after, 224 | &::before { 225 | // show 226 | opacity: 1; 227 | transition-delay: 0.6s; 228 | } 229 | &::before { 230 | // show 231 | opacity: 1; 232 | transition-delay: 0.7s; 233 | } 234 | } 235 | } 236 | } 237 | 238 | //project one animation 239 | .project_one { 240 | &.active { 241 | .cirs_holder { 242 | span { 243 | transform: scale(0); 244 | opacity: 0; 245 | //show 246 | animation-name: bounceIn; 247 | animation-duration: 0.5s; 248 | 249 | @for $i from 0 through 5 { 250 | &:nth-child(#{$i}) { 251 | animation-delay: ($i * 0.1) + 1.1s; 252 | } 253 | } 254 | } 255 | } 256 | } 257 | } 258 | .cirs_holder { 259 | position: relative; 260 | height: 500px; 261 | width: 500px; 262 | 263 | > span { 264 | width: 100px; 265 | height: 100px; 266 | display: block; 267 | position: absolute; 268 | background-repeat: no-repeat; 269 | background-position: center; 270 | background-size: contain; 271 | animation-duration: 0.3s; 272 | animation-fill-mode: forwards; 273 | animation-name: bounceOut; 274 | 275 | @for $i from 0 through 5 { 276 | &:nth-child(#{$i}) { 277 | animation-delay: ($i * 0.1) + 0s; 278 | } 279 | } 280 | &:nth-child(1) { 281 | top: 40%; 282 | left: 35%; 283 | width: 186px; 284 | height: 186px; 285 | } 286 | &:nth-child(2) { 287 | right: 0; 288 | width: 146px; 289 | height: 146px; 290 | } 291 | &:nth-child(3) { 292 | width: 204px; 293 | height: 204px; 294 | } 295 | &:nth-child(4) { 296 | bottom: 0; 297 | width: 136px; 298 | height: 136px; 299 | } 300 | &:nth-child(5) { 301 | bottom: 0; 302 | right: 0; 303 | width: 126px; 304 | height: 126px; 305 | } 306 | } 307 | } 308 | 309 | //project two animation 310 | .project_two { 311 | &.active { 312 | .image_holder { 313 | span { 314 | transform: scale(0); 315 | opacity: 0; 316 | animation-name: bounceIn; 317 | animation-duration: 1.5s; 318 | 319 | @for $i from 0 through 5 { 320 | &:nth-child(#{$i}) { 321 | height: $i * 105px; 322 | width: $i * 105px; 323 | animation-delay: ($i * 0.1) + 1.1s; 324 | } 325 | } 326 | } 327 | .center_icon { 328 | // transform: rotate(0); 329 | transition-delay: 1.2s; 330 | transform: rotate(0deg) scale(1) !important; 331 | opacity: 1 !important; 332 | } 333 | } 334 | } 335 | .image_holder { 336 | background: linear-gradient(45deg, #05111c, #071827); 337 | height: 550px; 338 | border-radius: 0 50px 0 50px; 339 | position: relative; 340 | display: flex; 341 | align-items: center; 342 | justify-content: center; 343 | border-radius: 100vh 300px 400px 200px; 344 | 345 | span { 346 | height: 100px; 347 | width: 100px; 348 | display: block; 349 | border: 2px solid rgba(0, 255, 184, 0.538); 350 | position: absolute; 351 | border-radius: 100vh; 352 | 353 | animation-duration: 1s; 354 | animation-fill-mode: forwards; 355 | animation-name: bounceOut; 356 | 357 | @for $i from 0 through 5 { 358 | &:nth-child(#{$i}) { 359 | height: $i * 105px; 360 | width: $i * 105px; 361 | animation-delay: ($i * 0.1) + 0s; 362 | } 363 | } 364 | &:nth-child(2) { 365 | border: 2px solid rgba(0, 255, 184, 0.385); 366 | } 367 | &:nth-child(3) { 368 | border: 2px solid rgba(0, 255, 184, 0.221); 369 | } 370 | &:nth-child(4) { 371 | border: 2px solid rgba(0, 255, 184, 0.16); 372 | } 373 | &:nth-child(5) { 374 | border: 2px solid rgba(0, 255, 184, 0.075); 375 | } 376 | } 377 | .center_icon { 378 | height: 54px; 379 | width: 54px; 380 | display: block; 381 | background: #082136; 382 | position: absolute; 383 | border-radius: 100vh; 384 | border: none; 385 | display: flex; 386 | align-items: center; 387 | justify-content: center; 388 | animation-name: none !important; 389 | 390 | transform: rotate(45deg) scale(1) !important; 391 | opacity: 0 !important; 392 | 393 | transition: 0.3s ease-out; 394 | img { 395 | height: 28px; 396 | width: 28px; 397 | } 398 | } 399 | } 400 | } 401 | 402 | //project three animation 403 | .project_three, 404 | .project_four, 405 | .project_six { 406 | &.active { 407 | .image_holder { 408 | ._phone { 409 | transform: rotate(45deg); 410 | opacity: 0; 411 | //show 412 | animation-name: rotateIn; 413 | animation-duration: 0.5s; 414 | animation-delay: 1.1s; 415 | } 416 | } 417 | } 418 | ._bg { 419 | background: linear-gradient(20deg, #05111c, #071827); 420 | height: 100%; 421 | width: 100%; 422 | border-radius: 100vh 300px 400px 200px; 423 | position: absolute; 424 | display: flex; 425 | align-items: flex-end; 426 | justify-content: center; 427 | overflow: visible; 428 | } 429 | .image_holder { 430 | height: 550px; 431 | display: flex; 432 | align-items: flex-end; 433 | justify-content: center; 434 | 435 | ._phone { 436 | bottom: 0; 437 | width: 110%; 438 | position: relative; 439 | z-index: 1; 440 | margin-bottom: -50px; 441 | animation-duration: 0.3s; 442 | animation-fill-mode: forwards; 443 | animation-name: rotateOut; 444 | animation-delay: 0.6s; 445 | } 446 | } 447 | } 448 | 449 | .project_five { 450 | text-align: center; 451 | justify-content: center; 452 | position: relative; 453 | 454 | &.active { 455 | ._react_bg { 456 | width: 0%; 457 | animation-name: open; 458 | animation-delay: 1.5s; 459 | } 460 | } 461 | 462 | ._description { 463 | margin-right: auto; 464 | margin-left: auto; 465 | } 466 | 467 | .text_holder { 468 | position: relative; 469 | z-index: 1; 470 | } 471 | 472 | .image_holder { 473 | position: absolute; 474 | height: 100%; 475 | width: 100%; 476 | display: flex; 477 | justify-content: center; 478 | } 479 | ._react_bg { 480 | height: 100%; 481 | width: 100%; 482 | max-width: 900px; 483 | background: linear-gradient(45deg, #05111c, #071827); 484 | height: 400px; 485 | animation-duration: 0.7s; 486 | animation-fill-mode: forwards; 487 | animation-name: close; 488 | border-radius: 10px; 489 | } 490 | } 491 | 492 | @keyframes rotateIn { 493 | 0% { 494 | transform: rotate(20deg); 495 | opacity: 0; 496 | } 497 | 100% { 498 | transform: rotate(0); 499 | opacity: 1; 500 | } 501 | } 502 | 503 | @keyframes rotateOut { 504 | 0% { 505 | transform: rotate(0); 506 | opacity: 1; 507 | } 508 | 100% { 509 | transform: rotate(20deg); 510 | opacity: 0; 511 | } 512 | } 513 | 514 | @keyframes close { 515 | 0% { 516 | width: 100%; 517 | } 518 | 100% { 519 | width: 0%; 520 | } 521 | } 522 | 523 | @keyframes open { 524 | 0% { 525 | width: 0%; 526 | } 527 | 100% { 528 | width: 100%; 529 | } 530 | } 531 | 532 | @keyframes bounceIn { 533 | 0% { 534 | transform: scale(0); 535 | opacity: 0; 536 | } 537 | 30% { 538 | transform: scale(1.3); 539 | opacity: 1; 540 | } 541 | 60% { 542 | transform: scale(1); 543 | opacity: 1; 544 | } 545 | 80% { 546 | transform: scale(1.1); 547 | opacity: 1; 548 | } 549 | 100% { 550 | transform: scale(1); 551 | opacity: 1; 552 | } 553 | } 554 | 555 | @keyframes bounceOut { 556 | 0% { 557 | transform: scale(1); 558 | opacity: 1; 559 | } 560 | 100% { 561 | transform: scale(0); 562 | opacity: 0; 563 | } 564 | } 565 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | No Dey Beg 7 | 8 | 9 | 10 | 11 |
12 | 22 | 23 | 24 | 25 |
26 |
27 |

28 | Make Someone 29 |

30 |

31 | Happy With Cash 33 | 💃🏽 35 |

36 | 37 | Do you want to pay for the food you ordered for a friend, send money 38 | to your babe or friends? use NoDeyBeg. 39 | 40 |
41 |
42 |
43 | 46 | 47 | 50 | 53 | 54 |
55 |
56 |
57 | 58 |
59 |
60 |

61 | Digitally Kick 62 |

63 |

64 | some A** 🦵🏾 66 |

67 | 68 | With NoDeyBeg you get a digital wallet that can be funded by a 69 | transfer from any bank. 70 | 71 |
72 |
73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
82 |
83 | 84 |
85 |
86 |

87 | Sending Money 88 |

89 |

90 | Can Be Fun Too 92 | 💃🏽 94 |

95 | 96 | Send money to people on your contact list using their phone numbers 97 | or via payment links that can be shared however you decide or even 98 | using bank accounts. 99 | 100 |
101 |
102 |
103 | 104 |
105 |
106 | 107 |
108 |
109 |

110 | Just Go 111 |

112 |

113 | Cashless Abeg 115 | 💃🏽 117 |

118 | 119 | Do you want to pay for the food you ordered for a friend, send money 120 | to your babe or friends? use NoDeyBeg. 121 | 122 |
123 |
124 |
125 | 126 |
127 |
128 | 129 |
130 |
131 |

132 | No Dey ask for 133 |

134 |

135 | Urgent 2k again 137 | 💔 139 |

140 | 141 | Do you want to pay for the food you ordered for a friend, send money 142 | to your babe or friends? use NoDeyBeg. 143 | 144 |
145 |
146 |
147 |
148 |
149 | 150 |
151 |
152 |

153 | No Dey ask for 154 |

155 |

156 | Urgent 2k again 158 | 💃🏽 160 |

161 | 162 | Do you want to pay for the food you ordered for a friend, send money 163 | to your babe or friends? use NoDeyBeg. 164 | 165 |
166 |
167 |
168 | 169 |
170 |
171 | 172 | 184 |
185 | 186 |
Not yet responsive, Jezz, I mean it's just a clone man!
187 | 188 | 189 | 190 | 191 | 194 | 195 | 196 | -------------------------------------------------------------------------------- /js/debouncer.js: -------------------------------------------------------------------------------- 1 | //debouncer function 2 | function debouncer(fn, DEBOUNCER_TIME_OUT) { 3 | let timeOut; 4 | let alreadyRanOnUpdate = false; 5 | 6 | function setAlreadyRanOnUpdate(bool) { 7 | alreadyRanOnUpdate = bool; 8 | } 9 | 10 | const fnCaller = (args) => { 11 | clearTimeout(timeOut); 12 | 13 | !alreadyRanOnUpdate && fn(args); 14 | 15 | setAlreadyRanOnUpdate(true); 16 | 17 | timeOut = setTimeout(() => { 18 | setAlreadyRanOnUpdate(false); 19 | }, DEBOUNCER_TIME_OUT); 20 | }; 21 | 22 | return fnCaller; 23 | } 24 | -------------------------------------------------------------------------------- /js/project.js: -------------------------------------------------------------------------------- 1 | const projectNodes = Array.from(document.querySelectorAll("._project")); 2 | const projectThumb = document.querySelector("._project_thumb"); 3 | const indexNode = document.querySelector(".js_project_index"); 4 | const lineBgNode = document.querySelector(".line_bg"); 5 | const projectThumbNumbers = Array.from( 6 | document.querySelectorAll(".js__project_thumb__num") 7 | ); 8 | let activeProjectIndex = 0; 9 | 10 | const wheelEventHandler = debouncer(updateInterface, 40); 11 | 12 | window.addEventListener("wheel", (event) => { 13 | wheelEventHandler(event); 14 | }); 15 | 16 | function updateInterface(event) { 17 | updateProjectIndex(event); 18 | shiftBackground(); 19 | updateProjectInterface(); 20 | moveProjectThumb(); 21 | } 22 | 23 | function updateProjectIndex(event) { 24 | event.deltaY >= 0 ? goToNextProject() : goToPreviousProject(); 25 | } 26 | 27 | function goToNextProject() { 28 | activeProjectIndex < projectNodes.length - 1 && activeProjectIndex++; 29 | } 30 | 31 | function goToPreviousProject() { 32 | activeProjectIndex > 0 && activeProjectIndex--; 33 | } 34 | 35 | function shiftBackground() { 36 | anime({ 37 | targets: lineBgNode, 38 | translateX: -180 * activeProjectIndex, 39 | duration: 1500, 40 | }); 41 | } 42 | 43 | function updateProjectInterface() { 44 | activateNode(activeProjectIndex, projectNodes); 45 | } 46 | 47 | function moveProjectThumb() { 48 | const widthInPercent = (100 / (projectNodes.length - 1)) * activeProjectIndex; 49 | projectThumb.style.width = `${widthInPercent}%`; 50 | activateNode(activeProjectIndex, projectThumbNumbers); 51 | } 52 | 53 | function activateNode(indexToActivate, nodeArray, className = "active") { 54 | nodeArray.forEach((_node) => { 55 | _node.classList.remove(className); 56 | }); 57 | nodeArray[indexToActivate].classList.add(className); 58 | } 59 | 60 | function moveToNextProject() { 61 | goToNextProject(); 62 | shiftBackground(); 63 | updateProjectInterface(); 64 | moveProjectThumb(); 65 | } 66 | 67 | function moveToPrevious() { 68 | goToPreviousProject(); 69 | shiftBackground(); 70 | updateProjectInterface(); 71 | moveProjectThumb(); 72 | } 73 | 74 | window.addEventListener("keydown", (event) => { 75 | const rightKeyCodes = [39, 40]; 76 | const leftKeyCodes = [38, 37]; 77 | const goRight = rightKeyCodes.includes(event.keyCode); 78 | const goLeft = leftKeyCodes.includes(event.keyCode); 79 | goRight && moveToNextProject(); 80 | goLeft && moveToPrevious(); 81 | }); 82 | 83 | projectThumbNumbers.forEach((numberNode, index) => { 84 | numberNode.addEventListener("click", () => { 85 | activeProjectIndex = index; 86 | shiftBackground(); 87 | updateProjectInterface(); 88 | moveProjectThumb(); 89 | }); 90 | }); -------------------------------------------------------------------------------- /page-shots/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/page-shots/.DS_Store -------------------------------------------------------------------------------- /page-shots/shot-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/page-shots/shot-1.png -------------------------------------------------------------------------------- /page-shots/shot-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/page-shots/shot-2.png -------------------------------------------------------------------------------- /page-shots/shot-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/page-shots/shot-3.png -------------------------------------------------------------------------------- /page-shots/shot-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sholanke/no-dey-beg/e865104f18c2b4eddf8108fad0101bcc1a6ac2d5/page-shots/shot-4.png --------------------------------------------------------------------------------