白色简洁风格响应式网络数字营销企业网站模板



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

3 9 4



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

代码结构

1. 引入CSS

<link href="css/css-assets.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/css-assets.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

2. 引入JS

<script src="js/jquery.js"></script>
<script src="js/jRespond.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/superfish.js"></script>
<script src="scss/slick/slick.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/scrollIt.min.js"></script>
<script src='js/functions.js'></script>
<script src="js/jquery.js"></script>
<script src="js/jRespond.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/superfish.js"></script>
<script src="scss/slick/slick.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/scrollIt.min.js"></script>
<script src='js/functions.js'></script>

3. HTML代码

<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- Meta
============================================= -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="IT Geeks">
<!-- description -->
<meta name="description" content="">
<!-- keywords -->
<meta name="keywords" content="">
<!-- Stylesheets
============================================= -->
<link href="css/css-assets.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Favicon
============================================= -->
<link rel="shortcut icon" href="images/general-elements/favicon/favicon.png">
<link rel="apple-touch-icon" href="images/general-elements/favicon/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/general-elements/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/general-elements/favicon/apple-touch-icon-114x114.png">
<!-- Title
============================================= -->
<title>Home</title>
</head>
<body class="homepage">
<!-- Website Loading
============================================= -->
<div id="website-loading">
	<a class="logo logo-loader" href="index-default.html">
		<img src="images/files/logo-header-alt.png" alt="">
		<h3><span class="colored">IT Geeks</span></h3>
		<span>Web Services</span>
	</a><!-- .logo end -->
	<div class="loader">
		<div class="la-ball-pulse la-2x">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div><!-- .loader end -->
</div><!-- .website-loading end -->
<!-- Document Full Container
============================================= -->
<div id="full-container">
	<!-- Header
	============================================= -->
	<header id="header">
		<div id="header-bar-1" class="header-bar sticky">
			<div class="header-bar-wrap">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<div class="hb-content">
								<a class="logo logo-header" href="index.html">
									<img src="images/files/logo-header.png" data-logo-alt="images/files/logo-header-alt.png" alt="">
									<h3><span class="colored">IT Geeks</span></h3>
									<span>Web Services</span>
								</a><!-- .logo end -->
								<ul id="menu-main" class="menu-main">
									<li><a href="#banner" data-scroll-nav="0" class="current">Home</a></li>
									<li><a href="#what-we-do" data-scroll-nav="1">About Us</a></li>
									<li><a href="#video-watch" data-scroll-nav="2">Services</a></li>
									<li><a href="#our-projects" data-scroll-nav="3">Our Works</a></li>
									<li><a href="#pricing-plans" data-scroll-nav="4">Our Pricing</a></li>
									<li><a href="javascript:;" data-scroll-nav="5">Blog</a></li>
									<li><a href="#newsletter-subscribe" data-scroll-nav="6">Contact us</a></li>
								</ul><!-- #menu-main end -->
								<div class="menu-mobile-btn">
									<div class="hamburger hamburger--slider">
										<span class="hamburger-box">
											<span class="hamburger-inner"></span>
										</span>
									</div>
								</div><!-- .menu-mobile-btn end -->
								<a href="javascript:;" class="btn-search"><i class="fas fa-search"></i></a>
							</div><!-- .hb-content end -->
						</div><!-- .col-md-12 end -->
					</div><!-- .row end -->
				</div><!-- .container end -->
			</div><!-- .header-bar-wrap -->
		</div><!-- #header-bar-1 end -->
	</header><!-- #header end -->
	<!-- Banner
	============================================= -->
	<section id="banner" data-scroll-index="0">
		<div class="banner-parallax" data-banner-height="750">
			<div class="slider-banner">
				<ul class="slick-slider slider-img-bg">
					<li>
						<div class="overlay-colored color-bg-dark opacity-70"></div><!-- .overlay-colored end -->
						<div class="slide">
							<img src="images/files/parallax-bg/img-10.jpg" alt="">
							<div class="slide-content">
								<div class="container">
									<div class="row">
										<div class="col-md-10 col-md-offset-1">
											<div class="banner-center-box text-white text-center">
												<h5>Creative People Technology</h5>
												<h1>
													We Start Here Creative to Plan Your Business
												</h1>
												<a class="btn colorful large hover-dark mt-30 move-top" href="#">Get Started</a>
											</div><!-- .banner-center-box end -->
										</div><!-- .col-md-10 end -->
									</div><!-- .row end -->
								</div><!-- .container end -->
							</div><!-- .slide-content end -->
						</div><!-- .slide end -->
					</li>
					<li>
						<div class="overlay-colored color-bg-dark opacity-70"></div><!-- .overlay-colored end -->
						<div class="slide">
							<img src="images/files/parallax-bg/img-1.jpg" alt="">
							<div class="slide-content">
								<div class="container">
									<div class="row">
										<div class="col-md-10 col-md-offset-1">
											<div class="banner-center-box text-white text-center">
												<h5>Creative People Technology</h5>
												<h1>
													We Start Here Creative to Plan Your Business
												</h1>
												<a class="btn colorful large hover-dark mt-30 move-top" href="#">Get Started</a>
											</div><!-- .banner-center-box end -->
										</div><!-- .col-md-10 end -->
									</div><!-- .row end -->
								</div><!-- .container end -->
							</div><!-- .slide-content end -->
						</div><!-- .slide end -->
					</li>
					<li>
						<div class="overlay-colored color-bg-dark opacity-70"></div><!-- .overlay-colored end -->
						<div class="slide">
							<img src="images/files/parallax-bg/img-3.jpg" alt="">
							<div class="slide-content">
								<div class="container">
									<div class="row">
										<div class="col-md-10 col-md-offset-1">
											<div class="banner-center-box text-white text-center">
												<h5>Creative People Technology</h5>
												<h1>
													We Start Here Creative to Plan Your Business
												</h1>
												<a class="btn colorful large hover-dark mt-30 move-top" href="#">Get Started</a>
											</div><!-- .banner-center-box end -->
										</div><!-- .col-md-10 end -->
									</div><!-- .row end -->
								</div><!-- .container end -->
							</div><!-- .slide-content end -->
						</div><!-- .slide end -->
					</li>
				</ul><!-- .slick-slider end -->
			</div><!-- .slider-banner end -->
		</div><!-- .banner-parallax end -->
	</section><!-- #banner end -->
	<!-- Content
	============================================= -->
	<section id="content">
		<div id="content-wrap">
			<!-- === What We Do =========== -->
			<div id="what-we-do" class="section-flat" data-scroll-index="1">
				<div class="section-content">
					<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2">
								<div class="section-title text-center">
									<h5>What We Do</h5>
									<h2>The Most Important Aspect is to Focus on The New</h2>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod tempor inc ididunt labore east dolore magna you
									</p>
								</div><!-- .section-title end -->
							</div><!-- .col-md-8 end -->
							<div class="col-md-4">
								<div class="box-info box-service-1">
									<div class="box-icon">
										<i class="far fa-hand-pointer"></i>
									</div><!-- .box-icon end -->
									<div class="box-content">
										<h4><a href="javascript:;">Order By Touch</a></h4>
										<p>
											Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod tempor inc ididunt dolore.
										</p>
									</div><!-- .box-content end -->
								</div><!-- .box-info box-service-1 end -->
							</div><!-- .col-md-4 end -->
							<div class="col-md-4">
								<div class="box-info box-service-1 mt-md-50">
									<div class="box-icon">
										<i class="fas fa-city"></i>
									</div><!-- .box-icon end -->
									<div class="box-content">
										<h4><a href="javascript:;">Customize in ITGeeks</a></h4>
										<p>
											Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod tempor inc ididunt dolore.
										</p>
									</div><!-- .box-content end -->
								</div><!-- .box-info box-service-1 end -->
							</div><!-- .col-md-4 end -->
							<div class="col-md-4">
								<div class="box-info box-service-1 mt-md-50">
									<div class="box-icon">
										<i class="fas fa-tasks"></i>
									</div><!-- .box-icon end -->
									<div class="box-content">
										<h4><a href="javascript:;">Get Your Order</a></h4>
										<p>
											Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod tempor inc ididunt dolore.
										</p>
									</div><!-- .box-content end -->
								</div><!-- .box-info box-service-1 end -->
							</div><!-- .col-md-4 end -->
							<div class="col-md-12">
								<a class="btn colorful medium hover-dark mt-50 center-horizontal" href="#">More Services</a>
							</div><!-- .col-md-12 end -->
						</div><!-- .row end -->
					</div><!-- .container end -->
				</div><!-- .section-content end -->
			</div><!-- .section-flat end -->
			<!-- === About Us =========== -->
			<div id="about-us" class="section-flat" data-scroll-index="1">
				<div class="section-content">
					<div class="container">
						<div class="row">
							<div class="col-md-6 pt-60 pt-md-0">
								<div class="section-title">
									<h5>All About Us</h5>
									<h2>Digital Innovative Digital Marketing Agency</h2>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod tempor ididunt labore east dolore magna you aliqua. Ulter enim ad minim veniam to quis nostrud ction ullamco laboris nisi.
									</p>
									<a class="btn-rm" href="javascript:;">Read More..<i class="fas fa-long-arrow-alt-up"></i></a>
								</div><!-- .section-title end -->
							</div><!-- .col-md-6 end -->
							<div class="col-md-6 mt-md-60">
								<div class="img-preview img-featured">
									<img class="img-1" src="images/files/about-us/img-5.jpg" alt="">
									<img class="img-2" src="images/files/about-us/img-2.jpg" alt="">
								</div><!-- .img-preview end -->
							</div><!-- .col-md-6 end -->
						</div><!-- .row end -->
					</div><!-- .container end -->
				</div><!-- .section-content end -->
			</div><!-- .section-flat end -->
			<!-- === Watch Video =========== -->
			<div id="watch-video" class="section-parallax" data-scroll-index="2">
				<img src="images/files/parallax-bg/img-2.jpg" alt="">
				<div class="overlay-colored color-bg-dark opacity-80"></div><!-- .overlay-colored end -->
				<div class="section-content">
					<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2">
								<div class="section-title text-center text-white">
									<h5>Just Beginning in a Perfect Entity</h5>
									<h2>Find Solutions for Your Business</h2>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod tempor inc ididunt labore east
										dolore magna you
									</p>
								</div><!-- .section-title end -->
							</div><!-- .col-md-8 end -->
							<div class="col-md-12 text-center">
								<a href="#" class="btn-video lightbox-iframe"><i class="fa fa-play"></i></a>
							</div><!-- .col-md-12 end -->
						</div><!-- .row end -->
					</div><!-- .container end -->
				</div><!-- .section-content end -->
			</div><!-- .section-parallax end -->
			<!-- === Our Services =========== -->
			<div id="our-services" class="section-flat" data-scroll-index="2">
				<div class="section-content">
					<div class="container">
						<div class="row">
							<div class="col-md-12">
								<div class="slider-services-2">
									<ul class="slick-slider">
										<li>
											<div class="box-info box-service-2">
												<div class="box-content">
													<h6>Most Prominent Side</h6>
													<h4><a href="javascript:;">Web Design</a></h4>
													<p>
														Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod te inc ididunt labore east dolore
														magna you aliqua.
													</p>
													<a class="btn-rm" href="javascript:;">Read More..<i class="fas fa-long-arrow-alt-up"></i></a>
												</div><!-- .box-content end -->
											</div><!-- .box-info box-service-2 end -->
										</li>
										<li>
											<div class="box-info box-service-2">
												<div class="box-content">
													<h6>Most Prominent Side</h6>
													<h4><a href="javascript:;">Graphic Design</a></h4>
													<p>
														Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod te inc ididunt labore east
														dolore
														magna you aliqua.
													</p>
													<a class="btn-rm" href="javascript:;">Read More..<i class="fas fa-long-arrow-alt-up"></i></a>
												</div><!-- .box-content end -->
											</div><!-- .box-info box-service-2 end -->
										</li>
										<li>
											<div class="box-info box-service-2">
												<div class="box-content">
													<h6>Most Prominent Side</h6>
													<h4><a href="javascript:;">Web Development</a></h4>
													<p>
														Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod te inc ididunt labore east
														dolore
														magna you aliqua.
													</p>
													<a class="btn-rm" href="javascript:;">Read More..<i class="fas fa-long-arrow-alt-up"></i></a>
												</div><!-- .box-content end -->
											</div><!-- .box-info box-service-2 end -->
										</li>
										<li>
											<div class="box-info box-service-2">
												<div class="box-content">
													<h6>Most Prominent Side</h6>
													<h4><a href="javascript:;">Mobile Applications</a></h4>
													<p>
														Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod te inc ididunt labore east
														dolore
														magna you aliqua.
													</p>
													<a class="btn-rm" href="javascript:;">Read More..<i class="fas fa-long-arrow-alt-up"></i></a>
												</div><!-- .box-content end -->
											</div><!-- .box-info box-service-2 end -->
										</li>
									</ul><!-- .slick-slider end -->
								</div><!-- .slider-services-2 end -->
								<div class="slider-clients">
									<ul class="slick-slider">
										<li>
											<div class="client-single">
												<a href="javascript:;"><img src="images/files/sliders/our-clients/img-1.png" alt=""></a>
											</div>
										</li>
										<li>
											<div class="client-single">
												<a href="javascript:;"><img src="images/files/sliders/our-clients/img-2.png" alt=""></a>
											</div>
										</li>
										<li>
											<div class="client-single">
												<a href="javascript:;"><img src="images/files/sliders/our-clients/img-3.png" alt=""></a>
											</div>
										</li>
										<li>
											<div class="client-single">
												<a href="javascript:;"><img src="images/files/sliders/our-clients/img-4.png" alt=""></a>
											</div>
										</li>
										<li>
											<div class="client-single">
												<a href="javascript:;"><img src="images/files/sliders/our-clients/img-5.png" alt=""></a>
											</div>
										</li>
										<li>
											<div class="client-single">
												<a href="javascript:;"><img src="images/files/sliders/our-clients/img-6.png" alt=""></a>
											</div>
										</li>
										<li>
											<div class="client-single">
												<a href="javascript:;"><img src="images/files/sliders/our-clients/img-2.png" alt=""></a>
											</div>
										</li>
									</ul><!-- .slick-slider end -->
								</div><!-- .slider-clients end -->
								<div class="slider-testimonials">
									<ul class="slick-slider">
										<li>
											<div class="testimonial-single-1">
												<div class="ts-person">
													<div class="ts-img">
														<img src="images/files/sliders/clients-testimonials/img-1.jpg" alt="">
													</div><!-- .ts-img end -->
													<div class="ts-name">
														<h6>Abdul Rahman Elwan</h6>
														<span>Customer</span>
													</div><!-- .ts-name end -->
												</div><!-- .ts-person end -->
												<div class="ts-content">
													<h4>“Very good Services”</h4>
													<p>
														Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod tempor inc ididunt labore east dolore magna you
														aliqua. Ulter enim ad minim veniam to quis nostrud exercita tion ullamco laboris nisi.Lorem ipsum dolor labore east
														dolore magna you aliqua.
													</p>
												</div><!-- .ts-content end -->
											</div><!-- .testimonial-single-1 -->
										</li>
										<li>
											<div class="testimonial-single-1">
												<div class="ts-person">
													<div class="ts-img">
														<img src="images/files/sliders/clients-testimonials/img-1.jpg" alt="">
													</div><!-- .ts-img end -->
													<div class="ts-name">
														<h6>Abdul Rahman Elwan</h6>
														<span>Customer</span>
													</div><!-- .ts-name end -->
												</div><!-- .ts-person end -->
												<div class="ts-content">
													<h4>“Very good Services”</h4>
													<p>
														Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod tempor inc ididunt labore east
														dolore magna you
														aliqua. Ulter enim ad minim veniam to quis nostrud exercita tion ullamco laboris nisi.Lorem ipsum dolor
														labore east
														dolore magna you aliqua.
													</p>
												</div><!-- .ts-content end -->
											</div><!-- .testimonial-single-1 -->
										</li>
										<li>
											<div class="testimonial-single-1">
												<div class="ts-person">
													<div class="ts-img">
														<img src="images/files/sliders/clients-testimonials/img-1.jpg" alt="">
													</div><!-- .ts-img end -->
													<div class="ts-name">
														<h6>Abdul Rahman Elwan</h6>
														<span>Customer</span>
													</div><!-- .ts-name end -->
												</div><!-- .ts-person end -->
												<div class="ts-content">
													<h4>“Very good Services”</h4>
													<p>
														Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod tempor inc ididunt labore east
														dolore magna you
														aliqua. Ulter enim ad minim veniam to quis nostrud exercita tion ullamco laboris nisi.Lorem ipsum dolor
														labore east
														dolore magna you aliqua.
													</p>
												</div><!-- .ts-content end -->
											</div><!-- .testimonial-single-1 -->
										</li>
										<li>
											<div class="testimonial-single-1">
												<div class="ts-person">
													<div class="ts-img">
														<img src="images/files/sliders/clients-testimonials/img-1.jpg" alt="">
													</div><!-- .ts-img end -->
													<div class="ts-name">
														<h6>Abdul Rahman Elwan</h6>
														<span>Customer</span>
													</div><!-- .ts-name end -->
												</div><!-- .ts-person end -->
												<div class="ts-content">
													<h4>“Very good Services”</h4>
													<p>
														Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod tempor inc ididunt labore east
														dolore magna you
														aliqua. Ulter enim ad minim veniam to quis nostrud exercita tion ullamco laboris nisi.Lorem ipsum dolor
														labore east
														dolore magna you aliqua.
													</p>
												</div><!-- .ts-content end -->
											</div><!-- .testimonial-single-1 -->
										</li>
									</ul><!-- .slick-slider end -->
									<div class="slick-arrows"></div><!-- .slick-arrows end -->
								</div><!-- .slider-testimonials end -->
							</div><!-- .col-md-12 end -->
						</div><!-- .row end -->
					</div><!-- .container end -->
				</div><!-- .section-content end -->
			</div><!-- .section-flat end -->
			<!-- === Our Projects =========== -->
			<div id="our-projects" class="section-flat" data-scroll-index="3">
				<div class="section-content">
					<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2">
								<div class="section-title text-center">
									<h5>Our Projects</h5>
									<h2>Latest Projects</h2>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod tempor inc ididunt labore east
										dolore magna you
									</p>
								</div><!-- .section-title end -->
							</div><!-- .col-md-8 end -->
						</div><!-- .row end -->
					</div><!-- .container end -->
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-12">
								<div class="slider-projects">
									<ul class="slick-slider">
										<li>
											<div class="box-preview box-project">
												<div class="box-img img-bg">
													<a href="javascript:;"><img src="images/files/our-projects/img-1.jpg" alt=""></a>
													<div class="overlay">
														<div class="overlay-inner">
															<a href="#" class="icon-fullscreen lightbox-iframe"><i
																	class="fas fa-compress"></i></a>
															<h4><a href="javascript:;">Website Design</a></h4>
															<ul class="project-categories">
																<li><a href="javascript:;">Web</a>,</li>
																<li><a href="javascript:;">Corporate</a></li>
															</ul><!-- .project-categories end -->
														</div><!-- .overlay-inner end -->
													</div><!-- .overlay end -->
												</div><!-- .box-img end -->
											</div><!-- .box-preview end -->
										</li>
										<li>
											<div class="box-preview box-project">
												<div class="box-img img-bg">
													<a href="javascript:;"><img src="images/files/our-projects/img-3.jpg" alt=""></a>
													<div class="overlay">
														<div class="overlay-inner">
															<a href="#" class="icon-fullscreen lightbox-iframe"><i
																	class="fas fa-compress"></i></a>
															<h4><a href="javascript:;">Branding Design</a></h4>
															<ul class="project-categories">
																<li><a href="javascript:;">Branding</a>,</li>
																<li><a href="javascript:;">Design</a></li>
															</ul><!-- .project-categories end -->
														</div><!-- .overlay-inner end -->
													</div><!-- .overlay end -->
												</div><!-- .box-img end -->
											</div><!-- .box-preview end -->
										</li>
										<li>
											<div class="box-preview box-project">
												<div class="box-img img-bg">
													<a href="javascript:;"><img src="images/files/our-projects/img-5.jpg" alt=""></a>
													<div class="overlay">
														<div class="overlay-inner">
															<a href="#" class="icon-fullscreen lightbox-iframe"><i
																	class="fas fa-compress"></i></a>
															<h4><a href="javascript:;">Website Analytics</a></h4>
															<ul class="project-categories">
																<li><a href="javascript:;">SEO</a>,</li>
																<li><a href="javascript:;">Analytics</a></li>
															</ul><!-- .project-categories end -->
														</div><!-- .overlay-inner end -->
													</div><!-- .overlay end -->
												</div><!-- .box-img end -->
											</div><!-- .box-preview end -->
										</li>
										<li>
											<div class="box-preview box-project">
												<div class="box-img img-bg">
													<a href="javascript:;"><img src="images/files/our-projects/img-6.jpg" alt=""></a>
													<div class="overlay">
														<div class="overlay-inner">
															<a href="#" class="icon-fullscreen lightbox-iframe"><i
																	class="fas fa-compress"></i></a>
															<h4><a href="javascript:;">Web Development</a></h4>
															<ul class="project-categories">
																<li><a href="javascript:;">Development</a>,</li>
																<li><a href="javascript:;">WordPress</a></li>
															</ul><!-- .project-categories end -->
														</div><!-- .overlay-inner end -->
													</div><!-- .overlay end -->
												</div><!-- .box-img end -->
											</div><!-- .box-preview end -->
										</li>
										<li>
											<div class="box-preview box-project">
												<div class="box-img img-bg">
													<a href="javascript:;"><img src="images/files/our-projects/img-4.png" alt=""></a>
													<div class="overlay">
														<div class="overlay-inner">
															<a href="#" class="icon-fullscreen lightbox-iframe"><i
																	class="fas fa-compress"></i></a>
															<h4><a href="javascript:;">Mobile Applications</a></h4>
															<ul class="project-categories">
																<li><a href="javascript:;">Android</a>,</li>
																<li><a href="javascript:;">IOS</a></li>
															</ul><!-- .project-categories end -->
														</div><!-- .overlay-inner end -->
													</div><!-- .overlay end -->
												</div><!-- .box-img end -->
											</div><!-- .box-preview end -->
										</li>
									</ul><!-- .slick-slider end -->
								</div><!-- .slider-projects end -->
								<a class="btn colorful medium hover-dark mt-50 center-horizontal" href="#">View All Projects</a>
							</div><!-- .col-md-12 end -->
						</div><!-- .row end -->
					</div><!-- .container-fluid end -->
				</div><!-- .section-content end -->
			</div><!-- .section-flat end -->
			<!-- === Pricing Plans =========== -->
			<div id="pricing-plans" class="section-flat" data-scroll-index="4">
				<div class="section-content">
					<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2">
								<div class="section-title text-center">
									<h5>Pricing Tables</h5>
									<h2>Our Pricing Plans</h2>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod tempor inc ididunt
										labore east
										dolore magna you
									</p>
								</div><!-- .section-title end -->
							</div><!-- .col-md-8 end -->
							<div class="col-md-12">
								<div class="pricing-table">
									<div class="row">
										<div class="col-md-4 col-sm-6">
											<div class="pt-column">
												<div class="pt-column-header">
													<div class="price">
														<h1>$0</h1>
													</div><!-- .price end -->
													<div class="title">
														<span>Free</span>
													</div><!-- .title end -->
												</div>
												<ul class="pt-column-content">
													<li><i class="far fa-check-circle"></i>Advanced Managements</li>
													<li><i class="far fa-check-circle"></i>Processor Intel Xeon</li>
													<li><i class="far fa-check-circle"></i>Unlimited Data Transfer</li>
												</ul><!-- .pt-column-content end -->
												<div class="pt-column-footer">
													<a class="btn colorful large hover-dark" href="#">Free</a>
												</div><!-- .pt-column-footer end -->
											</div><!-- .pt-column end -->
										</div><!-- .col-md-4 end -->
										<div class="col-md-4 col-sm-6 mt-md-50">
											<div class="pt-column featured">
												<div class="pt-column-header">
													<div class="price">
														<h1>$89</h1>
													</div><!-- .price end -->
													<div class="title">
														<span>Advanced</span>
													</div><!-- .title end -->
												</div>
												<ul class="pt-column-content">
													<li><i class="far fa-check-circle"></i>Advanced Managements</li>
													<li><i class="far fa-check-circle"></i>Processor Intel Xeon</li>
													<li><i class="far fa-check-circle"></i>Unlimited Data Transfer</li>
												</ul><!-- .pt-column-content end -->
												<div class="pt-column-footer">
													<a class="btn white large hover-dark" href="#">Buy Now</a>
												</div><!-- .pt-column-footer end -->
											</div><!-- .pt-column end -->
										</div><!-- .col-md-4 end -->
										<div class="col-md-4 col-sm-6 mt-md-50">
											<div class="pt-column text-white">
												<div class="pt-column-header">
													<div class="price">
														<h1>$9</h1>
													</div><!-- .price end -->
													<div class="title">
														<span>Month Only</span>
													</div><!-- .title end -->
												</div>
												<ul class="pt-column-content">
													<li><i class="far fa-check-circle"></i>Advanced Managements</li>
													<li><i class="far fa-check-circle"></i>Processor Intel Xeon</li>
													<li><i class="far fa-check-circle"></i>Unlimited Data Transfer</li>
												</ul><!-- .pt-column-content end -->
												<div class="pt-column-footer">
													<a class="btn colorful large hover-dark" href="#">Buy Now</a>
												</div><!-- .pt-column-footer end -->
											</div><!-- .pt-column end -->
										</div><!-- .col-md-4 end -->
									</div><!-- .row end -->
								</div><!-- .pricing-table end -->
							</div><!-- .col-md-12 end -->
						</div><!-- .row end -->
					</div><!-- .container end -->
				</div><!-- .section-content end -->
			</div><!-- .section-flat end -->
			<!-- === Our Blog =========== -->
			<div id="our-blog" class="section-flat" data-scroll-index="5">
				<div class="section-content">
					<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2">
								<div class="section-title text-center">
									<h5>Latest News</h5>
									<h2>Our Latest Blogs</h2>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod tempor inc ididunt labore east
										dolore magna you
									</p>
								</div><!-- .section-title end -->
							</div><!-- .col-md-8 end -->
							<div class="col-md-12">
								<div class="slider-blog-posts">
									<ul class="slick-slider">
										<li>
											<div class="box-preview box-blog-post">
												<div class="box-img img-bg">
													<a href="javascript:;"><img src="images/files/our-blog/img-1.jpg" alt=""></a>
													<div class="overlay">
														<div class="overlay-inner">
														</div><!-- .overlay-inner end -->
													</div><!-- .overlay end -->
												</div><!-- .box-img end -->
												<div class="box-content">
													<ul class="list-meta">
														<li><i class="far fa-clock"></i>22 April 2019</li>
														<li><i class="far fa-comment"></i>3 Comments</li>
													</ul><!-- .list-meta end -->
													<h4><a href="javascript:;">A brand for a company is like a reputation for a person</a></h4>
													<p>
														Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod te inc ididunt
														labore east
														dolore magna you aliqua adipisicing elity sed do eiusmod.
													</p>
													<a class="btn-rm" href="javascript:;">Read More..<i class="fas fa-long-arrow-alt-up"></i></a>
												</div><!-- .box-content end -->
											</div><!-- .box-preview end -->
										</li>
										<li>
											<div class="box-preview box-blog-post">
												<div class="box-img img-bg">
													<a href="javascript:;"><img src="images/files/our-blog/img-2.jpg" alt=""></a>
													<div class="overlay">
														<div class="overlay-inner">
														</div><!-- .overlay-inner end -->
													</div><!-- .overlay end -->
												</div><!-- .box-img end -->
												<div class="box-content">
													<ul class="list-meta">
														<li><i class="far fa-clock"></i>22 April 2019</li>
														<li><i class="far fa-comment"></i>3 Comments</li>
													</ul><!-- .list-meta end -->
													<h4><a href="javascript:;">We design platform for all global customers</a></h4>
													<p>
														Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod te inc ididunt
														labore east
														dolore magna you aliqua adipisicing elity sed do eiusmod.
													</p>
													<a class="btn-rm" href="javascript:;">Read More..<i class="fas fa-long-arrow-alt-up"></i></a>
												</div><!-- .box-content end -->
											</div><!-- .box-preview end -->
										</li>
										<li>
											<div class="box-preview box-blog-post">
												<div class="box-img img-bg">
													<a href="javascript:;"><img src="images/files/our-blog/img-3.jpg" alt=""></a>
													<div class="overlay">
														<div class="overlay-inner">
														</div><!-- .overlay-inner end -->
													</div><!-- .overlay end -->
												</div><!-- .box-img end -->
												<div class="box-content">
													<ul class="list-meta">
														<li><i class="far fa-clock"></i>22 April 2019</li>
														<li><i class="far fa-comment"></i>3 Comments</li>
													</ul><!-- .list-meta end -->
													<h4><a href="javascript:;">Duo ne veniam labore liberavisse</a></h4>
													<p>
														Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod te inc ididunt
														labore east
														dolore magna you aliqua adipisicing elity sed do eiusmod.
													</p>
													<a class="btn-rm" href="javascript:;">Read More..<i class="fas fa-long-arrow-alt-up"></i></a>
												</div><!-- .box-content end -->
											</div><!-- .box-preview end -->
										</li>
										<li>
											<div class="box-preview box-blog-post">
												<div class="box-img img-bg">
													<a href="javascript:;"><img src="images/files/our-blog/img-4.jpg" alt=""></a>
													<div class="overlay">
														<div class="overlay-inner">
														</div><!-- .overlay-inner end -->
													</div><!-- .overlay end -->
												</div><!-- .box-img end -->
												<div class="box-content">
													<ul class="list-meta">
														<li><i class="far fa-clock"></i>22 April 2019</li>
														<li><i class="far fa-comment"></i>3 Comments</li>
													</ul><!-- .list-meta end -->
													<h4><a href="javascript:;">Modo laoreet qualisque eam te</a></h4>
													<p>
														Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod te inc ididunt
														labore east
														dolore magna you aliqua adipisicing elity sed do eiusmod.
													</p>
													<a class="btn-rm" href="javascript:;">Read More..<i class="fas fa-long-arrow-alt-up"></i></a>
												</div><!-- .box-content end -->
											</div><!-- .box-preview end -->
										</li>
										<li>
											<div class="box-preview box-blog-post">
												<div class="box-img img-bg">
													<a href="javascript:;"><img src="images/files/our-blog/img-5.jpg" alt=""></a>
													<div class="overlay">
														<div class="overlay-inner">
														</div><!-- .overlay-inner end -->
													</div><!-- .overlay end -->
												</div><!-- .box-img end -->
												<div class="box-content">
													<ul class="list-meta">
														<li><i class="far fa-clock"></i>22 April 2019</li>
														<li><i class="far fa-comment"></i>3 Comments</li>
													</ul><!-- .list-meta end -->
													<h4><a href="javascript:;">Qui incorrupte persequeris theophrastus id</a></h4>
													<p>
														Lorem ipsum dolor sit amet consectetur adipisicing elity sed do eiusmod te inc ididunt
														labore east
														dolore magna you aliqua adipisicing elity sed do eiusmod.
													</p>
													<a class="btn-rm" href="javascript:;">Read More..<i class="fas fa-long-arrow-alt-up"></i></a>
												</div><!-- .box-content end -->
											</div><!-- .box-preview end -->
										</li>
									</ul><!-- .slick-slider end -->
								</div><!-- .slider-blog-posts end -->
							</div><!-- .col-md-12 end -->
						</div><!-- .row end -->
					</div><!-- .container end -->
				</div><!-- .section-content end -->
			</div><!-- .section-flat end -->
			<!-- === Newsletter Subscribe =========== -->
			<div id="newsletter-subscribe" class="section-parallax" data-scroll-index="6">
				<!-- <img src="images/files/parallax-bg/img-2.jpg" alt=""> -->
				<div class="overlay-colored color-bg-gradient-1 opacity-50"></div><!-- .overlay-colored end -->
				<div class="section-content">
					<div class="container">
						<div class="row">
							<div class="col-md-8 col-md-offset-2">
								<div class="section-title text-center text-white">
									<h2>Subscribe a Newsletter</h2>
									<p>
										Subscribe newsletter to get update about offer, new technology
									</p>
								</div><!-- .section-title end -->
							</div><!-- .col-md-8 end -->
							<div class="col-md-6 col-md-offset-3">
								<form id="form-newsletter-register" class="form-inline">
									<div class="form-group">
										<div class="box-field">
											<input type="text" name="email" class="form-control" placeholder="Enter Your Email Address">
											<button type="submit" class="form-control icon"><i class="fas fa-long-arrow-alt-up"></i></button>
										</div><!-- .box-field end -->
									</div><!-- .form-group end -->
								</form><!-- #form-newsletter-register end -->
							</div><!-- .col-md-6 end -->
						</div><!-- .row end -->
					</div><!-- .container end -->
				</div><!-- .section-content end -->
			</div><!-- .section-parallax end -->
		</div><!-- #content-wrap -->
	</section><!-- #content end -->
	<!-- Footer
	============================================= -->
	<footer id="footer">
		<div id="footer-bar-1" class="footer-bar text-white">
			<div class="footer-bar-wrap">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<div class="fb-row">
								<div class="row">
									<div class="col-md-3">
										<img class="mb-30" src="images/files/logo-header.png" alt="">
										<ul class="list-contact-info">
											<li>
												<i class="fas fa-envelope"></i>
												<div class="info-content">
													<span>[email protected]</span>
												</div><!-- .info-content end -->
											</li>
											<li>
												<i class="fas fa-phone"></i>
												<div class="info-content">
													<span>55046994(965)+</span>
												</div><!-- .info-content end -->
											</li>
											<li>
												<i class="fas fa-map-marker-alt"></i>
												<div class="info-content">
													<span>Al Noor Tower, Ibn Sina Mansoura</span>
												</div><!-- .info-content end -->
											</li>
										</ul><!-- .list-contact-info end -->
									</div><!-- .col-md-3 end -->
									<div class="col-md-3 mt-md-50">
										<h4>
											Useful Links
										</h4>
										<ul class="list-links">
											<li><a href="javascript:;">What We Do</a></li>
											<li><a href="javascript:;">Our Projects</a></li>
											<li><a href="javascript:;">FAQ</a></li>
											<li><a href="javascript:;">News & Articles</a></li>
											<li><a href="javascript:;">Get In Touch</a></li>
										</ul><!-- .list-links -->
									</div><!-- .col-md-3 end -->
									<div class="col-md-3 mt-md-50">
										<h4>
											Support
										</h4>
										<ul class="list-links">
											<li><a href="javascript:;">Contact Us</a></li>
											<li><a href="javascript:;">Submit a Ticket</a></li>
											<li><a href="javascript:;">Professional Services</a></li>
											<li><a href="javascript:;">Support System</a></li>
											<li><a href="javascript:;">Refund Policy</a></li>
										</ul><!-- .list-links -->
									</div><!-- .col-md-3 end -->
									<div class="col-md-3 mt-md-50">
										<h4>
											Gallery
										</h4>
										<ul class="list-gallery-thumbs">
											<li><a href="javascript:;"><img src="images/files/gallery-thumbs/img-1.jpg" alt=""></a></li>
											<li><a href="javascript:;"><img src="images/files/gallery-thumbs/img-2.jpg" alt=""></a></li>
											<li><a href="javascript:;"><img src="images/files/gallery-thumbs/img-3.jpg" alt=""></a></li>
											<li><a href="javascript:;"><img src="images/files/gallery-thumbs/img-4.jpg" alt=""></a></li>
											<li><a href="javascript:;"><img src="images/files/gallery-thumbs/img-5.jpg" alt=""></a></li>
											<li><a href="javascript:;"><img src="images/files/gallery-thumbs/img-6.jpg" alt=""></a></li>
										</ul><!-- .list-gallery-thumbs -->
									</div><!-- .col-md-3 end -->
								</div><!-- .row end -->
							</div><!-- .fb-row end -->
						</div><!-- .col-md-12 end -->
					</div><!-- .row end -->
				</div><!-- .container end -->
			</div><!-- .footer-bar-wrap -->
		</div><!-- #footer-bar-1 end -->
		<div id="footer-bar-2" class="footer-bar text-white">
			<div class="footer-bar-wrap">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<div class="fb-row">
								<div class="copyrights-message">
									<span>Copyright &copy; 2020.Company name All rights reserved.</span>
								</div>
								<ul class="social-icons x4 grey hover-white icon-only">
									<li><a class="si-youtube" href="javascript:;"><i class="fa fa-youtube"></i><i
												class="fa fa-facebook"></i></a></li>
									<li><a class="si-twitter" href="javascript:;"><i class="fa fa-twitter"></i><i class="fa fa-twitter"></i></a>
									</li>
									<li><a class="si-facebook" href="javascript:;"><i class="fa fa-facebook"></i><i
												class="fa fa-twitter"></i></a></li>
									<li><a class="si-instagramorange" href="javascript:;"><i class="fa fa-instagram"></i><i
												class="fa fa-instagram"></i></a></li>
								</ul><!-- .social-icons end -->								
							</div><!-- .fb-row end -->
						</div><!-- .col-md-12 end -->
					</div><!-- .row end -->
				</div><!-- .container end -->
			</div><!-- .footer-bar-wrap -->
		</div><!-- #footer-bar-2 end -->
	</footer><!-- #footer end -->
	<div class="side-panel-menu">
		<div class="mobile-side-panel-menu">
			<ul id="menu-mobile" class="menu-mobile">
			</ul><!-- .mobile-menu-categories end -->
		</div><!-- .mobile-side-panel-menu end -->
	</div><!-- .side-panel-menu end -->
</div><!-- #full-container end -->
<a class="scroll-top-icon scroll-top" href="javascript:;"><i class="fa fa-angle-up"></i></a>
<!-- External JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/jRespond.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/superfish.js"></script>
<script src="scss/slick/slick.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/scrollIt.min.js"></script>
<script src='js/functions.js'></script>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights">
	Collect from <a href="http://www.51qianduan.com/"  title="网站模板">模板之家</a>
	<a href="https://www.51qianduan.com/"  title="查字典">查字典</a>
</div>
</body>
</html>



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


热门标签: 扁平化 养生会馆 植物花草 宽屏全屏 游戏 黑色 bootstrap自适应 IT网络科技 蓝色 普通自适应 欧美风 旅游 红色 中国风 金融理财保险 绿色 韩系 高校 灰色 日系 简洁简约 工业产品 黄色 炫酷 家居装饰 紫色 卡通动画 橙色 招聘猎头 精美 实用通用 艺术创意 粉色 政府 婚庆 大气 白色 新闻资讯 婚纱摄影 棕色 清新 教育培训 彩色 绘画 设计 餐饮美食 其他风格 外贸 服装服饰 建筑 化工企业 医药器械 美容美发 动漫 电影视频 包装印刷 机械 汽车4S店 农业产品 咨询管理 酒店 健身房 化妆品 食品 花卉 房地产 协会组织 快递货运 数码电器 搬家 珠宝首饰 酒业 文化传媒 装修装饰 医院医疗 律师 酒吧音乐 图书 动物宠物 航空航天 股票 能源 公益 饮品 生活用品 家政保洁 体育 房屋租赁 商务 电力公司 打车租车 环保 宗教寺庙 工具文具 企业行业 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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