HTML Academy
Предыдущее задание
Основы HTML и CSS12/13
Вернуться в список заданий
  1. 1. Что такое HTML
  2. 2. HTML-теги
  3. 3. Вложенные теги
  4. 4. Атрибуты тегов
  5. 5. Что такое CSS
  6. 6. Меняем значения CSS-свойств
  7. 7. Меняем свойства в CSS-правилах
  8. 8. Создаём своё CSS-правило
  9. 9. Задаём стили по классу
  10. 10. Используем два класса
  11. 11. Переопределяем стили
  12. 12. Завершаем стилизацию
  13. 13. Конспект «Основы HTML и CSS»
Следующее задание
Оформить подписку
  • Регистрация
  • Войти

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

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

  • ФБ
или

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

Войти и продолжить
  • 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> <header class="site-header"> <div class="container"> <h1>Gloevk</h1> <p>Разнообразные товары для дома с доставкой по всей планете</p> <img src="img/gloevk-examples.png" width="510" height="80" alt="Примеры интерьеров"> </div> </header> <section class="features"> <h2>Что поможет вам создать домашний уют?</h2> <p class="feature-furniture">Мебель и фурнитура</p> <p class="feature-lighting">Лампы и торшеры</p> <p class="feature-accessories">Аксессуары и мелочи</p> </section> <section class="advantages"> <h2>Что выделяет нас среди конкурентов?</h2> <ul class="advantages-list"> <li class="advantages-item">Используем только природные материалы</li> <li class="advantages-item standard">Ежедневные отчёты о ходе работ</li> <li class="advantages-item standard">Сами соберём мебель для вас</li> <li class="advantages-item vip">Бесплатное гарантийное обслуживание в течение 10 лет</li> <li class="advantages-item vip">Доставка в день заказа</li> </ul> </section> <footer class="site-footer"> <div class="container"> <p>© Кекс, 2020</p> <p>Магазин товаров для дома</p> </div> </footer> </body> </html>
CSS
body { margin: 0; padding: 0; font-family: "Arial", sans-serif; font-size: 14px; line-height: 20px; color: #444444; } h1 { width: 255px; margin: 0 auto 8px; font-family: "Georgia", serif; text-align: center; font-weight: normal; font-size: 56px; line-height: 64px; } h2 { border-bottom: 2px solid #cccccc; padding-bottom: 12px; } .container { width: 510px; margin: 0 auto; padding: 0 20px; } .site-header { min-width: 550px; height: 186px; margin-bottom: 70px; padding-top: 30px; background: #847462 no-repeat center url("img/gloevk-bg.jpg"); background-size: cover; color: #ffffff; } .site-header p { width: 255px; margin: 0 auto 26px; text-align: center; font-size: 16px; line-height: 24px; } .site-header img { display: block; margin: 0 auto; } .features { width: 510px; margin: 0 auto 30px; padding: 0 20px; } .features p { display: inline-block; vertical-align: top; width: 30%; margin: 0 5px; background-repeat: no-repeat; background-position: center top; text-align: center; } .feature-furniture { padding-top: 65px; background-image: url("img/furniture.svg"); } .feature-lighting { padding-top: 65px; background-image: url("img/lighting.svg"); } .feature-accessories { padding-top: 65px; background-image: url("img/accessories.svg"); } .advantages { width: 510px; margin: 0 auto 40px; padding: 0 20px; } .advantages-list { padding: 0; list-style: none; } .advantages-item { margin-bottom: 15px; padding-left: 20px; border-left: 20px solid #e2e2e2; color: #999999; } .standard { border-color: #847462; color: #6a6a6a; } /* Добавьте правило для класса vip сюда */ .site-footer { min-width: 550px; background-color: #847462; color: #ffffff; } .site-footer .container { text-align: center; } .site-footer p { display: inline-block; vertical-align: middle; padding: 0 20px; }

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

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

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

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

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

100%
ЗадачиВыполнено
0
    1. Создайте CSS-правило для класса vip.
    2. Добавьте в него свойство border-color со значением #ffb864;,
    3. и свойство color со значением #000000;.
    Логотип 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