蓝色简洁样式HTML5网站建设公司网页模板



5 16 6



模板描述:HTML5网站建设公司,蓝色简洁样式HTML5网站建设公司网页模板html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/flickity.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/font-awesome.min.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/video.min.js"></script>
<script src="js/min/bootstrap.min.js"></script>
<script src="js/min/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="js/min/retina.min.js"></script>
<script src="js/min/jquery.waypoints.min.js"></script>
<script src="js/min/flickity.pkgd.min.js"></script>
<script src="js/min/scripts-min.js"></script>

3. HTML代码

<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://www.51qianduan.com/">51前端</a> to improve your experience.</p>
<![endif]-->
<div class="container-fluid">
	<div class="row">
		<div class="header-nav-wrapper">
			<div class="logo">
				<a href="/index.html"><img src="img/synthetica-logo.png" alt="Synthetica Freebie"></a>
			</div>
			<div class="primary-nav-wrapper">
				<nav>
					<ul class="primary-nav">
						<li><a href="#intro">The collective</a></li>
						<li><a href="#team">The crew</a></li>
						<li><a href="#articles">Articles</a></li>
						<li><a href="#freebies">Freebies</a></li>
					</ul>
				</nav>
				<div class="secondary-nav-wrapper">
					<ul class="secondary-nav">
						<li class="subscribe"><a href="#get-started">Subscribe</a></li>
						<li class="search"><a href="#search" class="show-search"><i class="fa fa-search"></i></a></li>
					</ul>
				</div>
				<div class="search-wrapper">
					<ul class="search">
						<li>
							<input type="text" id="search-input" placeholder="Start typing then hit enter to search">
						</li>
						<li>
							<a href="#" class="hide-search"><i class="fa fa-close"></i></a>
						</li>
					</ul>
				</div>
			</div>
			<div class="navicon">
				<a class="nav-toggle" href="#"><span></span></a>
			</div>
		</div>
	</div>
</div>
<header class="hero">
	<div class="carousel js-flickity">
		<div class="carousel-cell" style="background-image: url(img/hero-bg-01.jpg);">
			<div class="hero-bg">
				<div class="container">
					<div class="row">
						<div class="col-md-12 text-center">
							<h1 class="wp1">Introducing, Synthetica. A blissful HTML5/CSS3 Template, free forever.</h1>
							<a href="#intro" class="btn primary wp2">Learn more</a>
						</div>
					</div>
					<div class="row">
						<div class="col-md-8 col-md-offset-2 hero-intro-text wp3">
							<p>Synthetica is a <span class="bold italic">FREE</span>, HTML5/CSS3 template available for download exclusively via Codrops. </p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="carousel-cell" style="background-image: url(img/hero-bg-02.jpg);">
			<div class="hero-bg">
				<div class="container">
					<div class="row">
						<div class="col-md-12 text-center">
							<h1 class="wp1">Get a head start, with the Synthetica Sketch file.</h1>
							<a href="#codrops/?p=26570" class="btn primary wp2">Download Sketch File</a>
						</div>
					</div>
					<div class="row">
						<div class="col-md-8 col-md-offset-2 hero-intro-text wp3">
							<p>Create your landing page in minutes with Synthetica's Sketch style guide.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="carousel-cell" style="background-image: url(img/hero-bg-03.jpg);">
			<div class="hero-bg">
				<div class="container">
					<div class="row">
						<div class="col-md-12 text-center">
							<h1 class="wp1">Download Synthetica today, it's free forever.</h1>
							<a href="#codrops/?p=26570" class="btn primary wp2">Download Template</a>
						</div>
					</div>
					<div class="row">
						<div class="col-md-8 col-md-offset-2 hero-intro-text wp3">
							<p>Available exclusively from Codrops.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class='mouse-container'>
		<a href="#intro">
			<div class='mouse'>
				<span class='scroll-down'></span>
			</div>
		</a>
	</div>
</header>
<!-- SECTION: Intro -->
<section class="collective has-padding" id="intro">
	<div class="container">
		<div class="row">
			<div class="col-md-3">
				<h4>The collective</h4>
			</div>
			<div class="col-md-9">
				<p>8-bit aesthetic kitsch 90's humblebrag. Gastropub tacos hoodie letterpress, banjo normcore trust fund hella. Kinfolk gluten-free lo-fi quinoa. Pabst kitsch ennui hoodie meggings banjo. Schlitz tacos kitsch godard before they sold out. Kale chips chillwave kickstarter photo booth cronut cold-pressed. Banjo fixie umami kombucha affogato gluten-free authentic slow-carb hashtag, hammock pour-over chambray viral VHS normcore.</p>
				<div class="video-player">
					<video id="video_synth" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="568" height="300" poster="img/video-cover.jpg" data-setup='{}'>
						<source src="#" type="video/mp4" />
						<source src="#" type="video/webm" />
						<source src="#" type="video/ogg" />
						<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="#" target="_blank">supports HTML5 video</a></p>
					</video>
				</div>
				<p>8-bit aesthetic kitsch 90's humblebrag. Gastropub tacos hoodie letterpress, banjo normcore trust fund hella. Kinfolk gluten-free lo-fi quinoa. </p>
				<p>Pabst kitsch ennui hoodie meggings banjo. Schlitz tacos kitsch godard before they sold out. Kale chips chillwave kickstarter photo booth cronut cold-pressed. Banjo fixie umami kombucha affogato gluten-free authentic slow-carb hashtag, hammock pour-over chambray viral VHS normcore.</p>
			</div>
		</div>
	</div>
</section>
<!-- END SECTION: Intro -->
<!-- SECTION: Crew -->
<section class="crew has-padding alternate-bg" id="team">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h4>The Crew</h4>
			</div>
		</div>
		<div class="row">
			<div class="col-md-3 col-sm-6 col-xs-12">
				<a href="https://www.51qianduan.com/">51前端</a>
									</li>
									<li><a href="#"><i class="fa fa-linkedin"></i></a>
									</li>
								</ul>
							</div>
						</figcaption>
					</figure>
				</article>
			</div>
			<div class="col-md-3 col-sm-6 col-xs-12">
				<a href="https://www.51qianduan.com/">51前端</a>
									</li>
									<li><a href="#"><i class="fa fa-linkedin"></i></a>
									</li>
								</ul>
							</div>
						</figcaption>
					</figure>
				</article>
			</div>
			<div class="col-md-3 col-sm-6 col-xs-12">
				<a href="https://www.51qianduan.com/">51前端</a>
									</li>
									<li><a href="#"><i class="fa fa-linkedin"></i></a>
									</li>
								</ul>
							</div>
						</figcaption>
					</figure>
				</article>
			</div>
			<div class="col-md-3 col-sm-6 col-xs-12">
				<a href="https://www.51qianduan.com/">51前端</a>
									</li>
									<li><a href="#"><i class="fa fa-linkedin"></i></a>
									</li>
								</ul>
							</div>
						</figcaption>
					</figure>
				</article>
			</div>
		</div>
		<div class="row skillset">
			<div class="col-md-6">
				<div class="bar-chart-wrapper">
					<h5 class="bar-chart-text">Experience Design <span class="push-right">90%</span></h5>
					<div class="bar-wrapper">
						<div class="bar" data-percentage="90%">
							<span></span>
						</div>
					</div>
				</div>
				<div class="bar-chart-wrapper">
					<h5 class="bar-chart-text">HTML5/CSS3 <span class="push-right">95%</span></h5>
					<div class="bar-wrapper">
						<div class="bar" data-percentage="95%">
							<span></span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="bar-chart-wrapper">
					<h5 class="bar-chart-text">Interactive Prototyping <span class="push-right">80%</span></h5>
					<div class="bar-wrapper">
						<div class="bar" data-percentage="80%">
							<span></span>
						</div>
					</div>
				</div>
				<div class="bar-chart-wrapper">
					<h5 class="bar-chart-text">Visual Design <span class="push-right">90%</span></h5>
					<div class="bar-wrapper">
						<div class="bar" data-percentage="90%">
							<span></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- END SECTION: Crew -->
<!-- SECTION: Stats -->
<div class="stats has-padding-tall">
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-sm-4 stats-container">
				<i class="icon icon-Cup"></i>
				<div class="stats-wrapper">
					<p class="stats-number" data-stop="24">24</p>
					<p class="stats-text">Awards won</p>
				</div>
			</div>
			<div class="col-md-4 col-sm-4 stats-container">
				<i class="icon icon-Book"></i>
				<div class="stats-wrapper">
					<p class="stats-number" data-stop="341">341</p>
					<p class="stats-text">Articles</p>
				</div>
			</div>
			<div class="col-md-4 col-sm-4 stats-container">
				<i class="icon icon-Pen"></i>
				<div class="stats-wrapper">
					<p class="stats-number" data-stop="43">43</p>
					<p class="stats-text">Freebies</p>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END SECTION: Stats -->
<!-- SECTION: Articles -->
<section class="latest-articles has-padding alternate-bg" id="articles">
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-sm-4">
				<h4>Latest Articles</h4>
			</div>
			<div class="col-md-8 col-sm-8 sort">
				<h5>Sort by</h5>
				<select name="article-sort" id="inputArticle-Sort" class="">
					<option value="">Experience Design</option>
					<option value="">Visual Design</option>
					<option value="">UI Patterns</option>
					<option value="">Product Design</option>
				</select>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4">
				<article class="article-post">
					<a href="#">
						<div class="article-image has-overlay" style="background-image: url(img/article-01.jpg)">
							<span class="featured-tag">Featured</span>
						</div>
						<figure>
							<figcaption>
								<h2>8 solid tips when working with front-end developers</h2>
								<p>A posuere donec senectus suspendisse bibendum magna ridiculus a justo orci parturient suspendisse ad rhoncus...</p>
							</figcaption>
						</figure>
					</a>
					<ul class="article-footer">
						<li class="article-category">
							<a href="#">Product</a>
						</li>
						<li class="article-comments">
							<span><i class="fa fa-comments"></i> 51</span>
						</li>
					</ul>
				</article>
			</div>
			<div class="col-md-4">
				<article class="article-post">
					<a href="#">
						<div class="article-image has-overlay" style="background-image: url(img/article-02.jpg)">
						</div>
						<figure>
							<figcaption>
								<h2>The 10 best traits of a awesome design leaders</h2>
								<p>A posuere donec senectus suspendisse bibendum magna ridiculus a justo orci parturient suspendisse ad rhoncus...</p>
							</figcaption>
						</figure>
					</a>
					<ul class="article-footer">
						<li class="article-category">
							<a href="#">Teams</a>
						</li>
						<li class="article-comments">
							<span><i class="fa fa-comments"></i> 42</span>
						</li>
					</ul>
				</article>
			</div>
			<div class="col-md-4">
				<article class="article-post">
					<a href="#">
						<div class="article-image has-overlay" style="background-image: url(img/article-03.jpg)">
						</div>
						<figure>
							<figcaption>
								<h2>How to design well collaboratively with an agile product team</h2>
								<p>A posuere donec senectus suspendisse bibendum magna ridiculus a justo orci parturient suspendisse ad rhoncus...</p>
							</figcaption>
						</figure>
					</a>
					<ul class="article-footer">
						<li class="article-category">
							<a href="#">Teams</a>
						</li>
						<li class="article-comments">
							<span><i class="fa fa-comments"></i> 58</span>
						</li>
					</ul>
				</article>
			</div>
		</div>
		<div class="row has-top-margin">
			<div class="col-md-4">
				<article class="article-post">
					<a href="#">
						<div class="article-image has-overlay" style="background-image: url(img/article-04.jpg)">
						</div>
						<figure>
							<figcaption>
								<h2>The essentials of modern interaction design (mobile + tablet)</h2>
								<p>A posuere donec senectus suspendisse bibendum magna ridiculus a justo orci parturient suspendisse ad rhoncus...</p>
							</figcaption>
						</figure>
					</a>
					<ul class="article-footer">
						<li class="article-category">
							<a href="#">UX Design</a>
						</li>
						<li class="article-comments">
							<span><i class="fa fa-comments"></i> 14</span>
						</li>
					</ul>
				</article>
			</div>
			<div class="col-md-4">
				<article class="article-post">
					<a href="#">
						<div class="article-image has-overlay" style="background-image: url(img/article-05.jpg)">
						</div>
						<figure>
							<figcaption>
								<h2>Overcoming barriers encountered in the pitch process (part 1)</h2>
								<p>A posuere donec senectus suspendisse bibendum magna ridiculus a justo orci parturient suspendisse ad rhoncus...</p>
							</figcaption>
						</figure>
					</a>
					<ul class="article-footer">
						<li class="article-category">
							<a href="#">Product</a>
						</li>
						<li class="article-comments">
							<span><i class="fa fa-comments"></i> 55</span>
						</li>
					</ul>
				</article>
			</div>
			<div class="col-md-4">
				<article class="article-post">
					<a href="#">
						<div class="article-image has-overlay" style="background-image: url(img/article-06.jpg)">
						</div>
						<figure>
							<figcaption>
								<h2>10 things we've learnt about our users (Case Study)</h2>
								<p>A posuere donec senectus suspendisse bibendum magna ridiculus a justo orci parturient suspendisse ad rhoncus...</p>
							</figcaption>
						</figure>
					</a>
					<ul class="article-footer">
						<li class="article-category">
							<a href="#">UX Design</a>
						</li>
						<li class="article-comments">
							<span><i class="fa fa-comments"></i> 20</span>
						</li>
					</ul>
				</article>
			</div>
		</div>
		<div class="row is-centered">
			<a href="https://www.51qianduan.com/">51前端</a>
		</div>
	</div>
</section>
<!-- END SECTION: Articles -->
<!-- SECTION: Freebies -->
<section class="freebies has-padding" id="freebies">
	<div class="container freebies-intro">
		<div class="row">
			<div class="col-md-12">
				<h4>Freshest Freebies</h4>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 content-left">
				<p>A posuere donec senectus suspendisse bibendum magna ridiculus a justo orci parturient suspendisse ad rhoncus cursus ut parturient viverra elit aliquam ultrices est sem. Tellus nam ad fermentum ac enim est duis facilisis congue a lacus adipiscing consequat risus consectetur scelerisque integer suspendisse a mus integer elit.</p>
			</div>
			<div class="col-md-6 content-right">
				<p>A posuere donec senectus suspendisse bibendum magna ridiculus a justo orci parturient suspendisse ad rhoncus cursus ut parturient viverra elit aliquam ultrices est sem. Tellus nam ad fermentum ac enim est duis facilisis congue a lacus adipiscing consequat risus consectetur scelerisque integer suspendisse a mus integer elit.</p>
			</div>
		</div>
	</div>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-6 no-padding">
				<article class="item wp5">
					<figure class="has-overlay">
						<figcaption class="overlay">
							<div class="like-share-wrapper">
								<ul>
									<li>
										<div class="like-button-wrapper">
											<a href="#" class="like_button"><i class="like-counter fa fa-heart-o"></i></a>
											<span class="count">0</span>
										</div>
									</li>
								</ul>
							</div>
							<div class="freebie-content">
								<span class="date">03/01/2016</span>
								<h2>Sedna HTML CSS Template</h2>
								<div class="group">
									<a href="https://www.51qianduan.com/">51前端</a>
								</div>
							</div>
						</figcaption>
						<img src="img/sedna-freebie.jpg" alt="Sedna Freebie">
					</figure>
				</article>
			</div>
			<div class="col-md-6 no-padding">
				<article class="item wp6">
					<figure class="has-overlay">
						<figcaption class="overlay">
							<div class="like-share-wrapper">
								<ul>
									<li>
										<div class="like-button-wrapper">
											<a href="#" class="like_button"><i class="like-counter fa fa-heart-o"></i></a>
											<span class="count">0</span>
										</div>
									</li>
								</ul>
							</div>
							<div class="freebie-content">
								<span class="date">03/01/2016</span>
								<h2>Land.io Sketch Template</h2>
								<div class="group">
									<a href="https://www.51qianduan.com/">51前端</a>
								</div>
							</div>
						</figcaption>
						<img src="img/landio-freebie.jpg" alt="Land.io Freebie">
					</figure>
				</article>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 no-padding">
				<article class="item wp7">
					<figure class="has-overlay">
						<figcaption class="overlay">
							<div class="like-share-wrapper">
								<ul>
									<li>
										<div class="like-button-wrapper">
											<a href="#" class="like_button"><i class="like-counter fa fa-heart-o"></i></a>
											<span class="count">0</span>
										</div>
									</li>
								</ul>
							</div>
							<div class="freebie-content">
								<span class="date">03/01/2016</span>
								<h2>Synthetica HTML5/CSS3 Template</h2>
								<div class="group">
									<a href="https://www.51qianduan.com/">51前端</a>
								</div>
							</div>
						</figcaption>
						<img src="img/freebie-03.jpg" alt="Synthetica Freebie">
					</figure>
				</article>
			</div>
			<div class="col-md-6 no-padding">
				<article class="item wp8">
					<figure class="has-overlay">
						<figcaption class="overlay">
							<div class="like-share-wrapper">
								<ul>
									<li>
										<div class="like-button-wrapper">
											<a href="#" class="like_button"><i class="like-counter fa fa-heart-o"></i></a>
											<span class="count">0</span>
										</div>
									</li>
								</ul>
							</div>
							<div class="freebie-content">
								<span class="date">03/01/2016</span>
								<h2>Free logo concepts by Koby West</h2>
								<div class="group">
									<a href="https://www.51qianduan.com/">51前端</a>
								</div>
							</div>
						</figcaption>
						<img src="img/freebie-04.jpg" alt="Synthetica">
					</figure>
				</article>
			</div>
			<div class="is-centered">
				<a href="https://www.51qianduan.com/">51前端</a>
			</div>
		</div>
	</div>
</section>
<!-- END SECTION: Freebies -->
<!-- SECTION: Get started -->
<section class="get-started has-padding text-center" id="get-started">
	<div class="container">
		<div class="row">
			<div class="col-md-12 wp4">
				<h2>Get started now. Download Synthetica <a href="#codrops/?p=26570">FREE</a>, via Codrops.</h2>
				<a href="https://www.51qianduan.com/">51前端</a>
			</div>
		</div>
	</div>
</section>
<!-- END SECTION: Get started -->
<!-- SECTION: Footer -->
<footer class="has-padding footer-bg">
	<div class="container">
		<div class="row">
			<div class="col-md-4 footer-branding">
				<img class="footer-branding-logo" src="img/synthetica-logo.png" alt="Synthetica freebie html5 css3 template logo">
				<p>A free website template created exclusively for <a href="#codrops/"><em>Codrops</em></a></p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12 footer-nav">
				<ul class="footer-primary-nav">
					<li><a href="#intro">The Collective</a></li>
					<li><a href="#team">The Crew</a></li>
					<li><a href="#articles">Articles</a></li>
					<li><a href="#freebies">Freebies</a></li>
					<li><a href="#">Subscribe</a></li>
				</ul>
				<ul class="footer-share">
					<li><a href="#codrops/licensing/">Licence</a></li>
					<li><a href="#" class="share-trigger"><i class="fa fa-share"></i>Share</a></li>
				</ul>
				<div class="share-dropdown">
					<ul>
						<li><a href="#" class="share-twitter"><i class="fa fa-twitter"></i></a></li>
						<li><a href="#" class="share-facebook"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#" class="share-linkedin"><i class="fa fa-linkedin"></i></a></li>
					</ul>
				</div>
				<ul class="footer-secondary-nav">
					<li><p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p></li>
				</ul>
			</div>
		</div>
	</div>
</footer>
<!-- END SECTION: Footer -->
<!-- JS CDNs -->
<!-- jQuery local fallback -->
<script>
window.jQuery || document.write('<script src="js/min/jquery-1.11.2.min.js"><\/script>')
</script>
<!-- JS Locals -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 网络科技 科技公司 网络科技公司 IT公司 网络公司 软件公司 IT软件公司 蓝色 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 大气 霸气

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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