Позиционирование / Испытание: собери слово «вечность» [20/20]

Зарегистрируйтесь, чтобы проходить испытания

Регистрация займёт всего минуту и позволит сохранять прогресс обучения.

Вы можете зарегистрироваться с помощью своей эл. почты и пароля, либо с помощью

ВК ВКонтакте или FB Facebook

×

Испытание: собери слово «вечность» [20/20]

В «Снежной королеве» Кай собирал из льдинок слово «Вечность». В этом испытании вам нужно собрать из 12 заготовок слово «HTML».

Используйте тот тип позиционирования и те приёмы позиционирования, которые вам больше понравились. Сетка на заднем фоне поможет вам правильно расчитать координаты. Напомним, что маленькая ячейка имеет размер 20 на 20 пикселей, а большая 100 на 100.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Испытание: собери слово «вечность»</title> <link rel="stylesheet" href="/assets/course10/style1.css"> </head> <body> <div class="scene"> <div class="h h1"></div> <div class="h h2"></div> <div class="h h3"></div> <div class="v v1"></div> <div class="v v2"></div> <div class="v v3"></div> <div class="v v4"></div> <div class="v v5"></div> <div class="v v6"></div> <div class="corner-top"></div> <div class="corner-bottom"></div> <div class="logo"></div> </div> </body> </html>
CSS
html { padding: 0; } body { margin: 0; padding: 20px; } .scene { position: relative; width: 260px; height: 260px; background: none; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5); } div { display: inline-block; background: white; } /* горизонтальные элементы */ .h { width: 50px; height: 10px; } .h3 { width: 40px; } /* вертикальные элементы */ .v { width: 10px; height: 50px; } /* уголки */ .corner-top { border: 15px solid white; border-top-width: 20px; border-bottom-width: 0; border-top-color: transparent; background: none; } .corner-bottom { border: 15px solid transparent; border-top-width: 20px; border-bottom-width: 0; border-top-color: white; background: none; } /* лого */ .logo { width: 64px; height: 64px; background: url('/assets/course10/logo.png'); }
<HTML Academy>
?

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.