- Теория
- Теория
Испытание: другой вариант главной
Доверстайте второй вариант главной страницы блога, используя новые теги, изученные в тренажёре.
Вёрстка практически готова. Не хватает только некоторых тегов. Вам нужно использовать подходящие теги с правильными классами.
В качестве подсказки используйте селекторы в 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%
