HTML Academy
Предыдущее задание
Мастерская: декоративные элементы18/18
Вернуться в список заданий
  • Социальные кнопки, шаг 1
  • Социальные кнопки, шаг 2
  • Социальные кнопки, шаг 3
  • Переключатель страниц, шаг 1
  • Переключатель страниц, шаг 2
  • Переключатель страниц, шаг 3
  • Переключатель страниц, шаг 4
  • Переключатель страниц, тестирование
  • Испытание: карточка курса
  • Контакты, шаг 1
  • Контакты, шаг 2
  • Контакты, шаг 3
  • Комментарии, шаг 1
  • Комментарии, шаг 2
  • Комментарии, шаг 3
  • Комментарии, шаг 4
  • Комментарии, шаг 5
  • Испытание: анонс поста
Список заданий
  • Регистрация
  • Войти

Зарегистрируйтесь, чтобы проходить испытания

Регистрация займёт всего минуту и позволит сохранять прогресс обучения. Вы можете зарегистрироваться с помощью своей эл. почты и пароля, либо с помощью соцсетей.

или

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Войти и продолжить
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Испытание: анонс поста</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="post"> <div class="post-title">Интенсив: программа</div> <div class="post-date">13.09</div> <div class="post-type"></div> <div class="post-author"> Автор: <a href="#">HTML Academy</a> </div> <div class="post-stats"> <div class="icon icon-tags"></div> <a href="#">интенсив</a>, <a href="#">программа</a> </div> <div class="post-stats"> <div class="icon icon-comments"></div> <a href="#">5</a> </div> <div class="post-text">Работа над интенсивом идёт полным ходом. Мы нашли крутых людей в команду и решили ещё кучу задач. Но сегодня я подробнее расскажу о работе над программой интенсива.</div> </div> </body> </html>
CSS
html, body { margin: 0; padding: 0; } body { width: 280px; min-height: 250px; padding-top: 50px; padding-right: 10px; padding-left: 10px; font-size: 12px; line-height: 1.2; font-family: "Arial", sans-serif; color: #7f8c8d; background-color: #ecf0f1; } .post-stats .icon { width: 15px; height: 15px; } /* Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10. Адреса картинок: quotes.png post-challenge.png Картинка «кавычки» выровнена по центру */
100%
  • Образец
  • Результат
  • Наложение
  • Различия
  • ?

Нажмите кнопку «Сравнить», чтобы отправить ваше решение на проверку.

Не удалось загрузить образец. Попробуйте позже.

Образец — интерфейс, который вам нужно получить.

Результат — то, как видит ваш код наш сервер. Может отличаться от того, что в мини-браузере. Сравнение происходит между этим результатом и образцом.

Наложение — полупрозрачный результат отображается над образцом.

Различия — карта различий между образцом и результатом.

Выполнено 0%.
Код был изменён
Логотип HTML Academy
  • Наша группа в ВК
  • Наша группа в Facebook
  • Наш канал на Youtube
  • Наша страница в Twitter
  • Наша страница в Instagram

Курсы

  • Интерактивные курсы
  • Программа обучения
  • HTML Шорты
  • Подписка

Интенсивы

  • Все интенсивы
  • Получить профессию
  • База выпускников
  • Рекрутинг

Информация

  • Об Академии
  • Вакансии
  • Для наставников
  • Для учителей

Остальное

  • Написать нам
  • Блог
  • Мероприятия
  • Форум
  • Лига А.

Рассылка

Раз в месяц мы рассказываем об интересных статьях, новых инструментах и курсах. Подробнее о рассылке.

СоглашениеКонфиденциальностьСведения об образовательной организацииЛицензия № 3026© ООО «Интерактивные обучающие технологии», 2013−2019Сделано с любовью в Санкт-Петербурге