- Теория
- Теория
Ссылки на соцсети, часть 1
Остался последний неразмеченный блок подвала — ссылки на соцсети.
Вы уже несколько раз делали разметку подобных списочных блоков, поэтому закрепите это умение. Чтобы определиться с тегами, вспомните, как похожий элемент был размечен в демонстрационном кейсе.
- index.html
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Студия пилатеса</title>
</head>
<body>
<header class="main-header">
<nav class="main-nav">
<a class="logo" href="#">
<img src="img/empty.svg" width="70" height="30" alt="Логотип студии пилатеса">
</a>
<ul class="site-navigation">
<li class="site-navigation-item">
<a href="#">О нас</a>
</li>
<li class="site-navigation-item">
<a href="#">Расписание</a>
</li>
<li class="site-navigation-item">
<a href="#">Стоимость</a>
</li>
<li class="site-navigation-item">
<a href="#">Отзывы</a>
</li>
</ul>
</nav>
<a class="phone" href="tel:+79183650707">+7 918 365 07 07</a>
</header>
<main>
<h1>Студия пилатеса</h1>
<p>Твоё здоровое тело через 10 занятий</p>
<a href="#">Смотреть расписание</a>
<section class="about">
<h2>О пилатесе</h2>
<img src="img/empty.svg" width="800" height="500" alt="Как проходят занятия в нашей студии">
<p>Пилатес соединяет элементы растяжки с элементами силовой тренировки</p>
<p>Комплекс упражнений укрепляет мышцы пресса и спины, улучшает гибкость мышц и связок, подвижность суставов и избавляет от дискомфорта в позвоночнике</p>
<a href="#">Подробнее</a>
</section>
<section class="tariff">
<h2>Тарифы</h2>
<ul class="tariff-list">
<li class="tariff-item">
<h3 class="tariff-title">Уровень <b>Новичок</b></h3>
<p>150 руб. / занятие</p>
<a href="#">Записаться</a>
</li>
<li class="tariff-item">
<h3 class="tariff-title">Уровень <b>Профи</b></h3>
<p>200 руб. / занятие</p>
<a href="#">Записаться</a>
</li>
<li class="tariff-item">
<h3 class="tariff-title">Уровень <b>Мастер</b></h3>
<p>350 руб. / занятие</p>
<a href="#">Записаться</a>
</li>
</ul>
</section>
<section class="comments">
<h2>Отзывы</h2>
<ul class="comments-list">
<li class="comments-item">
<img src="img/empty.svg" width="150" height="150" alt="Фотография Вероники Кулешовой">
<h3>Вероника Кулешова</h3>
<p>25 лет</p>
<p>Хожу на пилатес уже пять месяцев. После десяти занятий уже увидела результат: тело подтянулось, улучшилась осанка, появился пресс. И самое главное, пропал сильный изгиб поясничного отдела, который меня очень беспокоил.</p>
</li>
<li class="comments-item">
<img src="img/empty.svg" width="150" height="150" alt="Фотография Надежды Петровой">
<h3>Надежда Петрова</h3>
<p>23 года</p>
<p>Начала заниматься пилатесом по достаточно банальной причине – хотелось поддерживать хорошую форму, и не ездить на занятия далеко от дома. занятие пилатесом с инвентарем Зал пилатеса был буквально через дорогу, поэтому и записалась туда.</p>
</li>
<li class="comments-item">
<img src="img/empty.svg" width="150" height="150" alt="Фотография Оксаны Тодоренко">
<h3>Оксана Тодоренко</h3>
<p>19 лет</p>
<p>У меня был печальный опыт занятий пилатесом, связанный с некомпетентностью инструктора, который проводил тренировки. Я занималась пилатесом 2 месяца, а потом забросила.</p>
</li>
</ul>
</section>
</main>
<footer class="main-footer">
<p class="copyright">Pilates Plus, 2017 ©</p>
<a class="footer-logo" href="#">
<img src="img/empty.svg" width="70" height="30" alt="Логотип студии пилатеса">
</a>
ВКонтакте
Facebook
Instagram
</footer>
</body>
</html>
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
0
- Разметьте первый элемент перечня соцсетей.
Важно: тексты с названиями не размеченных соцсетей не удаляйте.