Перед работой многие клиенты просят ссылку на портфолио, поэтому вы задумались над созданием собственного сайта — с вашими работами, перечнем навыков и публикаций, контактной информацией. На время, пока сайт будет в разработке, было решено повесить на сайт заглушку с основными данными. В текущем состоянии фоновое изображение не растягивается на всю высоту экрана:
Нужно доработать страницу так, чтобы на любом устройстве фоновое изображение занимало весь экран.
-
Если вы выполняете задание в песочнице CodePen, в начале работы добавьте в тег
<head>следующий метатег<meta name="viewport" content="width=device-width, initial-scale=1.0">. Если вы выполняете задание локально, этот метатег уже добавлен. -
Для элемента с классом
welcomeзадайте такую минимальную высоту, чтобы блок полностью занимал экран пользователя на любом устройстве. -
Для элемента
.containerзадайте верхний и нижний внутренний отступ, равные 10 % от высоты вьюпорта. Свойства должны работать для устройств с шириной экрана до1023px. -
Для элемента с классом
welcome__infoзадайте левый внутренний отступ, равный 35 % от высоты вьюпорта. Свойства должны работать для устройств с шириной экрана от1024px. -
Протестируйте задание на нескольких экранах. На экране с шириной
1366пикселей страница должна выглядеть так:
- Используя эмулятор, протестируйте вёрстку на iPhone 4:
Не требуется вносить какие-либо другие правки в CSS или писать дополнительные правила. Также не изменяйте HTML-разметку.
При решении этой задачи не изменяйте HTML-разметку.
Внесите изменения во вкладке CSS. Перед началом работы сделайте форк пена.