• Теория
  • Теория

Испытание: другой вариант главной

Доверстайте второй вариант главной страницы блога, используя новые теги, изученные в тренажёре.

Вёрстка практически готова. Не хватает только некоторых тегов. Вам нужно использовать подходящие теги с правильными классами.

В качестве подсказки используйте селекторы в CSS-коде.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: другой вариант главной</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header class="page-header">
      <div class="logo">
        <img src="logo.svg" width="90" height="90" alt="Cat Energy">
      </div>
      <nav class="main-menu">
        <ul>
          <li><a href="#home">Главная</a></li>
          <li><a href="#blog">Посты</a></li>
          <li><a href="#me">Обо мне</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article class="blog-entry">
        <aside class="video-preview">
          <img src="preview.jpg" alt="Видео превью">
        </aside>
        <section class="idea">
          <h1>Размышления о жизни</h1>
          <p>Существует много вещей, которые безразличны собакам, но кошки от них без ума.</p>
          <p>К примеру, любимое место кота — это клавиатура компьютера. Собака не будет постоянно спать на клавиатуре.</p>
        </section>
      </article>
      <section class="photos">
        <figure class="slides">
          <img src="keks-1.jpg" alt="Кекс 1">
          <img src="keks-2.jpg" alt="Кекс 2">
          <img src="keks-3.jpg" alt="Кекс 3">
          <img src="keks-4.jpg" alt="Кекс 4">
          <img src="keks-5.jpg" alt="Кекс 5">
        </figure>
      </section>
    </main>
    <footer class="page-footer">
      <div class="info">
        <img src="keks.jpg" width="50" alt="Портрет Кекса">
        Кекс, keks@htmlacademy.ru
      </div>
      <div class="copyright">
        © 2008—2014 Cat Energy
      </div>
    </footer>
  </body>
</html>
Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Возможности HTML и CSS» тренажёра «Продвинутые возможности HTML» можно после регистрации и оформления подписки.