Skip to content

Latest commit

 

History

History
45 lines (23 loc) · 4.32 KB

README.md

File metadata and controls

45 lines (23 loc) · 4.32 KB

Блок с приветствием для Нетологии

Описание

Продолжаем работу над редизайном сайта Нетологии. На очереди блок с приветствием. Нужно изменить верстку так, чтобы для разных разрешений экрана блок выглядел по-разному: изменялся размер шрифта и использовались фоновые изображения разного размера. Сейчас страница выглядит так:

Welcome block layout current

Для устройств с шириной экрана в дипазоне от 641px до 1300px включительно измените верстку, чтобы страница выглядела так:

Welcome block layout target

Для мобильных устройств с шириной экрана от 640px и меньше сделайте так:

Welcome block layout target small

Процесс реализации

  1. Если вы выполняете задание в песочнице CodePen, в начале работы добавьте в тег <head> следующий метатег <meta name="viewport" content="width=device-width, initial-scale=1.0">. Если вы выполняете задание локально, этот метатег уже добавлен.

  2. Измените существующий код так, чтобы существующие свойства font-size и background-image элемента с классом header применялись только для устройств, у которых ширина экрана от 1301px и больше.

  3. Для устройств, у которых ширина экрана в дипазоне от 641px до 1300px включительно, рассчитайте font-size элемента .header так, чтобы у элемента .header__slogan font-size был 36px. Свойство font-size у элемента .header__slogan изменять не надо.

  4. Для устройств, у которых ширина экрана от 640px и меньше, рассчитайте font-size элемента .header так, чтобы у элемента .header__slogan font-size был 24px. Свойство font-size у элемента .header__slogan изменять не надо.

  5. Для устройств, у которых ширина экрана в диапазоне от 641px до 1300px включительно, добавьте фоновое изображение netology_1200.jpg у элемента с классом header.

  6. Для устройств, у которых ширина экрана от 640px и меньше, добавьте фоновое изображение netology_600.jpg у элемента с классом header.

  7. Протестируйте результат в эмуляторе, выбрав iPad:

Welcome block layout target on a tablet screen

У вас должно загружаться фоновое изображение netology_1200.jpg, а размер шрифта элемента с классом header__slogan должен быть 36px.

  1. Протестируйте результат в эмуляторе, выбрав iPhone 4:

Welcome block layout target on a small screen

У вас должно загружаться фоновое изображение netology_600.jpg, а размер шрифта элемента с классом header__slogan должен быть 24px.

Реализация

Перед началом работы сделайте форк пена. Внесите изменения во вкладке CSS пена.