master

分支 (1)

管理

管理

master

delivery-warehouse
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新中地外卖网</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css.css/reset.css">
    <!-- 引入主题样式 -->
    <link rel="stylesheet" href="./css.css/theme.css">
    <!-- 引入项目样式 -->
    <link rel="stylesheet" href="./css.css/index.css">
    <!-- 引入网站偏爱图标 -->
    <link rel="shortcut icon" href="./favicon.svg"  type="img/svg+xml">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>
<body>
    <!-- 头部 -->
    <header class="header absolute">
        <div class="w  container ">
            <a href="#" class="logo">
                <img src="./images/logo.svg" alt="外卖网" width="138px" height="38px">
            </a>
            <ul class="nav-bar">
                <li class="nav-bar-item">
                    <a href="#" class="navbar-link">首页</a>
                </li>
                <li class="nav-bar-item">
                    <a href="#" class="navbar-link">关于我们</a>
                </li>
                <li class="nav-bar-item">
                    <a href="#" class="navbar-link">合作餐厅</a>
                </li>
                <li class="nav-bar-item">
                    <a href="#" class="navbar-link">联系方式</a>
                </li>
            </ul>
            <div class="header-btn">
                <button class="cart-btn">
                    <i class="fa fa-cart-plus"></i>
                </button>
                <a href="#" class="btn">现在订购</a>

            </div>
        </div>


    </header>

    <!-- 主体 -->
    <main>
        <!-- section1 -->
        <section class="section1">
            <div class="w  content">
                <div class="container" data-reveal="left">
                    <h1>
                        最好的餐厅<br>
                        带到你家
                    </h1>
                    <p>
                        我们将和最好的餐厅合作，将美妙的食物快速送到你的房间里
                    </p>
                    <button class="btn">现在订购</button>

                </div>
                <div class="section1-banner relative" data-reveal="bottom">
                    <img src="./images/hero-banner.png" alt="">
                    <img src="./images/hero-shape-1.svg" alt="" class="pos1 absolute">
                    <img src="./images/hero-shape-2.svg" alt="" class="pos2  absolute">
                </div>

            </div>
        </section>
        <!-- section2 -->
        <section class="section2">
            <div class="content w">
                <h1 data-reveal="bottom">如何使用我们的服务?</h1>
                <p data-reveal="bottom">拿起手机打开APP,只需三步美食即刻到来!</p>
                <br>
                <ul>
                    <li>
                        <img src="./images/instructuion-1.png" alt="" data-reveal="left"><br>
                        <h2>第一步 选择餐厅</h2>
                        <br>
                        <p>这里的餐厅可以满足大家各种口味需求！</p>
                    </li>
                    <li>
                        <img src="./images/instructuion-2.png" alt="" data-reveal="bottom"><br>
                        <h2>第二步 选择餐品</h2><br>
                        <p>找到你最想要的美食，然后下单！</p>
                    </li>
                    <li>
                        <img src="./images/instructuion-3.png" alt="" data-reveal="right"><br>
                        <h2>第三步 等待送达</h2><br>
                        <p>飞速前往你的住址，稍等一下马上就来！</p>
                    </li>
                </ul>
            </div>
        </section>
        <!-- section3 -->
        <section class="section3">
            <div class="content w">
                <!--  -->
                <div class="text-area" data-reveal="left">
                    <h1>所在城市的最好餐厅</h1>
                    <p>这里展示了各种风格的餐厅，查看他们的评分来确认你的选择</p>
                </div>


                <!--  -->
                <div class="rest rest-1" data-reveal="right">
                    <img src="./images/rest-1.jpg" alt="">
                    <h3>肯宁顿咖啡馆</h3>
                    <ul class="star-lists">
                        <!--  -->
                        <li><i class="fa fa-star" ></i></li>
                        <li><i class="fa fa-star" ></i></li>
                        <li><i class="fa fa-star" ></i></li>
                        <li><i class="fa fa-star" ></i></li>
                    </ul>
                    <div class="two-btn">
                        <button>美式咖啡</button>
                        <button>经典牛排</button>
                    </div>
                    <p>来自美国的纯正咖啡，满足咖啡爱好者的各种需求，还提供各种食物，特别推荐牛排！</p>
                </div>


                <!--  -->
                <div class="rest rest-2" data-reveal="right">
                    <img src="./images/rest-2.jpg" alt="">
                    <h3>维西明顿餐厅</h3>
                    <ul class="star-lists">
                        <!--  -->
                        <li><i class="fa fa-star" ></i></li>
                        <li><i class="fa fa-star" ></i></li>
                        <li><i class="fa fa-star" ></i></li>
                        <li><i class="fa fa-star" ></i></li>
                        <li><i class="fa fa-star" ></i></li>
                    </ul>
                    <div class="two-btn">
                        <button>意大利菜</button>
                        <button>特色披萨</button>
                    </div>
                    <p>如果你喜欢意大利美食，这家餐厅不可错过！</p>
                </div>


                <!--  -->
                <div class="rest rest-3" data-reveal="right">
                    <img src="./images/rest-3.jpg" alt="">
                    <h3>国王之手</h3>
                    <ul class="star-lists">
                        <!--  -->
                        <li><i class="fa fa-star" ></i></li>
                        <li><i class="fa fa-star" ></i></li>
                        <li><i class="fa fa-star" ></i></li>
                        <li><i class="fa fa-star" ></i></li>
                        <li><i class="fa fa-star" ></i></li>
                    </ul>
                    <div class="two-btn">
                        <button>芝士汉堡</button>
                        <button>香辣炸鸡</button>
                    </div>
                    <p>风靡全球的汉堡炸鸡店，最普通的食物是所有人的最爱！</p>
                </div>
            </div>
            <button class="lastBtton">所有餐厅</button>
        </section>

        <!-- section4 -->
        <section class="section4">
            <div class="content w">
                <img src="./images/cta-banner.png" alt="" data-reveal="left"

                >
                <div class="text-area" data-reveal="right">
                    <h2>将喜欢的食物从餐厅带到你的餐桌</h2>
                    <p>
                      我们致力于打造最好的外送服务，你能享受到和餐厅中完全一样的美味食物！
                    </p>
                    <button class="btn">现在订购</button>
                </div>
            </div>
        </section>

        <!-- section5 -->
        <section class="section5">
            <div class="content w" data-reveal="bottom">
                <div class="title" data-reveal="left">服务创造美味</div>
                <div class="item-area" data-reveal>
                  <h3>976</h3>
                  <span>满意的顾客</span>
                </div>
                <div class="item-area" data-reveal>
                  <h3>12</h3>
                  <span>最好的餐厅</span>
                </div>
                <div class="item-area" data-reveal="right">
                  <h3>1k+</h3>
                  <span>送达的食物</span>
                </div>
        </section>
        <section class="section6">
            <div class="content w" data-reveal="left">
                <div class="text-area" data-reveal="left">
                  <h2>客户对我们的评价</h2>
                  <p>
                    我一直以来都排斥通过外卖点购食物，因为我觉得这样的食物品质不好，但快吃网改变了我的看法，尝试过后我发现送给我的食物和在餐厅中点购几乎一模一样!
                  </p>
                  <div class="comments">
                    <img src="./images/testi-avatar.jpg" alt="" />
                    <div class="name">
                      <span>詹姆斯·哈登</span>
                      <div class="stars" data-reveal="right">
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                        <i class="fa fa-star" aria-hidden="true"></i>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="img" data-reveal="right">
                  <img src="./images/testimonial-banner.png" alt="" class="w-100" />
                </div>
              </div>
        </section>
        <section class="section7">
            <div class="content w">
                <h1  data-reveal="bottom">想要加入我们吗？</h1>
                <div class="container">
                  <div class="item relative" data-reveal="left">
                    <div class="img">
                      <img src="./images/partner-1.jpg" alt="" class="w-100" />
                    </div>
                    <div class="info absolute">
                      <h3>外卖骑手</h3>
                      <button>了解更多</button>
                    </div>
                  </div>
                  <div class="item relative" data-reveal="right">
                    <div class="img">
                      <img src="./images/partner-2.jpg" alt="" class="w-100" />
                    </div>
                    <div class="info absolute">
                      <h3>供应商</h3>
                      <button>了解更多</button>
                    </div>
                  </div>
                </div>
              </div>
            </section>
        </section>
        <section class="section8">
            <div class="content w">
                <div class="img" data-reveal="left">
                  <img src="./images/newsletter-banenr.png" alt="" class="w-100" />
                </div>
                <div class="text-area" data-reveal="right">
                  <div class="text">
                    <h2>获取你喜欢<br />餐厅的每日菜单</h2>
                    <input type="text" placeholder="输入邮箱地址" />
                  </div>
                  <button>点击订阅</button>
                </div>
              </div>
        </section>
    </main>


    <!-- 尾部 -->
    <footer >
        <div class="content w">
            <div class="footer1">
                <img src="./images/logo-footer.svg" alt="" />
                <h2>最好的餐厅<br/>带到你家</h2>
                <p>我们将和最好的餐厅紧密合作，将美妙的食物快速送到你的房间里</p>
              </div>
              <div class="footer2">
                <h4>网站地图</h4>
                <a href="#">首页</a>
                <a href="#">关于我们</a>
                <a href="#">合作餐厅</a>
                <a href="#">加入我们</a>
              </div>
              <div class="footer3">
                <h4>联系方式</h4>
                <p class="p1">
                  <i class="fa fa-map-marker"></i>
                  武汉市中地软件园
                </p>
                <p><i class="fa fa-envelope"></i>xzd@xzd.com</p>
                <p><i class="fa fa-phone"></i>88888888</p>
              </div>
         </div>
         <div class="copyright">
            Copyright 2022 codewithxzd. All rights reserved.
         </div>
    </footer>
   <script src="./js/index.js" >
  </script>
</body>
</html>