黄色简洁形式html美食西餐厅网页模板代码



4 12 5



模板描述:黄色 简洁 html 美食西餐厅 网页模板代码,黄色简洁形式html美食西餐厅网页模板代码html模板下载

代码结构

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,700" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/aos.js"></script>
<script src="js/script.js"></script>

3. HTML代码

    <div class="top">
        <img src="images/page_top_end.jpg" alt="top">
    </div>
    <header class="sticky-top">
        <div class="layer">
            <div class="container">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <a class="navbar-brand" href="index.html">
                        <img src="images/logo.png" alt="logo">
                    </a>
                    <div id="navbarSupportedContent" class="collapse navbar-collapse sidenav">
                        <a href="javascript:void(0)" class="closebtn d-lg-none" id="cls-btn">&times;</a>
                        <ul class="navbar-nav ml-lg-auto">
                            <li>
                                <a href="index.html" class="active">Home</a>
                            </li>
                            <li>
                                <a href="about.html">About</a>
                            </li>
                            <li>
                                <a href="recipies.html">recipies</a>
                            </li>
                            <li>
                                <a href="featured.html">featured</a>
                            </li>
                            <li>
                                <a href="events.html">events</a>
                            </li>
                            <li>
                                <a href="contact.html">Contact</a>
                            </li>
                        </ul>
                    </div>
                    <button type="button" class="toggler" id="toggle-button">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                </nav>
            </div>
        </div>
    </header>
    <section class="index-welcomenote">
        <div class="container">
            <ul class="row">
                <li class="col-md-9 col-xl-10" data-aos="fade-up" data-aos-duration="1000">
                    <h4>welcome to my food blog, I am
                        <span>sarah</span>!
                    </h4>
                    <h6>and am a food blogger, please feel free to check my latest food recipes
                    </h6>
                </li>
                <li class="col-md-3 col-xl-2 text-center text-md-right text-xl-center" data-aos="fade-up" data-aos-duration="1000">
                    <img src="images/chef.jpg" alt="chef">
                </li>
            </ul>
        </div>
    </section>
    <section class="carousel">
        <div class="row">
            <div class="col-12">
                <div class="loop owl-carousel owl-theme">
                    <div class="item">
                        <div class="slide">
                            <a href="recipiesingle.html">
                                <figure>
                                    <img src="images/one.jpg" alt="slide1">
                                </figure>
                                <div class="content">
                                    <h4>The Coffee Break</h4>
                                    <ul>
                                        <li>Serves: 2People</li>
                                        <li>Prep: 10Min</li>
                                        <li>Cook: 10Min</li>
                                        <li>Ready in: 20Min</li>
                                        <li>Level: Difficult</li>
                                    </ul>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="slide">
                            <a href="recipiesingle.html">
                                <figure>
                                    <img src="images/two.jpg" alt="slide1">
                                </figure>
                                <div class="content">
                                    <h4>The Coffee Break</h4>
                                    <ul>
                                        <li>Serves: 2People</li>
                                        <li>Prep: 10Min</li>
                                        <li>Cook: 10Min</li>
                                        <li>Ready in: 20Min</li>
                                        <li>Level: Difficult</li>
                                    </ul>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="slide">
                            <a href="recipiesingle.html">
                                <figure>
                                    <img src="images/three.jpg" alt="slide1">
                                </figure>
                                <div class="content">
                                    <h4>The Coffee Break</h4>
                                    <ul>
                                        <li>Serves: 2People</li>
                                        <li>Prep: 10Min</li>
                                        <li>Cook: 10Min</li>
                                        <li>Ready in: 20Min</li>
                                        <li>Level: Difficult</li>
                                    </ul>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="slide">
                            <a href="recipiesingle.html">
                                <figure>
                                    <img src="images/four.jpg" alt="slide1">
                                </figure>
                                <div class="content">
                                    <h4>The Coffee Break</h4>
                                    <ul>
                                        <li>Serves: 2People</li>
                                        <li>Prep: 10Min</li>
                                        <li>Cook: 10Min</li>
                                        <li>Ready in: 20Min</li>
                                        <li>Level: Difficult</li>
                                    </ul>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="slide">
                            <a href="recipiesingle.html">
                                <figure>
                                    <img src="images/five.jpg" alt="slide1">
                                </figure>
                                <div class="content">
                                    <h4>The Coffee Break</h4>
                                    <ul>
                                        <li>Serves: 2People</li>
                                        <li>Prep: 10Min</li>
                                        <li>Cook: 10Min</li>
                                        <li>Ready in: 20Min</li>
                                        <li>Level: Difficult</li>
                                    </ul>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="slide">
                            <a href="recipiesingle.html">
                                <figure>
                                    <img src="images/six.jpg" alt="slide1">
                                </figure>
                                <div class="content">
                                    <h4>The Coffee Break</h4>
                                    <ul>
                                        <li>Serves: 2People</li>
                                        <li>Prep: 10Min</li>
                                        <li>Cook: 10Min</li>
                                        <li>Ready in: 20Min</li>
                                        <li>Level: Difficult</li>
                                    </ul>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="slide">
                            <a href="recipiesingle.html">
                                <figure>
                                    <img src="images/seven.jpg" alt="slide1">
                                </figure>
                                <div class="content">
                                    <h4>The Coffee Break</h4>
                                    <ul>
                                        <li>Serves: 2People</li>
                                        <li>Prep: 10Min</li>
                                        <li>Cook: 10Min</li>
                                        <li>Ready in: 20Min</li>
                                        <li>Level: Difficult</li>
                                    </ul>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="slide">
                            <a href="recipiesingle.html">
                                <figure>
                                    <img src="images/five.jpg" alt="slide1">
                                </figure>
                                <div class="content">
                                    <h4>The Coffee Break</h4>
                                    <ul>
                                        <li>Serves: 2People</li>
                                        <li>Prep: 10Min</li>
                                        <li>Cook: 10Min</li>
                                        <li>Ready in: 20Min</li>
                                        <li>Level: Difficult</li>
                                    </ul>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="index-about">
        <h4>lets know more about who is
            <span>sarah</span>!</h4>
        <div class="container">
            <ul class="row">
                <li class="col-lg-4" data-aos="fade-up" data-aos-duration="1200">
                    <span>h</span>
                    <p>
                        ello and welcome to my personal food blog I am really thank Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy
                        text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
                        text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
                        a type specimen book. It has survived not only five centu-</p>
                </li>
                <li class="col-lg-4" data-aos="fade-up" data-aos-duration="1400">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                        it to make a type specimen book. It has survived not only five centuries, but also the leap into
                        electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
                        release of Letraset sheets containing</p>
                </li>
                <li class="col-lg-4" data-aos="fade-up" data-aos-duration="1600">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
                        it to make a type specimen book. It has survived...</p>
                    <a href="about.html">read more...</a>
                </li>
            </ul>
        </div>
    </section>
    <section class="index-recipies">
        <div class="container">
            <h4 data-aos="fade-up" data-aos-duration="1000">read some of the best food recipes</h4>
            <h6 data-aos="fade-up" data-aos-duration="1000">and am a food blogger, please feel free to check my latest food recipes
            </h6>
            <ul class="row">
                <li class="col-sm-6 col-md-4">
                    <figure data-aos="fade-up" data-aos-duration="800">
                        <a href="recipiesingle.html" data-toggle="lightbox" data-gallery="example-gallery">
                            <img src="images/one.jpg" alt="one" class="img-responsive">
                            <div class="overlay">
                                <h5>How to make better breakfast with minimal items for 2 persons</h5>
                                <span>Posted on:3-8-2018</span>
                                <span>In:Food & Drinks</span>
                            </div>
                        </a>
                    </figure>
                </li>
                <li class="col-sm-6 col-md-4">
                    <figure data-aos="fade-up" data-aos-duration="1000">
                        <a href="recipiesingle.html" data-toggle="lightbox" data-gallery="example-gallery">
                            <img src="images/two.jpg" alt="two" class="img-responsive">
                            <div class="overlay">
                                <h5>How to make better breakfast with minimal items for 2 persons</h5>
                                <span>Posted on:3-8-2018</span>
                                <span>In:Food & Drinks</span>
                            </div>
                        </a>
                    </figure>
                </li>
                <li class="col-sm-6 col-md-4">
                    <figure data-aos="fade-up" data-aos-duration="1200">
                        <a href="recipiesingle.html" data-toggle="lightbox" data-gallery="example-gallery">
                            <img src="images/three.jpg" alt="three" class="img-responsive">
                            <div class="overlay">
                                <h5>How to make better breakfast with minimal items for 2 persons</h5>
                                <span>Posted on:3-8-2018</span>
                                <span>In:Food & Drinks</span>
                            </div>
                        </a>
                    </figure>
                </li>
                <li class="col-sm-6 col-md-4">
                    <figure data-aos="fade-up" data-aos-duration="800">
                        <a href="recipiesingle.html" data-toggle="lightbox" data-gallery="example-gallery">
                            <img src="images/four.jpg" alt="four" class="img-responsive">
                            <div class="overlay">
                                <h5>How to make better breakfast with minimal items for 2 persons</h5>
                                <span>Posted on:3-8-2018</span>
                                <span>In:Food & Drinks</span>
                            </div>
                        </a>
                    </figure>
                </li>
                <li class="col-sm-6 col-md-4">
                    <figure data-aos="fade-up" data-aos-duration="1000">
                        <a href="recipiesingle.html" data-toggle="lightbox" data-gallery="example-gallery">
                            <img src="images/five.jpg" alt="five" class="img-responsive">
                            <div class="overlay">
                                <h5>How to make better breakfast with minimal items for 2 persons</h5>
                                <span>Posted on:3-8-2018</span>
                                <span>In:Food & Drinks</span>
                            </div>
                        </a>
                    </figure>
                </li>
                <li class="col-sm-6 col-md-4">
                    <figure data-aos="fade-up" data-aos-duration="1200">
                        <a href="recipiesingle.html" data-toggle="lightbox" data-gallery="example-gallery">
                            <img src="images/seven.jpg" alt="six" class="img-responsive">
                            <div class="overlay">
                                <h5>How to make better breakfast with minimal items for 2 persons</h5>
                                <span>Posted on:3-8-2018</span>
                                <span>In:Food & Drinks</span>
                            </div>
                        </a>
                    </figure>
                </li>
                <li class="col-sm-6 col-md-4">
                    <figure data-aos="fade-up" data-aos-duration="800">
                        <a href="recipiesingle.html" data-toggle="lightbox" data-gallery="example-gallery">
                            <img src="images/six.jpg" alt="seven" class="img-responsive">
                            <div class="overlay">
                                <h5>How to make better breakfast with minimal items for 2 persons</h5>
                                <span>Posted on:3-8-2018</span>
                                <span>In:Food & Drinks</span>
                            </div>
                        </a>
                    </figure>
                </li>
                <li class="col-sm-6 col-md-4">
                    <figure data-aos="fade-up" data-aos-duration="1000">
                        <a href="recipiesingle.html" data-toggle="lightbox" data-gallery="example-gallery">
                            <img src="images/one.jpg" alt="eight" class="img-responsive">
                            <div class="overlay">
                                <h5>How to make better breakfast with minimal items for 2 persons</h5>
                                <span>Posted on:3-8-2018</span>
                                <span>In:Food & Drinks</span>
                            </div>
                        </a>
                    </figure>
                </li>
                <li class="col-sm-6 col-md-4">
                    <figure data-aos="fade-up" data-aos-duration="1200">
                        <a href="recipiesingle.html" data-toggle="lightbox" data-gallery="example-gallery">
                            <img src="images/two.jpg" alt="nine" class="img-responsive">
                            <div class="overlay">
                                <h5>How to make better breakfast with minimal items for 2 persons</h5>
                                <span>Posted on:3-8-2018</span>
                                <span>In:Food & Drinks</span>
                            </div>
                        </a>
                    </figure>
                </li>
            </ul>
            <div class="blog-btn-sec" data-aos="fade-up" data-aos-duration="1000">
                <a href="recipies.html" class="blog-btn">go to blog</a>
            </div>
        </div>
    </section>
    <section class="index-services">
        <div class="container">
            <h4 data-aos="fade-up" data-aos-duration="1000">what you can expect from
                <span data-aos="fade-up" data-aos-duration="1000">sarah</span>!</h4>
            <h6 data-aos="fade-up" data-aos-duration="1000">and am a food blogger, please feel free to check my latest food recipes
            </h6>
            <ul class="row">
                <li class="col-md-3" data-aos="fade-up" data-aos-duration="1000">
                    <i class="fa fa-cutlery" aria-hidden="true"></i>
                    <h3>magic</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                        standard dummy text ever since the...</p>
                </li>
                <li class="col-md-3" data-aos="fade-up" data-aos-duration="1200">
                    <i class="fa fa-bullhorn" aria-hidden="true"></i>
                    <h3>sponsors</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                        standard dummy text ever since the...</p>
                </li>
                <li class="col-md-3" data-aos="fade-up" data-aos-duration="1400">
                    <i class="fa fa-telegram" aria-hidden="true"></i>
                    <h3>foodies</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                        standard dummy text ever since the...</p>
                </li>
                <li class="col-md-3" data-aos="fade-up" data-aos-duration="1600">
                    <i class="fa fa-pagelines" aria-hidden="true"></i>
                    <h3>super spices</h3>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                        standard dummy text ever since the...</p>
                </li>
            </ul>
        </div>
    </section>
    <section class="index-contact">
        <div class="layer">
            <div class="container" data-aos="fade-up" data-aos-duration="1000">
                <h5>Subscribe to our monthly newsletter</h5>
                <h6>Subscribe to our monthly newsletter and get up to date with our latest trends and fashions...</h6>
                <form>
                    <ul class="row">
                        <li class="col-12 col-md-6">
                            <input type="text" class="w-100" required placeholder="Enter your Name">
                        </li>
                        <li class="col-12 col-md-6">
                            <input type="text" class="w-100" required placeholder="Enter your Email Id">
                        </li>
                    </ul>
                    <button type="submit">Subscribe now</button>
                    <div>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></div>
                </form>
            </div>
        </div>
    </section>
    <footer>
        <div class="container">
            <nav class="navbar navbar-expand-sm navbar-light">
                <a class="navbar-brand" href="index.html">
                    <img src="images/logo.png" alt="logo">
                </a>
                <div class="footer-nav ml-md-auto">
                    <ul class="navbar-nav ml-sm-auto">
                        <li class="nav-item">
                            <a class="nav-link text-white active" href="index.html">Home
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-white" href="about.html">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-white" href="recipies.html">Recipies</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-white" href="featured.html">Featured</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-white" href="events.html">Events</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-white" href="contact.html">Contact</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </footer>
    <div class="bottom">
        <img src="images/page_top_end.jpg" alt="top">
    </div>
    <div class="scrolltop" style="display: block;">
        <div class="scroll icon">
            <i class="fa fa-angle-up"></i>
        </div>
    </div>
    <script>
        jQuery(document).ready(function ($) {
            $('.loop').owlCarousel({
                center: true,
                items: 2,
                loop: true,
                margin: 0,
                // autoplay: true,
                // slideTransition: 'linear',
                // autoplayTimeout: 2000,
                // autoplaySpeed: 1000,
                // autoplayHoverPause: true,
                responsive: {
                    426: {
                        items: 2
                    },
                    640: {
                        items: 3
                    },
                    768: {
                        items: 4
                    },
                }
            });
        });
    </script>



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 黄色 大气 霸气 餐饮 美食 饭店 餐饮行业 美食行业

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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