蓝色简洁形式html宠物养殖网页模板代码



3 8 3



模板描述:蓝色 简洁 html 宠物养殖 网页模板代码,蓝色简洁形式html宠物养殖网页模板代码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=Oswald:300,400,500,600" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Raleway:300,400,500,700" rel="stylesheet">

2. HTML代码

    <div class="header-outs" id="home">
      <div class="header-w3layouts">
        <!--//navigation section -->
        <!-- nav -->
        <nav >
          <div id="logo">
            <h1><a href="index.html">Pets-Paw</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.html">About</a></li>
            <li><a href="service.html">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.html" class="drop-text">Gallery</a></li>
                <li><a href="booking.html" class="drop-text">Booking</a></li>
              </ul>
            </li>
            <li><a href="contact.html">Contact Us</a></li>
          </ul>
        </nav>
        <!-- //nav -->
      </div>
      <div class="slider">
        <div class="slider-img">
          <div class="container">
            <div class="slider-info ">
              <h5>Best place for your dog</h5>
              <div class="bottom-info">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
              </div>
              <div class="outs_more-buttn">
                <a href="about.html">Read More</a>
              </div>
            </div>
          </div>
        </div>
        <!-- This is here just to demonstrate the callbacks -->
        <!-- <ul class="events">
          <li>Example 4 callback events</li>
          </ul>-->
        <div class="clearfix"></div>
      </div>
    </div>
    <!-- //banner -->
    <!--about -->
    <section class="about py-lg-4 py-md-3 py-sm-3 py-3" id="about">
      <div class="container py-lg-5 py-md-5 py-sm-4 py-4">
        <div class="row w3pvt-abt-info ">
          <div class="col-lg-6 info-sub-w3 pb-lg-3 pb-md-2 pb-2">
            <div class="list-text-grid mb-lg-4 mb-3">
              <ul>
                <li>
                  <h4>Bulldog</h4>
                </li>
                <li>
                  <h4>Rottweiler</h4>
                </li>
                <li>
                  <h4>Husky</h4>
                </li>
                <li>
                  <h4>Dachshund</h4>
                </li>
              </ul>
            </div>
            <div class="luxury-list-rom">
              <div class="rooms-w3pvt-left">
                <ul class="mb-2">
                  <li>
                    <h4>Siberian Husky</h4>
                  </li>
                  <li>
                    <h6>230 $</h6>
                  </li>
                  <li><span>2.0</span>
                  </li>
                </ul>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta</p>
                <div class="outs_more-book">
                  <a href="booking.html">Book now</a>
                </div>
              </div>
              <div class="rooms-w3pvt-left">
                <ul class="mb-2">
                  <li>
                    <h4>Rottweiler</h4>
                  </li>
                  <li>
                    <h6>230 $</h6>
                  </li>
                  <li><span>2.0</span>
                  </li>
                </ul>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta</p>
                <div class="outs_more-book">
                  <a href="booking.html">Book now</a>
                </div>
              </div>
              <div class="rooms-w3pvt-left ">
                <ul class="mb-2">
                  <li>
                    <h4>Dachshund</h4>
                  </li>
                  <li>
                    <h6>230 $</h6>
                  </li>
                  <li><span>2.0</span>
                  </li>
                </ul>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta</p>
                <div class="outs_more-book">
                  <a href="booking.html">Book now</a>
                </div>
              </div>
              <div class="rooms-w3pvt-left">
                <ul class="mb-2">
                  <li>
                    <h4>Bulldog</h4>
                  </li>
                  <li>
                    <h6>230 $</h6>
                  </li>
                  <li><span>2.0</span>
                  </li>
                </ul>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta</p>
                <div class="outs_more-book">
                  <a href="booking.html">Book now</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-6 w3pvt-left-side-img">
            <img src="images/ab1.jpg" class="img-thumbnail" alt="">
            <div class="row abt-sub-w3pvt-txt">
              <div class="col-sm-6 jst-wthree-text pl-0">
                <h5>Perfect place for dogs
                </h5>
              </div>
              <div class="col-sm-6 customer-rev">
                <ul>
                  <li>
                    <a href="#">
                      <span class="fa fa-star" aria-hidden="true"></span>
                      <span class="fa fa-star" aria-hidden="true"></span>
                      <span class="fa fa-star" aria-hidden="true"></span>
                      <span class="fa fa-star-o" aria-hidden="true"></span>
                      <span class="fa fa-star-o" aria-hidden="true"></span>
                      <h6>3.0</h6>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
              Lorem ipsum dolor sit amet
            </p>
            <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
              Lorem ipsum dolor sit amet, consectetur adipiscing 
            </p>
            <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
              Lorem ipsum dolor sit amet
            </p>
            <div class="list-off-slider">
              <h5>Special Day Offer</h5>
            </div>
            <div class="row food-list-menu">
              <div class="col-lg-4 col-md-4 col-sm-4 food-items-slider">
                <img src="images/aa1.jpg" class="img-thumbnail" alt="">
                <div class="slider-room-info pt-md-3 pt-2">
                  <h6 class="pb-2">Rottweiler</h6>
                  <p>Lorem ipsum dolor sit amet,</p>
                </div>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-4 food-items-slider">
                <img src="images/aa2.jpg" class="img-thumbnail" alt="">
                <div class="slider-room-info pt-md-3 pt-2">
                  <h6 class="pb-2">BullDog</h6>
                  <p>Lorem ipsum dolor sit amet,</p>
                </div>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-4 food-items-slider">
                <img src="images/aa3.jpg" class="img-thumbnail" alt="">
                <div class="slider-room-info pt-md-3 pt-2">
                  <h6 class="pb-2">Pug</h6>
                  <p>Lorem ipsum dolor sit amet,</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--//about -->
    <!--States-->
    <section class="stats py-lg-4 py-md-3 py-sm-3 py-3">
      <div class="container-fluid py-lg-5 py-md-4 py-sm-4 py-3">
        <h3 class="title clr text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">Our Fun Fact</h3>
        <div class="stats-info row text-center">
          <div class="col-lg-4 col-md-4 stats-grid stats-grid-1">
            <div class="register-left-w3pvt">
              <div class="counter">1200</div>
              <div class="stat-info pt-lg-3 pt-md-3 pt-sm-3 pt-3">
                <h4>Smiles</h4>
                <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet,
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4  stats-grid stats-grid-2">
            <div class="register-left-w3pvt">
              <div class="counter">4000</div>
              <div class="stat-info pt-lg-3 pt-md-3 pt-sm-3 pt-3">
                <h4>Pets</h4>
                <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet,
                </p>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 stats-grid stats-grid-3">
            <div class="register-left-w3pvt">
              <div class="counter">500</div>
              <div class="stat-info pt-lg-3 pt-md-3 pt-sm-3 pt-3">
                <h4>Clients</h4>
                <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet,
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--//States-->
    <!--Our team-->
    <section class="team py-lg-4 py-md-3 py-sm-3 py-3">
      <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
        <h3 class="title text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">Our Trainers</h3>
        <div class="row team-w3pvt-list">
          <div class="col-lg-3 col-md-4 col-sm-5 team-w3pvt-icon">
            <img src="images/t1.jpg" alt="" class="img-fluid">
            <div class="item-team-wls">
              <div class="clt-syas-w3pvt">
                <h5>Omar Deo</h5>
              </div>
            </div>
            <div class="icon-w3layouts-social mt-2">
            <ul>
               <li><div class="social-bg "><a href="#"><span class="fa fa-facebook"></span></a></div></li>
                <li><div class="social-bg "><a href="#"><span class="fa fa-twitter"></span></a></div></li>
                <li><div class="social-bg "><a href="#"><span class="fa fa-rss"></span></a></div></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-3 col-md-2 col-sm-1">
          </div>
          <div class="col-lg-3 col-md-4 col-sm-5 team-w3pvt-icon">
            <img src="images/t2.jpg" alt="" class="img-fluid">
            <div class="item-team-wls">
              <div class="clt-syas-w3pvt">
                <h5>Dived Deo</h5>
              </div>
            </div>
            <div class="icon-w3layouts-social mt-2">
            <ul>
               <li><div class="social-bg "><a href="#"><span class="fa fa-facebook"></span></a></div></li>
                <li><div class="social-bg "><a href="#"><span class="fa fa-twitter"></span></a></div></li>
                <li><div class="social-bg "><a href="#"><span class="fa fa-rss"></span></a></div></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-3 col-md-2 col-sm-1">
          </div>
        </div>
        <div class="team-by-team">
          <div class="row below-team">
            <div class="offset-lg-3 offset-md-2 offset-sm-1 col-lg-3 col-md-4 col-sm-5 team-w3pvt-icon">
              <img src="images/t3.jpg" alt="" class="img-fluid">
              <div class="item-team-wls">
                <div class="clt-syas-w3pvt">
                  <h5>Rose Max</h5>
                </div>
              </div>
              <div class="icon-w3layouts-social mt-2">
            <ul>
               <li><div class="social-bg "><a href="#"><span class="fa fa-facebook"></span></a></div></li>
                <li><div class="social-bg "><a href="#"><span class="fa fa-twitter"></span></a></div></li>
                <li><div class="social-bg "><a href="#"><span class="fa fa-rss"></span></a></div></li>
              </ul>
              </div>
            </div>
            <div class="offset-lg-3 offset-md-2 offset-sm-1 col-lg-3 col-md-4 col-sm-5 team-w3pvt-icon">
              <img src="images/t4.jpg" alt="" class="img-fluid">
              <div class="item-team-wls">
                <div class="clt-syas-w3pvt">
                  <h5>Elly Will</h5>
                </div>
              </div>
              <div class="icon-w3layouts-social mt-2">
              <ul>
               <li><div class="social-bg "><a href="#"><span class="fa fa-facebook"></span></a></div></li>
                <li><div class="social-bg "><a href="#"><span class="fa fa-twitter"></span></a></div></li>
                <li><div class="social-bg "><a href="#"><span class="fa fa-rss"></span></a></div></li>
              </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="clearfix"> </div>
    </section>
    <!--//Our team-->
    <!--Opening Times-->
    <section class="book-table-w3pvt py-lg-4 py-md-3 py-sm-3 py-3">
      <div class="container py-lg-5 py-md-5 py-sm-4 py-4">
        <h3 class="title clr text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">Opening Hours</h3>
        <div class="booking-list text-center">
          <div class="wls-hours-list ">
            <ul>
              <li>
                <h5> Monday-Friday</h5>
              </li>
              <li>
                <p>9 Am- 10 Pm</p>
              </li>
            </ul>
          </div>
          <div class="wls-hours-list mt-2">
            <ul>
              <li>
                <h5> Saturday-Sunday</h5>
              </li>
              <li>
                <p>11 Am- 10 Pm</p>
              </li>
            </ul>
          </div>
          <div class="outs_more-book mt-3">
            <a href="booking.html">Book now</a>
          </div>
        </div>
      </div>
    </section>
    <!--Opening Times-->
    <!--Footer -->
    <section class="buttom-footer py-lg-4 py-md-3 py-sm-3 py-3">
      <div class="container py-lg-5 py-md-5 py-sm-4 py-4">
        <div class="state-us mb-lg-4 mb-md-3 mb-3 text-center">
          <h2>Subscribe To Our Newsletter</h2>
        </div>
        <div class="sub-para text-center">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            incididunt ut Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            incididunt ut Lorem ipsum dolor sit amet
          </p>
        </div>
        <form action="#" method="post">
          <div class="subscribe-form text-center">
            <div class="form-group fill-all-form">
              <input type="email" class="form-control" placeholder="Email" required="">
              <button type="submit" class="click-me">Subscribe</button>
            </div>
          </div>
        </form>
        <div class="pt-lg-5 pt-md-4 pt-sm-3 pt-3">
          <div class="row footer-w3pvt-grids ">
            <div class="col-lg-6 col-md-6 wthree-left-right">
              <h4>About Us</h4>
              <div class="bottom-para">
                <p>Ut aut reiciendis voluptatibus adipiscing Ut aut reiciendis eiusmod tempor incididunt ut Lorem ipsum dolor sit amet voluptatibus adipiscing</p>
              </div>
            </div>
            <div class="col-lg-3 col-md-3 wthree-left-right">
              <h4>Email Us</h4>
              <div class="bottom-para ">
                <p><a href="https://www.51qianduan.com/">51前端</a> 
                  <br><a href="https://www.51qianduan.com/">51前端</a>
                </p>
              </div>
            </div>
            <div class="wthree-left-right col-lg-3 col-md-3">
              <h4 class="pb-lg-3 pb-3">Contact Us</h4>
              <div class="bottom-para ">
                <p>+(000) 123 4565 32 <br>+(010) 123 4565 354</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <footer>
      <div class="footer-bottom py-lg-4 py-3 text-center">
        <p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
        <div class="icons text-center mt-3">
          <ul>
            <li><div class="footer-bg "><a href="#"><span class="fa fa-facebook"></span></a></div></li>
            <li><div class="footer-bg "><a href="#"><span class="fa fa-twitter"></span></a></div></li>
            <li><div class="footer-bg "><a href="#"><span class="fa fa-rss"></span></a></div></li>
            <li><div class="footer-bg "><a href="#"><span class="fa fa-vk"></span></a></div></li>
          </ul>
        </div>
        <!-- move-top -->
        <div class="text-center">
          <a href="https://www.51qianduan.com/">51前端</a>
        </div>
        <!--//move-top -->
      </div>
    </footer>
    <!-- //Footer -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 蓝色 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 大气 霸气 动物宠物 宠物 宠物店 宠物医院 动物园

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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