顶级茶叶网页的设计与实现代码_twitter

顶级茶叶网页的设计与实现代码_twitter_02

  <footer class="footer animate__animated wow animate__backInUp" id="footer">

  <div class="container">

   <div class="row">

    <div class="col-12 col-lg-8 offset-lg-2 position-relative text-center mb-5">

     <h3 class="fs-4 fw-bold mb-4 mt-4 mt-lg-5">让我们保持联系</h3>

     <p class="mb-4 theme-text-accent-one">

      注册享受 20% 的折扣,成为第一个了解新产品、优惠和所有有机产品的人。

     </p>

     <form class="form-subcriber d-flex">

      <input type="email" placeholder="您的电子邮件地址">

      <div class="m-0">

       <button class="btn custom-btn-primary fw-bold button-effect" type="submit">订阅</button>

      </div>

     </form>

    </div>

    <div class="col-12 col-lg-4 position-relative">

     <h3 class="fs-4 fw-bold mb-4 mt-0 mt-lg-5">关于我们</h3>

     <div class="d-flex">

      <p class="mt-0 mt-lg-3 font-small">

       我们得到了强大的基础设施的支持,这些基础设施分布在大片土地上。我们已经安装了 该部门中的各种先进机器和工具使我们能够按时满足客户需求。

      </p>

     </div>

     <div class="position-relative mt-0 mt-lg-3">

      <img src="http://www.dalitea.net/static/imgs/logo-dlt.png?v=2.0" class="img-fluid"

       alt="Brand light">

     </div>

    </div>

    <div class="col-12 col-lg-8 position-relative">

     <div class="row">

      <div class="col-12">

       <div class="row">

        <div class="col-12 col-md-4">

         <h3 class="fs-4 fw-bold mb-4 mt-4 mt-lg-5">品牌渊源</h3>

         <ul class="footer-link">

          <li><i class="bi bi-plus"></i><a href="javascript:void(0)">品牌故事</a></li>

          <li><i class="bi bi-plus"></i><a href="javascript:void(0)">品牌文化</a></li>

         </ul>

        </div>

        <div class="col-12 col-md-4">

         <h3 class="fs-4 fw-bold mb-4 mt-4 mt-lg-5">帮助中心</h3>

         <ul class="footer-link">

          <li><i class="bi bi-plus"></i><a href="javascript:void(0)">交货信息</a></li>

          <li><i class="bi bi-plus"></i><a href="javascript:void(0)">条款和条件</a></li>

          <li><i class="bi bi-plus"></i><a href="javascript:void(0)">隐私策略</a></li>

          <li><i class="bi bi-plus"></i><a href="javascript:void(0)">退货和退款</a></li>

          <li><i class="bi bi-plus"></i><a href="javascript:void(0)">联系</a></li>

          <li><i class="bi bi-plus"></i><a href="javascript:void(0)">常见问题</a></li>

         </ul>

        </div>

        <div class="col-12 col-md-4">

         <h3 class="fs-4 fw-bold mb-4 mt-4 mt-lg-5">取得联系</h3>

         <div class="d-flex social mt-3">

          <a href="javascript:void(0)"><i class="bi bi-facebook"></i></a>

          <a href="javascript:void(0)"><i class="bi bi-twitter"></i></a>

          <a href="javascript:void(0)"><i class="bi bi-youtube"></i></a>

          <a href="javascript:void(0)"><i class="bi bi-instagram"></i></a>

         </div>

         <div class="mt-4">

          <p class="mb-0">需要帮助吗?致电我们</p>

          <h4 class="mb-0 theme-text-accent-one">+ (009) 123-4567</h4>

         </div>

         <h3 class="fs-4 fw-bold mb-4 mt-4 mt-lg-4">付款接受</h3>

         <div class="mt-3">

          <img src="static/picture/paypal.png" class="img-fluid" alt="payment icon">

          <img src="static/picture/visa.png" class="img-fluid" alt="payment icon">

          <img src="static/picture/mastercard.png" class="img-fluid"

           alt="payment icon">

         </div>

        </div>

       </div>

      </div>

     </div>

    </div>

   </div>


  </div>

  <div class="position-relative">

   <div class="container">

    <div class="row py-3">

     <div class="col-12">

      <p class="mb-0 font-small text-center">Copyright &copy; 2023.Company name All rights

       reserved.

      </p>

     </div>

    </div>

   </div>

  </div>

 </footer>