蓝色宽屏样式bootstrap牙科医疗诊所网页模板代码



4 12 5



模板描述:bootstrap牙科医疗诊所,蓝色宽屏样式bootstrap牙科医疗诊所网页模板代码html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/aos.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/slick.css">
<link rel="stylesheet" href="assets/css/slick-theme.css">
<link rel="stylesheet" href="assets/css/meanmenu.min.css">
<link rel="stylesheet" href="assets/css/owl.theme.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/default.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="assets/css/responsive.css">

2. 引入JS

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="assets/js/jquery-1.12.4.min.js"></script>
<script src="assets/js/modernizr-3.7.1.min.js"></script>
<script src="assets/js/jquery.easing.1.3.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/imageload.min.js"></script>
<script src="assets/js/scrollUp.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/magnific-popup.min.js"></script>
<script src="assets/js/waypoint.js"></script>
<script src="assets/js/counterup.min.js"></script>
<script src="assets/js/aos.js"></script>
<script src="assets/js/meanmenu.min.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/ajax-mail.js"></script>
<script src="assets/js/active.js"></script>

3. HTML代码

    <!-- pre-loader -->
    <div class="pre-loader">
        <div class="loader">
            <img src="assets/img/preloader.gif" alt="">
        </div>
    </div>    
    <!-- 
    =============================================
        Header Section
    ============================================== 
    -->
    <header class="header-one">
        <div class="main-menu">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-3 col-lg-2 d-flex">
                        <a class="navbar-brand logo" href="index.html">
                            <img src="assets/img/logo.png" alt="donto">
                        </a>                            
                    </div>
                    <div class="col-lg-10 col-md-9  d-none d-lg-block text-lg-right">
                        <nav id="responsive-menu" class="menu-style-one">
                            <ul class="menu-items">
                                <li><a href="#">home</a>
                                    <ul class="submenu">
                                        <li><a href="index.html">Home One</a></li>
                                        <li><a href="index-2.html">Home Two</a></li>
                                    </ul>    
                                </li>
                                <li><a href="about.html">about</a></li>
                                <li><a href="services.html">Services</a></li>
                                <li><a href="dentist.html">Dentist</a></li>
                                <li><a href="gallery.html">Gallery</a></li>
                                <li><a href="contact.html">Contact</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="col-12">
                        <div class="responsive-menu"></div>
                    </div>                                                
                </div>
            </div>
        </div>
    </header> <!-- Header Section end -->
    <!-- 
    =============================================
        Hero - Slider Section
    =============================================
    -->
    <section class="hero-slider-wrapper home-one-slider">
        <div class="single-hero-slide text-white hero-slide1">
            <div class="hero-shape">
                <img src="assets/img/shape/aab.png" alt="" class="shape shape1 cloud1">
                <img src="assets/img/shape/rmc.png" alt="" class="shape shape2">
                <img src="assets/img/shape/dotmr.png" alt="" class="shape shape3">
                <img src="assets/img/shape/plusgs.png" alt="" class="shape shape4">
                <img src="assets/img/shape/plusb.png" alt="" class="shape shape5">
                <img src="assets/img/shape/plusg.png" alt="" class="shape shape6">
                <img src="assets/img/shape/plusgs.png" alt="" class="shape shape7">
                <img src="assets/img/shape/plusr.png" alt="" class="shape shape8">
                <img src="assets/img/shape/sgdot.png" alt="" class="shape shape9">
                <img src="assets/img/shape/xsrdot.png" alt="" class="shape shape10">
                <img src="assets/img/shape/aab.png" alt="" class="shape shape11 cloud2">
                <img src="assets/img/shape/aab.png" alt="" class="shape shape12 cloud3">
            </div> <!-- /.shape-wapper -->
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-12 col-md-10">
                        <div class="hero-slide-left">
                            <h2>Better Life Through</h2>
                            <h1>Better Dentistry</h1>
                            <p>Join us to a fun and friendly dental environment. Our professionals are working so hard to see smile on your face that you deserve! We are dedicated about our duties.</p>
                            <a href="#" class="theme-btn fill-btn">Appointment</a>
                            <a href="#" class="theme-btn btn_black">Learn More</a>
                        </div>
                    </div>
                    <div class="col-lg-6 col-12 col-md-10 offset-md-2 offset-lg-0">
                        <div class="hero-slide-right">
                            <div class="animate-img">
                                <img class="aimg1" src="assets/img/woman-brush.png" alt="">
                                <img class="aimg2" src="assets/img/doctorfinding.png" alt="">
                            </div>
                            <img src="assets/img/hero-theeth.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- /.single-hero-slide -->
    </section> <!-- /.hero-slider-wrapper slider-home-one -->
    <!-- 
    =============================================
       features  -  Section
    =============================================
    -->
    <section class="features-wrapper section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-12 col-lg-6 col-xl-4">
                    <div class="single-feature-box">
                        <div class="icon-box">
                            <img src="assets/img/icons/appointment.svg" alt="">
                        </div>
                        <h3>Easy Appointment</h3>
                        <p>Lorem Ipsum is simply is very     dummy text of the printings and type setting </p>
                    </div> <!-- /.single-feature-box -->
                </div> <!--  /.col-md-6 col-12 col-lg-6 col-xl-4 -->
                <div class="col-md-6 col-12 col-lg-6 col-xl-4">
                    <div class="single-feature-box">
                        <div class="icon-box">
                            <img src="assets/img/icons/icon3.svg" alt="">
                        </div>
                        <h3>Emergency Service</h3>
                        <p>Lorem Ipsum is simply is very     dummy text of the printings and type setting </p>
                    </div> <!-- /.single-feature-box -->
                </div> <!--  /.col-md-6 col-12 col-lg-6 col-xl-4 -->
                <div class="col-md-6 col-12 col-lg-6 col-xl-4">
                    <div class="single-feature-box">
                        <div class="icon-box">
                            <img src="assets/img/icons/icon.svg" alt="">
                        </div>
                        <h3>Emergency Service</h3>
                        <p>Lorem Ipsum is simply is very     dummy text of the printings and type setting </p>
                    </div> <!-- /.single-feature-box -->
                </div> <!--  /.col-md-6 col-12 col-lg-6 col-xl-4 -->
            </div>
        </div>
    </section>
    <!-- 
    =============================================
       About  -  Section
    =============================================
    -->
    <section class="about-wrapper about-us-one section-padding pt-0">
       <div class="about-shape">
            <img src="assets/img/shape/circle1.png" alt="" class="shape ab1">
            <img src="assets/img/shape/bluef.png" alt="" class="shape ab2">
            <img src="assets/img/shape/dotmr.png" alt="" class="shape ab3">  
        </div> <!-- /.shape-wapper -->   
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-lg-6">
                    <div class="about-us-one-left">
                       <img src="assets/img/about-banner1.png" alt="">
                       <img src="assets/img/about-banner2.png" alt="" class="about-animate">
                    </div>
                </div> <!-- /.col-md-12 col-lg-6 -->
                <div class="col-md-12 col-lg-6">
                    <div class="about-us-one-right mt-5 mt-lg-0">
                        <div class="about-heading">
                            <h1>Welcome to a Family</h1>
                        </div>
                        <p>Welcome to Datobbo Dental represents everything going to dentist necessary. We have upgraded  your dreaded dentist appointment and transformed it into a relaxing.</p>
                        <a href="#" class="btn-link">About Us</a>
                        <div class="fun-fact-section ">
                            <div class="single-funfact-one">
                                <span>500</span>
                                <p>Happy Patients</p>
                            </div> <!-- /.single-funfact-one -->
                            <div class="single-funfact-one sp-fun">
                                <span>89</span>
                                <p>Qualified Doctors</p>
                            </div> <!-- /.single-funfact-one -->
                            <div class="single-funfact-one">
                                <span>13</span>
                                <p>Years Experience</p>
                            </div> <!-- /.single-funfact-one -->
                            <div class="single-funfact-one sp-fun">
                                <span>40</span>
                                <p>Dental Awards</p>
                            </div> <!-- /.single-funfact-one --> 
                            <span class="line"></span>
                        </div> <!-- /.fun-fact-section row -->
                    </div>
                </div> <!-- /.col-md-12 col-lg-6 -->
            </div>
        </div>
    </section>
    <!-- 
    =============================================
       Services  -  Section
    =============================================
    -->
    <section class="services-wrapper section-bg section-padding text-white">
        <div class="hero-shape service-shape">
            <img src="assets/img/shape/rmc.png" alt="" class="shape shape2">
            <img src="assets/img/shape/plusgs.png" alt="" class="shape shape4">
            <img src="assets/img/shape/plusg.png" alt="" class="shape shape6">
            <img src="assets/img/shape/plusr.png" alt="" class="shape shape8">
            <img src="assets/img/shape/sgdot.png" alt="" class="shape shape9">
            <img src="assets/img/shape/xsrdot.png" alt="" class="shape shape10">            
            <img src="assets/img/shape/rmc.png" alt="" class="shape s1">
            <img src="assets/img/shape/plusgs.png" alt="" class="shape s2">
            <img src="assets/img/shape/sgdot.png" alt="" class="shape s3">
        </div> <!-- /.shape-wapper -->        
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <div class="section-title-one">
                        <h1>Treatments</h1>
                    </div> <!-- /.section-title-one -->
                </div> <!-- /.col-sm-12 text-center -->
            </div>
            <div class="row">
                <div class="col-md-6 col-12 col-lg-6 col-xl-4">
                    <div class="single-service-box">
                        <div class="service-icon">
                            <img src="assets/img/icons/dentistry.svg" alt="">
                        </div>
                        <h3>Complete Dentistry</h3>
                        <p>Lorem Ipsum is simply dummy text of the printings and type and setting for content </p>
                        <a href="#" class="btn-link">read more</a>
                    </div> <!-- single-service-box -->
                </div> <!-- col-md-6 col-12 col-lg-6 col-xl-4 -->
                <div class="col-md-6 col-12 col-lg-6 col-xl-4">
                    <div class="single-service-box">
                        <div class="service-icon">
                            <img src="assets/img/icons/selants.svg" alt="">
                        </div>
                        <h3>Dental Selants</h3>
                        <p>Lorem Ipsum is simply dummy text of the printings and type and setting for content </p>
                        <a href="#" class="btn-link">read more</a>
                    </div> <!-- single-service-box -->
                </div> <!-- col-md-6 col-12 col-lg-6 col-xl-4 -->
                <div class="col-md-6 col-12 col-lg-6 col-xl-4">
                    <div class="single-service-box">
                        <div class="service-icon">
                            <img src="assets/img/icons/dictionary.svg" alt="">
                        </div>
                        <h3>Dental Dictionary</h3>
                        <p>Lorem Ipsum is simply dummy text of the printings and type and setting for content </p>
                        <a href="#" class="btn-link">read more</a>
                    </div> <!-- single-service-box -->
                </div> <!-- col-md-6 col-12 col-lg-6 col-xl-4 -->
                <div class="col-md-6 col-12 col-lg-6 col-xl-4">
                    <div class="single-service-box">
                        <div class="service-icon">
                            <img src="assets/img/icons/implants.svg" alt="">
                        </div>
                        <h3>Dental Implants</h3>
                        <p>Lorem Ipsum is simply dummy text of the printings and type and setting for content </p>
                        <a href="#" class="btn-link">read more</a>
                    </div> <!-- single-service-box -->
                </div> <!-- col-md-6 col-12 col-lg-6 col-xl-4 -->
                <div class="col-md-6 col-12 col-lg-6 col-xl-4">
                    <div class="single-service-box">
                        <div class="service-icon">
                            <img src="assets/img/icons/oral.svg" alt="">
                        </div>
                        <h3>Oral Surgery</h3>
                        <p>Lorem Ipsum is simply dummy text of the printings and type and setting for content </p>
                        <a href="#" class="btn-link">read more</a>
                    </div> <!-- single-service-box -->
                </div> <!-- col-md-6 col-12 col-lg-6 col-xl-4 -->
                <div class="col-md-6 col-12 col-lg-6 col-xl-4">
                    <div class="single-service-box">
                        <div class="service-icon">
                            <img src="assets/img/icons/general.svg" alt="">
                        </div>
                        <h3>General Dentistry</h3>
                        <p>Lorem Ipsum is simply dummy text of the printings and type and setting for content </p>
                        <a href="#" class="btn-link">read more</a>
                    </div> <!-- single-service-box -->
                </div> <!-- col-md-6 col-12 col-lg-6 col-xl-4 -->
            </div>
        </div>
    </section>
    <!-- 
    =============================================
       Doctors team  -  Section
    =============================================
    -->
    <section class="doctors-wrapper section-padding">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <div class="section-title-one">
                        <h1>Our Dentists</h1>
                    </div> <!-- /.section-title-one -->
                </div> <!-- /.col-sm-12 text-center -->
            </div>
            <div class="row text-center">
                <div class="col-md-6 col-lg-4 col-12">
                    <div class="single-doctor">
                        <div class="doctor-profile">
                            <img src="assets/img/d1.png" alt="">
                        </div>
                        <div class="doctor-info">
                            <h3><a href="dentist-details.html">Darry Milin</a></h3>
                            <span>Oral Surgeon</span>
                        </div>
                        <div class="doctor-social-icons">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div> <!-- single-doctor -->
                </div> <!-- /.col-md-6 col-lg-4 col-12 -->
                <div class="col-md-6 col-lg-4 col-12">
                    <div class="single-doctor">
                        <div class="doctor-profile">
                            <img src="assets/img/d2.png" alt="">
                        </div>
                        <div class="doctor-info">
                            <h3><a href="dentist-details.html">Salman Ahmed</a></h3>
                            <span>Oral Surgeon</span>
                        </div>
                        <div class="doctor-social-icons">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div> <!-- single-doctor -->
                </div> <!-- /.col-md-6 col-lg-4 col-12 -->
                <div class="col-md-6 col-lg-4 col-12">
                    <div class="single-doctor">
                        <div class="doctor-profile">
                            <img src="assets/img/d3.png" alt="">
                        </div>
                        <div class="doctor-info">
                            <h3><a href="dentist-details.html">William Dae</a></h3>
                            <span>Oral Surgeon</span>
                        </div>
                        <div class="doctor-social-icons">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div> <!-- single-doctor -->
                </div> <!-- /.col-md-6 col-lg-4 col-12 -->
                <div class="col-12 text-center mt-45">
                    <a href="team.html" class="btn-link doctor-btn-link">View All Dentists</a>
                </div>
            </div>
        </div>
    </section>
    <!-- 
    =============================================
       Request Appointment  -  Section
    =============================================
    -->
    <section class="appointment-wrapper section-padding">
        <div class="container">            
            <div class="row">
                <div class="col-sm-12 col-lg-8">
                    <div class="section-title-one">
                        <h1>Request Appointment</h1>
                    </div> <!-- /.section-title-one -->
                    <div class="appointment-form">
                        <form action="#" class="row">
                            <div class="col-lg-6 col-md-6 col-12">
                                <input type="text" placeholder="name">
                            </div> <!-- /.col-lg-6 col-md-6 col-12 -->
                            <div class="col-lg-6 col-md-6 col-12">
                                <input type="email" placeholder="email">
                            </div> <!-- /.col-lg-6 col-md-6 col-12 -->
                            <div class="col-lg-6 col-md-6 col-12">
                                <input type="text" placeholder="phone">
                            </div> <!-- /.col-lg-6 col-md-6 col-12 -->
                            <div class="col-lg-6 col-md-6 col-12">
                                <input type="text" placeholder="subject">
                            </div> <!-- /.col-lg-6 col-md-6 col-12 -->
                            <div class="col-lg-12 col-12">
                                <textarea name="message" placeholder="message"></textarea>
                            </div> <!-- /.col-lg-6 col-md-6 col-12 -->
                            <button class="submit-btn" type="submit">Send Message</button>
                        </form>
                    </div> <!-- /.appointment-form -->                 
                </div> <!-- /.col-sm-12 col-lg-6 -->
            </div>
        </div>
        <div class="appointment-right-banner">
            <img src="assets/img/appointment.png" alt="">
        </div> <!-- /.appointment-right-banner -->
    </section>
    <!-- 
    =============================================
       Gallery  -  Section
    =============================================
    -->
    <section class="gallery-one-wrapper section-bg text-white section-padding">
      <div class="hero-shape service-shape">
            <img src="assets/img/shape/rmc.png" alt="" class="shape shape2">
            <img src="assets/img/shape/plusgs.png" alt="" class="shape shape4">
            <img src="assets/img/shape/plusg.png" alt="" class="shape shape6">
            <img src="assets/img/shape/plusr.png" alt="" class="shape shape8">
            <img src="assets/img/shape/sgdot.png" alt="" class="shape shape9">
            <img src="assets/img/shape/xsrdot.png" alt="" class="shape shape10">            
            <img src="assets/img/shape/rmc.png" alt="" class="shape s1">
            <img src="assets/img/shape/plusgs.png" alt="" class="shape s2">
            <img src="assets/img/shape/sgdot.png" alt="" class="shape s3">
        </div> <!-- /.shape-wapper --> 
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <div class="section-title-one">
                        <h1>Gallery</h1>
                    </div> <!-- /.section-title-one -->
                </div> <!-- /.col-sm-12 text-center -->
            </div>
            <div class="row">
                <div class="col-md-6 col-lg-4 col-12">
                    <div class="single-gallery-item" data-background='assets/img/gallery/g1.jpg'>
                        <div class="gallery-over">
                            <a href="https://www.51qianduan.com/">51前端</a>
                        </div>
                    </div> <!-- /.single-gallery-item -->
                </div> <!-- /.col-md-6 col-lg-4 col-12 -->
                <div class="col-md-6 col-lg-4 col-12">
                    <div class="single-gallery-item" data-background='assets/img/gallery/g2.jpg'>
                        <div class="gallery-over">
                            <a href="https://www.51qianduan.com/">51前端</a>
                        </div>
                    </div> <!-- /.single-gallery-item -->
                </div> <!-- /.col-md-6 col-lg-4 col-12 -->
                <div class="col-md-6 col-lg-4 col-12">
                    <div class="single-gallery-item" data-background='assets/img/gallery/g3.jpg'>
                        <div class="gallery-over">
                            <a href="https://www.51qianduan.com/">51前端</a>
                        </div>
                    </div> <!-- /.single-gallery-item -->
                </div> <!-- /.col-md-6 col-lg-4 col-12 -->
                <div class="col-md-6 col-lg-8 col-12">
                    <div class="single-gallery-item" data-background='assets/img/gallery/g4.jpg'>
                        <div class="gallery-over">
                            <a href="https://www.51qianduan.com/">51前端</a>
                        </div>
                    </div> <!-- /.single-gallery-item -->
                </div> <!-- /.col-md-6 col-lg-8 col-12 -->
                <div class="col-md-6 col-lg-4 col-12">
                    <div class="single-gallery-item" data-background='assets/img/gallery/g5.jpg'>
                        <div class="gallery-over">
                            <a href="https://www.51qianduan.com/">51前端</a>
                        </div>
                    </div> <!-- /.single-gallery-item -->
                </div> <!-- /.col-md-6 col-lg-4 col-12 -->
            </div>
        </div>
    </section>
    <!-- 
    =============================================
       Testimonial  -  Section
    =============================================
    -->
    <section class="testimonial-one-wrapper section-padding">
        <div class="hero-shape service-shape">
            <img src="assets/img/shape/rmc.png" alt="" class="shape shape2">
            <img src="assets/img/shape/plusgs.png" alt="" class="shape shape4">
            <img src="assets/img/shape/plusg.png" alt="" class="shape shape6">
            <img src="assets/img/shape/plusr.png" alt="" class="shape shape8">
            <img src="assets/img/shape/sgdot.png" alt="" class="shape shape9"> 
        </div> <!-- /.shape-wapper --> 
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-left">
                    <div class="section-title-one">
                        <h1>Testimonails</h1>
                    </div> <!-- /.section-title-one -->
                </div> <!-- /.col-sm-12 text-center -->
            </div>
            <div class="row align-items-center">
                <div class="col-md-6 col-lg-4 col-12">
                    <div class="clients-nav-list mt-30">
                        <div class="single-client-box">
                            <div class="client-image">
                                <img src="assets/img/testi1.png" alt="">
                            </div>
                            <h3>Aliceano Colby</h3>
                            <span>CEO of Prime IT</span>
                        </div> <!-- /.single-client-box -->
                        <div class="single-client-box">
                            <div class="client-image">
                                <img src="assets/img/d2.png" alt="">
                            </div>
                            <h3>Salman Ahmed</h3>
                            <span>CEO of Modina Theme</span>
                        </div> <!-- /.single-client-box -->
                        <div class="single-client-box">
                            <div class="client-image">
                                <img src="assets/img/d3.png" alt="">
                            </div>
                            <h3>Shain Shalehin</h3>
                            <span>CEO of Creandy IT</span>
                        </div> <!-- /.single-client-box -->
                    </div>
                </div> <!-- /.col-md-4 col-12 -->
                <div class="col-md-6 col-12 col-lg-8 ">
                    <div class="clients-review-list">
                        <div class="single-review-item">
                            <h5>Awesome Work</h5>
                            <p>“They really took my individual case to heart. Their team is very helpful. They all work together in an impressive way to make sure that my needs were met and I walked out pain free.”</p>
                        </div> <!-- /.single-review-item -->
                        <div class="single-review-item">
                            <h5>Awesome Work</h5>
                            <p>“They really took my individual case to heart. Their team is very helpful. They all work together in an impressive way to make sure that my needs were met and I walked out pain free.”</p>
                        </div> <!-- /.single-review-item -->
                        <div class="single-review-item">
                            <h5>Awesome Work</h5>
                            <p>“They really took my individual case to heart. Their team is very helpful. They all work together in an impressive way to make sure that my needs were met and I walked out pain free.”</p>
                        </div> <!-- /.single-review-item -->
                    </div>
                </div> <!-- /.col-md-8 col-12 -->
            </div>
        </div>
    </section>
    <!-- 
    =============================================
       Blog  -  Section
    =============================================
    -->
    <section class="blog-wrapper blog-one section-padding pt-0">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center">
                    <div class="section-title-one">
                        <h1>Blog</h1>
                    </div> <!-- /.section-title-one -->
                </div> <!-- /.col-sm-12 text-center -->
            </div>
            <div class="row">
                <div class="col-md-6 col-lg-6 col-xl-4 col-sm-12">
                    <div class="single-blog-card">
                        <div class="featured-thumb" data-background='assets/img/blog/blog1.jpg'></div> <!-- change the img with your -->
                        <div class="card-content">
                            <h3><a href="blog-details.html">Are Your Teeth Making You Old? You Might Be Surprised!</a></h3>
                            <div class="card-meta">
                                <div class="col-6">
                                    <span>Post by: Admin</span>
                                </div>
                                <div class="col-6">
                                    <span>02 Jun, 2019</span>
                                </div>
                            </div>
                        </div>
                    </div> <!-- /.single-blog-card -->
                </div> <!-- /.col-md-6 col-lg-6 col-xl-4 col-sm-12 -->
                <div class="col-md-6 col-lg-6 col-xl-4 col-sm-12">
                    <div class="single-blog-card">
                        <div class="featured-thumb" data-background='assets/img/blog/blog2.jpg'></div><!-- change the img with your -->
                        <div class="card-content">
                            <h3><a href="blog-details.html">Dental Implants: The Next Best Thing to Get Natural Teeth</a></h3>
                            <div class="card-meta">
                                <div class="col-6">
                                    <span>Post by: Admin</span>
                                </div>
                                <div class="col-6">
                                    <span>24 Sep, 2019</span>
                                </div>
                            </div>
                        </div>
                    </div> <!-- /.single-blog-card -->
                </div> <!-- /.col-md-6 col-lg-6 col-xl-4 col-sm-12 -->
                <div class="col-md-6 col-lg-6 col-xl-4 col-sm-12">
                    <div class="single-blog-card">
                        <div class="featured-thumb" data-background='assets/img/blog/blog3.jpg'></div> <!-- change the img with your -->
                        <div class="card-content">
                            <h3><a href="blog-details.html">Maximize Your 2019 Dental Insurance with lots of Benefits</a></h3>
                            <div class="card-meta">
                                <div class="col-6">
                                    <span>Post by: Admin</span>
                                </div>
                                <div class="col-6">
                                    <span>12 Oct, 2019</span>
                                </div>
                            </div>
                        </div>
                    </div> <!-- /.single-blog-card -->
                </div> <!-- /.col-md-6 col-lg-6 col-xl-4 col-sm-12 -->
            </div>
        </div>
    </section>
    <!-- 
    =============================================
       Request Appointment  -  Section
    =============================================
    -->
    <section class="appointment-promo-wrapper section-bg text-white">
        <div class="appointment-promo-shape">
            <img src="assets/img/shape/plusr.png" alt="" class="shape app1">
            <img src="assets/img/shape/plusr.png" alt="" class="shape app2">
            <img src="assets/img/shape/bluef.png" alt="" class="shape app3">
            <img src="assets/img/shape/bluef.png" alt="" class="shape app4">
        </div> <!-- /.shape-wapper -->         
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-12 col-lg-6  col-12">
                    <div class="appointment-promo-content">
                        <h1>Request your appointment and start your smile makeover!</h1>
                        <a href="#" class="theme-btn">Request Appointment</a>
                    </div>
                </div> <!-- /.col-md-12 col-lg-6 -->
                <div class="col-md-12 col-lg-6 col-12">
                    <div class="promo-right-banner text-center">
                        <img src="assets/img/doctor-nars.png" alt="">
                    </div>
                </div> <!-- /.col-md-12 col-lg-6 -->
            </div>
        </div>
    </section>
    <!-- 
    =============================================
       Client Logo Carousel  -  Section
    =============================================
    -->
    <section class="brand-logo-wrapper section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="brand-logo-carousel owl-carousel">
                        <div class="single-brand-logo">
                            <img src="assets/img/brand/1.png" alt="">
                        </div> <!-- /.single-brand-logo -->
                        <div class="single-brand-logo">
                            <img src="assets/img/brand/2.png" alt="">
                        </div> <!-- /.single-brand-logo -->
                        <div class="single-brand-logo">
                            <img src="assets/img/brand/3.png" alt="">
                        </div> <!-- /.single-brand-logo -->
                        <div class="single-brand-logo">
                            <img src="assets/img/brand/4.png" alt="">
                        </div> <!-- /.single-brand-logo -->
                    </div> <!-- /.brand-logo-carousel -->
                </div> <!-- /.col-md-12 -->
            </div>
        </div>
    </section>
    <!-- 
    =============================================
       Footer  -  Section
    =============================================
    -->
    <footer class="footer-wrapper footer-one">
        <div class="footer-widgets-wrapper section-bg text-white">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-lg-2 col-12">
                        <div class="single-footer-widget">
                            <div class="f-widget-title">
                                <h2>Practices</h2>
                            </div>
                            <div class="widegts-content">
                                <a href="#">About</a>
                                <a href="#">For Patients</a>
                                <a href="#">FAQ’s</a>
                                <a href="#">Contact Us</a>
                                <a href="#">Blog</a>
                            </div>
                        </div> <!-- /.single-footer-widget -->
                    </div> <!-- /.col-sm-6 col-lg-3 col-12 -->
                    <div class="col-sm-6 col-lg-2 offset-lg-1 col-12">
                        <div class="single-footer-widget">
                            <div class="f-widget-title">
                                <h2>Resources</h2>
                            </div>
                            <div class="widegts-content">
                                <a href="#">New Patients</a>
                                <a href="#">Meet the Team</a>
                                <a href="#">Patient Form</a>
                                <a href="#">Insurance</a>
                                <a href="#">Account Login</a>
                            </div>
                        </div> <!-- /.single-footer-widget -->
                    </div> <!-- /.col-sm-6 col-lg-3 col-12 -->
                    <div class="col-sm-6 col-lg-2 offset-lg-1 col-12">
                        <div class="single-footer-widget">
                            <div class="f-widget-title">
                                <h2>Services</h2>
                            </div>
                            <div class="widegts-content">
                                <a href="#">Dental Dictionary</a>
                                <a href="#">Dental Sealands</a>
                                <a href="#">Dental Implants</a>
                                <a href="#">General Dentistry</a>
                                <a href="#">Sedation Dentistry</a>
                            </div>
                        </div> <!-- /.single-footer-widget -->
                    </div> <!-- /.col-sm-6 col-lg-3 col-12 -->
                    <div class="col-sm-6 col-lg-3 offset-lg-1 col-12">
                        <div class="single-footer-widget">
                            <div class="f-widget-title">
                                <h2>Our Address</h2>
                            </div>
                            <div class="widegts-content">
                                <p>Datobbo Dentistry 5212 Cedar <br> Village Dr Mason, NY.</p>
                                <li><span>Phone:</span>+1 3500 5867 340</li>
                                <li><span>Email:</span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e891879d9a8c8785898186a88f85898184c68b8785">[email&#160;protected]</a></li>
                                <li><span>Fax:</span>+1 675 5867 340</li>
                            </div>
                        </div> <!-- /.single-footer-widget -->
                    </div> <!-- /.col-sm-6 col-lg-3 col-12 -->
                </div>
            </div>
        </div> <!-- /.footer-widgets-wrapper section-bg -->
        <div class="footer-copyright-wrapper text-center">
            <p>&copy; Copyright by <a href="#">CreandyStudio</a> 2019</p>
        </div>
    </footer>
    <!--  ALl JS Plugins
    ====================================== -->
    <script src="assets/js/ajax-mail.js"></script>   



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 蓝色 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 医院医疗 医院 医疗 医疗器械

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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