Привет) Нужен совсем небольшой лендинг(по референсам) для чат-бота "keepway" (будущий ник в ТГ @keepwayBot).
На чистом html + css.
Резюме: нужно скопировать страницу
bothelp.io/ru/telegram, но с новой цветовой гаммой и без некоторых элементов.
Цветовая гамма нужна из сайта
suvmer.dev. GPT по скриншоту выдал следующее:
Основные цвета:
- Белый (#FFFFFF): Используется для текста, чтобы обеспечить контраст на темном фоне.
- Красный (#FF0000): Применяется в элементах карточек и логотипе для привлечения внимания.
Вспомогательные цвета:
- Желтый (#FFFF00): Используется для обрамления, чтобы выделить важные элементы.
- Голубой (#00BFFF): Присутствует в иконках и заголовках
- Зеленый/Мятный (#32CD32): Логотип и акцентные элементы, символизируют обучение.
Фоновые цвета:
- Темно-серый/Черный (#1A1A1A): Основной фон, который создает современную и минималистичную атмосферу.
Тексты для самих блоков и кнопок описаны в конце этого описания.
=====Начало верхней части страницы=====
Высота = высоте экрана.
1. Экран делится на две части:
1. 1. Первая половина:
1. 1. 1. Заголовок
1. 1. 2. Описание
1. 1. 3. Две кнопки(стили кнопок аналогично референсу). Первая с ссылкой. Вторая с якорем на блок ниже
.1. 2. Вторая половина: Картинка с телефоном(нужно взять из референса)
Референс: речь про 1 в 1 как тут, только без хедера
bothelp.io/ru/telegram(ск... лежит в первой прикреплённой картинке)
При ширине экрана меньше 500px просто размещать первую и вторую часть друг за другом(аналогично референсу тоже).
=====Конец верхней части страницы=====
=====Начало блока "Используйте бота для планирования времени"=====
2.1 Заголовок: "Используйте бота для планирования времени" по середине страницы, как тут
bothelp.io/ru/telegram 2.2 Затем точно такие же карточки с референса(в таком же количестве), просто надублировать оттуда первую(текст и картинка потом всё равно изменится).
bothelp.io/ru/telegram P.S. Из-за новой цветовой гаммы, стиль карточек можно взять из раздела "Projects"
suvmer.dev (скриншот лежит во второй прикреплённой картинке)
(и тоже так же уменьшать количество карточек в сетке при ширине экрана меньше 500px).
=====Конец блока "Используйте бота для планирования времени"=====
=====Начало футера=====
Просто взять футер из
suvmer.dev/, только вместо Contacts слово "Контакты".
=====Конец футера=====
Тексты для блоков и кнопок:
1. 1. 1. Заголовок: Управляй временем в Телеграм-боте
1. 1. 2. Описание: Бот напомнит о событиях, поможет вести расписание и управлять группами
1. 1. 3. Текст первой кнопки: "Начать бесплатно", второй: "Что мы умеем"
1. 2. Картинка берётся из того же места на
bothelp.io/ru/telegram (
cdn.prod.website-files.co... 2. 1. Заголовок: "Используйте бота для планирования времени"
2. 2. Берём первую карточку с референса с её текстом и картинкой копируем столько же раз
bothelp.io/ru/telegram