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