Plants
Демо ►
Plants – landing page сайта, который предлагает свои услуги по выращиванию растений в саду и ухода за ними, сайт адаптивный и интерактивный.
Функционал приложения (технические требования к сайту по заданию):
1.При нажатии на кнопки:Gardens,Lawn,Planting происходит смена
фокуса на услугах в разделе service.
-При выборе одной услуги (нажатии одной кнопки), остальные
карточки услуг принимают эффект blur, выбранная услуга остается
неизменной
-Пользователь может нажать одновременно две кнопки услуги, тогда эта кнопка тоже принимает стиль активной и карточки с именем услуги выходят из эффекта blur. При этом пользователь не может нажать одновременно все три кнопки услуг. При повторном нажатии на активную кнопку она деактивируется (становится неактивной) а привязанные к ней позиции возвращаются в исходное состояние (входит в состяние blur если есть еще активная кнопка или же перестають быть в блюре если это была единственная нажатая кнопка).
-Анимации плавного перемещения кнопок в активное состояние и карточек услуг в эффект blur
-Пользователь может нажать одновременно две кнопки услуги, тогда эта кнопка тоже принимает стиль активной и карточки с именем услуги выходят из эффекта blur. При этом пользователь не может нажать одновременно все три кнопки услуг. При повторном нажатии на активную кнопку она деактивируется (становится неактивной) а привязанные к ней позиции возвращаются в исходное состояние (входит в состяние blur если есть еще активная кнопка или же перестають быть в блюре если это была единственная нажатая кнопка).
-Анимации плавного перемещения кнопок в активное состояние и карточек услуг в эффект blur
2.Accordion в секции prices реализация 3-х выпадающих списков об услугах и ценах.
-При нажатии на dropdown кнопку появляется описание тарифов цен в соответствии с макетом. Внутри реализована кнопка order, которая ведет на секцию contacts.
-Пользователь может самостоятельно закрыть содержимое нажав на кнопку dropup, но не может одновременно открыть все тарифы услуг, при открытии нового тарифа предыдущее автоматически закрывается.
-Пользователь может самостоятельно закрыть содержимое нажав на кнопку dropup, но не может одновременно открыть все тарифы услуг, при открытии нового тарифа предыдущее автоматически закрывается.
3.В разделе contacts реализован select с выбором городов.
-В зависимости от выбора пользователя появляется блок с адресом и телефоном офиса в определенном городе
-При нажатии на кнопку Call us реализован вызов по номеру, который соответствует выбранному городу
-При нажатии на кнопку Call us реализован вызов по номеру, который соответствует выбранному городу
GitHub repo
↵ Назад к проектам