Лендинг по промпту
Создайте свою первую hero-секцию
Hero-секция — самая важная часть лендинга-портфолио: это первое, что видят посетители. В этом уроке вы создадите профессиональную hero-секцию, которая привлекает внимание и вызывает желание узнать о вас больше.
Вы начнёте с базового HTML и добавите стилизацию с помощью Tailwind CSS, чтобы получить современную hero-секцию с градиентным фоном, цепляющим заголовком, подзаголовком и кнопкой призыва к действию. Это фундамент любого отличного сайта-портфолио.
Инструкции
Добавьте div-контейнер hero с min-h-screen, градиентным фоном (от from-purple-900 до gray-900) и центрированием через flex
Подсказка: Используйте: `<div class="min-h-screen bg-gradient-to-br from-purple-900 via-gray-900 to-gray-900 flex items-center justify-center px-4">` — это создаёт секцию на всю высоту экрана с вашим градиентом
Внутри hero добавьте заголовок h1 с вашим именем и абзац p с вашей ролью/должностью
Добавьте описательный абзац (тег p) с коротким слоганом о том, чем вы занимаетесь (не более 300 символов)
Добавьте CTA-кнопку с градиентной заливкой и hover-эффектами
Ваш код
Опишите, что хотите создать на этом шаге, и я напишу код — затем нажмите «Применить», чтобы вставить его в редактор. Текущий шаг: Добавьте div-контейнер hero с min-h-screen, градиентным фоном (от from-purple-900 до gray-900) и центрированием через flex