蓝色简洁风格响应式医疗健康企业网站模板



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

11 41 14



模板描述:蓝色 简洁风格 响应式 医疗健康。整站宽屏满屏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。最底部部分带有自动反动和滚动效果,鼠标移动上之后,停止移动和滚动效果。适用医疗健康等行业。同时兼容手机端和电脑网页端

代码结构

1. 引入CSS

<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/flaticon.css" rel="stylesheet">
<link href="assets/js/plugins/camera/css/camera.css" rel="stylesheet">
<link href="assets/js/plugins/magnific-popup/magnific-popup.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/animate.css">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/responsive.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">

2. 引入JS

<script src="assets/js/html5shiv.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery-migrate.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins/camera/js/jquery.mobile.customized.min.js"></script>
<script src="assets/js/plugins/camera/js/jquery.easing.js"></script>
<script src="assets/js/plugins/camera/js/camera.min.js"></script>
<script src="assets/js/plugins/shuffle/jquery.shuffle.modernizr.min.js"></script>
<script src="assets/js/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/main.js"></script>

3. HTML代码

	<!-- Start Page Preloader -->
	<div id="loading">
		<div id="loading-center">
			<div id="loading-center-absolute">
				<div class="object" id="object_four"></div>
				<div class="object" id="object_three"></div>
				<div class="object" id="object_two"></div>
				<div class="object" id="object_one"></div>
			</div>
		</div>
	</div>
	<!-- End Page Preloader -->
	<!-- Start Header Area -->
	<header class="main-header">
		<div class="container container-relative">
			<!-- Start TopBar Area -->
			<div class="top-bar hidden-sm hidden-xs">
				<div class="row">
					<div class="col-sm-9 col-xs-12">
						<span class="top-info"><i class="fa fa-phone"></i></span>+1 888 888 8888
						<span class="top-info"><i class="fa fa-envelope-o"></i></span>[email protected]
						<span class="top-info"><i class="fa fa-map-marker"></i></span>221B Baker Street, London, UK
						<span class="top-info"><i class="fa fa-calendar"></i></span>Mon - Sat 9:00 - 20:00
					</div>
					<div class="col-sm-3 col-xs-12">
						<ul class="list-unstyled list-inline">
							<li><a href="#"><i class="fa fa-facebook"></i></a></li>
							<li><a href="#"><i class="fa fa-twitter"></i></a></li>
							<li><a href="#"><i class="fa fa-instagram"></i></a></li>
							<li><a href="#"><i class="fa fa-vimeo"></i></a></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- End TopBar Area -->
			<!-- Start NavBar Area -->
			<nav id="nav" class="navbar navbar-default navbar-static-top affix-top">
				<div class="container">
					<div class="navbar-header">
						<!-- Start Collapse Button -->
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<!-- End Collapse Button -->
						<!-- Start Website Logo -->
						<a href="index.html" class="navbar-brand">
							<img src="assets/images/logo.png" class="logo" alt="Logo"> Med<span>Line</span>
						</a>
						<!-- End Website Logo -->
					</div>
					<!-- Start Menu Area -->
					<div class="navbar-collapse collapse">
						<ul class="nav navbar-nav navbar-right">
							<li><a href="index.html">Home</a></li>
							<li><a href="about.html">About</a></li>
							<li><a href="services.html">Services</a></li>
							<li class="active"><a href="service-single.html">Single Service</a></li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
					<!-- Start Menu Area -->
				</div>
			</nav>
			<!-- End NavBar Area -->
		</div>
	</header>
	<!-- End Header Area -->
	<!-- Start Slider Area -->
	<section class="slider clearfix">
		<div id="camera_wrap_1" class="camera_wrap camera_white_skin">
			<!-- Start Slide #1 -->
			<div data-src="assets/images/slider/slider-image-1.jpg">
				<div class="camera_caption fadeIn hidden-sm hidden-xs">
					<h2>Main Heading</h2>
					<h2>Some Caption <span>Here</span></h2>
					<p>Lorem Ipsum is simply dummy text printer took a galley of type and scrambled it to make a type specimen book ...</p>
					<a href="services.html" class="btn btn-secondary">Read More</a>
				</div>
			</div>
			<!-- End Slide #1 -->
			<!-- Start Slide #2 -->
			<div data-src="assets/images/slider/slider-image-2.jpg">
				<div class="camera_caption fadeIn hidden-sm hidden-xs">
					<h2>Main Heading</h2>
					<h2>Some Caption <span>Here</span></h2>
					<p>Lorem Ipsum is simply dummy text printer took a galley of type and scrambled it to make a type specimen book ...</p>
					<a href="services.html" class="btn btn-secondary">Read More</a>
				</div>
			</div>
			<!-- End Slide #2 -->
			<!-- Start Slide #3 -->
			<div data-src="assets/images/slider/slider-image-3.jpg">
				<div class="camera_caption fadeIn hidden-sm hidden-xs">
					<h2>Main Heading</h2>
					<h2>Some Caption <span>Here</span></h2>
					<p>Lorem Ipsum is simply dummy text printer took a galley of type and scrambled it to make a type specimen book ...</p>
					<a href="services.html" class="btn btn-secondary">Read More</a>
				</div>
			</div>
			<!-- End Slide #3 -->
		</div>
	</section>
	<!-- End Slider Area -->
	<!-- Start Main Container Area -->
	<div class="container main-container">
		<!-- Start Notification Area -->
		<div class="notification-boxes row">
			<!-- Start Box #1 -->
			<div class="col-md-3 col-sm-6 col-xs-6">
				<div class="box wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s">
					<i class="fa fa-user-md"></i>
					<h4>Qualified Doctors</h4>
					<p>Lorem ipsum dolorit amet consetur adipiscing Morbi sollicitudin just non odio molestie ...</p>
					<a href="doctors.html" class="btn btn-transparent">Read More</a>
				</div>
			</div>
			<!-- End Box #1 -->
			<!-- Start Box #2 -->
			<div class="col-md-3 col-sm-6 col-xs-6">
				<div class="box wow fadeInLeft" data-wow-duration="1s" data-wow-delay="1s">
					<i class="fa fa-stethoscope"></i>
					<h4>Regular Checkup</h4>
					<p>Lorem ipsum dolorit amet consetur adipiscing Morbi sollicitudin just non odio molestie ...</p>
					<a href="services.html" class="btn btn-transparent">Read More</a>
				</div>
			</div>
			<!-- End Box #2 -->
			<!-- Start Box #3 -->
			<div class="col-md-3 col-sm-6 col-xs-6">
				<div class="box wow fadeInLeft" data-wow-duration="1s" data-wow-delay="1.5s">
					<i class="fa fa-flask"></i>
					<h4>Laboratories Test</h4>
					<p>Lorem ipsum dolorit amet consetur adipiscing Morbi sollicitudin just non odio molestie ...</p>
					<a href="departments.html" class="btn btn-transparent">Read More</a>
				</div>
			</div>
			<!-- End Box #3 -->
			<!-- Start Box #4 -->
			<div class="col-md-3 col-sm-6 col-xs-6">
				<div class="box wow fadeInLeft" data-wow-duration="1s" data-wow-delay="2s">
					<i class="fa fa-comments-o"></i>
					<h4>Hospital News</h4>
					<p>Lorem ipsum dolorit amet consetur adipiscing Morbi sollicitudin just non odio molestie ...</p>
					<a href="news.html" class="btn btn-transparent">Read More</a>
				</div>
			</div>
			<!-- End Box #4 -->
		</div>
		<!-- End Notification Area -->
		<!-- Start Welcome Area -->
		<section class="welcome-area">
			<div class="row">
				<div class="col-md-6 col-sm-12 col-xs-12">
					<h2 class="main-heading1 lite">We Offer Fast &amp; Reliable</h2>
					<h2 class="main-heading2">Medical &amp; Healthcare</h2>
					<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using content.</p>
					<p>Making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose. Various versions have evolved over the years, sometimes by accident, sometimes on purpose.</p>
				</div>
				<div class="col-md-6 hidden-sm hidden-xs">
					<img src="assets/images/home-welcome-image.jpg" alt="Welcome Image" class="img-responsive img-style1">
				</div>
			</div>
		</section>
		<!-- End Welcome Area -->
	</div>
	<!-- End Main Container Area -->
	<!-- Start Doctors Area -->
	<section class="featured-doctors">
		<div class="container">
			<h2><span class="lite">Meet Our</span> Doctors</h2>
			<p>Making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident.  Various versions have evolved over the years, sometimes by accident.</p>
			<div class="row">
				<!-- Start Doctor #1 -->
				<div class="col-md-3 col-sm-6 col-xs-6 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
					<div class="bio-box">
						<div class="profile-img">
							<img src="assets/images/home-doctor-1.jpg" alt="Doctor" class="img-responsive img-center-sm img-center-xs">
							<div class="overlay">
								<ul class="list-unstyled list-inline sm-links">
									<li><a href="#"><i class="fa fa-facebook"></i></a></li>
									<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
									<li><a href="#"><i class="fa fa-phone"></i></a></li>
								</ul>
							</div>
						</div>
						<div class="inner">
							<h5>Dr. Tom Smith</h5>
							<p class="designation">Surgeon</p>
							<p class="divider"><i class="fa fa-plus-square"></i></p>
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since type specimen book ...</p>
						</div>
						<a href="doctor-profile.html" class="btn btn-secondary text-uppercase">Book An Appointment</a>
					</div>
				</div>
				<!-- End Doctor #1 -->
				<!-- Start Doctor #2 -->
				<div class="col-md-3 col-sm-6 col-xs-6 wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">
					<div class="bio-box">
						<div class="profile-img">
							<img src="assets/images/home-doctor-2.jpg" alt="Doctor" class="img-responsive img-center-sm img-center-xs">
							<div class="overlay">
								<ul class="list-unstyled list-inline sm-links">
									<li><a href="#"><i class="fa fa-facebook"></i></a></li>
									<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
									<li><a href="#"><i class="fa fa-phone"></i></a></li>
								</ul>
							</div>
						</div>
						<div class="inner">
							<h5>Dr. Julia Doe</h5>
							<p class="designation">Cardiologists</p>
							<p class="divider"><i class="fa fa-plus-square"></i></p>
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since type specimen book ...</p>
						</div>
						<a href="doctor-profile.html" class="btn btn-secondary text-uppercase">Book An Appointment</a>
					</div>
				</div>
				<!-- End Doctor #2 -->
				<!-- Start Doctor #3 -->
				<div class="col-md-3 col-sm-6 col-xs-6 wow fadeInUp" data-wow-duration="1s" data-wow-delay="1.5s">
					<div class="bio-box">
						<div class="profile-img">
							<img src="assets/images/home-doctor-3.jpg" alt="Doctor" class="img-responsive img-center-sm img-center-xs">
							<div class="overlay">
								<ul class="list-unstyled list-inline sm-links">
									<li><a href="#"><i class="fa fa-facebook"></i></a></li>
									<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
									<li><a href="#"><i class="fa fa-phone"></i></a></li>
								</ul>
							</div>
						</div>
						<div class="inner">
							<h5>Dr. John Brown</h5>
							<p class="designation">Dermatologists</p>
							<p class="divider"><i class="fa fa-plus-square"></i></p>
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since type specimen book ...</p>
						</div>
						<a href="doctor-profile.html" class="btn btn-secondary text-uppercase">Book An Appointment</a>
					</div>
				</div>
				<!-- End Doctor #3 -->
				<!-- Start Doctor #4 -->
				<div class="col-md-3 col-sm-6 col-xs-6 wow fadeInUp" data-wow-duration="1s" data-wow-delay="2s">
					<div class="bio-box">
						<div class="profile-img">
							<img src="assets/images/home-doctor-4.jpg" alt="Doctor" class="img-responsive img-center-sm img-center-xs">
							<div class="overlay">
								<ul class="list-unstyled list-inline sm-links">
									<li><a href="#"><i class="fa fa-facebook"></i></a></li>
									<li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
									<li><a href="#"><i class="fa fa-phone"></i></a></li>
								</ul>
							</div>
						</div>
						<div class="inner">
							<h5>Dr. Annabel Bert</h5>
							<p class="designation">Hematologists</p>
							<p class="divider"><i class="fa fa-plus-square"></i></p>
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since type specimen book ...</p>
						</div>
						<a href="doctor-profile.html" class="btn btn-secondary text-uppercase">Book An Appointment</a>
					</div>
				</div>
				<!-- Start Doctor #4 -->
			</div>
		</div>
	</section>
	<!-- End Doctors Area -->
	<!-- Start Main Container Area -->
	<div class="container main-container">
		<!-- Start Services Area -->
		<section class="medical-services">
			<h2 class="main-heading1 lite">Our Best</h2>
			<h2 class="main-heading2">Medical Services</h2>
			<!-- Start Services List Area -->
			<ul class="list-unstyled row text-center">
				<li class="col-md-2 col-sm-4 col-xs-6 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
					<div class="icon">
						<img src="assets/images/icons/dental-care.png" alt="Dental Care">
					</div>
					<h5>Dental Care</h5>
					<p>Lorem Ipsum is simply dummy text ...</p>
					<a href="service-single.html" class="btn btn-secondary"><i class="fa fa-arrow-circle-right"></i> Read More</a>
				</li>
				<li class="col-md-2 col-sm-4 col-xs-6 wow fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
					<div class="icon">
						<img src="assets/images/icons/band-aid.png" alt="First Aid">
					</div>
					<h5>First Aid</h5>
					<p>Lorem Ipsum is simply dummy text ...</p>
					<a href="service-single.html" class="btn btn-secondary"><i class="fa fa-arrow-circle-right"></i> Read More</a>
				</li>
				<li class="col-md-2 col-sm-4 col-xs-6 wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">
					<div class="icon">
						<img src="assets/images/icons/pharmacy.png" alt="Pharmacy">
					</div>
					<h5>Pharmacy</h5>
					<p>Lorem Ipsum is simply dummy text ...</p>
					<a href="service-single.html" class="btn btn-secondary"><i class="fa fa-arrow-circle-right"></i> Read More</a>
				</li>
				<li class="col-md-2 col-sm-4 col-xs-6 wow fadeInDown" data-wow-duration="1s" data-wow-delay="1s">
					<div class="icon">
						<img src="assets/images/icons/doctors.png" alt="Doctors">
					</div>
					<h5>Doctors</h5>
					<p>Lorem Ipsum is simply dummy text ...</p>
					<a href="service-single.html" class="btn btn-secondary"><i class="fa fa-arrow-circle-right"></i> Read More</a>
				</li>
				<li class="col-md-2 col-sm-4 col-xs-6 wow fadeInUp" data-wow-duration="1s" data-wow-delay="1.5s">
					<div class="icon">
						<img src="assets/images/icons/pulmonary.png" alt="Pulmonary">
					</div>
					<h5>Pulmonary</h5>
					<p>Lorem Ipsum is simply dummy text ...</p>
					<a href="service-single.html" class="btn btn-secondary"><i class="fa fa-arrow-circle-right"></i> Read More</a>
				</li>
				<li class="col-md-2 col-sm-4 col-xs-6 wow fadeInDown" data-wow-duration="1s" data-wow-delay="1.5s">
					<div class="icon">
						<img src="assets/images/icons/ambulance.png" alt="Ambulance">
					</div>
					<h5>Ambulance</h5>
					<p>Lorem Ipsum is simply dummy text ...</p>
					<a href="service-single.html" class="btn btn-secondary"><i class="fa fa-arrow-circle-right"></i> Read More</a>
				</li>
			</ul>
			<!-- End Services List Area -->
		</section>
		<!-- End Services Area -->
		<div class="row">
			<!-- Start Latest News Area -->
			<section class="col-md-8 col-sm-12 col-xs-12">
				<div class="main-block1">
					<h2 class="main-heading1 lite">Latest</h2>
					<h2 class="main-heading2">Tips & News</h2>
					<!-- Start News Carousel -->
					<div id="news-carousel" class="news-carousel carousel slide" data-ride="carousel">
						<div class="carousel-inner">
							<!-- Start News Slide #1 -->
							<div class="item active">
								<div class="row">
									<!-- Start News #1 -->
									<div class="col-md-6 col-sm-6 col-xs-6">
										<div class="news-post-box">
											<img src="assets/images/news-thumb-image-1.jpg" alt="Latest News" class="img-responsive img-center-sm img-center-xs">
											<div class="inner">
												<h5><a href="#">Latest News Post Heading</a></h5>
												<ul class="list-unstyled list-inline post-meta">
													<li><i class="fa fa-calendar"></i> Sept 25, 2015</li>
													<li><a href="#"><i class="fa fa-comments-o"></i> 10</a></li>
												</ul>
												<p>Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker....</p>
												<a href="news-single.html" class="btn btn-secondary"><i class="fa fa-arrow-circle-right"></i>Read More</a>
											</div>
										</div>
									</div>
									<!-- End News #1 -->
									<!-- Start News #2 -->
									<div class="col-md-6 col-sm-6 col-xs-6">
										<div class="news-post-box">
											<img src="assets/images/news-thumb-image-2.jpg" alt="Latest News" class="img-responsive img-center-sm img-center-xs">
											<div class="inner">
												<h5><a href="#">Latest Tip Post Heading</a></h5>
												<ul class="list-unstyled list-inline post-meta">
													<li><i class="fa fa-calendar"></i> Sept 15, 2015</li>
													<li><a href="#"><i class="fa fa-comments-o"></i> 10</a></li>
												</ul>
												<p>Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker....</p>
												<a href="news-single.html" class="btn btn-secondary"><i class="fa fa-arrow-circle-right"></i>Read More</a>
											</div>
										</div>
									</div>
									<!-- Start News #2 -->
								</div>
							</div>
							<!-- End News Slide #1 -->
							<!-- Start News Slide #2 -->
							<div class="item">
								<div class="row">
									<!-- Start News #3 -->
									<div class="col-md-6 col-sm-6 col-xs-6">
										<div class="news-post-box">
											<img src="assets/images/news-thumb-image-3.jpg" alt="Latest News" class="img-responsive img-center-sm img-center-xs">
											<div class="inner">
												<h5><a href="#">Latest News Post Heading</a></h5>
												<ul class="list-unstyled list-inline post-meta">
													<li><i class="fa fa-calendar"></i> Sept 25, 2015</li>
													<li><a href="#"><i class="fa fa-comments-o"></i> 10</a></li>
												</ul>
												<p>Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker....</p>
												<a href="news-single.html" class="btn btn-secondary"><i class="fa fa-arrow-circle-right"></i>Read More</a>
											</div>
										</div>
									</div>
									<!-- End News #3 -->
									<!-- Start News #4 -->
									<div class="col-md-6 col-sm-6 col-xs-6">
										<div class="news-post-box">
											<img src="assets/images/news-thumb-image-4.jpg" alt="Latest News" class="img-responsive img-center-sm img-center-xs">
											<div class="inner">
												<h5><a href="#">Latest Tip Post Heading</a></h5>
												<ul class="list-unstyled list-inline post-meta">
													<li><i class="fa fa-calendar"></i> Sept 15, 2015</li>
													<li><a href="#"><i class="fa fa-comments-o"></i> 10</a></li>
												</ul>
												<p>Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker....</p>
												<a href="news-single.html" class="btn btn-secondary"><i class="fa fa-arrow-circle-right"></i>Read More</a>
											</div>
										</div>
									</div>
									<!-- Start News #4 -->
								</div>
							</div>
							<!-- End News Slide #2 -->
						</div>
						<!-- Start News Carousel Controls Area -->
						<a class="left carousel-control" href="#news-carousel" role="button" data-slide="prev">
							<span class="fa fa-angle-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a>
						<a class="right carousel-control" href="#news-carousel" role="button" data-slide="next">
							<span class="fa fa-angle-right" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a>
						<!-- Start News Carousel Controls Area -->
					</div>
					<!-- End News Carousel -->
				</div>
			</section>
			<!-- End Latest News Area -->
			<!-- Start Department Area -->
			<aside class="col-md-4 col-sm-12 col-xs-12">
				<div class="main-block1">
					<h2 class="main-heading1 lite">Medical</h2>
					<h2 class="main-heading2">Departments</h2>
					<!-- Start Accordion Area -->
					<div class="panel-group" id="accordion">
						<!-- Start Accordion #1 -->
						<div class="panel">
							<!-- Start Accordion #1 Heading -->
							<div class="panel-heading">
								<h5 class="panel-title">
									<i class="icon fa fa-user-md"></i>
									<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Department of Neurology</a>
								</h5>
							</div>
							<!-- End Accordion #1 Heading -->
							<!-- Start Accordion #1 Body -->
							<div id="collapse1" class="panel-collapse collapse in">
								<div class="panel-body">
									<p>Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions ...</p>
									<a href="department-single.html" class="btn btn-sm btn-transparent inverse">Details</a>
								</div>
							</div>
							<!-- End Accordion #1 Body -->
						</div>
						<!-- End Accordion #1 -->
						<!-- Start Accordion #2 -->
						<div class="panel">
							<!-- Start Accordion #2 Heading -->
							<div class="panel-heading">
								<h5 class="panel-title">
									<i class="icon fa fa-heartbeat"></i>
									<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Diagnosis With Precise</a>
								</h5>
							</div>
							<!-- End Accordion #2 Heading -->
							<!-- Start Accordion #2 Body -->
							<div id="collapse2" class="panel-collapse collapse">
								<div class="panel-body">
									<p>Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions ...</p>
									<a href="department-single.html" class="btn btn-sm btn-transparent inverse">Details</a>
								</div>
							</div>
							<!-- End Accordion #2 Body -->
						</div>
						<!-- End Accordion #2 -->
						<!-- Start Accordion #3 -->
						<div class="panel">
							<!-- Start Accordion #3 Heading -->
							<div class="panel-heading">
								<h5 class="panel-title">
									<i class="icon fa fa-scissors"></i>
									<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Major Surgery</a>
								</h5>
							</div>
							<!-- End Accordion #3 Heading -->
							<!-- Start Accordion #3 Body -->
							<div id="collapse3" class="panel-collapse collapse">
								<div class="panel-body">
									<p>Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions ...</p>
									<a href="department-single.html" class="btn btn-sm btn-transparent inverse">Details</a>
								</div>
							</div>
							<!-- End Accordion #3 Body -->
						</div>
						<!-- End Accordion #3 -->
						<!-- Start Accordion #4 -->
						<div class="panel">
							<!-- Start Accordion #4 Heading -->
							<div class="panel-heading">
								<h5 class="panel-title">
									<i class="icon fa fa-wheelchair"></i>
									<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Outpatient Rehabilitation</a>
								</h5>
							</div>
							<!-- End Accordion #4 Heading -->
							<!-- Start Accordion #4 Body -->
							<div id="collapse4" class="panel-collapse collapse">
								<div class="panel-body">
									<p>Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions ...</p>
									<a href="department-single.html" class="btn btn-sm btn-transparent inverse">Details</a>
								</div>
							</div>
							<!-- End Accordion #4 Body -->
						</div>
						<!-- End Accordion #4 -->
						<!-- Start Accordion #5 -->
						<div class="panel">
							<!-- Start Accordion #5 Heading -->
							<div class="panel-heading">
								<h5 class="panel-title">
									<i class="icon fa fa-stethoscope"></i>
									<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Primary Health Care</a>
								</h5>
							</div>
							<!-- End Accordion #5 Heading -->
							<!-- Start Accordion #5 Body -->
							<div id="collapse5" class="panel-collapse collapse">
								<div class="panel-body">
									<p>Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions ...</p>
									<a href="department-single.html" class="btn btn-sm btn-transparent inverse">Details</a>
								</div>
							</div>
							<!-- End Accordion #5 Body -->
						</div>
						<!-- End Accordion #5 -->
						<!-- Start Accordion #6 -->
						<div class="panel">
							<!-- Start Accordion #6 Heading -->
							<div class="panel-heading">
								<h5 class="panel-title">
									<i class="icon fa fa-ambulance"></i>
									<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">24x7 Ambulance</a>
								</h5>
							</div>
							<!-- End Accordion #6 Heading -->
							<!-- Start Accordion #6 Body -->
							<div id="collapse6" class="panel-collapse collapse">
								<div class="panel-body">
									<p>Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions ...</p>
									<a href="department-single.html" class="btn btn-sm btn-transparent inverse">Details</a>
								</div>
							</div>
							<!-- End Accordion #6 Body -->
						</div>
						<!-- End Accordion #6 -->
						<!-- Start Accordion #7 -->
						<div class="panel">
							<!-- Start Accordion #7 Heading -->
							<div class="panel-heading">
								<h5 class="panel-title">
									<i class="icon fa fa-hospital-o"></i>
									<a data-toggle="collapse" data-parent="#accordion" href="#collapse7">Appointment</a>
								</h5>
							</div>
							<!-- End Accordion #7 Heading -->
							<!-- Start Accordion #7 Body -->
							<div id="collapse7" class="panel-collapse collapse">
								<div class="panel-body">
									<p>Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions ...</p>
									<a href="department-single.html" class="btn btn-sm btn-transparent inverse">Details</a>
								</div>
							</div>
							<!-- End Accordion #7 Body -->
						</div>
						<!-- End Accordion #7 -->
					</div>
					<!-- End Accordion Area -->
				</div>
			</aside>
			<!-- End Department Area -->
		</div>
		<!-- Start Appointment Booking Area -->
		<div class="book-appointment-box">
			<div class="row">
				<div class="col-md-5 col-sm-12 col-xs-12 text-center-sm text-center-xs">
					<h4>Online Hassle Free Appointment Booking</h4>
					<h3><i class="fa fa-phone-square"></i> +1 888 888 8888</h3>
				</div>
				<div class="col-md-4 col-sm-12 col-xs-12 text-center-sm text-center-xs">
					<a href="appointment.html" class="btn btn-main text-uppercase">Book your Appointment</a>
				</div>
				<div class="col-md-3 col-sm-12 col-xs-12 hidden-sm hidden-xs">
					<div class="box-img">
						<img src="assets/images/appointment-booking-image-1.png" alt="Book your Appointment" />
					</div>
				</div>
			</div>
		</div>
		<!-- End Appointment Booking Area -->
	</div>
	<!-- End Main Container Area -->
	<!-- Start Footer Area -->
	<footer class="main-footer">
		<div class="footer-area">
			<div class="container">
				<div class="row">
					<!-- Start Information Area -->
					<div class="col-md-3 col-sm-4 col-xs-6">
						<h4>Information</h4>
						<p>Lorem Ipsum passages, and more recently with desktop publishing ...</p>
						<ul class="list-unstyled address-list">
							<li class="clearfix">
								<i class="fa fa-phone"></i>
								+1 888 888 8888
							</li>
							<li class="clearfix">
								<i class="fa fa-envelope-o"></i>
								[email protected]
							</li>
							<li class="clearfix address">
								<i class="fa fa-map-marker"></i>
								221B Baker Street, London, UK
							</li>
							<li class="clearfix">
								<i class="fa fa-calendar"></i>
								Mon - Sat 9:00 - 20:00
							</li>
						</ul>
					</div>
					<!-- End Information Area -->
					<!-- Start Services Area -->
					<div class="col-md-3 col-sm-4 col-xs-6">
						<h4>Services</h4>
						<ul class="list-unstyled">
							<li><a href="service-single.html"><i class="fa fa-angle-right"></i> Pediatric Clinic</a></li>
							<li><a href="service-single.html"><i class="fa fa-angle-right"></i> Diagnosis Clinic</a></li>
							<li><a href="service-single.html"><i class="fa fa-angle-right"></i> Cardiac Clinic</a></li>
							<li><a href="service-single.html"><i class="fa fa-angle-right"></i> Dental Clinic</a></li>
							<li><a href="service-single.html"><i class="fa fa-angle-right"></i> Gynecological Clinic</a></li>
							<li><a href="service-single.html"><i class="fa fa-angle-right"></i> Psychological</a></li>
						</ul>
					</div>
					<!-- End Services Area -->
					<!-- Start Testimonials Area -->
					<div class="col-md-3 col-sm-4 col-xs-12 hidden-xs">
						<h4>Testimonials</h4>
						<ul class="list-unstyled tweets-list">
							<li>
								<i class="fa fa-comments"></i>
								John Doe on
								<p>Lorem Ipsum passages ...</p>
							</li>
							<li>
								<i class="fa fa-comments"></i>
								John Doe on
								<p>Lorem Ipsum passages ...</p>
							</li>
							<li>
								<i class="fa fa-comments"></i>
								John Doe on
								<p>Lorem Ipsum passages ...</p>
							</li>
							<li>
								<i class="fa fa-comments"></i>
								John Doe on
								<p>Lorem Ipsum passages ...</p>
							</li>
						</ul>
					</div>
					<!-- End Testimonials Area -->
					<!-- Start Newsletter Area -->
					<div class="col-md-3 col-sm-12 col-xs-12 newsletter-block">
						<h4>Newsletter</h4>
						<form action="#" class="newsletter">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="Enter Your Name">
							</div>
							<div class="form-group">
								<input type="email" class="form-control" placeholder="Enter Your E-Mail">
							</div>
							<button type="submit" class="btn btn-lg btn-block btn-secondary">Submit</button>
						</form>
					</div>
					<!-- End Newsletter Area -->
				</div>
			</div>
		</div>
		<!-- Start Copyright Area -->
		<div class="copyright">
			<div class="container clearfix">
				<p class="pull-left">Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="http://www.51qianduan.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
				<ul class="list-unstyled list-inline pull-right">
					<li><a href="#">Terms Of Services</a></li>
					<li><a href="#">Privacy Policy</a></li>
					<li><a href="contact.html">Contact Us</a></li>
				</ul>
			</div>
		</div>
		<!-- End Copyright Area -->
	</footer>
	<!-- End Footer Area -->
	<!-- Start Back To Top Button -->
	<div id="back-to-top">
		<a href="#"><i class="fa fa-arrow-up"></i></a>
	</div>
	<!-- End Back To Top Button -->
	<!-- JQuery JS -->
	<!-- JQuery Migrate JS -->
	<!-- Bootstrap JS -->
	<!-- Slider JS Files -->
	<!-- Modernizr JS -->
	<!-- Popup JS -->
    <!-- Wow JS -->
	<!-- Main JS -->



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



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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