Создание семантической разметки по макету(Яхт Клуб)

jiucoder · 10.Июль.2023 05:30:20

Добрый день. Не могу понять где нестыковка.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <header class="main-header">
      <nav class="main-nav">
        <a class="logo" href="#">
          <img src="img/placeholder.svg" alt="Логотип яхт-клуба Yacht Club" />
        </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>
          <li class="site-navigation-item"><a href="#">Новости</a></li>
          <li class="site-navigation-item"><a href="#">Контакты</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section class="hero">
        <h1 class="hero-title">Вместе под парусом</h1>
        <img src="img/placeholder.svg" alt="Картинка яхты" />
      </section>
      <section class="reviews">
        <p class="reviews-data">20 октября - 19 апреля</p>
        <h2 class="reviews-title">Стань частью команды</h2>
        <p>
          Если вы давно хотели попробовать себя в яхтинге – сейчас самое лучшее
          время! Мы набираем команду будущих шкиперов. За 6 вы станете настоящим
          капитаном и уже в следующем сезоне сможете самостоятельно выйти в
          море!
        </p>
        <img src="img/placeholder.svg" alt="Картинка команды" />

        <p class="reviews-data">16 июля - 23 июля</p>
        <h2 class="reviews-title">Рожденные в воде</h2>
        <p>
          Подарите детям настоящее приключение! День с морскими пиратами на
          корабле – это лучшая команда, веселые аниматоры, игры, соревнования,
          работа в команде и, конечно, море!
        </p>
        <img src="img/placeholder.svg" alt="Картинка детей" />
      </section>

      <section class="contacts">
        <img src="img/placeholder.svg" alt="Карта" class="map" />
        <h2 class="contacts-title">Контакты</h2>
        <p class="contacts-address-text"><b>Адрес:</b> г. Сочи, ул. Бзугу, 9</p>

        <p class="contacts-phone">
          <b>Телефон:</b><a href="tel:+8622620563"> 8 (622) 62-05-63</a>
        </p>
        <p class="contacts-email">
          <b>E-mail:</b
          ><a href="mailto:yachtclub-sochi@mail.ru"> yachtclub-sochi@mail.ru</a>
        </p>
        <h3 class="contacts-subtitle">Мы в социальных сетях:</h3>
        <ul class="contacts-social-list">
          <li class="contacts-social-list-item">
            <a href="#"
              ><img
                src="img/placeholder.svg"
                width="70"
                height="30"
                alt="Facebook"
            /></a>
          </li>
          <li class="contacts-social-list-item">
            <a href="#"
              ><img
                src="img/placeholder.svg"
                width="70"
                height="30"
                alt="Twiter"
            /></a>
          </li>
          <li class="contacts-social-list-item">
            <a href="#"
              ><img
                src="img/placeholder.svg"
                width="70"
                height="30"
                alt="Instagram"
            /></a>
          </li>
        </ul>
      </section>
    </main>
    <footer class="main-footer">
      <a class="logo" href="#">
        <img src="img/placeholder.svg" alt="Логотип яхт-клуба Yacht Club" />
      </a>
      <p class="policy"><a href="">Политика конфиденциальности</a></p>
      <p class="copyright">Яхтклуб ©2020 Все права защищены</p>
      <ul class="main-footer-list">
        <li class="main-footer-about-item">
          <h2 class="main-footer-about-title">Компания</h2>
          <ul class="about-list">
            <li><a href="#">О нас</a></li>
            <li><a href="#">Команда</a></li>
            <li><a href="#">Новости</a></li>
            <li><a href="#">Блог</a></li>
            <li><a href="#">Галерея</a></li>
          </ul>
        </li>
        <li class="main-footer-club-item">
          <h2 class="main-footer-club-title">Яхт-клуб</h2>
          <ul class="club-list">
            <li><a href="#">Правила</a></li>
            <li><a href="#">Стоимость</a></li>
            <li><a href="#">Анкета</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Партнеры</a></li>
          </ul>
        </li>
        <li class="main-footer-services-item">
          <h2 class="main-footer-services-title">Услуги</h2>
          <ul class="services-list">
            <li>
              <a href="#">Аренда яхты</a>
            </li>
            <li>
              <a href="#">Свадьба на яхте</a>
            </li>
            <li>
              <a href="#">День рождение</a>
            </li>
            <li>
              <a href="#">Бизнес-встречи</a>
            </li>
            <li><a href="#">Прогулки</a></li>
          </ul>
        </li>
        <li class="main-footer-regatta-item">
          <h2 class="main-footer-regatta-title">Регаты</h2>
          <ul class="regatta-list">
            <li>
              <a href="#">Корпоративные регаты</a>
            </li>
            <li>
              <a href="#">Календарь мероприятий</a>
            </li>
            <li>
              <a href="#">Стать участником</a>
            </li>
            <li>
              <a href="#">Результаты регат</a>
            </li>
            <li><a href="#">Обучение</a></li>
          </ul>
        </li>
      </ul>
    </footer>
  </body>
</html>

jiucoder · 10.Июль.2023 08:10:20

вопрос закрыт(решил).

DeathAmphetamine · 31.Июль.2023 13:33:01

Подскажи, как решил?
Мой вариант кода 4 из 5 правильных блоков:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Яхт-клуб «Под парусом»</title>
    <link rel="stylesheet" href="outlines.css">
  </head>
  <body>
    <header>
    <img src="img/placeholder.svg" alt="Логотип яхт-клуба Yacht Club">
    <nav class="main-header-navi">
        <ul class="site-navi">
            <li class="nav-item"><a href="#">Наш клуб</a></li>
            <li class="nav-item"><a href="#">Регаты</a></li>
            <li class="nav-item"><a href="#">Команда</a></li>
            <li class="nav-item"><a href="#">Обучение</a></li>
            <li class="nav-item"><a href="#">Новости</a></li>
            <li class="nav-item"><a href="#">Контакты</a></li>
        </ul>
    </nav>
    </header>

    <main>
      <section class="hero">
        <h2>Вместе под парусом</h2>
      <img src="img/placeholder.svg" alt="Главная заставка. Яхта, море, солнце, берег">
      </section>

      <section class="reviews">
        <p class="reviews-data">20 октября - 19 апреля</p>
        <h2 class="reviews-title">Стань частью команды</h2>
        <p>Если вы давно хотели попробовать себя в яхтинге – сейчас самое лучшее время! 
          Мы набираем команду будущих шкиперов. 
          За 6 вы станете настоящим капитаном 
          и уже в следующем сезоне сможете самостоятельно выйти в море!</p>
        <img src="img/placeholder.svg" alt="Мужик смотрит в бинокль">
        
        <p class="reviews-data">16 июля - 23 июля</p>
        <h2 class="reviews-title">Рожденные в воде</h2>
        <p>Подарите детям настоящее приключение! 
          День с морскими пиратами на корабле – это лучшая команда, 
          веселые аниматоры, игры, соревнования, работа в команде и, конечно, море!</p>
        <img src="img/placeholder.svg" alt="Дети пьют на яхте коктейли">
      </section>

      <section class="contacts">
        <div class="contacts-column">
          <h2 class="contacts-title title-decoration">Контакты</h2>
          <ul class="contacts-list">
            <li class="contacts-item">
              <h3 class="contacts-subtitle">Адрес:</h3>
              <span class="contacts-desription">г. Сочи, ул. Бзугу, 9</span>
            </li>
            <li class="contacts-item">
              <h3 class="contacts-subtitle">Телефон:</h3>
              <a class="contacts-desription-link" href="+7622620563">8 (622) 62-05-63</a>
            </li>
            <li class="contacts-item">
              <h3 class="contacts-subtitle">E-mail:</h3>
              <a class="contacts-desription-link" href="mailto:yachtclub-sochi@mail.ru">yachtclub-sochi@mail.ru</a>
            </li>
            <li>
              <h3 class="contacts-social-subtitle">Мы в социальных сетях:</h3>
              <ul class="contacts-social-list">
                <li class="contacts-social-item">
                    <a href="#"><img src="img/placeholder.svg" alt="Facebook"></a></li>
                <li class="contacts-social-item">
                    <a href="#"><img src="img/placeholder.svg" alt="Twiter"></a></li>
                <li class="contacts-social-item">
                    <a href="#"><img src="img/placeholder.svg" alt="Instagram"></a></li>
              </ul>
            </li>
          </ul>
        </div>
        <img class="contacts-map" src="img/placeholder.svg" alt="Карта с местоположением">
      </section>

    </main>

    <footer>
      <section class="policy">
        <img src="img/placeholder.svg" alt="Логотип яхт-клуба Yacht Club">
        <p><a href="#">Политика конфиденциальности</a></p>
        <p>Яхтклуб ©2020 Все права защищены</p>
      </section>
      <section>
        <ul class="main-footer-list">
          <li class="main-footer-about-item">
            <h1 class="main-footer-about-title">Компания</h1>
            <ul class="about-list">
              <li><a href="#">О нас</a></li>
              <li><a href="#">Команда</a></li>
              <li><a href="#">Новости</a></li>
              <li><a href="#">Блог</a></li>
              <li><a href="#">Галерея</a></li>
            </ul></li>
          <li class="main-footer-club-item">
            <h1 class="main-footer-club-title">Яхт-клуб</h1>
            <ul class="club-list">
              <li><a href="#">Правила</a></li>
              <li><a href="#">Стоимость</a></li>
              <li><a href="#">Анкета</a></li>
              <li><a href="#">FAQ</a></li>
              <li><a href="#">Партнеры</a></li>
            </ul></li>
          <li class="main-footer-services-item">
            <h1 class="main-footer-services-title">Услуги</h1>
            <ul class="services-list">
              <li><a href="#">Аренда яхты</a></li>
              <li><a href="#">Свадьба на яхте</a></li>
              <li><a href="#">День рождение</a></li>
              <li><a href="#">Бизнес-встречи</a></li>
              <li><a href="#">Прогулки</a></li>
            </ul></li>
          <li class="main-footer-regatta-item">
            <h1 class="main-footer-regatta-title">Регаты</h1>
            <ul class="regatta-list">
              <li><a href="#">Корпоративные регаты</a></li>      
              <li><a href="#">Календарь мероприятий</a></li>            
              <li><a href="#">Стать участником</a></li>
              <li><a href="#">Результаты регат</a></li>
              <li><a href="#">Обучение</a></li>
            </ul></li>
        </ul>
      </section>
    </footer>
  </body>
</html>