HTML黄色实用形式3C数码电子产品企业网站模板代码



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

13 49 17



模板描述:黄色 实用形式 3C数码电子产品。整站宽屏满屏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。最底部部分带有自动反动和滚动效果,鼠标移动上之后,停止移动和滚动效果。适用3C数码电子产品

代码结构

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/pluton.css" />
<link rel="stylesheet" type="text/css" href="css/pluton-ie7.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.cslider.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />

2. 引入JS

<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript" src="js/jquery.placeholder.js"></script>
<script type="text/javascript" src="js/jquery.inview.js"></script>
<script src="js/respond.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>

3. HTML代码

<div class="navbar">
	<div class="navbar-inner">
		<div class="container">
			<a href="#" class="brand">
				<img src="images/logo.png" width="120" height="40" alt="Logo" />
				<!-- This is website logo -->
			</a>
			<!-- Navigation button, visible on small resolution -->
			<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
				<i class="icon-menu"></i>
			</button>
			<!-- Main navigation -->
			<div class="nav-collapse collapse pull-right">
				<ul class="nav" id="top-navigation">
					<li class="active"><a href="#home">Home</a></li>
					<li><a href="#service">Services</a></li>
					<li><a href="#portfolio">Portfolio</a></li>
					<li><a href="#about">About</a></li>
					<li><a href="#clients">Clients</a></li>
					<li><a href="#price">Price</a></li>
					<li><a href="#contact">Contact</a></li>
				</ul>
			</div>
			<!-- End main navigation -->
		</div>
	</div>
</div>
<!-- Start home section -->
<div id="home">
	<!-- Start cSlider -->
	<div id="da-slider" class="da-slider">
		<div class="triangle"></div>
		<!-- mask elemet use for masking background image -->
		<div class="mask"></div>
		<!-- All slides centred in container element -->
		<div class="container">
			<!-- Start first slide -->
			<div class="da-slide">
				<h2 class="fittext2">Welcome to pluton theme</h2>
				<h4>Clean & responsive</h4>
				<p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
				<a href="#" class="da-link button">Read more</a>
				<div class="da-img">
					<img src="images/Slider01.png" alt="image01" width="320">
				</div>
			</div>
			<!-- End first slide -->
			<!-- Start second slide -->
			<div class="da-slide">
				<h2>Easy management</h2>
				<h4>Easy to use</h4>
				<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
				<a href="#" class="da-link button">Read more</a>
				<div class="da-img">
					<img src="images/Slider02.png" width="320" alt="image02">
				</div>
			</div>
			<!-- End second slide -->
			<!-- Start third slide -->
			<div class="da-slide">
				<h2>Revolution</h2>
				<h4>Customizable</h4>
				<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
				<a href="#" class="da-link button">Read more</a>
				<div class="da-img">
					<img src="images/Slider03.png" width="320" alt="image03">
				</div>
			</div>
			<!-- Start third slide -->
			<!-- Start cSlide navigation arrows -->
			<div class="da-arrows">
				<span class="da-arrows-prev"></span>
				<span class="da-arrows-next"></span>
			</div>
			<!-- End cSlide navigation arrows -->
		</div>
	</div>
</div>
<!-- End home section -->
<!-- Service section start -->
<div class="section primary-section" id="service">
	<div class="container">
		<!-- Start title section -->
		<div class="title">
			<h1>What We Do?</h1>
			<!-- Section's title goes here -->
			<p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</p>
			<!--Simple description for section goes here. -->
		</div>
		<div class="row-fluid">
			<div class="span4">
				<div class="centered service">
					<div class="circle-border zoom-in">
						<img class="img-circle" src="images/Service1.png" alt="service 1">
					</div>
					<h3>Modern Design</h3>
					<p>We Create Modern And Clean Theme For Your Business Company.</p>
				</div>
			</div>
			<div class="span4">
				<div class="centered service">
					<div class="circle-border zoom-in">
						<img class="img-circle" src="images/Service2.png" alt="service 2" />
					</div>
					<h3>Powerfull Theme</h3>
					<p>We Create Modern And Powerful Theme With Lots Animation And Features</p>
				</div>
			</div>
			<div class="span4">
				<div class="centered service">
					<div class="circle-border zoom-in">
						<img class="img-circle" src="images/Service3.png" alt="service 3">
					</div>
					<h3>Clean Code</h3>
					<p>We Create Modern And Powerful Html5 And CSS3 Code Easy For Read And Customize.</p>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Service section end -->
<!-- Portfolio section start -->
<div class="section secondary-section " id="portfolio">
	<div class="triangle"></div>
	<div class="container">
		<div class=" title">
			<h1>Have You Seen our Works?</h1>
			<p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</p>
		</div>
		<ul class="nav nav-pills">
			<li class="filter" data-filter="all">
				<a href="#noAction">All</a>
			</li>
			<li class="filter" data-filter="web">
				<a href="#noAction">Web</a>
			</li>
			<li class="filter" data-filter="photo">
				<a href="#noAction">Photo</a>
			</li>
			<li class="filter" data-filter="identity">
				<a href="#noAction">Identity</a>
			</li>
		</ul>
		<!-- Start details for portfolio project 1 -->
		<div id="single-project">
			<div id="slidingDiv" class="toggleDiv row-fluid single-project">
				<div class="span6">
					<img src="images/Portfolio01.png" alt="project 1" />
				</div>
				<div class="span6">
					<div class="project-description">
						<div class="project-title clearfix">
							<h3>Webste for Some Client</h3>
							<span class="show_hide close">
								<i class="icon-cancel"></i>
							</span>
						</div>
						<div class="project-info">
							<div>
								<span>Client</span>Some Client Name</div>
							<div>
								<span>Date</span>July 2013</div>
							<div>
								<span>Skills</span>HTML5, CSS3, JavaScript</div>
							<div>
								<span>Link</span>http://examplecomp.com</div>
						</div>
						<p>Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.</p>
					</div>
				</div>
			</div>
			<!-- End details for portfolio project 1 -->
			<!-- Start details for portfolio project 2 -->
			<div id="slidingDiv1" class="toggleDiv row-fluid single-project">
				<div class="span6">
					<img src="images/Portfolio02.png" alt="project 2">
				</div>
				<div class="span6">
					<div class="project-description">
						<div class="project-title clearfix">
							<h3>Webste for Some Client</h3>
							<span class="show_hide close">
								<i class="icon-cancel"></i>
							</span>
						</div>
						<div class="project-info">
							<div>
								<span>Client</span>Some Client Name</div>
							<div>
								<span>Date</span>July 2013</div>
							<div>
								<span>Skills</span>HTML5, CSS3, JavaScript</div>
							<div>
								<span>Link</span>http://examplecomp.com</div>
						</div>
						<p>Life is a song - sing it. Life is a game - play it. Life is a challenge - meet it. Life is a dream - realize it. Life is a sacrifice - offer it. Life is love - enjoy it.</p>
					</div>
				</div>
			</div>
			<!-- End details for portfolio project 2 -->
			<!-- Start details for portfolio project 3 -->
			<div id="slidingDiv2" class="toggleDiv row-fluid single-project">
				<div class="span6">
					<img src="images/Portfolio03.png" alt="project 3">
				</div>
				<div class="span6">
					<div class="project-description">
						<div class="project-title clearfix">
							<h3>Webste for Some Client</h3>
							<span class="show_hide close">
								<i class="icon-cancel"></i>
							</span>
						</div>
						<div class="project-info">
							<div>
								<span>Client</span>Some Client Name</div>
							<div>
								<span>Date</span>July 2013</div>
							<div>
								<span>Skills</span>HTML5, CSS3, JavaScript</div>
							<div>
								<span>Link</span>http://examplecomp.com</div>
						</div>
						<p>How far you go in life depends on your being tender with the young, compassionate with the aged, sympathetic with the striving and tolerant of the weak and strong. Because someday in your life you will have been all of these.</p>
					</div>
				</div>
			</div>
			<!-- End details for portfolio project 3 -->
			<!-- Start details for portfolio project 4 -->
			<div id="slidingDiv3" class="toggleDiv row-fluid single-project">
				<div class="span6">
					<img src="images/Portfolio04.png" alt="project 4">
				</div>
				<div class="span6">
					<div class="project-description">
						<div class="project-title clearfix">
							<h3>Project for Some Client</h3>
							<span class="show_hide close">
								<i class="icon-cancel"></i>
							</span>
						</div>
						<div class="project-info">
							<div>
								<span>Client</span>Some Client Name</div>
							<div>
								<span>Date</span>July 2013</div>
							<div>
								<span>Skills</span>HTML5, CSS3, JavaScript</div>
							<div>
								<span>Link</span>http://examplecomp.com</div>
						</div>
						<p>Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.</p>
					</div>
				</div>
			</div>
			<!-- End details for portfolio project 4 -->
			<!-- Start details for portfolio project 5 -->
			<div id="slidingDiv4" class="toggleDiv row-fluid single-project">
				<div class="span6">
					<img src="images/Portfolio05.png" alt="project 5">
				</div>
				<div class="span6">
					<div class="project-description">
						<div class="project-title clearfix">
							<h3>Webste for Some Client</h3>
							<span class="show_hide close">
								<i class="icon-cancel"></i>
							</span>
						</div>
						<div class="project-info">
							<div>
								<span>Client</span>Some Client Name</div>
							<div>
								<span>Date</span>July 2013</div>
							<div>
								<span>Skills</span>HTML5, CSS3, JavaScript</div>
							<div>
								<span>Link</span>http://examplecomp.com</div>
						</div>
						<p>We need to give each other the space to grow, to be ourselves, to exercise our diversity. We need to give each other space so that we may both give and receive such beautiful things as ideas, openness, dignity, joy, healing, and inclusion.</p>
					</div>
				</div>
			</div>
			<!-- End details for portfolio project 5 -->
			<!-- Start details for portfolio project 6 -->
			<div id="slidingDiv5" class="toggleDiv row-fluid single-project">
				<div class="span6">
					<img src="images/Portfolio06.png" alt="project 6">
				</div>
				<div class="span6">
					<div class="project-description">
						<div class="project-title clearfix">
							<h3>Webste for Some Client</h3>
							<span class="show_hide close">
								<i class="icon-cancel"></i>
							</span>
						</div>
						<div class="project-info">
							<div>
								<span>Client</span>Some Client Name</div>
							<div>
								<span>Date</span>July 2013</div>
							<div>
								<span>Skills</span>HTML5, CSS3, JavaScript</div>
							<div>
								<span>Link</span>http://examplecomp.com</div>
						</div>
						<p>I went to the woods because I wished to live deliberately, to front only the essential facts of life, and see if I could not learn what it had to teach, and not, when I came to die, discover that I had not lived.</p>
					</div>
				</div>
			</div>
			<!-- End details for portfolio project 6 -->
			<!-- Start details for portfolio project 7 -->
			<div id="slidingDiv6" class="toggleDiv row-fluid single-project">
				<div class="span6">
					<img src="images/Portfolio07.png" alt="project 7">
				</div>
				<div class="span6">
					<div class="project-description">
						<div class="project-title clearfix">
							<h3>Webste for Some Client</h3>
							<span class="show_hide close">
								<i class="icon-cancel"></i>
							</span>
						</div>
						<div class="project-info">
							<div>
								<span>Client</span>Some Client Name</div>
							<div>
								<span>Date</span>July 2013</div>
							<div>
								<span>Skills</span>HTML5, CSS3, JavaScript</div>
							<div>
								<span>Link</span>http://examplecomp.com</div>
						</div>
						<p>Always continue the climb. It is possible for you to do whatever you choose, if you first get to know who you are and are willing to work with a power that is greater than ourselves to do it.</p>
					</div>
				</div>
			</div>
			<!-- End details for portfolio project 7 -->
			<!-- Start details for portfolio project 8 -->
			<div id="slidingDiv7" class="toggleDiv row-fluid single-project">
				<div class="span6">
					<img src="images/Portfolio08.png" alt="project 8">
				</div>
				<div class="span6">
					<div class="project-description">
						<div class="project-title clearfix">
							<h3>Webste for Some Client</h3>
							<span class="show_hide close">
								<i class="icon-cancel"></i>
							</span>
						</div>
						<div class="project-info">
							<div>
								<span>Client</span>Some Client Name</div>
							<div>
								<span>Date</span>July 2013</div>
							<div>
								<span>Skills</span>HTML5, CSS3, JavaScript</div>
							<div>
								<span>Link</span>http://examplecomp.com</div>
						</div>
						<p>What if you gave someone a gift, and they neglected to thank you for it - would you be likely to give them another? Life is the same way. In order to attract more of the blessings that life has to offer, you must truly appreciate what you already have.</p>
					</div>
				</div>
			</div>
			<!-- End details for portfolio project 8 -->
			<!-- Start details for portfolio project 9 -->
			<div id="slidingDiv8" class="toggleDiv row-fluid single-project">
				<div class="span6">
					<img src="images/Portfolio09.png" alt="project 9">
				</div>
				<div class="span6">
					<div class="project-description">
						<div class="project-title clearfix">
							<h3>Webste for Some Client</h3>
							<span class="show_hide close">
								<i class="icon-cancel"></i>
							</span>
						</div>
						<div class="project-info">
							<div>
								<span>Client</span>Some Client Name</div>
							<div>
								<span>Date</span>July 2013</div>
							<div>
								<span>Skills</span>HTML5, CSS3, JavaScript</div>
							<div>
								<span>Link</span>http://examplecomp.com</div>
						</div>
						<p>I learned that we can do anything, but we can't do everything... at least not at the same time. So think of your priorities not in terms of what activities you do, but when you do them. Timing is everything.</p>
					</div>
				</div>
			</div>
			<!-- End details for portfolio project 9 -->
			<ul id="portfolio-grid" class="thumbnails row">
				<li class="span4 mix web">
					<div class="thumbnail">
						<img src="images/Portfolio01.png" alt="project 1">
						<a href="#single-project" class="more show_hide" rel="#slidingDiv">
							<i class="icon-plus"></i>
						</a>
						<h3>Thumbnail label</h3>
						<p>Thumbnail caption...</p>
						<div class="mask"></div>
					</div>
				</li>
				<li class="span4 mix photo">
					<div class="thumbnail">
						<img src="images/Portfolio02.png" alt="project 2">
						<a href="#single-project" class="show_hide more" rel="#slidingDiv1">
							<i class="icon-plus"></i>
						</a>
						<h3>Thumbnail label</h3>
						<p>Thumbnail caption...</p>
						<div class="mask"></div>
					</div>
				</li>
				<li class="span4 mix identity">
					<div class="thumbnail">
						<img src="images/Portfolio03.png" alt="project 3">
						<a href="#single-project" class="more show_hide" rel="#slidingDiv2">
							<i class="icon-plus"></i>
						</a>
						<h3>Thumbnail label</h3>
						<p>Thumbnail caption...</p>
						<div class="mask"></div>
					</div>
				</li>
				<li class="span4 mix web">
					<div class="thumbnail">
						<img src="images/Portfolio04.png" alt="project 4">
						<a href="#single-project" class="show_hide more" rel="#slidingDiv3">
							<i class="icon-plus"></i>
						</a>
						<h3>Thumbnail label</h3>
						<p>Thumbnail caption...</p>
						<div class="mask"></div>
					</div>
				</li>
				<li class="span4 mix photo">
					<div class="thumbnail">
						<img src="images/Portfolio05.png" alt="project 5">
						<a href="#single-project" class="show_hide more" rel="#slidingDiv4">
							<i class="icon-plus"></i>
						</a>
						<h3>Thumbnail label</h3>
						<p>Thumbnail caption...</p>
						<div class="mask"></div>
					</div>
				</li>
				<li class="span4 mix identity">
					<div class="thumbnail">
						<img src="images/Portfolio06.png" alt="project 6">
						<a href="#single-project" class="show_hide more" rel="#slidingDiv5">
							<i class="icon-plus"></i>
						</a>
						<h3>Thumbnail label</h3>
						<p>Thumbnail caption...</p>
						<div class="mask"></div>
					</div>
				</li>
				<li class="span4 mix web">
					<div class="thumbnail">
						<img src="images/Portfolio07.png" alt="project 7" />
						<a href="#single-project" class="show_hide more" rel="#slidingDiv6">
							<i class="icon-plus"></i>
						</a>
						<h3>Thumbnail label</h3>
						<p>Thumbnail caption...</p>
						<div class="mask"></div>
					</div>
				</li>
				<li class="span4 mix photo">
					<div class="thumbnail">
						<img src="images/Portfolio08.png" alt="project 8">
						<a href="#single-project" class="show_hide more" rel="#slidingDiv7">
							<i class="icon-plus"></i>
						</a>
						<h3>Thumbnail label</h3>
						<p>Thumbnail caption...</p>
						<div class="mask"></div>
					</div>
				</li>
				<li class="span4 mix identity">
					<div class="thumbnail">
						<img src="images/Portfolio09.png" alt="project 9">
						<a href="#single-project" class="show_hide more" rel="#slidingDiv8">
							<i class="icon-plus"></i>
						</a>
						<h3>Thumbnail label</h3>
						<p>Thumbnail caption...</p>
						<div class="mask"></div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
<!-- Portfolio section end -->
<!-- About us section start -->
<div class="section primary-section" id="about">
	<div class="triangle"></div>
	<div class="container">
		<div class="title">
			<h1>Who We Are?</h1>
			<p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</p>
		</div>
		<div class="row-fluid team">
			<div class="span4" id="first-person">
				<div class="thumbnail">
					<img src="images/Team1.png" alt="team 1">
					<h3>John Doe</h3>
					<ul class="social">
						<li>
							<a href="">
								<span class="icon-facebook-circled"></span>
							</a>
						</li>
						<li>
							<a href="">
								<span class="icon-twitter-circled"></span>
							</a>
						</li>
						<li>
							<a href="">
								<span class="icon-linkedin-circled"></span>
							</a>
						</li>
					</ul>
					<div class="mask">
						<h2>Copywriter</h2>
						<p>When you stop expecting people to be perfect, you can like them for who they are.</p>
					</div>
				</div>
			</div>
			<div class="span4" id="second-person">
				<div class="thumbnail">
					<img src="images/Team2.png" alt="team 1">
					<h3>John Doe</h3>
					<ul class="social">
						<li>
							<a href="">
								<span class="icon-facebook-circled"></span>
							</a>
						</li>
						<li>
							<a href="">
								<span class="icon-twitter-circled"></span>
							</a>
						</li>
						<li>
							<a href="">
								<span class="icon-linkedin-circled"></span>
							</a>
						</li>
					</ul>
					<div class="mask">
						<h2>Designer</h2>
						<p>When you stop expecting people to be perfect, you can like them for who they are.</p>
					</div>
				</div>
			</div>
			<div class="span4" id="third-person">
				<div class="thumbnail">
					<img src="images/Team3.png" alt="team 1">
					<h3>John Doe</h3>
					<ul class="social">
						<li>
							<a href="">
								<span class="icon-facebook-circled"></span>
							</a>
						</li>
						<li>
							<a href="">
								<span class="icon-twitter-circled"></span>
							</a>
						</li>
						<li>
							<a href="">
								<span class="icon-linkedin-circled"></span>
							</a>
						</li>
					</ul>
					<div class="mask">
						<h2>Photographer</h2>
						<p>When you stop expecting people to be perfect, you can like them for who they are.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="about-text centered">
			<h3>About Us</h3>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
		</div>
		<h3>Skills</h3>
		<div class="row-fluid">
			<div class="span6">
				<ul class="skills">
					<li>
						<span class="bar" data-width="80%"></span>
						<h3>Graphic Design</h3>
					</li>
					<li>
						<span class="bar" data-width="95%"></span>
						<h3>Html & Css</h3>
					</li>
					<li>
						<span class="bar" data-width="68%"></span>
						<h3>jQuery</h3>
					</li>
					<li>
						<span class="bar" data-width="70%"></span>
						<h3>Wordpress</h3>
					</li>
				</ul>
			</div>
			<div class="span6">
				<div class="highlighted-box center">
					<h1>We're Hiring</h1>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, ullamcorper suscipit lobortis nisl ut aliquip consequat. I learned that we can do anything, but we can't do everything...</p>
					<button class="button button-sp">Join Us</button>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- About us section end -->
<div class="section secondary-section">
	<div class="triangle"></div>
	<div class="container centered">
		<p class="large-text">Elegance is not the abundance of simplicity. It is the absence of complexity.</p>
		<a href="#" class="button">Purshase now</a>
	</div>
</div>
<!-- Client section start -->
<!-- Client section start -->
<div id="clients">
	<div class="section primary-section">
		<div class="triangle"></div>
		<div class="container">
			<div class="title">
				<h1>What Client Say?</h1>
				<p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</p>
			</div>
			<div class="row">
				<div class="span4">
					<div class="testimonial">
						<p>"I've worked too hard and too long to let anything stand in the way of my goals. I will not let my teammates down and I will not let myself down."</p>
						<div class="whopic">
							<div class="arrow"></div>
							<img src="images/Client1.png" class="centered" alt="client 1">
							<strong>John Doe
								<small>Client</small>
							</strong>
						</div>
					</div>
				</div>
				<div class="span4">
					<div class="testimonial">
						<p>"In motivating people, you've got to engage their minds and their hearts. I motivate people, I hope, by example - and perhaps by excitement, by having productive ideas to make others feel involved."</p>
						<div class="whopic">
							<div class="arrow"></div>
							<img src="images/Client2.png" class="centered" alt="client 2">
							<strong>John Doe
								<small>Client</small>
							</strong>
						</div>
					</div>
				</div>
				<div class="span4">
					<div class="testimonial">
						<p>"Determine never to be idle. No person will have occasion to complain of the want of time who never loses any. It is wonderful how much may be done if we are always doing."</p>
						<div class="whopic">
							<div class="arrow"></div>
							<img src="images/Client3.png" class="centered" alt="client 3">
							<strong>John Doe
								<small>Client</small>
							</strong>
						</div>
					</div>
				</div>
			</div>
			<p class="testimonial-text">
				"Perfection is Achieved Not When There Is Nothing More to Add, But When There Is Nothing Left to Take Away"
			</p>
		</div>
	</div>
</div>
<div class="section third-section">
	<div class="container centered">
		<div class="sub-section">
			<div class="title clearfix">
				<div class="pull-left">
					<h3>Our Clients</h3>
				</div>
				<ul class="client-nav pull-right">
					<li id="client-prev"></li>
					<li id="client-next"></li>
				</ul>
			</div>
			<ul class="row client-slider" id="clint-slider">
				<li>
					<a href="">
						<img src="images/clients/ClientLogo01.png" alt="client logo 1">
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/clients/ClientLogo02.png" alt="client logo 2">
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/clients/ClientLogo03.png" alt="client logo 3">
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/clients/ClientLogo04.png" alt="client logo 4">
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/clients/ClientLogo05.png" alt="client logo 5">
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/clients/ClientLogo02.png" alt="client logo 6">
					</a>
				</li>
				<li>
					<a href="">
						<img src="images/clients/ClientLogo04.png" alt="client logo 7">
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>
<!-- Price section start -->
<div id="price" class="section secondary-section">
	<div class="container">
		<div class="title">
			<h1>Price</h1>
			<p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</p>
		</div>
		<div class="price-table row-fluid">
			<div class="span4 price-column">
				<h3>Basic</h3>
				<ul class="list">
					<li class="price">$19,99</li>
					<li><strong>Free</strong> Setup</li>
					<li><strong>24/7</strong> Support</li>
					<li><strong>5 GB</strong> File Storage</li>
				</ul>
				<a href="#" class="button button-ps">BUY</a>
			</div>
			<div class="span4 price-column">
				<h3>Pro</h3>
				<ul class="list">
					<li class="price">$39,99</li>
					<li><strong>Free</strong> Setup</li>
					<li><strong>24/7</strong> Support</li>
					<li><strong>25 GB</strong> File Storage</li>
				</ul>
				<a href="#" class="button button-ps">BUY</a>
			</div>
			<div class="span4 price-column">
				<h3>Premium</h3>
				<ul class="list">
					<li class="price">$79,99</li>
					<li><strong>Free</strong> Setup</li>
					<li><strong>24/7</strong> Support</li>
					<li><strong>50 GB</strong> File Storage</li>
				</ul>
				<a href="#" class="button button-ps">BUY</a>
			</div>
		</div>
		<div class="centered">
			<p class="price-text">We Offer Custom Plans. Contact Us For More Info.</p>
			<a href="#contact" class="button">Contact Us</a>
		</div>
	</div>
</div>
<!-- Price section end -->
<!-- Newsletter section start -->
<div class="section third-section">
	<div class="container newsletter">
		<div class="sub-section">
			<div class="title clearfix">
				<div class="pull-left">
					<h3>Newsletter</h3>
				</div>
			</div>
		</div>
		<div id="success-subscribe" class="alert alert-success invisible">
			<strong>Well done!</strong>You successfully subscribet to our newsletter.</div>
		<div class="row-fluid">
			<div class="span5">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			</div>
			<div class="span7">
				<form class="inline-form">
					<input type="email" name="email" id="nlmail" class="span8" placeholder="Enter your email" required />
					<button id="subscribe" class="button button-sp">Subscribe</button>
				</form>
				<div id="err-subscribe" class="error centered">Please provide valid email address.</div>
			</div>
		</div>
	</div>
</div>
<!-- Newsletter section end -->
<!-- Contact section start -->
<div id="contact" class="contact">
	<div class="section secondary-section">
		<div class="container">
			<div class="title">
				<h1>Contact Us</h1>
				<p>Duis mollis placerat quam, eget laoreet tellus tempor eu. Quisque dapibus in purus in dignissim.</p>
			</div>
		</div>
		<div class="map-wrapper">
			<div class="map-canvas" style="background:#444"></div>
			<div class="container">
				<div class="row-fluid">
					<div class="span5 contact-form centered">
						<h3>Say Hello</h3>
						<div id="successSend" class="alert alert-success invisible">
							<strong>Well done!</strong>Your message has been sent.</div>
						<div id="errorSend" class="alert alert-error invisible">There was an error.</div>
						<form id="contact-form" action="php/mail.php">
							<div class="control-group">
								<div class="controls">
									<input class="span12" type="text" id="name" name="name" placeholder="* Your name..." />
									<div class="error left-align" id="err-name">Please enter name.</div>
								</div>
							</div>
							<div class="control-group">
								<div class="controls">
									<input class="span12" type="email" name="email" id="email" placeholder="* Your email..." />
									<div class="error left-align" id="err-email">Please enter valid email adress.</div>
								</div>
							</div>
							<div class="control-group">
								<div class="controls">
									<textarea class="span12" name="comment" id="comment" placeholder="* Comments..."></textarea>
									<div class="error left-align" id="err-comment">Please enter your comment.</div>
								</div>
							</div>
							<div class="control-group">
								<div class="controls">
									<button id="send-mail" class="message-btn">Send message</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="span9 center contact-info">
				<p>123 Fifth Avenue, 12th,Belgrade,SRB 11000</p>
				<p class="info-mail">[email protected]</p>
				<p>+11 234 567 890</p>
				<p>+11 286 543 850</p>
				<div class="title">
					<h3>We Are Social</h3>
				</div>
			</div>
			<div class="row-fluid centered">
				<ul class="social">
					<li>
						<a href="">
							<span class="icon-facebook-circled"></span>
						</a>
					</li>
					<li>
						<a href="">
							<span class="icon-twitter-circled"></span>
						</a>
					</li>
					<li>
						<a href="">
							<span class="icon-linkedin-circled"></span>
						</a>
					</li>
					<li>
						<a href="">
							<span class="icon-pinterest-circled"></span>
						</a>
					</li>
					<li>
						<a href="">
							<span class="icon-dribbble-circled"></span>
						</a>
					</li>
					<li>
						<a href="">
							<span class="icon-gplus-circled"></span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- Contact section edn -->
<!-- Footer section start -->
<div class="footer">
	<p>Copyright &copy; 2021.Company name All rights reserved.</p>
</div>
<!-- Footer section end -->
<!-- ScrollUp button start -->
<div class="scrollup">
	<a href="#">
		<i class="icon-up-open"></i>
	</a>
</div>
<!-- ScrollUp button end -->
<!-- Include javascript -->
<!-- css3-mediaqueries.js for IE8 or older -->
<!--[if lt IE 9]>
<![endif]-->
<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>



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



×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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