Адаптивная верстка сайта CryptoBoard
Задача: Сверстать дизайн макет из Figma. Есть несколько страниц + модальные окна + моб. версия сайта. Нужно сделать верстку html/css/js для последующей работы с ней.
Проделал работу:
- верстал mobileFirst(изначальная верстка с мобильной версии, и адаптировал под планшеты и пк)
- написал на JS функционал для калькулятора(на главной стр.), всплывающих окон, и раскрывающихся списков
- бесконечная бегущая строка с автопрокруткой
- размытый фон в моб меню и у всплывающих окон(кроме mozilla firefox)
- фон у кнопок и ссылки градиентные
- возможность открывать всплывающие окна по хэшу в адресной строке(удобно если переходить с другого сайта на этот, сразу во всплывающее окно)
- адаптивные таблицы с кастомной прокруткой
Посмотреть верстку страниц:
- Home ‐ artemof.ru/pf/043-crypto/index.html
- Affiliate ‐ artemof.ru/pf/043-crypto/affiliate.html
- About Us ‐ artemof.ru/pf/043-crypto/about.html
- Dashboard ‐ artemof.ru/pf/043-crypto/account-login.html
- Log In ‐ artemof.ru/pf/043-crypto/dashboard.html
- Registration ‐ artemof.ru/pf/043-crypto/account-register.html
- Reset Password ‐ artemof.ru/pf/043-crypto/account-reset-pas.html
- New Password ‐ artemof.ru/pf/043-crypto/account-new-pass.html
- Popup Buy USDT ‐ artemof.ru/pf/043-crypto/dashboard.html#buy
- Popup Send USDT ‐ artemof.ru/pf/043-crypto/dashboard.html#send
- Popup Add Deposit ‐ artemof.ru/pf/043-crypto/dashboard.html#add
- Popup Withdraw ‐ artemof.ru/pf/043-crypto/dashboard.html#withdraw
Использовал технологии: html5, css3, Java Script ES6, Gulp, Webpack, Swiper, Simplebar, noUiSlider, mobileFirst