Верстка сайта для Мебель Парк
Сайт сделан для Мебель Парк и обладает минималистичным дизайном относительно современных сайтов. Ничего лишнего, только по делу. Эта работа напоминает еще раз важность ТЗ и хорошего дизайна. Представляю вам верстку лендинга для Мебель Парк.
Задача: Сверстать сайт с Figma макета без дизайна на планшеты и мобильные устройства. Была росьба от заказчика сделать всё на Бутстрапе и никакого ТЗ с его стороны. Нужно было адаптировать под все разрешения самостоятельно и сделать это с чистым кодом. В верстке должны быть: фильтр для видов шкафов, слайдер с отзывами, слайдер с примерами работ, ползунок с шагами, спойлеры, две формы, карта и остальные элементы.
Сроки: 4 дня
Цена: 10 000 рублей
Первый день:
Сразу же создана группа в телеграмме, где обсуждались все вопросы по заказу с дизайнером и заказчиком. (В связи с тем, что ТЗ не было, вопросов было много.) Приступил к заказу, сделал несколько элементов до фильтра с шкафами. Сверстал элементы для фильтра, и написал скрипт для него с помощью библиотеки Jquery. Сделал все секции до блока с замерами. Для блока с отзывами сделан Slick слайдер, который в будущем будет адаптирован.
Второй день: на второй же день сделал остальные блоки. Секции "материалы", "скидка", "опыт" сделаны очень быстро и тут мы дошли до второго слайдера. Он немного необычный ибо следующие и предыдущие слайды должны были оставаться в поле зрения, а не исчезать и должны были уменьшаться в размере плавным образом. Это было что-то новое для меня, но после поисков в интернете, я решил эту проблему очень быстро. В итоге получился красивый, плавно работающий слайдер. Тут мы дошли до ползунка. Я не был уверен, как именно будет работать этот элемент так что сразу же обратился в группу с заказчиком и дизайнером. Из-за этого ТЗ очень важный момент в заказе. Но его не было в этом заказе так что приходилось спрашивать про некоторые элементы. Дальше идёт секция с первой формой и секция "вопросы". После этих секций идут "цены", вторая форма, карта и в конце уже футер. Самое сложное только начинается.
Третий день: начинаем адаптацию сайта, а точнее импровизационную адаптацию ибо, как я уже и сказал дизайна для других разрешений нет. На самом деле, всё обошлось не так уж и сложно, все элементы были адаптированы за этот же день. Но это не отменяет того факта, что заказ был бы уже готов к этому времени с готовым дизайном. Я показал дизайнеру и заказчику результат.
Четвертый день: были внесены поправки в адаптации и файлы сайта были сданы заказчику. Получил оплату в тот же день.
Итог: в итоге получилась очень красивая работа для моего портфолио и я добавил в копилку своих знаний много новых и полезных вещей. Этот заказ дал мне много опыта в этой сфере.