Правильный ответ
Меню · статья · заметки · жёлтый подвал с email
Условие
Соберите лендинг в index.html: три зоны друг под другом - шапка, основная часть, подвал. Не собирайте всё из обычных div - у каждой роли свой смысловой тег (см. Дополнительную информацию).
1. Шапка страницы. Внутри - блок навигации и список из двух ссылок: «О нас» (#about) и «Контакты» (#contacts).
2. Основная часть. Внутри неё рядом два блока (оба - прямые дети основной части):
- отдельный материал «О курсе» - заголовок первого уровня, картинка-обложка (текстовое описание «Обложка курса») и подпись к картинке «Обложка курса»;
- боковой блок заметок - заголовок второго уровня «Заметки» и абзац «Доп. материал».
3. Подвал страницы (внизу, на вкладке «Результат» это жёлтая полоса). Внутри подвала - email hello@seniorcode.ru именно как контактные данные, а не обычный абзац. Жёлтый фон уже задан в готовом CSS - вам нужно только правильную разметку подвала и контакта. CSS менять не нужно.
Ссылка на картинку - скопируйте её в атрибут
src
изображения:
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64'%3E%3Crect fill='%23cbd5e1' width='120' height='64'/%3E%3C/svg%3E
Что нужно сделать
- Сделайте шапку с навигацией и списком ссылок «О нас» / «Контакты».
- В основной части - материал «О курсе» (обложка + подпись). Адрес картинки - из блока «Ссылка на картинку» выше, альтернативный текст «Обложка курса».
- Рядом добавьте блок «Заметки» с текстом «Доп. материал».
- Внизу сделайте подвал с email hello@seniorcode.ru как контактные данные (жёлтая полоса на вкладке «Результат»).
Подсказка для новичка
Пишите под комментарием «Пишите код здесь». Порядок: шапка → меню-список → основная часть → материал с иллюстрацией → заметки рядом → подвал с контактным email. Спросите себя: какой тег у подвала страницы? и какой тег у контактных данных? Ответы - в Дополнительной информации. Значение src скопируйте из блока «Ссылка на картинку» выше - проверка смотрит на структуру и текстовое описание картинки (alt).
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам. Для обложки вставьте src из блока выше.
Вот так должно получиться
Меню · статья · заметки · жёлтый подвал с hello@seniorcode.ru
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Теги и свойства этой задачи
- Каркас:
<!DOCTYPE html>,<html lang="ru">,<head>,<meta>,<title>,<link>,<body>. <header>,<nav>,<ul>,<li>,<a href>- шапка и меню.<main>,<article>,<h1>,<figure>,<img>,<figcaption>,<aside>,<h2>,<p>- основная колонка.<footer>- подвал страницы (внизу; в готовом CSS у него жёлтый фон#fef9c3- та самая жёлтая полоса на вкладке «Результат»).<address>- контактные данные внутри подвала: текстhello@seniorcode.ru. Не заменяйте обычнымp.- Атрибуты:
href- адрес ссылки;src- адрес картинки;alt- текстовое описание картинки (что на ней; читают скринридеры и показывают, если картинка не загрузилась). В этой задаче:alt="Обложка курса". - В CSS:
font-family,margin,background,padding,margin-bottom,border,padding-left,display,width,height.
Слева два файла: index.html (здесь решаете задание) и style.css (готовые стили лендинга, менять не нужно). Ниже - разбор стилей и важных деталей задачи.
Файл style.css - что уже написано
Стартовый CSS задаёт фон страницы, общие рамки/отступы для landmark-блоков, цвета header / main / article / aside / footer, стили списка, типографику и размер картинки. CSS менять не нужно.
Правило body
-
font-family: Arial, sans-serif- шрифт. -
margin: 16px- внешний отступ страницы. -
background: #f1f5f9- фон страницы.
Правило header, main, footer, article, aside, figure
-
padding: 10px 12px- внутренние отступы у всех этих блоков. -
margin-bottom: 8px- расстояние между блоками. -
border: 1px solid #e2e8f0- светлая рамка (чтобы структура лендинга была видна новичку).
Цвета отдельных блоков
-
header { background: #e2e8f0; }- шапка серо-голубая. -
main { background: #fff; }- основная область белая. -
article { background: #f8fafc; }- статья чуть серее фона main. -
aside { background: #ecfeff; }- заметки голубоватые. -
footer { background: #fef9c3; margin-bottom: 0; }- подвал жёлтый; без лишнего отступа снизу.
Правила ul, заголовков и img
-
ul { margin: 0; padding-left: 18px; }- список без внешнего margin; слева отступ 18px под маркеры. -
h1, h2, p, figcaption, address { margin: 0 0 6px; }- единый нижний отступ 6px у текстовых элементов. -
img { display: block; width: 120px; height: 64px; background: #cbd5e1; }- картинка блочная, фиксированный размер 120×64, серый фон-заглушка.
Лендинг: nav, figure, aside, address
Это более полный семантический каркас страницы:
nav
для меню,
main
для главного,
article
для материала,
figure/figcaption
для иллюстрации,
aside
для доп. блока,
address
для контакта.
Не путайте
aside
с «просто div сбоку» - смысл: дополнительная информация к странице.
Коротко:
header(nav → ul → li → a) → main(article с figure/img/figcaption + aside) → footer(address).
Рамки, цвета блоков и размер картинки уже заданы в
style.css.
Сверьте с
«Результат».
Соберите лендинг: шапка (меню «О нас» / «Контакты»), блок «О курсе» (фото + текст обложки курса), блок «Заметки» (текст «Доп. материал»), подвал с адресом (hello@seniorcode.ru). Ссылка на картинку — во вкладке «Описание задачи».
Задачи:
- Шапка: блок навигации и список ссылок «О нас» (
#about) и «Контакты» (#contacts). - Основная часть: материал «О курсе» с обложкой (текстовое описание «Обложка курса») и подписью к картинке - ссылку на обложку берите во вкладке «Описание задачи».
- Заметки: рядом блок «Заметки» с текстом «Доп. материал».
- Подвал: внизу страницы подвал с адресом hello@seniorcode.ru как контактные данные (жёлтая полоса на вкладке «Результат»).
- Нажмите Проверить.
Пишите в index.html. CSS менять не нужно - жёлтый фон подвала уже в стилях.
Ссылку на картинку для src скопируйте во вкладке «Описание задачи». Роли → теги - там же, в «Дополнительной информации».
Назад
Автосохранение
Дополнить код в редакторе (готовые шаги не переписываются):