27 lines
No EOL
2.7 KiB
Markdown
27 lines
No EOL
2.7 KiB
Markdown
# Лабораторная работа № 10. Вёрстка адаптивного лендинга для компании доставки еды
|
||
---
|
||
|
||
При помощи фреймворка Bootstrap 5 создайте адаптивный лендинг (landing page) для компании, доставляющей бизнес-ланчи.
|
||
|
||
## Порядок выполнения
|
||
|
||
Добавьте к вашему проекту страницу лендинга. На этой странице должны присутствовать следующие элементы:
|
||
|
||
- Блок с названием компании, её кратким описанием и картинкой для привлечения внимания (hero section).
|
||
- Блок с перечислением основных особенностей/преимуществ компании.
|
||
- Блок с призывом к действию (CTA, call to action) и ссылкой для перехода на страницу "Собрать ланч".
|
||
- Блок с формой для обратной связи и контактами.
|
||
|
||
Дизайн страницы формируется на усмотрение студента с учётом обязательных блоков, перечисленных выше. Идеи для оформления лендинга можно посмотреть [здесь](https://www.landingfolio.com/).
|
||
|
||
- Вёрстка лендинга должна быть выполнена с использованием фреймворка Bootstrap 5.
|
||
- Допускается определение кастомных стилей в случае, если требуемого результата нельзя добиться средствами Bootstrap.
|
||
- Обязательно использование системы сеток Bootstrap (Bootstrap Grid System).
|
||
- Страница должна корректно отображаться на мобильных устройствах (смартфонах, планшетах).
|
||
- Вёрстка должна быть выполнена студентом самостоятельно (использование готовых шаблонов лендингов не допускается).
|
||
|
||
### Материалы для изучения
|
||
[Документация Bootstrap](https://getbootstrap.com/)
|
||
[Bootstrap Grid System](https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php)
|
||
[Отзывчивый дизайн [MDN]](https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Responsive_Design)
|
||
[Что такое лендинг и чем он отличается от сайта?](https://www.insales.ru/page/landing) |