Работа с Tilda и полезный код для анимации слайдера

Приветствую тебя!)

В этой статье расскажу как я начала работу над сайтом для event agency. У ребят очень обширная деятельность, перечислю поочередно:

На каждый проект у них своя группа в ВК и странички в инстаграм... Наверное это безусловно классно иметь столько разных страниц со своим наполнением...

P.s Но думаю что одному человеку качественно вести около 6 разных страниц - нереально) а тем более если тебе на каждую из этих страниц могут написать с заказом или вопросом!

Так вот, искренне считаю, что идеальным решением было создать полноценный сайт и включить туда все проекты, что будет удобно как для моего заказчика, так и для потенциальных клиентов.

Первым делом конечно я начала анализировать другие студии, в частности студии Санкт-Петербурга, т.к. сама студия из СПб. Затем пошла искать референсы (искала в основном на pinterest), сайт хотелось сделать "чистым по оформлению" т.к. слишком много фото и не хотелось отвлекать внимание на фон. Ниже несколько основных референсов (нравятся тонкие элементы и элементы рукописного шрифта)

Далее я сразу подобрала вариации цветовых решений и подобрала шрифты (варианты цветовых решений я отправила заказчику, чтобы понять в какую сторону двигаться)Мы остановились на этом сочетании цветов:

После согласования, я подготовила прототип сайта

Моя цель была сделать главную страницу сайта в основном из индивидуальных блоков (а это значит что при верстке я применяла код для анимации) Поэтому я сделала предварительный дизайн сайта в figma, перед тем как переносить на платформу.

Я хотела чтобы шапка была не похожа на стандартный шаблон в тильда, и еще была задача показать несколько фото с одного фотопроекта, поэтому приняла решение сделать в виде коллажа.

Конечно же шапку я хотела сделать в виде слайдера.

Данный блок я создала из zero block. Ниже будет слайдер с этапами работы, также приложу сюда код верстки (может быть кому-то будет полезно.

И так, как видно выше, у меня есть навигация в виде стрелки вправо
Первым этапом нужно создать zero block и сделать навигацию (в данном случае будет пустой блок с 1-ой стрелкой)

Далее создаем сами слайдеры, у меня их всего 2 (может быть конечно же больше), т.е получается 2 отдельных zero block

и следующий блок это HTML код (во вкладке другое) код будет представлен ниже)
подробный урок можно посмотреть на канале KAIZEN SkillBoost (youtube)

Далее на главной странице я разместила все фотопроекты, предварительно поделив их на разделы (для удобства фильтрации для заказчика), также добавила на главную страницу (прокат платьев, наши работы и отзывы) Это основные разделы для потенциального заказчика.Также на сайте я добавила разделы с контактами, фотокнигами и подарочными сертификатами (но вынесла их в меню, на отдельные странички)

На сайте я разместила блок с кнопкой на сайт фотоальбомов от компании vigbo.ru, это тоже платформа для создания сайтов, направленная на фотографов. Но так как я уже создала сайт на Тильда, а мне нужен был данный альбом все таки, он нужен чтобы отдавать обработанные фото со схемки в виде сайта с фото.У данной платформы можно создать отдельно альбом, без привязки к сайту... И это очень классно!Поэтому я спокойно создала альбом, в который фотограф сможет загружать альбомы заказчиков и отправлять красиво упакованные работы. Это ли не круто?!На сайте я создала отдельный блок для перехода в данный альбом, для удобства еще сделала в виде анонса, чтобы человек сразу мог найти данный раздел)

И вот, в целом нечего долго рассказывать, проще посмотреть)Весь проект по ссылке - https://happyangels.ru/

Спасибо что дочитал до конца!Буду рада твоим комментариям)

мои проекты на Behance - https://www.behance.net/mary_tadich