мне нужна помощь, чтобы ответить на эту техническую оценку
Шаг 1
В теге STYLE выделите элементу тела белый фон
Создайте элемент BUTTON с идентификатором фильтра-запроса и присвойте ему класс CSS select-text mdc-icon-button и material-icons. Установите его текст в filter_list.
Создайте элемент DIV и присвойте ему CSS-класс select. В DIV создайте элемент SELECT с помощью CSS-класса select-text
Элемент SELECT должен иметь опцию, которая отключена и выбрана по умолчанию. Дайте этой опции любой текст, который вам нравится, например, «Выбрать пользователя»
Затем создайте новый DIV с CSS-классом user-photo. Внутри него создайте ИЗОБРАЖЕНИЕ и установите его src в качестве заполнителя из https://placeholder.com/ Убедитесь, что ваше ИЗОБРАЖЕНИЕ имеет альтернативный текст
Затем создайте DIV с классом деталей CSS и mdc-elevation - z3. Этот DIV должен иметь 5 элементов PARAGRAPH, каждый из которых содержит SPAN с классом CSS prop и еще один SPAN с классом CSS значения
Шаг 2
Используя созданные ранее элементы SPAN, ваше приложение будет отображать возраст, рост, вес, пол и страну любого пользователя. Давайте назовем эти пользовательские свойства!
Для данного пользовательского свойства, например, Age, найдите элемент PARAGRAPH и дайте дочернему SPAN с классом prop атрибут HTML data-age, а затем установите его текстовое значение в Age:. SPAN со значением класса должен иметь HTML-атрибут data-age-value. Атрибуты HTML не должны иметь vlaue.
Как и для Age, сделайте то же самое для всех пользовательских свойств, перечисленных выше, чтобы все пары элементов SPAN отображались в одно пользовательское свойство. Не стесняйтесь заказывать их так, как вам нравится.
Шаг 3
Создайте КНОПКУ с идентификатором оракула и CSS-классом mdc-button. Дайте кнопке текст с призывом к действию по вашему выбору, например, «Рассчитать ИМТ»
Создайте DIV ID результата. Внутри него создайте элемент HEADING с помощью CSS-класса mdc-типографии - headline5. Установите текст заголовка в BMI.
Рядом с заголовком и все еще в DIV с идентификатором результата создайте пустой ПАРАГРАФ.
Время, чтобы ваше приложение выглядело хорошо. Чтобы получить лучший предварительный просмотр по мере продвижения, не стесняйтесь устанавливать некоторые фиктивные значения данных в элементах SPAN для каждого пользовательского свойства
Шаг 4
.Select DIV должен иметь нижнее поле 2,5em
DIV-файл .user-photo, обертывающий IMAGE пользователя, должен иметь ширину и высоту 150px и должен отображаться в виде круга. Возможно, вам придется изучить свойство CSS переполнения, чтобы IMAGE соответствовал круглой форме DIV
Шаг 5
DIV .details должен иметь белый цвет переднего плана и цвет фона # 6200ee, размер шрифта 1,3em, верхнее поле 4em, отступ сверху / снизу 0,5em и отступ слева / справа от 1em, а также дополнительные изогнутые края по 10 пикселей
Элементы PARAGRAPH в пределах .details DIV должны иметь поля 0,3em
DIV с идентификатором результата должен использовать абсолютное позиционирование: 2,2 м от правого края и 6,5 м от нижнего края области просмотра. Он должен быть шириной 100 пикселей и иметь текст по центру.
Заголовок в DIV с идентификатором результата должен иметь отступ 1em, белый фон, 10% изогнутых краев и без полей.
PARAGRAPH в DIV с идентификатором результата должен иметь белый цвет переднего плана, сплошную белую нижнюю границу 5 пикселей, размер шрифта 2em, без полей, отступы 0,5em сверху / снизу и без заполнения слева / справа.
Шаг 6
КНОПКА с ID оракула должна иметь верхнее поле 2.5em, сплошную границу 1px и занимать доступное горизонтальное пространство.