Заказы от фотографов продолжают поступать. Поэтому вы решили создать сайт, на котором каждый фотограф сможет разместить свое портфолио. Информация о каждом из фотографов будет представлена в виде карточек с контактными данными. Сейчас при всех разрешениях экрана такая карточка выглядит одинаково:
Нужно изменить верстку таким образом, чтобы на устройствах с шириной экрана от 767px и меньше или от 1301px и больше карточка выглядела так:
А на устройствах с шириной экрана в диапазоне от 768px до 1300px включительно — так:
-
Если вы выполняете задание в песочнице CodePen, в начале работы добавьте в тег
<head>этот метатег<meta name="viewport" content="width=device-width, initial-scale=1.0">. Если вы выполняете задание локально, этот метатег уже добавлен. -
Для элемента с классом
profile__preview:beforeдобавить прозрачность0.7и цвет фона#481baeтолько для устройств, у которых ширина экрана от767pxи меньше или от1301pxи больше. -
Для элемента с классом
profileдобавить цвет фона#481baeтолько для устройств, у которых ширина экрана в диапазоне от768pxдо1300pxвключительно. -
Для элемента с классом
profile__previewдобавить ширину и высоту по140px, сплошную рамку цветом#ffffffи шириной5pxтолько для устройств, у которых ширина экрана в диапазоне от768pxдо1300pxвключительно. -
Закруглить углы у элемента с классом
profile__previewтолько для устройств, у которых ширина экрана в диапазоне от768pxдо1300pxвключительно. -
Протестируйте на обычном мониторе. У вас должно получиться так:
- Протестируйте результат в эмуляторе, выбрав iPad. У вас должно получиться так:
- Протестируйте результат в эмуляторе, выбрав iPhone 4. У вас должно получиться так:
Внесите изменения во вкладке CSS. Перед началом работы сделайте форк пена.