HTML Academy
Предыдущее задание
Основы HTML и CSS
Вернуться в список заданий
Продолжить
Оформить подписку
  • Регистрация
  • Войти

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

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

  • ФБ
или

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

Войти и продолжить
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Интернет-магазин товаров для дома</title> <link href="style.css" rel="stylesheet"> </head> <body> <header class="site-header"> <div class="container"> <img class="logo" src="img/logo-full.svg" width="62" height="17" alt="Логотип магазина gloevk"> </div> </header> <section class="intro"> <div class=""> <h1 class="title">Комфорт и уют в <b>вашей</b> квартире</h1> <p>Разнообразные товары для дома с доставкой по всей планете</p> </div> </section> <section class="popular-products"> <div class="container"> <h2 class="section-title">Самые <b>популярные</b> товары</h2> <ul class="products-list"> <li class="product-card"> <h3>Мсеюлида</h3> <p>лампа напольная</p> <p class="price"><del>289₽</del> 288₽</p> <img src="img/item-mseyulida.jpg" width="156" height="120" alt="Напольная лампа «Мсеюлида»"> </li> <li class="product-card"> <h3>Рмаериби</h3> <p>диван трёхместный</p> <p class="price">5870₽</p> <img src="img/item-rmaeribi.jpg" width="156" height="120" alt="Трёхместный диван «Рмаериби»"> </li> <li class="product-card"> <h3>Блетуб</h3> <p>люстра потолочная</p> <p class="price">1360₽</p> <img src="img/item-bletub.jpg" width="156" height="120" alt="Потолочная люстра «Блетуб»"> </li> </ul> </div> </section> <footer class="site-footer"> <div class="container"> <img class="logo-link" src="img/logo-short.svg" width="47" height="13" alt="Логотип магазина gloevk"> <p class="copyright">© 2020</p> </div> </footer> </body> </html>
CSS
body { min-width: 550px; padding: 0; margin: 0; font-family: "Arial", "Helvetica", sans-serif; font-size: 13px; line-height: 18px; } .container { width: 510px; padding: 0 20px; margin: 0 auto; } .site-header { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .logo { margin: 10px 0; } .intro-container { width: 510px; min-height: 150px; margin: 0 auto; margin-bottom: 20px; padding: 15px 0 0; box-sizing: border-box; background-repeat: no-repeat; background-position: top right; } .title { width: 240px; padding: 0; margin: 0; font-family: "Georgia", "Times", serif; font-size: 29px; line-height: 36px; font-weight: 400; } .section-title { margin: 0; padding: 0; font-family: "Georgia", "Times", serif; font-size: 20px; line-height: 24px; font-weight: 400; } .title b, .section-title b { font-weight: 400; color: #ff8a00; } .intro p { width: 210px; margin: 8px 0 10px; padding: 0; line-height: 20px; } .popular-products { padding-top: 15px; background-color: #fff3e5; } .products-list { display: flex; padding: 14px 0 0; margin: 0 0 0 -20px; list-style: none; } .product-card { position: relative; width: 132px; margin-bottom: 20px; margin-left: 20px; padding: 124px 12px 0; font-family: "Georgia", "Times", serif; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .product-card-new { position: relative; order: -1; } .product-card-new::after { position: absolute; content: "new"; width: 158px; height: 35px; top: 0; right: 0; font-size: 16px; font-weight: 700; line-height: 35px; color: #ffffff; text-align: center; background-color: #ff8a00; } .product-card img { position: absolute; top: 0; left: 0; } .product-card h3 { margin: 0 0 2px 0; padding: 0; font-size: 15px; line-height: 18px; font-weight: 400; } .product-card p { margin: 0 0 8px 0; padding: 0; font-size: 13px; font-style: italic; line-height: 16px; } .product-card .price { margin-top: auto; font-family: "Arial", "Helvetica", sans-serif; font-weight: 700; font-size: 15px; font-style: normal; color: #ff8a00; } .price del { margin-right: 2px; font-weight: 400; font-size: 13px; color: #000000; text-decoration: line-through; } .site-footer { background-color: #847462; } .site-footer .container { display: flex; justify-content: space-between; align-items: center; color: #ffffff; }

Что в задании вам не понравилось?

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
  • Образец
  • Результат
  • Наложение
  • Различия
  • ?

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

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

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

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

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

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

0
    Выполнено 0%.
    Код был изменён
    Логотип HTML Academy
    • Наша группа в VK
    • Наш канал на YouTube
    • Наша страница в Twitter
    • Наш канал в Telegram
    Инновационный центр Сколково

    Практикум

    • Курсы для новичков
    • Подписка

    Профессии

    • Фронтенд-разработчик
    • JavaScript-разработчик
    • Фулстек-разработчик
    Курсы
    • HTML и CSS.
      Профессиональная вёрстка сайтов
    • HTML и CSS.
      Адаптивная вёрстка и автоматизация
    • JavaScript.
      Профессиональная разработка веб-интерфейсов
    • JavaScript.
      Архитектура клиентских приложений
    • React.
      Разработка сложных клиентских приложений
    • Node.js.
      Профессиональная разработка REST API
    • Node.js и Nest.js.
      Микросервисная архитектура
    • TypeScript. Теория типов
    • Алгоритмы и структуры данных
    • Паттерны проектирования
    • Webpack
    • Vite
    • Vue.js 3. Разработка клиентских приложений
    • Git и GitHub
    • Анимация для фронтендеров
    Журнал
    • Справочник по HTML
    • Учебник по Git
    • Учебник по PHP

    Информация

    • Об Академии
    • О центре карьеры

    Услуги

    • Работа наставником
    • Для вузов и колледжей
    • Для учителей

    Остальное

    • Написать нам
    • Мероприятия
    • Форум
    • Акции
    • Отзывы о курсах

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