Наследование и каскадирование / Испытание: взломанный котопрофайл [18/18]

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

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

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

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

×

Испытание: взломанный котопрофайл [18/18]

У Кексика есть брат, которого зовут Феликс. Феликс толстоватый, очень мягкий и нерешительный тюфячок.

Неудивительно, что после эпичной победы Кексика в Битве за курочку его враги решили отыграться именно на Феликсе. Рудольф оказался злопамятным котом с серьёзными связями и смог найти злобных котохакеров, которые взломали и испортили личный профиль Феликса.

К счастью, до CSS-кода хакеры не добрались и напортачили только в HTML, а Кексик дружит с одним начинающим, но хорошим верстальщиком.

Помогите Феликсу исправить профиль. Верните испорченные стили обратно, увеличив специфичность и приоритетность испорченных CSS-правил.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Испытание: взломанный котопрофайл</title> <meta charset="utf-8"> <style> /* Будешь знать, как сувать лапы, куда не надо, шерстяной неудачник! */ #info-title, .profile .button { background: #4dfe15; } .profile div.fact { background: #ff00dc; } .profile .fact div { color: #02f801; } .photo span { margin: 0; height: 20px; text-align: right; } #miska { margin-right: 50px; } </style> </head> <body> <div class="profile"> <div class="photo"> <img src="/assets/course66/cat_walk.png" alt=""> <span class="button stroke">Погладить</span> <span class="button feed">Накормить</span> <span class="button startle">Напугать</span> </div> <div class="info"> <h2 id="info-title">Общая информация</h2> <div class="fact"> <div class="title">Имя</div> <div class="value">Феликс</div> </div> <div class="fact"> <div class="title">Позывные</div> <div class="value">Кто в тапки нассал?</div> </div> <div class="fact"> <div class="title">Вероисповедание</div> <div class="value">Верю в холодильник</div> </div> <div class="fact"> <div class="title">Политические</div> <div class="value">Продам все за еду</div> </div> <h2 style="margin-top:-50px;padding:0;">Альбомы</h2> <div class="albums"> <img src="/assets/course66/cat_drink.png" alt=""> <img id="miska" src="/assets/course66/cat_hungry.png" alt=""> <img src="/assets/course66/cat_sing.png" alt=""> <img src="/assets/course66/cat_pirate.png" alt=""> </div> </div> </div> </body> </html>
CSS
html, body { margin: 0; padding: 0; } body { width: 550px; height: 300px; font-size: 12px; font-family: Tahoma, Arial, sans-serif; } .profile { padding: 5px 10px; } .profile img { display: block; padding: 10px; border: 2px solid #34495e; border-radius: 8px; } .profile .photo { float: left; width: 152px; } .profile .info { float: left; width: 368px; margin-left: 10px; } .info h2 { margin: 0; padding: 10px; font-weight: normal; font-size: 12px; color: #ffffff; background: #34495e; border-radius: 4px; } .fact { padding: 10px; background: white; } .fact:nth-child(odd) { background: #ecf0f1; } .fact::after { content: ""; display: table; clear: both; } .fact .title { float: left; width: 120px; text-align: right; color: #7f8c8d; } .fact .value { margin-left: 140px; color: #34495e; } .albums { margin-top: 5px; } .albums img { float: left; margin-right: 5px; } .albums img:last-child { margin-right: 0; } .button { display: block; height: 30px; margin: 5px 0; line-height: 30px; text-align: center; color: #ffffff; border-radius: 4px; } .stroke { background: #3498db; } .feed { background: #2ecc71; } .startle { background: #e74c3c; }
<HTML Academy>
?

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

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

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

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