Лендинг «ИИ-планировщик питания»

HTMLCSS

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

Задание ориентировано на новичков: основной упор сделан на работу с Flexbox или Grid Layout, типографику и корректное отображение контента на разных экранах.

📝 Задача

Вам необходимо реализовать небольшую посадочную страницу (2-3 секции), состоящую из:

1. Шапки (Header) с логотипом и простой навигацией.
2. Главного экрана (Hero) с заголовком, призывом к действию (CTA) и тематическим изображением.
3. Секции преимуществ или «Как это работает», где кратко описаны возможности ИИ в кулинарии.

Верстка должна быть аккуратной и логичной.

Макет

Макет в Figma (Website Landing Page Recipe and Meal Plan with Ai)

💡 Идеи для практики

1. Используйте семантические теги (<header>, <main>, <section>, <footer>), чтобы сделать код понятным для поисковиков и скринридеров.
2. Попробуйте реализовать адаптивность без использования тяжелых фреймворков — только чистый CSS и медиа-запросы (@media).
3. Уделите внимание состояниям элементов: добавьте плавные переходы (transition) для кнопок и ссылок при наведении курсора.
4. Экспериментируйте с современными CSS-свойствами, например, aspect-ratio для изображений блюд или gap для отступов в сетке.

🤔 FAQ

Оставьте ссылку на ваше решение в комментариях ниже, например на GitHub или на live-просмотр.

Спрашивайте совета у других участников сообщества в комментариях.

Безусловно! Одна из главных идей создания этой платформы — помочь разработчикам пополнить портфолио профессионально выглядящими проектами!

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

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

Конечно! Наши задания включают профессиональные макеты, но никаких ограничений на используемые инструменты нет. Вы можете использовать всё, что вам нравится, чтобы реализовать проект.