粉色简洁形式pc+wap冰淇淋网页模板代码



4 14 5



模板描述:粉色 简洁 pc+wap 冰淇淋 网页模板代码,粉色简洁形式pc+wap冰淇淋网页模板代码html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel='stylesheet' type='text/css' media="all">
<link href="http://fonts.googleapis.com/css?family=ZCOOL+XiaoWei" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Muli:300,400,600" rel="stylesheet">

2. HTML代码

      <div class="main-top" id="home">
         <!-- header -->
         <div class="headder-top">
            <div class="container-fluid">
               <!-- nav -->
               <nav >
                  <div id="logo">
                     <h1><a class="" href="index.html">Ice milk<span>Tasty cream</span></a></h1>
                  </div>
                  <label for="drop" class="toggle">Menu</label>
                  <input type="checkbox" id="drop">
                  <ul class="menu mt-2">
                     <li class="active"><a href="index.html">Home</a></li>
                     <li class="mx-lg-3 mx-md-2 my-md-0 my-1"><a href="#about">About</a></li>
                     <li><a href="#service">Services</a></li>
                     <li class="mx-lg-3 mx-md-2 my-md-0 my-1">
                        <!-- First Tier Drop Down -->
                        <label for="drop-2" class="toggle toogle-2">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span>
                        </label>
                        <a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                        <input type="checkbox" id="drop-2">
                        <ul>
                           <li><a href="#gallery" class="drop-text">Gallery</a></li>
                           <li><a href="#team" class="drop-text">Team</a></li>
                           <li><a href="#blog" class="drop-text">Blog</a></li>
                        </ul>
                     </li>
                     <li><a href="#contact">Contact Us</a></li>
                  </ul>
               </nav>
               <!-- //nav -->
            </div>
         </div>
         <!-- //header -->
         <!-- banner -->
         <div class="slider-img one-img">
            <div class="container">
               <div class="slider-info">
                  <div class="row">
                     <div class="col-lg-7 txt-caption">
                        <div class="binner-mid">
                           <h4>Awesome Tasty  ice cream</h4>
                        </div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                     </div>
                     <div class="col-lg-5 register">
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="body-art-cost">
         <div class="use-info-matter">
            <div class="sub-header text-center">
               <p>consectetur adipiscing elit 
                  Lorem ipsum dolor sit
               </p>
            </div>
            <div class="two-cols mt-md-4 mt-3 text-center">
               <div class="cols-left">
                  <h5>Special Orders</h5>
                  <h6>99 $/-</h6>
               </div>
               <div class="cols-right">
                  <h5>Special Offers</h5>
                  <h6>89 $/-</h6>
               </div>
            </div>
            <div class="outs_more-buttn mt-md-4 mt-3 text-center">
               <a href="#blog">Read More</a>
            </div>
         </div>
      </div>
      <div class="banner-main">
         <div class="banner-bottom">
            <div class="container">
               <div class="row w3layout-abt-info text-center">
                  <div class="col-lg-3 col-md-6 col-sm-6 abut-list-w3layouts p-0 color-four">
                     <div class="abtr-inner-sub">
                        <span class="fa fa-star-o" aria-hidden="true"></span>
                        <div class="abt-icon-list-wls mt-3">
                           <h4>Cherry Vanilla</h4>
                           <p class="mt-3">Lorem ipsum dolor sit consectetur adipiscing elit Lorem ipsum dolor sit</p>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 abut-list-w3layouts p-0 color-one">
                     <div class="abtr-inner-sub">
                        <span class="fa fa-smile-o" aria-hidden="true"></span>
                        <div class="abt-icon-list-wls mt-3">
                           <h4>Chocolate</h4>
                           <p class="mt-3">Lorem ipsum dolor sit consectetur adipiscing elit Lorem ipsum dolor sit</p>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 abut-list-w3layouts p-0 color-two">
                     <div class="abtr-inner-sub">
                        <span class="fa fa-thumbs-o-up" aria-hidden="true"></span>
                        <div class="abt-icon-list-wls mt-3">
                           <h4>Butter Pecan</h4>
                           <p class="mt-3">Lorem ipsum dolor sit consectetur adipiscing elit Lorem ipsum dolor sit</p>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 abut-list-w3layouts p-0 color-three">
                     <div class="abtr-inner-sub">
                        <span class="fa fa-diamond" aria-hidden="true"></span>
                        <div class="abt-icon-list-wls mt-3">
                           <h4>French Vanilla</h4>
                           <p class="mt-3">Lorem ipsum dolor sit consectetur adipiscing elit Lorem ipsum dolor sit</p>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- //banner -->
      <!--About -->
      <section class="about py-lg-4 py-md-3 py-sm-3 py-3 mt-lg-5" id="about">
         <div class="container py-lg-5 py-md-5 py-sm-4 py-3 mt-lg-3">
            <h3 class="title text-center mb-2">About ice cream</h3>
            <div class="line-w3ls-title text-center mb-md-5 mb-sm-4 mb-3">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
            </div>
            <div class="row">
               <div class="col-lg-3 col-md-6 col-sm-6 about-right">
                  <img src="images/ab1.jpg" alt="" class="img-fluid">
                  <div class="about-four-wthree mt-3">
                     <h4>Cherry Vanilla</h4>
                     <p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
                  </div>
                  <div class="outs_more-buttn mt-md-4 mt-3">
                     <a href="#blog">Read More</a>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-sm-6 about-right">
                  <img src="images/ab2.jpg" alt="" class="img-fluid">
                  <div class="about-four-wthree mt-3">
                     <h4>Chocolate</h4>
                     <p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
                  </div>
                  <div class="outs_more-buttn mt-md-4 mt-3">
                     <a href="#blog">Read More</a>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-sm-6 about-right">
                  <img src="images/ab3.jpg" alt="" class="img-fluid">
                  <div class="about-four-wthree mt-3">
                     <h4>Butter Pecan</h4>
                     <p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
                  </div>
                  <div class="outs_more-buttn mt-md-4 mt-3">
                     <a href="#blog">Read More</a>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-sm-6 about-right">
                  <img src="images/ab4.jpg" alt="" class="img-fluid">
                  <div class="about-four-wthree mt-3">
                     <h4>French Vanilla</h4>
                     <p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit </p>
                  </div>
                  <div class="outs_more-buttn mt-md-4 mt-3">
                     <a href="#blog">Read More</a>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--//About -->
      <!-- service -->
      <section class="service py-lg-4 py-md-3 py-sm-3 py-3" id="service">
         <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
            <h3 class="title text-center mb-2">What We Offer</h3>
            <div class="line-w3ls-title text-center mb-md-5 mb-sm-4 mb-3">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
            </div>
            <div class="serv-left-model">
               <div class="service-w3layouts-img">
                  <img src="images/ab1.jpg" alt=" " class="img-fluid">
               </div>
               <div class="service-w3layouts-two row">
                  <div class="col-lg-6 col-md-6 ">
                     <img src="images/ab3.jpg" alt=" " class="img-fluid">
                  </div>
                  <div class="col-lg-6 col-md-6 serice-inn-two">
                     <div class="mb-2 service-two-top">
                        <h5>
                           Taste From The Good Old Days
                        </h5>
                     </div>
                     <div class="mb-lg-4 mb-md-3 mb-3 ser-two-txt">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                           Lorem ipsum dolor sit amet
                     </div>
                     <div class="mb-2 service-two-top">
                        <h5>
                           Pink Ice Cream Cupcakes
                        </h5>
                     </div>
                     <div class="mb-lg-4 mb-md-3 mb-3 ser-two-txt">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                           Lorem ipsum dolor sit amet
                     </div>
                     <div class="mb-2 service-two-top">
                        <h5>
                           Special Orders 
                        </h5>
                     </div>
                     <div class="mb-lg-4 mb-md-3 mb-3 ser-two-txt">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                           Lorem ipsum dolor sit amet
                     </div>
                     <div class="outs_more-buttn mt-md-4 mt-3">
                        <a href="#blog">Read More</a>
                     </div>
                  </div>
               </div>
               <div class="service-w3layouts-left">
                  <img src="images/ab2.jpg" alt=" " class="img-fluid">
               </div>
            </div>
            <div class="serv-left-model">
               <div class="service-bottom row mt-lg-5 mt-md-4 mt-sm-3 mt-3">
                  <div class="col-lg-6 abt-inn-two about-top">
                     <div class="mb-2 service-two-top">
                        <h5>
                           Taste From The Good Old Days
                        </h5>
                     </div>
                     <div class="mb-lg-4 mb-md-3 mb-3 ser-two-txt">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                           Lorem ipsum dolor sit amet
                     </div>
                     <div class="mb-2 service-two-top">
                        <h5>
                           Pink Ice Cream Cupcakes
                        </h5>
                     </div>
                     <div class="mb-lg-4 mb-md-3 mb-3 ser-two-txt">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                           Lorem ipsum dolor sit amet
                     </div>
                     <div class="mb-2 service-two-top">
                        <h5>
                           Special Orders 
                        </h5>
                     </div>
                     <div class="mb-lg-4 mb-md-3 mb-3 ser-two-txt">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                           Lorem ipsum dolor sit amet
                     </div>
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 service-w3layouts-img">
                     <img src="images/ab1.jpg" alt=" " class="img-fluid">
                  </div>
                  <div class="col-lg-3 col-md-6 col-sm-6 service-w3layouts-img">
                     <img src="images/ab4.jpg" alt=" " class="img-fluid">
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--//service -->
	  <!-- gallery -->
      <section class="gallery pt-lg-4 pt-md-3 pt-sm-3 pt-3" Id="gallery">
         <div class="container-fluid pt-lg-5 pt-md-5 pt-sm-4 pt-3">
            <h3 class="title text-center mb-2">Ice cream Gallery</h3>
            <div class="line-w3ls-title text-center mb-md-5 mb-sm-4 mb-3">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
            </div>
            <div class="row gallery-info">
               <div class="col-lg-6 col-md-6 col-sm-6 gallery-img-grid gallery-mid-two p-0">
                  <div class="gallery-grids">
                     <a href="#gal1"><img src="images/b1.jpg" alt="news image" class="img-fluid"></a>
                  </div>
               </div>
               <div class="col-lg-6 col-md-6 col-sm-6 gallery-img-grid gallery-mid-two p-0">
                  <div class="gallery-grids">
                     <a href="#gal2"><img src="images/s1.jpg" alt="news image" class="img-fluid"></a>
                  </div>
               </div>
               <div class="col-lg-3 col-md-3 col-sm-6 gallery-img-grid p-0">
                  <div class="gallery-grids">
                     <a href="#gal3"><img src="images/g1.jpg" alt="news image" class="img-fluid"></a>
                  </div>
               </div>
               <div class="col-lg-3 col-md-3 col-sm-6 gallery-img-grid p-0">
                  <div class="gallery-grids">
                     <a href="#gal4"><img src="images/g2.jpg" alt="news image" class="img-fluid"></a>
                  </div>
               </div>
               <div class="col-lg-3 col-md-3 col-sm-6 gallery-img-grid p-0">
                  <div class="gallery-grids">
                     <a href="#gal5"><img src="images/g3.jpg" alt="news image" class="img-fluid"></a>
                  </div>
               </div>
               <div class="col-lg-3 col-md-3 col-sm-6 gallery-img-grid p-0">
                  <div class="gallery-grids p-0">
                     <a href="#gal6"><img src="images/g4.jpg" alt="news image" class="img-fluid"></a>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--// gallery-main -->
      <!-- popup-->
      <div id="gal1" class="popup-effect">
         <div class="popup">
            <img src="images/b1.jpg" alt="Popup Image" class="img-fluid" />
            <a class="close" href="#gallery">&times;</a>
         </div>
      </div>
      <!-- //popup -->
      <!-- popup-->
      <div id="gal2" class="popup-effect">
         <div class="popup">
            <img src="images/s1.jpg" alt="Popup Image" class="img-fluid" />
            <a class="close" href="#gallery">&times;</a>
         </div>
      </div>
      <!-- //popup -->
      <!-- popup-->
      <div id="gal3" class="popup-effect">
         <div class="popup">
            <img src="images/g1.jpg" alt="Popup Image" class="img-fluid" />
            <a class="close" href="#gallery">&times;</a>
         </div>
      </div>
      <!-- //popup -->
      <!-- popup-->
      <div id="gal4" class="popup-effect">
         <div class="popup">
            <img src="images/g2.jpg" alt="Popup Image" class="img-fluid" />
            <a class="close" href="#gallery">&times;</a>
         </div>
      </div>
      <!-- //popup -->
      <!-- popup-->
      <div id="gal5" class="popup-effect">
         <div class="popup">
            <img src="images/g3.jpg" alt="Popup Image" class="img-fluid" />
            <a class="close" href="#gallery">&times;</a>
         </div>
      </div>
      <!-- //popup -->
      <!-- popup-->
      <div id="gal6" class="popup-effect">
         <div class="popup">
            <img src="images/g4.jpg" alt="Popup Image" class="img-fluid" />
            <a class="close" href="#gallery">&times;</a>
         </div>
      </div>
      <!-- //popup -->
	    <!--//gallery -->
      <!--blog -->
      <section class="blog py-lg-4 py-md-3 py-sm-3 py-3" id="blog">
         <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
            <h3 class="title text-center mb-2">Ice cream Blog</h3>
            <div class="line-w3ls-title text-center mb-md-5 mb-sm-4 mb-3">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
            </div>
            <div class="row">
               <div class="col-lg-4 col-md-6 col-sm-6 blog-grid-flex">
                  <div class="blog-txt-color">
                     <img src="images/blg1.jpg" class="img-thumbnail" alt="">
                     <div class="blog-txt-info">
                        <h4 class="mt-2"><a href="#about">Quisque a rhoncus </a></h4>
                        <div class="news-date my-3">
                           <ul>
                              <li><span class="fa fa-calendar" aria-hidden="true"></span><a href="#about">12/4/2019</a></li>
                              <li><span class="fa fa-comments" aria-hidden="true"></span><a href="#about">5 Comments</a></li>
                           </ul>
                        </div>
                        <p>Lorem ipsum dolor sit amet, sed do eiusmod tempor consectetur adipiscing elit, sed do eiusmod tempor </p>
                     </div>
                  </div>
               </div>
               <div class="col-lg-4 col-md-6 col-sm-6 blog-grid-flex">
                  <div class="blog-txt-color">
                     <img src="images/blg2.jpg" class="img-thumbnail" alt="">
                     <div class="blog-txt-info">
                        <h4 class="mt-2"><a href="#about">Quisque a rhoncus </a></h4>
                        <div class="news-date my-3">
                           <ul>
                              <li><span class="fa fa-calendar" aria-hidden="true"></span><a href="#about">12/4/2019</a></li>
                              <li><span class="fa fa-comments" aria-hidden="true"></span><a href="#about">5 Comments</a></li>
                           </ul>
                        </div>
                        <p>Lorem ipsum dolor sit amet, sed do eiusmod tempor consectetur adipiscing elit, sed do eiusmod tempor </p>
                     </div>
                  </div>
               </div>
               <div class="col-lg-4 col-md-6 col-sm-6 blog-grid-flex">
                  <div class="blog-txt-color">
                     <img src="images/blg3.jpg" class="img-thumbnail" alt="">
                     <div class="blog-txt-info">
                        <h4 class="mt-2"><a href="#about">Quisque a rhoncus </a></h4>
                        <div class="news-date my-3">
                           <ul>
                              <li><span class="fa fa-calendar" aria-hidden="true"></span><a href="#about">12/4/2019</a></li>
                              <li><span class="fa fa-comments" aria-hidden="true"></span><a href="#about">5 Comments</a></li>
                           </ul>
                        </div>
                        <p>Lorem ipsum dolor sit amet, sed do eiusmod tempor consectetur adipiscing elit, sed do eiusmod tempor </p>
                     </div>
                  </div>
               </div>
               <div class="col-lg-4 col-md-6 col-sm-6 blog-grid-flex mt-lg-5 mt-md-4 mt-3">
                  <div class="blog-txt-color">
                     <img src="images/blg2.jpg" class="img-thumbnail" alt="">
                     <div class="blog-txt-info">
                        <h4 class="mt-2"><a href="#about">Quisque a rhoncus </a></h4>
                        <div class="news-date my-3">
                           <ul>
                              <li><span class="fa fa-calendar" aria-hidden="true"></span><a href="#about">12/4/2019</a></li>
                              <li><span class="fa fa-comments" aria-hidden="true"></span><a href="#about">5 Comments</a></li>
                           </ul>
                        </div>
                        <p>Lorem ipsum dolor sit amet, sed do eiusmod tempor consectetur adipiscing elit, sed do eiusmod tempor </p>
                     </div>
                  </div>
               </div>
               <div class="col-lg-4 col-md-6 col-sm-6 blog-grid-flex mt-lg-5 mt-md-4 mt-3">
                  <div class="blog-txt-color">
                     <img src="images/blg3.jpg" class="img-thumbnail" alt="">
                     <div class="blog-txt-info">
                        <h4 class="mt-2"><a href="#about">Quisque a rhoncus </a></h4>
                        <div class="news-date my-3">
                           <ul>
                              <li><span class="fa fa-calendar" aria-hidden="true"></span><a href="#about">12/4/2019</a></li>
                              <li><span class="fa fa-comments" aria-hidden="true"></span><a href="#about">5 Comments</a></li>
                           </ul>
                        </div>
                        <p>Lorem ipsum dolor sit amet, sed do eiusmod tempor consectetur adipiscing elit, sed do eiusmod tempor </p>
                     </div>
                  </div>
               </div>
               <div class="col-lg-4 col-md-6 col-sm-6 blog-grid-flex mt-lg-5 mt-md-4 mt-3" >
                  <div class="blog-txt-color">
                     <img src="images/blg1.jpg" class="img-thumbnail" alt="">
                     <div class="blog-txt-info">
                        <h4 class="mt-2"><a href="#about">Quisque a rhoncus </a></h4>
                        <div class="news-date my-3">
                           <ul>
                              <li><span class="fa fa-calendar" aria-hidden="true"></span><a href="#about">12/4/2019</a></li>
                              <li><span class="fa fa-comments" aria-hidden="true"></span><a href="#about">5 Comments</a></li>
                           </ul>
                        </div>
                        <p>Lorem ipsum dolor sit amet, sed do eiusmod tempor consectetur adipiscing elit, sed do eiusmod tempor </p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!-- //blog -->
      <!--team  -->
      <section class="team py-lg-4 py-md-3 py-sm-3 py-3" id="team">
         <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
            <h3 class="title text-center mb-2">Ice cream Makers</h3>
            <div class="line-w3ls-title text-center mb-md-5 mb-sm-4 mb-3">
               <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
            </div>
            <div class="row">
               <div class="col-lg-3 col-md-6 col-sm-6 team-list-team">
                  <div class="team-member">
                     <div class="team-img">
                        <img src="images/t1.jpg" alt="" class="img-fluid">
                     </div>
                     <div class="team-hover">
                        <div class="desk text-center">
                           <h4 class="mb-2">Joya Mily</h4>
                        </div>
                        <div class="s-link">
                           <ul>
                              <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                              <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                              <li><a href="#"><span class="fa fa-rss"></span></a></li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <div class="team-title">
                     <h5>Joya Mily</h5>
                     <span>Manager</span>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-sm-6 team-list-team">
                  <div class="team-member">
                     <div class="team-img">
                        <img src="images/t2.jpg" alt="" class="img-fluid">
                     </div>
                     <div class="team-hover">
                        <div class="desk text-center">
                           <h4 class="mb-2">Max  Hammer</h4>
                        </div>
                        <div class="s-link">
                           <ul>
                              <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                              <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                              <li><a href="#"><span class="fa fa-rss"></span></a></li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <div class="team-title">
                     <h5>Max  Hammer</h5>
                     <span>Maker</span>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-sm-6 team-list-team">
                  <div class="team-member">
                     <div class="team-img">
                        <img src="images/t3.jpg" alt="" class="img-fluid">
                     </div>
                     <div class="team-hover">
                        <div class="desk text-center">
                           <h4 class="mb-2">Jonn Jozz</h4>
                        </div>
                        <div class="s-link">
                           <ul>
                              <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                              <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                              <li><a href="#"><span class="fa fa-rss"></span></a></li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <div class="team-title">
                     <h5>Jonn Jozz</h5>
                     <span>Maker</span>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-sm-6 team-list-team">
                  <div class="team-member">
                     <div class="team-img">
                        <img src="images/t2.jpg" alt="" class="img-fluid">
                     </div>
                     <div class="team-hover">
                        <div class="desk text-center">
                           <h4 class="mb-2">Ray Rox</h4>
                        </div>
                        <div class="s-link">
                           <ul>
                              <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                              <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                              <li><a href="#"><span class="fa fa-rss"></span></a></li>
                           </ul>
                        </div>
                     </div>
                  </div>
                  <div class="team-title">
                     <h5>Ray Rox</h5>
                     <span>Owner</span>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <!--//team -->
      <!-- clients -->
      <section class="clients py-lg-4 py-md-3 py-sm-3 py-3" id="clients">
         <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
            <h3 class="title text-center mb-2">Our Customers Words</h3>
            <div class="line-w3ls-title text-center mb-md-5 mb-sm-4 mb-3">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
            </div>
            <div class="row">
               <div class="col-md-3 col-sm-4 news-img text-center">
                  <img src="images/c1.jpg" alt="" class="img-fluid">
               </div>
               <div class="col-md-9 col-sm-8 news-wthree-text text-left">
                  <p>velit sagittis vehicula. Duis posuere 
                     ex in mollis iaculis.Suspendisse tincidunt
                     velit sagittis vehicula.Duis posuere Suspendisse tincidunt
                     velit sagittis vehicula
                  </p>
                  <h4 class="mt-3 ">Lilly Deo</h4>
               </div>
            </div>
            <div class="row mt-lg-5 mt-md-4 mt-3">
               <div class="col-md-9 col-sm-8 news-wthree-text text-right">
                  <p>velit sagittis vehicula. Duis posuere 
                     ex in mollis iaculis.Suspendisse tincidunt
                     velit sagittis vehicula.Duis posuere Suspendisse tincidunt
                     velit sagittis vehicula
                  </p>
                  <h4 class="mt-3 ">Rose Will 
                  </h4>
               </div>
               <div class="col-md-3 col-sm-4 news-img text-center">
                  <img src="images/c2.jpg" alt="" class="img-fluid">
               </div>
            </div>
            <div class="row mt-lg-5 mt-md-4 mt-3">
               <div class="col-md-3 col-sm-4 news-img text-center">
                  <img src="images/c1.jpg" alt="" class="img-fluid">
               </div>
               <div class="col-md-9 col-sm-8 news-wthree-text text-left">
                  <p>velit sagittis vehicula. Duis posuere 
                     ex in mollis iaculis.Suspendisse tincidunt
                     velit sagittis vehicula.Duis posuere Suspendisse tincidunt
                     velit sagittis vehicula
                  </p>
                  <h4 class="mt-3 ">Lilly Deo</h4>
               </div>
            </div>
            <div class="row mt-lg-5 mt-md-4 mt-3">
               <div class="col-md-9 col-sm-8 news-wthree-text text-right">
                  <p>velit sagittis vehicula. Duis posuere 
                     ex in mollis iaculis.Suspendisse tincidunt
                     velit sagittis vehicula.Duis posuere Suspendisse tincidunt
                     velit sagittis vehicula
                  </p>
                  <h4 class="mt-3 ">Rose Will 
                  </h4>
               </div>
               <div class="col-md-3 col-sm-4 news-img text-center">
                  <img src="images/c2.jpg" alt="" class="img-fluid">
               </div>
            </div>
         </div>
      </section>
      <!--//clients -->
      <div class="address_mail_footer_grids">
         <iframe src=""></iframe>
      </div>
      <!-- footer -->
      <footer class="py-lg-4 py-md-3 py-sm-3 py-3" id="contact">
         <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
            <div class="row">
               <div class="col-lg-3 col-md-6 footer-left-grid">
                  <div class="footer-w3layouts-head">
                     <h2><a href="index.html">Ice Milk</a></h2>
                  </div>
                  <div class="mb-3 pt-lg-4 pt-3 footer-address">
                     <h4>Get In Touch</h4>
                     <div class="pt-2 footer_grid_left">
                        <p>Melbourne st, QLD 4101,Australia
                        </p>
                     </div>
                  </div>
                  <div class="mb-3 footer-address">
                     <h4>Email</h4>
                     <div class="pt-2 footer_grid_left">
                        <p><a href="https://www.51qianduan.com/">51前端</a> 
                        </p>
                     </div>
                  </div>
                  <div class="mb-3 footer-address">
                     <h4>Phone</h4>
                     <div class="pt-2 footer_grid_left">
                        <p>+(000) 123 4565 32</p>
                     </div>
                  </div>
               </div>
               <div class="col-lg-4 col-md-6 pt-lg-5 pt-md-4 pt-sm-3 pt-3 footer-left-grid">
                  <div class="mb-3 footer-address">
                     <h4>Comments</h4>
                  </div>
                  <div class="row">
                     <div class="col-lg-4 col-md-4 col-sm-4">
                        <img src="images/c1.jpg" alt="" class="img-fluid">
                     </div>
                     <div class="col-lg-8 col-md-8 col-sm-8 footer-us ">
                        <p>velit sagittis vehicula. Duis posuere 
                           ex in mollis iaculis.Suspendisse tincidunt
                        </p>
                     </div>
                  </div>
                  <div class="row mt-2">
                     <div class="col-lg-4 col-md-4 col-sm-4">
                        <img src="images/c2.jpg" alt="" class="img-fluid">
                     </div>
                     <div class="col-lg-8 col-md-8 col-sm-8 footer-us ">
                        <p>velit sagittis vehicula. Duis posuere 
                           ex in mollis iaculis.Suspendisse tincidunt
                        </p>
                     </div>
                  </div>
               </div>
               <div class="col-lg-5 contact-form pb-lg-3 pb-2">
                  <form action="#" method="post">
                     <div class="row wthree-wls-contact-mid ">
                        <div class="col-lg-6 col-md-6 col-sm-6 form-group contact-forms">
                           <input type="text" class="form-control" placeholder="Name" required="">
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 form-group contact-forms">
                           <input type="email" class="form-control" placeholder="Email" required="">
                        </div>
                     </div>
                     <div class="row wthree-wls-contact-mid ">
                        <div class="col-lg-6 col-md-6 col-sm-6 form-group contact-forms">
                           <input type="text" class="form-control" placeholder="Phone" required="">
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 form-group contact-forms">
                           <input type="text" class="form-control" placeholder="subjecct" required="">
                        </div>
                     </div>
                     <div class="form-group contact-forms">
                        <textarea class="form-control" placeholder="Meassage" required=""></textarea>
                     </div>
                     <button type="submit" class="btn sent-butnn btn-lg">Send</button>
                  </form>
               </div>
            </div>
            <div class="bottem-wthree-footer text-center pt-lg-4 pt-3">
               <p> 
                  Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a>
               </p>
            </div>
            <!-- move icon -->
            <div class="text-center">
               <a href="https://www.51qianduan.com/">51前端</a>
            </div>
            <!--//move icon -->
         </div>
      </footer>
      <!--// footer -->



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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