蓝色简洁风格的创意设计公司企业网站源码下载



7 26 9



模板描述:蓝色简洁风格 创意设计公司 企业网站,蓝色简洁风格的创意设计公司企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/core.css">
<link rel="stylesheet" href="css/shortcode/shortcodes.css">
<link rel="stylesheet" href="css/nivo-slider.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/material-design-iconic-font.min.css">
<link rel="stylesheet" href="css/venobox.css">
<link rel="stylesheet" href="css/plugins/owl.carousel.css">
<link rel="stylesheet" href="css/plugins/meanmenu.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/style-customizer.css">
<link href="#" data-style="styles" rel="stylesheet">

2. 引入JS

<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/venobox.min.js"></script>
<script src="js/style-customizer.js"></script>
<script src="js/ajax-mail.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/headroom.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.meanmenu.js"></script>
<script src="js/main.js"></script>

3. HTML代码

    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->  
    <!-- Body main wrapper start -->
    <div class="wrapper gray-bg">
        <!-- Start of header area -->
        <header class="header-area-2 header-wrapper headroom">
			<!-- Header Top Area Start -->
			<div class="header-top-area ptb-25">
				<div class="container">
					<div class="row">
						<!-- Logo Area -->
						<div class="col-md-2 col-sm-12">
							<div class="logo-area">
								<a href="index.html"><img src="images/logo/1.png" alt="" /></a>
							</div>
						</div>
						<!-- Logo Area -->
						<!-- Menu Area -->
						<div class="col-md-8 col-sm-12 hidden-xs">
							<div class="main-menu">
								<nav>
									<ul id="nav">
										<li><a href="index.html">Home</a></li>
										<li><a href="about-us.html">About</a></li>
										<li><a href="contact-us.html">Contact Us</a></li>
									</ul>
								</nav>
							</div>
						</div>
						<!-- Menu Area -->
						<!-- MOBILE-MENU-AREA START --> 
						<div class="mobile-menu-area">
							<div class="container">
								<div class="row">
									<div class="col-md-12 col-sm-12">
										<div class="mobile-area">
											<div class="mobile-menu">
												<nav id="mobile-nav">
													<ul>
														<li><a href="index.html">Home</a></li>
														<li><a href="about-us.html">About</a></li>
														<li><a href="contact-us.html">Contact Us</a></li>
													</ul>
												</nav>
											</div>	
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- MOBILE-MENU-AREA END  -->
						<!-- Social Icon -->
						<div class="col-md-2 col-sm-12">
							<div class="social-rotate f-right mt-10">
								<ul>
									<li><a href="#"><i class="zmdi zmdi-facebook"></i></a></li>
									<li><a href="#"><i class="zmdi zmdi-twitter"></i></a></li>
									<li><a href="#"><i class="zmdi zmdi-dribbble"></i></a></li>
									<li><a href="#"><i class="zmdi zmdi-pinterest"></i></a></li>
								</ul>
							</div>
						</div>
						<!-- Social Icon -->
					</div>
				</div>
			</div>
			<!-- Header Top Area End -->
        </header>
        <!-- End of header area -->
        <!-- Start of slider area -->
        <div class="slider-area slider-2">
			<div id="slider" class="nivoSlider">
				<img style ="display:none" src="images/slider/home-2/1.jpg"  data-thumb="images/slider/1.jpg"  alt="" title="#htmlcaption1">      
				<img style ="display:none" src="images/slider/home-2/2.jpg"  data-thumb="images/slider/2.jpg"  alt="" title="#htmlcaption2">
			</div>
			<div id="htmlcaption1" class="pos-slideshow-caption nivo-html-caption nivo-caption">
				<div class="timing-bar"></div>
				<div class="pos-slideshow-info pos-slideshow-info1">
					<div class="container">
						<div class="pos_description hidden-xs">
							<div class="title2"><span class="txt">We are creative xoss</span></div>
							<div class="title1"><span class="txt">Complete your site with us</span></div>
							<div class="pos-slideshow-readmore">
								<a href="#" title="Explore now">EXPLORE NOW</a>  
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="htmlcaption2" class="pos-slideshow-caption nivo-html-caption nivo-caption">
				<div class="timing-bar"></div>
				<div class="pos-slideshow-info pos-slideshow-info2 mt-100 res-mt">
					<div class="container">
						<div class="pos_description hidden-xs">
							<div class="title2"><span class="txt">we are fix solution</span></div>
							<div class="title1"><span class="txt">Different we are</span></div>
							<div class="pos-slideshow-readmore">
								<a href="#" title="Explore now">EXPLORE NOW</a>   
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
        <!-- End of slider area -->
		<!-- Our Specialty Area Start -->
		<section class="specialty-area">
			<div class="container-fluid">
				<!-- Specialty Single -->
				<div class="specialty-single two">
					<div class="icon-titel">
						<i class="fa fa-heart" aria-hidden="true"></i>
						<h6>Great Support</h6>
					</div>
					<div class="spe-discribe">
						<p>Lorem ipsum dolor sit amet, consectetur ish  dipisicing elit, sed do eiusmod tempor lorem incididunt ut labore et .</p>
					</div>
				</div>
				<!-- Specialty Single -->
				<!-- Specialty Single -->
				<div class="specialty-single two">
					<div class="icon-titel">
						<i class="fa fa-anchor" aria-hidden="true"></i>
						<h6>pixel perfect</h6>
					</div>
					<div class="spe-discribe">
						<p>Lorem ipsum dolor sit amet, consectetur ish  dipisicing elit, sed do eiusmod tempor lorem incididunt ut labore et .</p>
					</div>
				</div>
				<!-- Specialty Single -->
				<!-- Specialty Single -->
				<div class="specialty-single two hidden-xs">
					<div class="icon-titel">
						<i class="fa fa-diamond" aria-hidden="true"></i>
						<h6>creative design</h6>
					</div>
					<div class="spe-discribe">
						<p>Lorem ipsum dolor sit amet, consectetur ish  dipisicing elit, sed do eiusmod tempor lorem incididunt ut labore et .</p>
					</div>
				</div>
				<!-- Specialty Single -->
				<!-- Specialty Single -->
				<div class="specialty-single two hidden-xs">
					<div class="icon-titel">
						<i class="fa fa-desktop" aria-hidden="true"></i>
						<h6>retina ready</h6>
					</div>
					<div class="spe-discribe">
						<p>Lorem ipsum dolor sit amet, consectetur ish  dipisicing elit, sed do eiusmod tempor lorem incididunt ut labore et .</p>
					</div>
				</div>
				<!-- Specialty Single -->
			</div>
		</section>
		<!-- Our Specialty Area End -->
		<!-- About Us Area Start -->
		<section class="aboutus-area ptb-100 two">
			<div class="container">
				<div class="row">
					<!-- About Content -->
					<div class="col-md-6 col-sm-6">
						<div class="about-content">
							<h1>ABOUT DRUBO</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.</p>
							<p>Pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
						</div>
						<!-- Social Icon -->
						<div class="social-rotate pt-15">
							<ul>
								<li><a href="#"><i class="zmdi zmdi-facebook"></i></a></li>
								<li><a href="#"><i class="zmdi zmdi-twitter"></i></a></li>
								<li><a href="#"><i class="zmdi zmdi-dribbble"></i></a></li>
								<li><a href="#"><i class="zmdi zmdi-pinterest"></i></a></li>
							</ul>
						</div>
						<!-- Social Icon -->
						<div class="read-more-btn mt-45">
							<a href="#">Read More</a>
						</div>
					</div>
					<!-- About Content -->
					<!-- About Left Image -->
					<div class="col-md-6 col-sm-6">
						<div class="abt-left-pic">
							<img src="images/other/about-1.png" alt="" />
						</div>
					</div>
					<!-- About Left Image -->
				</div>
			</div>
		</section>
		<!-- About Us Area Start -->
		<!-- Our Succesful Area Start -->
		<section class="successful-area bg-4 pt-115 pb-100 overlay">
			<div class="container-fluid">
				<!-- Successful Single -->
				<div class="successful-single">
					<div class="sucs-icon">
						<a href="#"><i class="zmdi zmdi-coffee"></i></a>
					</div>
					<div class="sucs-count text-uppercase text-white">
						<h3><span class="counter">200</span></h3>
						<h3>cups of coffee</h3>
					</div>
				</div>
				<!-- Successful Single -->
				<!-- Successful Single -->
				<div class="successful-single">
					<div class="sucs-icon">
						<a href="#"><i class="zmdi zmdi-male-female"></i></a>
					</div>
					<div class="sucs-count text-uppercase text-white">
						<h3><span class="counter">150</span></h3>
						<h3>happy client</h3>
					</div>
				</div>
				<!-- Successful Single -->
				<!-- Successful Single -->
				<div class="successful-single hidden-sm">
					<div class="sucs-icon">
						<a href="#"><i class="zmdi zmdi-check-all"></i></a>
					</div>
					<div class="sucs-count text-uppercase text-white">
						<h3><span class="counter">100</span></h3>
						<h3>successful  project</h3>
					</div>
				</div>
				<!-- Successful Single -->
				<!-- Successful Single -->
				<div class="successful-single">
					<div class="sucs-icon">
						<a href="#"><i class="zmdi zmdi-windows"></i></a>
					</div>
					<div class="sucs-count text-uppercase text-white">
						<h3><span class="counter">50</span></h3>
						<h3>win awards</h3>
					</div>
				</div>
				<!-- Successful Single -->
			</div>
		</section>
		<!-- Our Succesful Area End -->
		<!-- Our Service Area Start -->
		<section class="oursevice-area ptb-100">
			<div class="container">
				<!-- Section Titel -->
				<div class="row">
					<div class="col-md-12">
						<div class="section-title text-center">
							<h1>our services</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation ullamco laboris nisi.</p>
						</div>
					</div>
				</div>
				<!-- Section Titel -->
				<!-- Service Row Area Start -->
				<div class="row pt-70 pb-60 broder-bottom">
					<!-- Service Single -->
					<div class="col-md-4 col-sm-6">
						<div class="ourservice-single text-center">
							<div class="srvc-icon mb-40">
								<a href="#"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
							</div>
							<div class="srvc-content">
								<h6>graphic design</h6>
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standdummy text ever since the 1500s, </p>
							</div>
						</div>
					</div>
					<!-- Service Single -->
					<!-- Service Single -->
					<div class="col-md-4 col-sm-6 hidden-xs">
						<div class="ourservice-single text-center">
							<div class="srvc-icon mb-40">
								<a href="#"><i class="fa fa-mobile" aria-hidden="true"></i></a>
							</div>
							<div class="srvc-content">
								<h6>Mobile App design</h6>
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standdummy text ever since the 1500s, </p>
							</div>
						</div>
					</div>
					<!-- Service Single -->
					<!-- Service Single -->
					<div class="col-md-4 hidden-sm hidden-xs">
						<div class="ourservice-single text-center">
							<div class="srvc-icon mb-40">
								<a href="#"><i class="fa fa-camera" aria-hidden="true"></i></a>
							</div>
							<div class="srvc-content">
								<h6>photography</h6>
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standdummy text ever since the 1500s, </p>
							</div>
						</div>
					</div>
					<!-- Service Single -->
				</div>
				<!-- Service Row Area End -->
				<!-- Service Row Area Start -->
				<div class="row pt-70">
					<!-- Service Single -->
					<div class="col-md-4 col-sm-6">
						<div class="ourservice-single text-center">
							<div class="srvc-icon mb-40">
								<a href="#"><i class="fa fa-book" aria-hidden="true"></i></a>
							</div>
							<div class="srvc-content">
								<h6>Branding design</h6>
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standdummy text ever since the 1500s, </p>
							</div>
						</div>
					</div>
					<!-- Service Single -->
					<!-- Service Single -->
					<div class="col-md-4 col-sm-6 hidden-xs">
						<div class="ourservice-single text-center">
							<div class="srvc-icon mb-40">
								<a href="#"><i class="fa fa-desktop" aria-hidden="true"></i></a>
							</div>
							<div class="srvc-content">
								<h6>development</h6>
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standdummy text ever since the 1500s, </p>
							</div>
						</div>
					</div>
					<!-- Service Single -->
					<!-- Service Single --> 
					<div class="col-md-4 hidden-sm hidden-xs">
						<div class="ourservice-single text-center">
							<div class="srvc-icon mb-40">
								<a href="#"><i class="fa fa-laptop" aria-hidden="true"></i></a>
							</div>
							<div class="srvc-content">
								<h6>Web design</h6>
								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standdummy text ever since the 1500s, </p>
							</div>
						</div>
					</div>
					<!-- Service Single -->
				</div>
				<!-- Service Row Area End -->
			</div>
		</section>
		<!-- Our Service Area End -->
		<!-- Team Our Portfolio Start -->
		<section class="pt-100 pb-110 bg-5 overlay">
			<div class="container">
				<div class="row">
					<div class="team-our-portfolio text-uppercase text-center">
						<h4>if you want to work with xoss team see our portfolio</h4>
						<div class="teambutton-one">
							<a href="#">view portfolio</a>
						</div>
						<div class="teambutton-one">
							<a href="#">subscribe us</a>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- Team Our Portfolio End -->
		<!-- Our Latest Shot Area Start -->
		<section class="latestshot-area pt-100">
			<div class="container">
				<!-- Section Titel -->
				<div class="row">
					<div class="col-md-12">
						<div class="section-title text-center">
							<h1>our latest shot</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation ullamco laboris nisi.</p>
						</div>
					</div>
				</div>
				<!-- Section Titel -->
			</div>
			<!-- Latest Shot Main Area Start -->
			<div class="container-fluid">
				<div class="">
					<!-- Latest Shot/Portfolio Menu Tab -->
					<div class="latest-content">
						<ul class="text-center latestshot-menu mt-55 mb-60 bg-white">
							<li class="active" data-filter="*">All</li>
							<li class="filter" data-filter=".c1">Mobile App design</li>
							<li class="filter" data-filter=".c2">Graphic design</li>
							<li class="filter" data-filter=".c3">Web design</li>
							<li class="filter" data-filter=".c4">Branding design</li>
							<li class="filter" data-filter=".c5">Photography</li>
						</ul>
					</div>
					<!-- Latest Shot/Portfolio Menu Tab -->
					<div class="grid img-full latestshot-box">
						<div class="latestshot-content">
							<div class="grid-sizer grid-item c1">
								<!-- Latest Shot/Portfolio Single -->
								<div class="single-portfolio">
									<div class="image-effect">
										<div class="portfolio-image">
											<a href="#"><img src="images/portfolio-two/1.jpg" alt="" /></a>
											<div class="effect-titel text-uppercase text-center">
												<a href="#"><i class="zmdi zmdi-link"></i></a>
												<h2>product branding</h2>
												<p>Illustration</p>
											</div>
										</div>
									</div>
								</div>
								<!-- Latest Shot/Portfolio Single -->
								<!-- Latest Shot/Portfolio Single -->
								<div class="single-portfolio">
									<div class="image-effect">
										<div class="portfolio-image">
											<a href="#"><img src="images/portfolio-two/2.jpg" alt="" /></a>
											<div class="effect-titel text-uppercase text-center two">
												<a href="#"><i class="zmdi zmdi-link"></i></a>
												<h2>Branding design</h2>
												<p>Graphic design</p>
											</div>
										</div>
									</div>
								</div>
								<!-- Latest Shot/Portfolio Single -->
							</div>
							<div class="grid-item grid-item--width2 c2 c4">
								<!-- Latest Shot/Portfolio Single -->
								<div class="single-portfolio">
									<div class="image-effect">
										<div class="portfolio-image">
											<a href="#"><img src="images/portfolio-two/3.jpg" alt="" /></a>
											<div class="effect-titel text-uppercase text-center three">
												<a href="#"><i class="zmdi zmdi-link"></i></a>
												<h2>development</h2>
												<p>Web design</p>
											</div>
										</div>
									</div>
								</div>
								<!-- Latest Shot/Portfolio Single -->
								<!-- Latest Shot/Portfolio Single -->
								<div class="single-portfolio">
									<div class="image-effect">
										<div class="portfolio-image">
											<a href="#"><img src="images/portfolio-two/4.jpg" alt="" /></a>
											<div class="effect-titel text-uppercase text-center three">
												<a href="#"><i class="zmdi zmdi-link"></i></a>
												<h2>graphic design</h2>
												<p>Illustration</p>
											</div>
										</div>
									</div>
								</div>
								<!-- Latest Shot/Portfolio Single -->
							</div>
							<div class="grid-item c1 c3 c5">
								<!-- Latest Shot/Portfolio Single -->
								<div class="single-portfolio">
									<div class="image-effect">
										<div class="portfolio-image">
											<a href="#"><img src="images/portfolio-two/5.jpg" alt="" /></a>
											<div class="effect-titel text-uppercase text-center two">
												<a href="#"><i class="zmdi zmdi-link"></i></a>
												<h2>development</h2>
												<p>Illustration</p>
											</div>
										</div>
									</div>
								</div>
								<!-- Latest Shot/Portfolio Single -->
								<!-- Latest Shot/Portfolio Single -->
								<div class="single-portfolio">
									<div class="image-effect">
										<div class="portfolio-image">
											<a href="#"><img src="images/portfolio-two/6.jpg" alt="" /></a>
											<div class="effect-titel text-uppercase text-center">
												<a href="#"><i class="zmdi zmdi-link"></i></a>
												<h2>product branding</h2>
												<p>Web design</p>
											</div>
										</div>
									</div>
								</div>
								<!-- Latest Shot/Portfolio Single -->
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Latest Shot Main Area End -->
		</section>
		<!-- Our Latest Shot Area End -->
		<!-- Our Awesome Team Area Start  -->
		<section class="ourawsome-team-area pt-100">
			<div class="container">
				<!-- Section Titel -->
				<div class="row">
					<div class="col-md-12">
						<div class="section-title text-center">
							<h1>our awesome team</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation ullamco laboris nisi.</p>
						</div>
					</div>
				</div>
				<!-- Section Titel -->
				<!-- Team area Start -->
				<div class="row pt-55 pb-55">
					<!-- Team Single -->
					<div class="col-md-3 col-sm-6 res-pb-xs-30">
						<div class="team-single">
							<img src="images/team/1.jpg" alt="" />
							<div class="team-details text-center">
								<div class="team-adrs pt-120">
									<h5>KAM Mamun</h5>
									<p>Graphic designer</p>
								</div>								
								<div class="team-socaladrs mt-95">
									<ul>
										<li>Follow on:</li>
										<li><a href="#"><i class="zmdi zmdi-facebook"></i></a></li>
										<li><a href="#"><i class="zmdi zmdi-twitter"></i></a></li>
										<li><a href="#"><i class="zmdi zmdi-dribbble"></i></a></li>
										<li><a href="#"><i class="zmdi zmdi-pinterest"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<!-- Team Single -->
					<!-- Team Single -->
					<div class="col-md-3 col-sm-6">
						<div class="team-single">
							<img src="images/team/2.jpg" alt="" />
							<div class="team-details text-center">
								<div class="team-adrs pt-120">
									<h5>Sabila noor</h5>
									<p>Graphic designer</p>
								</div>								
								<div class="team-socaladrs mt-95">
									<ul>
										<li>Follow on:</li>
										<li><a href="#"><i class="zmdi zmdi-facebook"></i></a></li>
										<li><a href="#"><i class="zmdi zmdi-twitter"></i></a></li>
										<li><a href="#"><i class="zmdi zmdi-dribbble"></i></a></li>
										<li><a href="#"><i class="zmdi zmdi-pinterest"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<!-- Team Single -->
					<!-- Team Single -->
					<div class="col-md-3 hidden-sm hidden-xs">
						<div class="team-single">
							<img src="images/team/3.jpg" alt="" />
							<div class="team-details text-center">
								<div class="team-adrs pt-120">
									<h5>Nirob Khan</h5>
									<p>Shofipy Developer</p>
								</div>								
								<div class="team-socaladrs mt-95">
									<ul>
										<li>Follow on:</li>
										<li><a href="#"><i class="zmdi zmdi-facebook"></i></a></li>
										<li><a href="#"><i class="zmdi zmdi-twitter"></i></a></li>
										<li><a href="#"><i class="zmdi zmdi-dribbble"></i></a></li>
										<li><a href="#"><i class="zmdi zmdi-pinterest"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<!-- Team Single -->
					<!-- Team Single -->
					<div class="col-md-3 hidden-sm hidden-xs">
						<div class="team-single">
							<img src="images/team/4.jpg" alt="" />
							<div class="team-details text-center">
								<div class="team-adrs pt-120">
									<h5>Salim Rana</h5>
									<p>Web Developer</p>
								</div>								
								<div class="team-socaladrs mt-95">
									<ul>
										<li>Follow on:</li>
										<li><a href="#"><i class="zmdi zmdi-facebook"></i></a></li>
										<li><a href="#"><i class="zmdi zmdi-twitter"></i></a></li>
										<li><a href="#"><i class="zmdi zmdi-dribbble"></i></a></li>
										<li><a href="#"><i class="zmdi zmdi-pinterest"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<!-- Team Single -->
				</div>
				<!-- Team area Start -->
				<!-- Our Team Skill Area Start -->
				<div class="row">
					<!-- Skill Progress Bar Start -->
					<div class="col-md-6 col-sm-6">
						<div class="skill-area">
							<h4>our  team member skill</h4>
							<div class="skill">
								<div class="skill-content">
									<div class="skill">
										<!-- PROGRESS START -->
										<div class="progress">
											<div class="lead">Photoshop<span>90%</span></div>
											<div data-wow-delay="1.2s" data-wow-duration="1.5s" style="width: 90%; visibility: visible; animation-duration: 1.5s; animation-delay: 1.2s; animation-name: fadeInLeft;" data-progress="90%" class="progress-bar wow fadeInLeft animated"></div>
										</div>
										<!-- PROGRESS END -->						
										<!-- PROGRESS START -->
										<div class="progress">
											<div class="lead">Illustrator<span>80%</span> </div>
											<div data-wow-delay="1.2s" data-wow-duration="1.5s" style="width: 80%; visibility: visible; animation-duration: 1.5s; animation-delay: 1.2s; animation-name: fadeInLeft;" data-progress="80%" class="progress-bar wow fadeInLeft animated"></div>
										</div>
										<!-- PROGRESS END -->
										<!-- PROGRESS START -->							
										<div class="progress">
											<div class="lead">Html & Css<span>70%</span> </div>
											<div data-wow-delay="1.2s" data-wow-duration="1.5s" style="width: 70%; visibility: visible; animation-duration: 1.5s; animation-delay: 1.2s; animation-name: fadeInLeft;" data-progress="70%" class="progress-bar wow fadeInLeft animated"></div>
										</div>	
										<!-- PROGRESS END -->													
									</div>						
								</div>
								<!-- skill end -->
							</div>
						</div>
					</div>
					<!-- Skill Progress Bar Start -->
					<!-- Skill Progress Bar Circle Start -->
					<div class="col-md-6 col-sm-6">
						<div class="circular-progress mt-90">
							<!-- Single Skill -->
							<div class="single-skill text-center wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".3s">
								<div class="progress-circular">
									<input type="text" class="knob" value="0" data-rel="90" data-linecap="round" data-width="100" data-bgcolor="#f5f5f5" data-fgcolor="#14b1bb" data-thickness=".15" data-readonly="true" disabled>
								</div>
								<div class="skill-titel">
									<p>Web Design</p>
								</div>
							</div>
							<!-- Single Skill -->
							<!-- Single Skill -->
							<div class="single-skill text-center wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".3s">
								<div class="progress-circular">
									<input type="text" class="knob" value="0" data-rel="95" data-linecap="round" data-width="100" data-bgcolor="#f5f5f5" data-fgcolor="#14b1bb" data-thickness=".15" data-readonly="true" disabled>
								</div>
								<div class="skill-titel">
									<p>App Design</p>
								</div>
							</div>
							<!-- Single Skill -->
						</div>
					</div>
					<!-- Skill Progress Bar Circle End -->
				</div>
				<!-- Our Team Skill Area End -->
			</div>
		</section>
		<!-- Our Awesome Team Area End  -->
		<!-- Pricing Table Area Start -->
		<section class="pricing-table pt-100 gray-bg">
			<div class="container">
				<!-- Section Titel -->
				<div class="row">
					<div class="col-md-12">
						<div class="section-title text-center">
							<h1>our pricing table</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation ullamco laboris nisi.</p>
						</div>
					</div>
				</div>
				<!-- Section Titel -->
				<!-- Pricing Table Area Content Start -->
				<div class="row pt-55">
					<div class="container">
						<!-- Pricing table single -->	
						<div class="col-md-4 col-sm-6 col-xs-12 res-pb-xs-30">
							<div class="pricing-table-single set-bg two">
								<h6>Silver pack</h6>
								<div class="table-content">
									<div class="price-category">
										<h1>$30<span> / month</span></h1>
									</div>
									<div class="price-list">
										<ul>
											<li><a href="#"><i class="zmdi zmdi-check"></i>Logo proposition</a></li>
											<li><a href="#"><i class="zmdi zmdi-check"></i>5 Page website</a></li>
											<li><a href="#"><i class="zmdi zmdi-check"></i>Domain + hosting </a></li>
											<li><a href="#"><i class="zmdi zmdi-check"></i>50 social account</a></li>
											<li><a href="#"><i class="zmdi zmdi-check"></i>2 Month after sale support</a></li>
										</ul>
									</div>
									<div class="order-button text-uppercase text-center">
										<a href="#">order now</a>
									</div>
								</div>
							</div>
						</div>
						<!-- Pricing table single -->
						<!-- Pricing table single -->	
						<div class="col-md-4 col-sm-6 col-xs-12">
							<div class="pricing-table-single two">
								<h6>gold pack</h6>
								<div class="table-content">
									<div class="price-category">
										<h1>$60<span> / month</span></h1>
									</div>
									<div class="price-list">
										<ul>
											<li><a href="#"><i class="zmdi zmdi-check"></i>Logo proposition</a></li>
											<li><a href="#"><i class="zmdi zmdi-check"></i>5 Page website</a></li>
											<li><a href="#"><i class="zmdi zmdi-check"></i>Domain + hosting </a></li>
											<li><a href="#"><i class="zmdi zmdi-check"></i>50 social account</a></li>
											<li><a href="#"><i class="zmdi zmdi-check"></i>2 Month after sale support</a></li>
										</ul>
									</div>
									<div class="order-button text-uppercase text-center">
										<a href="#">order now</a>
									</div>
								</div>
							</div>
						</div>
						<!-- Pricing table single -->
						<!-- Pricing table single -->	
						<div class="col-md-4 hidden-sm hidden-xs">
							<div class="pricing-table-single set-bg two">
								<h6>platinum pack</h6>
								<div class="table-content">
									<div class="price-category">
										<h1>$90<span> / month</span></h1>
									</div>
									<div class="price-list">
										<ul>
											<li><a href="#"><i class="zmdi zmdi-check"></i>Logo proposition</a></li>
											<li><a href="#"><i class="zmdi zmdi-check"></i>5 Page website</a></li>
											<li><a href="#"><i class="zmdi zmdi-check"></i>Domain + hosting </a></li>
											<li><a href="#"><i class="zmdi zmdi-check"></i>50 social account</a></li>
											<li><a href="#"><i class="zmdi zmdi-check"></i>2 Month after sale support</a></li>
										</ul>
									</div>
									<div class="order-button text-uppercase text-center">
										<a href="#">order now</a>
									</div>
								</div>
							</div>
						</div>
						<!-- Pricing table single -->
					</div>
				</div>
				<!-- Pricing Table Area Content End -->
			</div>
		</section>
		<!-- Pricing Table Area Start -->
		<!-- Our Blog Area Start -->
		<section class="blog-area ptb-100">
			<div class="container">
				<!-- Section Titel -->
				<div class="row">
					<div class="col-md-12">
						<div class="section-title text-center">
							<h1>our blog</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation ullamco laboris nisi.</p>
						</div>
					</div>
				</div>
				<!-- Section Titel -->
				<div class="row pt-55">
					<!-- Single Blog -->
					<div class="col-md-4 col-sm-6 col-xs-12 res-pb-xs-30">
						<div class="single-blog style-two white-bg broder">
							<h6><a href="#">Lorem Ipsum is simply dummy</a></h6>
							<div class="blog-img">
								<a href="#"><img src="images/blog/1.jpg" alt="" /></a>
							</div>
							<div class="blog-content">
								<div class="post-info">
									<span class="post-date mr-15">
										<a href="#"><i class="zmdi zmdi-account"></i>By : Sathi </a>
									</span>
									<span class="post-date mr-15">
										<a href="#"><i class="zmdi zmdi-favorite-outline"></i>( 500 )</a>
									</span>
									<span class="post-date mr-15">
										<a href="#"><i class="zmdi zmdi-comments"></i>( 100 )</a>
									</span>
									<span class="post-date">
										<a href="#"><i class="zmdi zmdi-share"></i>( 100 )</a>
									</span>
									<div class="post-content">
										<p>Lorem ipsum dolor sit amet, consectetur eiusmodm adipisicing elit, sed do eiusmod tempor incididuntm ut labore et dolore magna aliqua. </p>
									</div>
									<span class="post-date">
										<a href="#"><i class="zmdi zmdi-time"></i>Jun 25, 2016 </a>
									</span>
									<span class="post-btn pull-right">
										<a href="#">Read More<i class="zmdi zmdi-arrow-right"></i></a>
									</span>
								</div>
							</div>
						</div>
					</div>
					<!-- Single Blog -->
					<!-- Single Blog -->
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="single-blog style-two white-bg broder">
							<h6><a href="#">Lorem Ipsum is simply dummy</a></h6>
							<div class="blog-img">
								<a href="#"><img src="images/blog/2.jpg" alt="" /></a>
							</div>
							<div class="blog-content">
								<div class="post-info">
									<span class="post-date mr-15">
										<a href="#"><i class="zmdi zmdi-account"></i>By : Mamun</a>
									</span>
									<span class="post-date mr-15">
										<a href="#"><i class="zmdi zmdi-favorite-outline"></i>( 500 )</a>
									</span>
									<span class="post-date mr-15">
										<a href="#"><i class="zmdi zmdi-comments"></i>( 100 )</a>
									</span>
									<span class="post-date">
										<a href="#"><i class="zmdi zmdi-share"></i>( 100 )</a>
									</span>
									<div class="post-content">
										<p>Lorem ipsum dolor sit amet, consectetur eiusmodm adipisicing elit, sed do eiusmod tempor incididuntm ut labore et dolore magna aliqua. </p>
									</div>
									<span class="post-date">
										<a href="#"><i class="zmdi zmdi-time"></i>Jun 25, 2016 </a>
									</span>
									<span class="post-btn pull-right">
										<a href="#">Read More<i class="zmdi zmdi-arrow-right"></i></a>
									</span>
								</div>
							</div>
						</div>
					</div>
					<!-- Single Blog -->
					<!-- Single Blog -->
					<div class="col-md-4 hidden-sm hidden-xs">
						<div class="single-blog style-two white-bg broder">
							<h6><a href="#">Lorem Ipsum is simply dummy</a></h6>
							<div class="blog-img">
								<a href="#"><img src="images/blog/3.jpg" alt="" /></a>
							</div>
							<div class="blog-content">
								<div class="post-info">
									<span class="post-date mr-15">
										<a href="#"><i class="zmdi zmdi-account"></i>By : Salim Rana</a>
									</span>
									<span class="post-date mr-15">
										<a href="#"><i class="zmdi zmdi-favorite-outline"></i>( 500 )</a>
									</span>
									<span class="post-date mr-15">
										<a href="#"><i class="zmdi zmdi-comments"></i>( 100 )</a>
									</span>
									<span class="post-date">
										<a href="#"><i class="zmdi zmdi-share"></i>( 100 )</a>
									</span>
									<div class="post-content">
										<p>Lorem ipsum dolor sit amet, consectetur eiusmodm adipisicing elit, sed do eiusmod tempor incididuntm ut labore et dolore magna aliqua. </p>
									</div>
									<span class="post-date">
										<a href="#"><i class="zmdi zmdi-time"></i>Jun 25, 2016 </a>
									</span>
									<span class="post-btn pull-right">
										<a href="#">Read More<i class="zmdi zmdi-arrow-right"></i></a>
									</span>
								</div>
							</div>
						</div>
					</div>
					<!-- Single Blog -->
				</div>
			</div>
		</section>
		<!-- Our Blog Area End -->
		<!-- Brand Logo Area Start -->
		<div class="brand-logo-area ptb-100 bg-6 overlay">
			<div class="container">
				<div class="row">
					<div class="brand-carsoul">
						<!-- Brand Single -->
						<div class="col-md-12">
							<div class="single-brand">
								<a href="#"><img src="images/brand/1.png" alt="" /></a>
							</div>
						</div>
						<!-- Brand Single -->
						<!-- Brand Single -->
						<div class="col-md-12">
							<div class="single-brand">
								<a href="#"><img src="images/brand/2.png" alt="" /></a>
							</div>
						</div>
						<!-- Brand Single -->
						<!-- Brand Single -->
						<div class="col-md-12">
							<div class="single-brand">
								<a href="#"><img src="images/brand/3.png" alt="" /></a>
							</div>
						</div>
						<!-- Brand Single -->
						<!-- Brand Single -->
						<div class="col-md-12">
							<div class="single-brand">
								<a href="#"><img src="images/brand/4.png" alt="" /></a>
							</div>
						</div>
						<!-- Brand Single -->
						<!-- Brand Single -->
						<div class="col-md-12">
							<div class="single-brand">
								<a href="#"><img src="images/brand/5.png" alt="" /></a>
							</div>
						</div>
						<!-- Brand Single -->
						<!-- Brand Single -->
						<div class="col-md-12">
							<div class="single-brand">
								<a href="#"><img src="images/brand/3.png" alt="" /></a>
							</div>
						</div>
						<!-- Brand Single -->
						<!-- Brand Single -->
						<div class="col-md-12">
							<div class="single-brand">
								<a href="#"><img src="images/brand/2.png" alt="" /></a>
							</div>
						</div>
						<!-- Brand Single -->
					</div>
				</div>
			</div>
		</div>
		<!-- Brand Logo Area End -->
		<!-- Our Client Area Start -->
		<section class="our-client ptb-100">
			<div class="container">
				<!-- Section Titel -->
				<div class="row">
					<div class="col-md-12">
						<div class="section-title text-center">
							<h1>what say our client</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation ullamco laboris nisi.</p>
						</div>
					</div>
				</div>
				<!-- Section Titel -->
				<!-- Our Client Area Start -->
				<div class="client-carousel pt-80">
					<!-- Client Single -->
					<div class="our-client-single">
						<div class="client-content text-center set-bg text-white">
							<span>
								<i class="fa fa-quote-right" aria-hidden="true"></i>
							</span>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </p>
							<div class="client-adrs mb-35">
								<h6>John Doe</h6>
								<p>Project Manager</p>
							</div>
						</div>
						<div class="client-img">
							<img src="images/other/client.png" alt="" />
						</div>
					</div>
					<!-- Client Single -->
					<!-- Client Single -->
					<div class="our-client-single">
						<div class="client-content text-center set-bg text-white">
							<span>
								<i class="fa fa-quote-right" aria-hidden="true"></i>
							</span>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </p>
							<div class="client-adrs mb-35">
								<h6>John Doe</h6>
								<p>Project Manager</p>
							</div>
						</div>
						<div class="client-img">
							<img src="images/other/client.png" alt="" />
						</div>
					</div>
					<!-- Client Single -->
					<!-- Client Single -->
					<div class="our-client-single">
						<div class="client-content text-center set-bg text-white">
							<span>
								<i class="fa fa-quote-right" aria-hidden="true"></i>
							</span>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip </p>
							<div class="client-adrs mb-35">
								<h6>John Doe</h6>
								<p>Project Manager</p>
							</div>
						</div>
						<div class="client-img">
							<img src="images/other/client.png" alt="" />
						</div>
					</div>
					<!-- Client Single -->
				</div>
				<!-- Our Client Area End -->
			</div>
		</section>
		<!-- Our Client Area End -->
		<!-- Start footer area -->
        <footer class="footer-area ptb-100 black-half-bg">
			<div class="container">
				<div class="row">
					<!-- Fotter Single Area  -->
					<div class="col-md-3 col-sm-4 col-xs-12 res-pb-xs-30">
						<div class="footer-menu text-white">
							<h6>Contact us</h6>
							<div class="contact-details text-white">
								<ul>
									<li>
										<a href="#"><i class="zmdi zmdi-pin"></i></a>
										<p>House No 08, Road No 08,Din Bari, Dhaka, Bangladesh</p>
									</li>
									<li>
										<a href="#"><i class="zmdi zmdi-email"></i></a>
										<p>Username@gmail.com Damo@gmail.com</p>
									</li>
									<li>
										<a href="#"><i class="zmdi zmdi-phone"></i></a>
										<p>(+660 256 24857)(+660 256 24857)</p>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<!-- Fotter Single Area  -->
					<!-- Fotter Single Area  -->
					<div class="col-md-3 col-sm-4 col-xs-12 res-pb-xs-30">
						<div class="footer-menu">
							<h6>Recent post</h6>
							<div class="recent-post">
								<ul>
									<li>
										<img src="images/post/1.png" alt="" />
										<h5><a href="#">Ut enim</a> ad minim nostrud</h5>
										<span>Oct 3, 2016 7 Comments</span>
									</li>
									<li>
										<img src="images/post/2.png" alt="" />
										<h5>Ut enim ad <a href="#">minim</a> nostrud</h5>
										<span>Oct 3, 2016 7 Comments</span>
									</li>
									<li>
										<img src="images/post/3.png" alt="" />
										<h5><a href="#">Ut enim</a> ad minim nostrud</h5>
										<span>Oct 3, 2016 7 Comments</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<!-- Fotter Single Area  -->
					<!-- Fotter Single Area  -->
					<div class="col-md-3 hidden-sm hidden-xs">
						<div class="footer-menu pl-60">
							<h6>QUICK LINKS</h6>
							<div class="quick-link">
								<ul>
									<li>
										<a href="#">Home</a>
									</li>
									<li>
										<a href="#">About</a>
									</li>
									<li>
										<a href="#">Team</a>
									</li>
									<li>
										<a href="#">Services</a>
									</li>
									<li>
										<a href="#">Portfolio</a>
									</li>
									<li>
										<a href="#">Contact Us</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<!-- Fotter Single Area  -->
					<!-- Fotter Single Area  -->
					<div class="col-md-3 col-sm-4 col-xs-12">
						<div class="footer-menu">
							<h6>NEWSLETTER</h6>
							<div class="newsletter">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </p>
								<form id="mc-form" class="mc-form">
									<div class="newsletter-form">
										<input type="email" autocomplete="off" id="mc-email" placeholder="Enter your mail" class="form-control">
										<button class="mc-submit" type="submit">SEND MESSAEGE</button>
										<!-- mailchimp-alerts Start -->
										<div class="mailchimp-alerts text-centre">
											<div class="mailchimp-submitting"></div><!-- mailchimp-submitting end -->
											<div class="mailchimp-success"></div><!-- mailchimp-success end -->
											<div class="mailchimp-error"></div><!-- mailchimp-error end -->
										</div>
										<!-- mailchimp-alerts end -->
									</div>
								</form>
							</div>
						</div>
					</div>
					<!-- Fotter Single Area  -->
				</div>
			</div>
		</footer>
        <!-- End footer area -->
		<!-- Footer Bottom Area Start -->
		<div class="footer-bottom ptb-20 black-bg">
			<div class="container">
				<div class="row">
					<div class="footer-copyright text-center text-white">
						<p>Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="http://www.51qianduan.com//">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
					</div>
				</div>
			</div>
		</div>
		<!-- Footer Bottom Area End -->
    </div>
    <!-- Body main wrapper end -->
    <!-- Placed js at the end of the document so the pages load faster -->
    <!-- jquery latest version -->
    <!-- Bootstrap framework js -->
    <!-- All js plugins included in this file. -->
	<!-- Nivo Slider -->
	<!-- Magnific Popup -->
	<!-- Isotope Css -->
	<!-- Venobox Css -->
	<!-- Style Customizer JS -->
	<!-- ajax mail js  -->
	<!-- mail Chimp  -->
	<!-- Counter Up -->
	<!-- Waypoints js -->
	<!-- Imageloaded js -->
	<!-- Circular Progress Knob js -->
	<!-- Circular Progress Appear js -->
	<!-- headroom js -->
	<script>
		// grab an element
		var myElement = document.querySelector(".headroom");
		// construct an instance of Headroom, passing the element
		var headroom  = new Headroom(myElement);
		// initialise
		headroom.init(); 
	</script>
	<!-- Owl Carosel Js -->
	<!-- Mean Menu js -->
    <!-- Main js file that contents all jQuery plugins activation. -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 蓝色 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 宽屏 全屏 满屏 设计 设计公司

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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