绿色欧美风格的宠物医院企业网站源码下载



5 18 7



模板描述:绿色欧美风格 宠物医院 企业网站,绿色欧美风格的宠物医院企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" type="text/css" rel="stylesheet">
<link href="css/themify-icons.css" type="text/css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" type="text/css" rel="stylesheet">
<link href="css/themify-icons.css" type="text/css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">

2. 引入JS

<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.caroufredsel.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.caroufredsel.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/bootstrap.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="zxx">
<head>
    <title>VET FOR PET</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="images/icons/favicon.png" type="image/png" rel="icon">
    <link href="css/style.css" type="text/css" rel="stylesheet"> 
</head>
<body class="main">
    <div class="inner">
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="span3">
                    <div class="vfp-box1">
                        <header>
                            <!-- Logo -->
                            <div class="vfp-logo-wrapper">
                                <a href="index.html" class="logo"><img src="images/logo.png" alt="" class="img-responsive"></a>
                            </div>
                        </header>
                        <!-- Navigation Menu -->
                        <nav>
                            <div class="menu-wrapper">
                                <div class="navbar navbar_">
                                    <div class="navbar-inner navbar-inner_">
                                        <a class="btn btn-navbar btn-navbar_" data-toggle="collapse" data-target=".nav-collapse_"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
                                        <div class="nav-collapse nav-collapse_ collapse">
                                            <ul class="nav sf-menu clearfix">
                                                <li class="active"><a href="index.html">Home<span class="over1"></span></a></li>
                                                <li><a href="about.html">About Us<span class="over1"></span></a></li>
                                                <li><a href="services.html">Our Services<span class="over1"></span></a></li>
                                                <li><a href="blog.html">Blog<span class="over1"></span></a></li>
                                                <li><a href="gallery.html">Gallery<span class="over1"></span></a></li>
                                                <li><a href="contact.html">Contact Us<span class="over1"></span></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
                <div class="span9">
                    <div class="vfp-box2">
                        <!-- Slider  -->
                        <div class="vfp-caroufredsel-slider1-wrapper">
                            <a class="vfp-prev1" href="index.html#"></a>
                            <a class="vfp-next1" href="index.html#"></a>
                            <ul class="vfp-caroufredsel-slider1">
                                <li>
                                    <div class="vfp-caroufredsel-slide1"> <img src="images/slider/slide02.jpg" alt="" class="img-responsive">
                                        <div class="txt1">OUR VETERINARY PRACTICE</div>
                                        <div class="txt2">Let’s keep your pet healthy!</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="vfp-caroufredsel-slide1"> <img src="images/slider/slide01.jpg" alt="" class="img-responsive">
                                        <div class="txt1">IN-HOME PET EUTHANASIA</div>
                                        <div class="txt2">Let’s keep your pet healthy!</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="vfp-caroufredsel-slide1"> <img src="images/slider/slide03.jpg" alt="" class="img-responsive">
                                        <div class="txt1">SPAY &amp; NEUTER SURGERIES</div>
                                        <div class="txt2">Let’s keep your pet healthy!</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="vfp-caroufredsel-slide1"> <img src="images/slider/slide04.jpg" alt="" class="img-responsive">
                                        <div class="txt1">SENIOR PET CARE</div>
                                        <div class="txt2">Let’s keep your pet healthy!</div>
                                    </div>
                                </li>
                            </ul>
                            <div class="vfp-pagination1" id="vfp-caroufredsel-page1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Services -->
    <div class="vfp-caroufredsel-slider2-wrapper">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <div class="vfp-caroufredsel-slider2-txt1">OUR SERVICES</div>
                    <div class="vfp-caroufredsel-slider2">
                        <a class="vfp-prev3" href="index.html#"></a>
                        <a class="vfp-next3" href="index.html#"></a>
                        <div class="vfp-carousel-box row">
                            <div class="inner span12">
                                <div class="carousel main">
                                    <ul>
                                        <li>
                                            <div class="vfp-carousel-services">
                                                <div class="vfp-caroufredsel-slide2">
                                                    <a href="index.html#"> <img src="images/services/services04.jpg" alt="" class="img-responsive">
                                                        <div class="txt">
                                                            <div class="txt1">Senior Pet Care</div>
                                                            <div class="txt2">Comprehensive senior pet care. Nunc mollis volutpat suscipit avensis a feugiat.</div>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="vfp-carousel-services">
                                                <div class="vfp-caroufredsel-slide2">
                                                    <a href="index.html#"> <img src="images/services/services02.jpg" alt="" class="img-responsive">
                                                        <div class="txt">
                                                            <div class="txt1">Animal Dental Care</div>
                                                            <div class="txt2">Comprehensive senior pet care. Nunc mollis volutpat suscipit avensis a feugiat.</div>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="vfp-carousel-services">
                                                <div class="vfp-caroufredsel-slide2">
                                                    <a href="index.html#"> <img src="images/services/services01.jpg" alt="" class="img-responsive">
                                                        <div class="txt">
                                                            <div class="txt1">Microchipping</div>
                                                            <div class="txt2">Comprehensive senior pet care. Nunc mollis volutpat suscipit avensis a feugiat.</div>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="vfp-carousel-services">
                                                <div class="vfp-caroufredsel-slide2">
                                                    <a href="index.html#"> <img src="images/services/services03.jpg" alt="" class="img-responsive">
                                                        <div class="txt">
                                                            <div class="txt1">Surgeries</div>
                                                            <div class="txt2">Comprehensive senior pet care. Nunc mollis volutpat suscipit avensis a feugiat.</div>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Request Now | Emergency Call | Opening Hours -->
    <div class="vfp-bottom-wrapper">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <div class="bottom">
                        <div class="row">
                            <!-- Request Now -->
                            <div class="span4">
                                <h3>Request Now</h3>
                                <p>Request appointment only Mon - Sat 5:00pm - 10:00pm! Easy and convenient for busy pet owners!</p> 
                                <button class="vfp-button1">Request an Appointment</button>
                            </div>
                            <!-- Emergency Call -->
                            <div class="span4">
                                <h3>Emergency Call</h3>
                                <p>If you'll notice that something is wrong with your pet, you can call to our 24/7/365 emergency number.</p>
                                <div class="emergency-call">+1 212 123 9999</div>
                            </div>
                            <!-- Opening Hours -->
                            <div class="span4">
                                <h3>Opening Hours</h3>
                                <p>1000 Franklin Pkwy, San Mateo, California 94403, United States.</p>
                                <div class="opening-hours">8:00am - 10:00pm</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- Footer -->
    <footer> <img src="images/icons/paw.png" alt="" class="img-responsive">
        <h1>VET FOR PET</h1>
        <p class="subtitle">Veterinary Hospital</p>
        <div class="vfp-social-wrapper">
            <ul class="social clearfix">
                <li><a href="index.html#"><i class="ti-twitter-alt"></i></a></li>
                <li><a href="index.html#"><i class="ti-instagram"></i></a></li>
                <li><a href="index.html#"><i class="ti-youtube"></i></a></li>
            </ul>
        </div>
        <div class="copyright">Copyright © 2019, by DuruThemes</div>
    </footer>
    <!-- JS -->
    <script>
         $(document).ready(function () {
             // Caroufsedsel Homepage Slider  
            $('.vfp-caroufredsel-slider1').carouFredSel({
                auto: {
                    timeoutDuration: 9000
                }
                , responsive: true
                , direction: "left"
                , width: '100%'
                , scroll: {
                    items: 1
                    , duration: 500
                    , easing: "easeOutExpo"
                    , fx: "fade"
                }
                , items: {
                    width: '1000'
                    , height: 'variable'
                    , visible: {
                        min: 1
                        , max: 1
                    }
                }
                , mousewheel: false
                , swipe: {
                    onMouse: true
                    , onTouch: true
                }
                , pagination: ".vfp-pagination1"
            });
            // Caroufsedsel Services Slider
            $('.vfp-caroufredsel-slider2 .carousel.main ul').carouFredSel({
                auto: {
                    timeoutDuration: 8000
                }
                , responsive: true
                , prev: '.vfp-prev3'
                , next: '.vfp-next3'
                , width: '100%'
                , scroll: {
                    items: 1
                    , duration: 1000
                    , easing: "easeOutExpo"
                }
                , items: {
                    width: '400'
                    , height: 'variable', //	optionally resize item-height			  
                    visible: {
                        min: 1
                        , max: 3
                    }
                }
                , mousewheel: false
                , swipe: {
                    onMouse: true
                    , onTouch: true
                }
            });
            $(window).bind("resize", updateSizes_vat).bind("load", updateSizes_vat);
            function updateSizes_vat() {
                $('.vfp-caroufredsel-slider1').trigger("updateSizes");
                $('#slider3 .carousel.main ul').trigger("updateSizes");
            }
            updateSizes_vat();
        });
        $(window).load(function () {});
        var buttons = document.querySelectorAll(".vfp-button1");
        for(var i = 0; i < buttons.length; i++) {
          var button = buttons[i];
          button.addEventListener("click", function() {
            if(!button.classList.contains("active"))
              button.classList.add("active");
            else
              button.classList.remove("active");
          });
        }
    </script>
</body>
</html>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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