绿色大气风格响应式美食餐厅网页模板



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

5 18 7



模板描述:绿色 大气风格 响应式 美食餐厅。整站宽屏满屏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。最底部部分带有自动反动和滚动效果,适用美食餐厅等行业。同时兼容手机端和电脑网页端。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css2?family=Libre+Caslon+Text:[email protected];1&amp;family=Open+Sans:ital,[email protected],400;0,600;1,400&amp;display=swap">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/core.min.js"></script>
<script src="js/script.js"></script>

3. HTML代码

    <div class="ie-panel"><a href="http://windows.51qianduan.com/en-US/internet-explorer/"><img src="images/ie8-panel/warning_bar_0000_us.jpg" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."></a></div>
    <div class="preloader">
      <div class="preloader-body">
        <div class="cssload-container">
          <div class="cssload-speeding-wheel"></div>
        </div>
      </div>
    </div>
    <div class="page">
      <header class="section page-header">
        <!--RD Navbar-->
        <div class="rd-navbar-wrap">
          <nav class="rd-navbar" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static" data-xl-layout="rd-navbar-static" data-xxl-layout="rd-navbar-static" data-md-device-layout="rd-navbar-fixed" data-lg-device-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-static" data-xxl-device-layout="rd-navbar-static" data-lg-stick-up-offset="121px" data-xl-stick-up-offset="121px" data-xxl-stick-up-offset="121px" data-lg-stick-up="true" data-xl-stick-up="true" data-xxl-stick-up="true">
            <div class="rd-navbar-collapse-toggle rd-navbar-fixed-element-1" data-rd-navbar-toggle=".rd-navbar-collapse"><span></span></div>
            <div class="rd-navbar-aside-outer rd-navbar-collapse">
              <div class="rd-navbar-aside">
                <ul class="nav-contacts-list">
                  <li class="nav-contacts-item">
                    <svg class="nav-contacts-icon" width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M5.99935 0.666504C2.77435 0.666504 0.166016 3.27484 0.166016 6.49984C0.166016 10.8748 5.99935 17.3332 5.99935 17.3332C5.99935 17.3332 11.8327 10.8748 11.8327 6.49984C11.8327 3.27484 9.22435 0.666504 5.99935 0.666504ZM1.83268 6.49984C1.83268 4.19984 3.69935 2.33317 5.99935 2.33317C8.29935 2.33317 10.166 4.19984 10.166 6.49984C10.166 8.89984 7.76602 12.4915 5.99935 14.7332C4.26602 12.5082 1.83268 8.87484 1.83268 6.49984ZM3.91602 6.49984C3.91602 5.34924 4.84876 4.4165 5.99935 4.4165C6.74365 4.4165 7.43142 4.81359 7.80357 5.45817C8.17572 6.10276 8.17572 6.89692 7.80357 7.5415C7.43142 8.18609 6.74365 8.58317 5.99935 8.58317C4.84876 8.58317 3.91602 7.65043 3.91602 6.49984Z" fill="#EB3845"></path>
                    </svg>
                    <div class="nav-contacts-link"><a class="nav-contacts-link-address" href="#">6391 Elgin St. Celina, Delaware</a></div>
                  </li>
                  <li class="nav-contacts-item">
                    <svg class="nav-contacts-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" clip-rule="evenodd" d="M1.33333 0.5H4.25C4.70833 0.5 5.08333 0.875 5.08333 1.33333C5.08333 2.375 5.25 3.375 5.55833 4.30833C5.65 4.6 5.58333 4.925 5.35 5.15833L3.51667 6.99167C4.71667 9.35 6.65 11.275 9.00833 12.4833L10.8417 10.65C11.0083 10.4917 11.2167 10.4083 11.4333 10.4083C11.5167 10.4083 11.6083 10.4167 11.6917 10.45C12.625 10.7583 13.6333 10.925 14.6667 10.925C15.125 10.925 15.5 11.3 15.5 11.7583V14.6667C15.5 15.125 15.125 15.5 14.6667 15.5C6.84167 15.5 0.5 9.15833 0.5 1.33333C0.5 0.875 0.875 0.5 1.33333 0.5ZM3.45012 2.16667C3.50012 2.90833 3.62512 3.63333 3.82512 4.325L2.82512 5.325C2.48345 4.325 2.26678 3.26667 2.19178 2.16667H3.45012ZM11.6668 12.1833C12.3751 12.3833 13.1001 12.5083 13.8335 12.5583V13.8C12.7335 13.725 11.6751 13.5083 10.6668 13.175L11.6668 12.1833Z" fill="#EB3845"></path>
                    </svg>
                    <div class="nav-contacts-link">Have questions? <a class="nav-contacts-link-phone" href="tel:#">(270) 555-0117</a></div>
                  </li>
                </ul>
                <!--RD Navbar Brand-->
                <div class="rd-navbar-brand">
                  <!--Brand--><a class="brand" href="index.html"><img class="brand-logo-dark" src="images/logo-default-151x53.svg" alt="" width="151" height="53"/></a>
                </div><a class="btn btn-secondary" href="reservation.html">Make a reservation</a>
              </div>
            </div>
            <div class="rd-navbar-main-outer">
              <div class="rd-navbar-main">
                <!--RD Navbar Panel-->
                <div class="rd-navbar-panel">
                  <!--RD Navbar Toggle-->
                  <button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap"><span></span></button>
                  <!--RD Navbar Brand-->
                  <div class="rd-navbar-brand">
                    <!--Brand--><a class="brand" href="index.html"><img class="brand-logo-dark" src="images/logo-default-151x53.svg" alt="" width="151" height="53"/></a>
                  </div>
                </div>
                <div class="rd-navbar-main-element">
                  <div class="rd-navbar-nav-wrap">
                    <ul class="rd-navbar-nav">
                      <li class="rd-nav-item active"><a class="rd-nav-link" href="index.html">Home</a>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="menu.html">menu</a>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="our-story.html">Our Story</a>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="news.html">news</a>
                        <ul class="rd-menu rd-navbar-dropdown">
                          <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="single-post.html">Single post</a>
                          </li>
                        </ul>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="pages.html">pages</a>
                        <ul class="rd-menu rd-navbar-dropdown">
                          <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="404-page.html">404 Page</a>
                          </li>
                          <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="buttons.html">Buttons</a>
                          </li>
                          <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="forms.html">Forms</a>
                          </li>
                          <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="grid-system.html">Grid System</a>
                          </li>
                          <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="privacy-policy.html">Privacy Policy</a>
                          </li>
                          <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="search-results.html">Search Results</a>
                          </li>
                          <li class="rd-dropdown-item"><a class="rd-dropdown-link" href="typography.html">Typography</a>
                          </li>
                        </ul>
                      </li>
                      <li class="rd-nav-item"><a class="rd-nav-link" href="contacts.html">Contacts</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </header>
      <!-- Intro-->
      <section class="section-lg section-intro text-center bg-transparent">
        <div class="container">
          <h1>Local fresh <span class="text-primary text-italic">cuisine</span> <br> for everyone</h1><img src="images/home-01-1280x550.jpg" alt="" width="1280" height="550"/>
        </div>
      </section>
      <!-- Our Restaurant-->
      <section class="section-lg text-center bg-transparent">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-10"><img src="images/logo-73x64.svg" alt="" width="73" height="64"/>
              <div class="h6 text-secondary">Our Restaurant</div>
              <h2 class="px-xxl-4">The <span class="text-primary text-italic">enticing menu</span> emphasizes authentic Italian cuisine prepared with the best ingredients mainly imported directly from <span class="text-secondary">Italy</span>.</h2>
            </div>
          </div>
        </div>
      </section>
      <!-- Photos-->
      <div class="section section-lg bg-transparent">
        <div class="container">
          <div class="row row-30 row-xxl-40 align-items-center">
            <div class="col-sm-6"><img src="images/home-02-620x408.jpg" alt="" width="620" height="408"/>
            </div>
            <div class="col-sm-6"><img src="images/home-03-620x664.jpg" alt="" width="620" height="664"/>
            </div>
            <div class="col-sm-7 offset-sm-2"><img src="images/home-04-730x441.jpg" alt="" width="730" height="441"/>
            </div>
          </div>
        </div>
      </div>
      <!-- Dine With Us-->
      <section class="section section-lg bg-transparent">
        <div class="container">
          <div class="row row-40 justify-content-between">
            <div class="col-md-6">
              <h2>Dine With Us</h2>
              <h4><span class="text-secondary">Foodoko</span> <span class="text-primary">Restaurant</span> is bringing Italy to the Gold Coast.</h4>
              <hr>
              <p class="lead pr-xxl-3">The quality of our food and beverages are of the highest standard, our atmosphere is inclusive, with a feeling of family and togetherness, something synonymous with Italy.</p>
              <p class="lead pr-xxl-3">Our passion and commitment for delivering the highest quality dining experience is achieved through creating a unique blend of atmosphere and culinary delights. Bringing people together to enjoy the senses of taste, smell, sight and sound.</p>
            </div>
            <div class="col-xl-5 col-md-6">
              <ul class="list-details">
                <li class="list-details-item">
                  <h5 class="list-details-title">Opening Hours</h5>
                  <h4 class="list-details-text">Mon - Thu <br> 8 am - 9 pm</h4>
                  <h4 class="list-details-text">Friday -Sunday <br> 10 am - 11 pm</h4>
                </li>
                <li class="list-details-item">
                  <h5 class="list-details-title">Location</h5>
                  <h4 class="list-details-text"><a href="#">6391 Elgin St. Celina, Delaware</a></h4>
                </li>
                <li class="list-details-item">
                  <h5 class="list-details-title">Call Us</h5>
                  <h4 class="list-details-text"><a href="tel:#">(270) 555-0117</a></h4>
                </li>
              </ul><a class="btn btn-secondary" href="reservation.html">Make a reservation</a>
            </div>
          </div>
        </div>
      </section>
      <!-- Our Menu-->
      <section class="section section-lg bg-secondary-light">
        <div class="container">
          <div class="text-center">
            <h2 class="h1">Our Menu</h2>
            <h6 class="text-secondary">Check out the variety of specialties offered at our restaurant</h6>
          </div>
          <div class="row row-50">
            <div class="col-md-6">
                    <div class="menu">
                      <div class="menu-head">
                        <h4 class="menu-head-title">Breakfast</h4>
                        <p class="menu-head-time">Served daily from 7 – 11 am.</p>
                      </div>
                      <hr>
                      <div class="menu-body">
                        <div class="menu-item">
                          <div class="menu-content">
                            <p class="lead menu-title"><a href="#">Baked Eggs &amp; Bacon</a></p>
                            <p class="menu-description">Eggs, bacon and cherry-tomatoes with bread.</p>
                          </div>
                          <div class="h5 menu-price">$7</div>
                        </div>
                        <div class="menu-item">
                          <div class="menu-content">
                            <p class="lead menu-title"><a href="#">Salmon Sandwich</a></p>
                            <p class="menu-description">Fresh salmon fillets, basil leaves, sour cream, brioche rolls</p>
                          </div>
                          <div class="h5 menu-price">$8</div>
                        </div>
                        <div class="menu-item">
                          <div class="menu-content">
                            <p class="lead menu-title"><a href="#">Smoked Meat Sandwich</a></p>
                            <p class="menu-description">Thinly sliced smoked meat, yellow mustard, ground allspice</p>
                          </div>
                          <div class="h5 menu-price">$11</div>
                        </div>
                        <div class="menu-item">
                          <div class="menu-content">
                            <p class="lead menu-title"><a href="#">Healthy Breakfast</a></p>
                            <p class="menu-description">Small bananas, cinnamon, jumbo porridge oats, milk</p>
                          </div>
                          <div class="h5 menu-price">$12</div>
                        </div>
                      </div>
                    </div>
            </div>
            <div class="col-md-6">
                    <div class="menu">
                      <div class="menu-head">
                        <h4 class="menu-head-title">Lunch</h4>
                        <p class="menu-head-time">Served daily from 12 – 4 pm.</p>
                      </div>
                      <hr>
                      <div class="menu-body">
                        <div class="menu-item">
                          <div class="menu-content">
                            <p class="lead menu-title"><a href="#">Lobster Croquettes</a></p>
                            <p class="menu-description">Lobsters, tarragon, lemon, bay leaves, celery, leek</p>
                          </div>
                          <div class="h5 menu-price">$15</div>
                        </div>
                        <div class="menu-item">
                          <div class="menu-content">
                            <p class="lead menu-title"><a href="#">Chicken Breast</a></p>
                            <p class="menu-description">Boneless &amp; skinless chicken breasts, butter, seasonings</p>
                          </div>
                          <div class="h5 menu-price">$9</div>
                        </div>
                        <div class="menu-item">
                          <div class="menu-content">
                            <p class="lead menu-title"><a href="#">Grilled Fillet</a></p>
                            <p class="menu-description">Clove garlic, olive oil, fresh lemon juice, fillets halibut</p>
                          </div>
                          <div class="h5 menu-price">$11</div>
                        </div>
                        <div class="menu-item">
                          <div class="menu-content">
                            <p class="lead menu-title"><a href="#">Trippa Satriano</a></p>
                            <p class="menu-description">Cleaned tripe, tomato puree, garlic, bay leaves, carrot</p>
                          </div>
                          <div class="h5 menu-price">$10</div>
                        </div>
                      </div>
                    </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12 text-center"><a class="btn btn-secondary" href="menu.html">View our full menu</a></div>
          </div>
        </div>
      </section>
      <!-- Reserve-->
      <section class="section section-lg bg-transparent">
        <div class="container">
          <div class="row row-50 justify-content-lg-between justify-content-center align-items-center">
            <div class="col-lg-6 col-md-10">
              <h3>Reserve a <span class="text-primary text-italic">prime-time</span> table at a highly celebrated place!</h3>
              <p class="lead pr-xl-5">Simply select the table, confirm the reservation, and start working on your appetite. A couple of clicks and your table awaits!</p>
              <hr>
              <div class="px-xxl-3">
                <div class="row">
                  <div class="col-4">
                          <!--Counter-->
                          <div class="box-counter">
                            <div class="box-counter-main">
                              <div class="h3 counter">1235</div>
                            </div>
                            <p class="box-counter-title big">Happy Clients</p>
                          </div>
                  </div>
                  <div class="col-4">
                          <!--Counter-->
                          <div class="box-counter">
                            <div class="box-counter-main">
                              <div class="h3 counter">41</div>
                            </div>
                            <p class="box-counter-title big">Comfortable Tables</p>
                          </div>
                  </div>
                  <div class="col-4">
                          <!--Counter-->
                          <div class="box-counter">
                            <div class="box-counter-main">
                              <div class="h3 counter">112</div>
                            </div>
                            <p class="box-counter-title big">Unique Dishes</p>
                          </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-5 col-lg-6">
              <div class="reserve">
                <div class="reserve-inner">
                  <div class="reserve-table">Stage</div><a class="reserve-table" href="reservation.html">1</a><a class="reserve-table" href="reservation.html">2</a><a class="reserve-table" href="reservation.html">3</a><a class="reserve-table" href="reservation.html">4</a><a class="reserve-table" href="reservation.html">5</a>
                  <div class="reserve-table reserved">6</div><a class="reserve-table" href="reservation.html">7</a><a class="reserve-table" href="reservation.html">8</a><a class="reserve-table" href="reservation.html">9</a><a class="reserve-table" href="reservation.html">10</a><a class="reserve-table" href="reservation.html">11</a><a class="reserve-table" href="reservation.html">12</a><a class="reserve-table" href="reservation.html">13</a><a class="reserve-table" href="reservation.html">14</a><a class="reserve-table" href="reservation.html">15</a><a class="reserve-table" href="reservation.html">16</a><a class="reserve-table" href="reservation.html">17</a><a class="reserve-table" href="reservation.html">18</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Call to Action-->
      <section class="section text-center context-dark vide" data-vide-bg="video/video" data-vide-options="posterType: jpg">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-xl-10">
              <h2 class="h1">The best ingredients, incredible dishes and unusual experiences</h2><a class="btn btn-secondary" href="#">Go to shop</a>
            </div>
          </div>
        </div>
      </section>
      <!-- Follow Us-->
      <section class="section section-lg bg-transparent">
        <div class="container">
          <h3>Follow Us on Instagram <br> <a class="link-style" href="#">@FoodokoRestaraunt</a></h3>
          <div class="row row-gallery row-10 align-items-center" data-lighgallery="group">
            <div class="col-md-3 col-6">
              <div class="thumb-insta thumb-insta-1"><a href="images/gallery-01-original.jpg" data-lightgallery="item"><img src="images/gallery-01-290x522.jpg" alt="" width="290" height="522"/></a></div>
            </div>
            <div class="col-md-4 col-6 order-md-1">
              <div class="thumb-insta thumb-insta-6"><a href="images/gallery-06-original.jpg" data-lightgallery="item"><img src="images/gallery-06-440x523.jpg" alt="" width="440" height="523"/></a></div>
            </div>
            <div class="col-md-5">
              <div class="row row-gallery row-10">
                <div class="col-8">
                  <div class="thumb-insta thumb-insta-2"><a href="images/gallery-02-original.jpg" data-lightgallery="item"><img src="images/gallery-02-340x340.jpg" alt="" width="340" height="340"/></a></div>
                </div>
                <div class="col-4">
                  <div class="thumb-insta thumb-insta-3"><a href="images/gallery-03-original.jpg" data-lightgallery="item"><img src="images/gallery-03-180x180.jpg" alt="" width="180" height="180"/></a></div>
                </div>
                <div class="col-5">
                  <div class="thumb-insta thumb-insta-4"><a href="images/gallery-04-original.jpg" data-lightgallery="item"><img src="images/gallery-04-221x221.jpg" alt="" width="221" height="221"/></a></div>
                </div>
                <div class="col-7">
                  <div class="thumb-insta thumb-insta-5"><a href="images/gallery-05-original.jpg" data-lightgallery="item"><img src="images/gallery-05-299x385.jpg" alt="" width="299" height="385"/></a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Footer-->
      <footer class="section footer bg-primary">
        <div class="container">
          <div class="row row-50 align-items-center">
            <div class="col-md-3 col-6 order-md-1">
              <ul class="footer-nav">
                <li class="footer-nav-item"><a class="footer-nav-link h4" href="menu.html">Menu</a></li>
                <li class="footer-nav-item"><a class="footer-nav-link h4" href="our-story.html">Our Story</a></li>
                <li class="footer-nav-item"><a class="footer-nav-link h4" href="#">About Us</a></li>
                <li class="footer-nav-item"><a class="footer-nav-link h4" href="contacts.html">Contacts</a></li>
                <li class="footer-nav-item"><a class="footer-nav-link h4" href="news.html">News</a></li>
              </ul>
            </div>
            <div class="col-md-3 col-6 order-md-1">
              <ul class="footer-nav">
                <li class="footer-nav-item"><a class="footer-nav-link h4" href="#">Facebook</a></li>
                <li class="footer-nav-item"><a class="footer-nav-link h4" href="#">Instagram</a></li>
                <li class="footer-nav-item"><a class="footer-nav-link h4" href="#">Twitter</a></li>
                <li class="footer-nav-item"><a class="footer-nav-link h4" href="#">Pinterest</a></li>
              </ul>
            </div>
            <div class="col-lg-5 col-md-6">
              <div class="footer-newsletter-box">
                <h4>Join Our Mailing List</h4>
                <p class="big pr-xl-5">Sign up for our newsletter to receive special offers.</p>
                <form class="rd-form rd-mailform rd-form-inline" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="bat/rd-mailform.php">
                  <div class="form-wrap">
                    <input class="form-input" id="subscribe-footer-form-email" type="email" name="email" data-constraints="@Email @Required">
                    <label class="form-label" for="subscribe-footer-form-email">Enter your email here</label>
                  </div>
                  <div class="form-button">
                    <button type="submit">
                      <svg class="icon-svg" width="24" height="16" viewBox="0 0 24 16" xmlns="http://www.w3.org/2000/svg">
                        <path d="M0.75 6.75H18.4625L13.9875 2.2625L15.75 0.5L23.25 8L15.75 15.5L13.9875 13.7375L18.4625 9.25H0.75V6.75Z"></path>
                      </svg>
                    </button>
                  </div>
                </form>
              </div>
              <p class="rights">Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.51qianduan.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
            </div>
            <div class="col-lg-1 d-none d-lg-block">
              <div class="footer-border"></div>
            </div>
          </div>
        </div>
      </footer>
    </div>
    <div class="snackbars" id="form-output-global"></div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 扁平化 养生会馆 植物花草 游戏 黑色 bootstrap自适应 IT网络科技 蓝色 普通自适应 欧美风 旅游 红色 中国风 金融理财保险 绿色 韩系 高校 灰色 日系 简洁简约 工业产品 黄色 炫酷 家居装饰 紫色 卡通动画 橙色 招聘猎头 精美 实用通用 艺术创意 粉色 政府 婚庆 大气 白色 新闻资讯 婚纱摄影 棕色 清新 教育培训 彩色 绘画 设计 餐饮美食 其他风格 外贸 服装服饰 建筑 化工企业 医药器械 美容美发 动漫 电影视频 包装印刷 机械 汽车4S店 农业产品 咨询管理 酒店 健身房 化妆品 食品 花卉 房地产 协会组织 快递货运 数码电器 搬家 珠宝首饰 酒业 文化传媒 装修装饰 医院医疗 律师 酒吧音乐 图书 动物宠物 航空航天 股票 能源 公益 饮品 生活用品 家政保洁 体育 房屋租赁 商务 电力公司 打车租车 环保 宗教寺庙 工具文具 企业行业 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到