forth.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mysterys for you to explore</title>
    <link rel="shortcut icon" type="image/png" href="./img/logo-4.png" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200;300;400;500;600;700;900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./style.css" />
    <script src="./script-4.js" defer></script>
  </head>
  <body>
    <header>
      <nav class="nav">
        <div class="img__logos">
          <a href="./index.html">
            <img
              src="img/logo-6.png"
              alt="Travel logo-1"
              class="nav__logo"
              id="logo1"
              designer="xiaowu"
              data-version-number="1.0"
            />
          </a>
          <ul class="nav__links">
            <li class="nav__item">
              <a class="nav__link" href="#section--1">观光&活动</a>
            </li>
            <li class="nav__item">
              <a class="nav__link" href="#section--2">计划您的旅程</a>
            </li>
            <li class="nav__item">
              <a class="nav__link" href="#section--3">旅游必备信息</a>
            </li>
          </ul>
        </div>
        <div class="nav__icons">
          <a href="./map.html" target="_blank">
            <img src="./img/icon/location.svg" class="nav__icon" />
          </a>
          <a href="#nav__input">
            <img src="./img/icon/search.svg" class="nav__icon"
          /></a>
          <a href="#"> <img src="./img/icon/person.svg" class="nav__icon" /></a>
          <input class="nav__input" id="nav__input" />
        </div>
      </nav>
    </header>

    <section class="detailChoose">
      <div class="detail__text">
        <h2>请选择旅行主题</h2>
      </div>
      <div class="img__details">
        <div class="img__detail" id="img__detail--1">
          <img src="img/D/D1-1.jpg" alt="detail-1" />
          <p>凤翔书院</p>
        </div>
        <div class="img__detail" id="img__detail--2">
          <img src="img/D/D1-2.jpg" alt="detail-2" />
          <p>大涧口古镇</p>
        </div>
        <div class="img__detail" id="img__detail--3">
          <img src="img/D/D1-3.jpg" alt="detail-3" />
          <p>三爷泉</p>
        </div>
        <div class="img__detail" id="img__detail--4">
          <img src="img/D/D1-4.jpg" alt="detail-4" />
          <p>退步堂</p>
        </div>
      </div>

      <div class="div__details hidden">
        <div class="text__details">
          <p class="text__details--p1">凤翔书院|沉淀百年的油墨香</p>
          <p class="text__details--p2">【中国传统古建筑】</p>
          <p class="text__details--p3">
            凤翔书院，建成于清朝雍正四年，是曾经的文庙，如今书香院落保存完好，院内一棵百年古银杏树挺立，见证这里的岁月流转，人事更替。每到秋天，这里是一地金黄，满目碎金，踏过层层落叶，步于其中，还能闻见空气中的油墨香气，是研墨书香，是学子捧卷，是时光飞逝。
          </p>
        </div>
        <div class="pic__details">
          <div class="pic__detail">
            <img src="img/D/D2-1.jpg" alt="country" />
          </div>
          <div class="pic__detail">
            <img src="img/D/D2-2.jpg" alt="country" />
          </div>
        </div>
        <button class="btn btn--go-last">即刻出发！</button>

      </div>
    </section>

    <footer class="footer">
      <div class="footer__flex">
        <div class="footer__call">
          <div class="footer__header">
            <img src="./img/icon/call.svg" class="footer__icon" />
            <div>
              <p class="footer__header--text">联系我们</p>
            </div>
          </div>
          <div class="footer__text">
            <p>中国: +86 400-000-0000</p>
            <p>邮箱: Travelnow@163.com</p>
          </div>
        </div>

        <div class="footer__pay">
          <div class="footer__header">
            <img src="./img/icon/wallet.svg" class="footer__icon" />
            <p class="footer__header--text">付款方式</p>
          </div>
          <div class="footer__pay--icons">
            <img src="./img/icon/alipay.svg" class="footer__icon" />
            <img src="./img/icon/wechat.svg" class="footer__icon" />
            <img src="./img/icon/card.svg" class="footer__icon" />
          </div>
        </div>
      </div>
      <p class="footer__copyright">
        &copy; 2024 by Xiaowu && Yueqi. All rights reserved.
      </p>
    </footer>
  </body>
</html>