Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
#2470a1

Вопросы на проверку знаний HTML и CSS

Тест состоит из вопросов с примерной демонстрацией (картинка или видео) итогового решения вопроса.


Ответы на вопросы нужно оформить на одной странице.

Каждый ответ состоит из заголовка, блока со стилизацией для демонстрации и кода, приложенного в блоке TX19

Потом просто пришлите ссылку на страницу.

Пример заполнения странички с ответами


P.S. Разрешено пользоваться любыми материалами, но старайтесь искать ответы самостоятельно,

ведь вы проверяете именно себя.

Вопрос #1
Создайте блок TX01, пропишите после первого абзаца словосочетание Learn more и задайте ему ссылку #more .
Затем стилизуйте эту ссылку под вид кнопки, чтобы она стояла между абзацами. Сделайте также для неё hover эффект.
Пример показан ниже в галерее.
Вопрос #2
Создайте блок TL02 и сформируйте для заголовка смысловую иконку справа.
Пример показан ниже в галерее.
Вопрос #3
Создайте блок B204N и вопрос с вариантами ответов в нём в стиле radio. Стилизуйте этот вопрос до вида кнопок.
Пример показан ниже в галерее.
Вопрос #4
Создайте блок TM101 и сделайте эффект при наведении (на весь блок).
Эффект должен плавно перемешать карточки (1 и 3, 2 и 4)
Вопрос #5
Создайте блок ST320N и стилизуйте поля поиска и сортировка как на скрине ниже
Вопрос #6
Создайте блок ST320N стилизуйте название раздела "Все" таким образом, чтобы выводилась фраза "Вся коллекция"
Вопрос #7
Создайте блок TX16N и стилизуйте его как на скрине ниже
Вопрос #8
Создайте блок BF501N и переместите иконку закрытия как на скрине ниже
Вопрос #9
Создайте блок корзина ST100 и стилизуйте её с привязкой по правой стороне окна и создайте дополнительный скролл в списке товаров с максимальной высотой не больше 300px. Пример стилизации на скрине и на видео ниже
Вопрос #10
Создайте ZeroBlock и cделайте в нём форму. В форме создайте поле RangeSlider c именем sqaure .
Создайте поле calculator и запишите в формулу sqaure*133 . Стилизуйте текущее значение rangeslider, скройте минимальное и максимальное значение и стилизуйте вывод поля калькулятора.
Пример стилизации показан на видео и скриншоте ниже
Вопрос #11
Создайте ZeroBlock и cделайте в нём 3 формы. Стилизуйте одинаково все кнопки отправки форм
Пример стилизации показан на скриншоте ниже
Вопрос #12
Создайте блок ТE225 и измените сетку отображения на 5 колонок. Обратите внимание на объединения в сетке и иное отображение выделенных продуктов.
Пример стилизации показан на скриншоте ниже
Вопрос #13
Создайте блок GL12 на 4 картинки и сделайте анимацию, как на видео ниже
Вопрос #14
Создайте блок GL01 и выведите его атрибут номера слайда в нужное место
Пример стилизации показан на скриншоте и видео ниже
Вопрос #15
Создайте блок ST200 и стилизуйте его, как показано на скрине ниже
  1. Измените положение надписи для артикула
  2. Допишите подпись перед ценой
  3. Создайте в тексте ссылку и стилизуйте её как кнопку.
  4. Расположите кнопки в один ряд
  5. Сделайте миниатюры вертикально и расположите справа от галереи
Пример оформления ответов
Made on
Tilda