蓝色简洁形式pc+wap左右分栏主页个人网页模板代码



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

10 38 13



模板描述:蓝色简洁形式 pc+wap 左右分栏主页。左右分栏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。适用左右分栏主页行业。同时兼容手机端和电脑网页端。

代码结构

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Abril+Fatface%7CArapey&amp;subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/css/plugins.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">

2. 引入JS

<script type="text/javascript" src="assets/js/plugins.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>

3. HTML代码

<!-- PRELOADER -->
<div class="preloader">
	<div class="spinner"></div>
</div>
<!-- /PRELOADER -->
<!-- IMAGE CONTAINER -->
<div class="image-container">
	<div class="background-img"></div>
</div>
<!-- /IMAGE CONTAINER -->
<!-- CONTENT AREA -->
<div class="content-area">
	<!-- CONTENT AREA INNER --> 
	<div class="content-area-inner">
		<!-- INTRO -->
		<section id="intro">
			<!-- CONTAINER MID -->
			<div class="container-mid">
				<!-- ANIMATION CONTAINER -->
				<div class="animation-container animation-fade-down" data-animation-delay="0">
					<h1>I’m John Miller,</h1>
				</div>
				<!-- /ANIMATION CONTAINER -->
				<!-- ANIMATION CONTAINER -->
				<div class="animation-container animation-fade-left" data-animation-delay="300">
					<p class="subline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum lacinia molestie. Phasellus vehicula ornare odio, blandit commodo nisl dapibus vel. Sed vel fermentum elit.</p>
				</div>
				<!-- /ANIMATION CONTAINER -->
				<!-- ANIMATION CONTAINER -->
				<div class="animation-container animation-fade-up" data-animation-delay="600">
					<a href="#about" class="smooth-scroll">Learn More<i class="fa fa-angle-down" aria-hidden="true"></i></a>
				</div>
				<!-- /ANIMATION CONTAINER -->
			</div>
			<!-- /CONTAINER MID -->
		</section>
		<!-- /INTRO -->
		<!-- ABOUT -->
		<section id="about">
			<h3 class="headline scroll-animated-from-right">Why I can help you.</h3>
			<p class="scroll-animated-from-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus eros, quis imperdiet sapien. Nam sodales nec risus nec interdum. Proin lobortis, ex condimentum ultricies eleifend, nisl nunc sollicitudin odio, eget egestas est turpis et metus. In non ligula quis mauris rutrum porta.</p>
			<p class="scroll-animated-from-right">Duis consectetur massa sit amet nibh rhoncus, at pharetra ligula aliquet. Ut ac velit vestibulum, eleifend diam ut, malesuada nisi. Sed vel felis vitae diam luctus commodo. Nunc ipsum est, vulputate id orci ac, luctus consectetur sapien.</p>
		</section>
		<!-- /ABOUT -->
		<!-- SERVICE -->
		<section id="service">
			<h3 class="headline scroll-animated-from-right">What I can do for you.</h3>
			<!-- SERVICE LIST -->
			<ul class="services-list">
				<li class="scroll-animated-from-right"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>Concept & Strategy</li>
				<li class="scroll-animated-from-right"><i class="fa fa-eye" aria-hidden="true"></i>Design Direction</li>
				<li class="scroll-animated-from-right"><i class="fa fa-database" aria-hidden="true"></i>Product Design</li>
				<li class="scroll-animated-from-right"><i class="fa fa-television" aria-hidden="true"></i>Web Design</li>
				<li class="scroll-animated-from-right"><i class="fa fa-square-o" aria-hidden="true"></i>UI & UX Design</li>
			</ul>
			<!-- /SERVICE LIST -->
		</section>
		<!-- /SERVICE -->
		<!-- WORK -->
		<section id="work">
			<h3 class="headline scroll-animated-from-right">My latest Work.</h3>
			<!-- SHOWCASE -->
			<div class="showcase">
				<!-- ITEM -->
				<div class="item scroll-animated-from-right">
					<!-- LIGHTBOX LINK -->
					<a href="#" data-featherlight="#item-1-lightbox">
						<!-- INFO -->
						<div class="info">
							<!-- CONTAINER MID -->
							<div class="container-mid">
								<h5>Fashion Inc.</h5>
								<p>Web Design</p>
							</div>
							<!-- /CONTAINER MID -->
						</div>
						<!-- /INFO -->
						<div class="background-image" style="background-image: url(assets/img/work/item-1.jpg)"></div>
					</a>
					<!-- /LIGHTBOX LINK -->
					<!-- LIGHTBOX -->
					<div id="item-1-lightbox" class="work-lightbox">
						<img class="img-responsive" src="assets/img/work/item-1.jpg" alt="image">
						<h3>Fashion Inc.</h3>
						<p class="subline">Web Design</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus eros, quis imperdiet sapien. Nam sodales nec risus nec interdum. Proin lobortis, ex condimentum ultricies eleifend, nisl nunc sollicitudin odio, eget egestas est turpis et metus. In non ligula quis mauris rutrum porta.</p>
					</div>
					<!-- /LIGHTBOX -->
				</div>
				<!-- /ITEM -->
				<!-- ITEM -->
				<div class="item scroll-animated-from-right">
					<!-- LIGHTBOX LINK -->
					<a href="#" data-featherlight="#item-2-lightbox">
						<!-- INFO -->
						<div class="info">
							<!-- CONTAINER MID -->
							<div class="container-mid">
								<h5>Asimov 71</h5>
								<p>Product Design</p>
							</div>
							<!-- /CONTAINER MID -->
						</div>
						<!-- /INFO -->
						<div class="background-image" style="background-image: url(assets/img/work/item-2.jpg)"></div>
					</a>
					<!-- /LIGHTBOX LINK -->
					<!-- LIGHTBOX -->
					<div id="item-2-lightbox" class="work-lightbox">
						<img class="img-responsive" src="assets/img/work/item-2.jpg" alt="image">
						<h3>Asimov 71</h3>
						<p class="subline">Product Design</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus eros, quis imperdiet sapien. Nam sodales nec risus nec interdum. Proin lobortis, ex condimentum ultricies eleifend, nisl nunc sollicitudin odio, eget egestas est turpis et metus. In non ligula quis mauris rutrum porta.</p>
					</div>
					<!-- /LIGHTBOX -->
				</div>
				<!-- /ITEM -->
				<!-- ITEM -->
				<div class="item scroll-animated-from-right">
					<!-- LIGHTBOX LINK -->
					<a href="#" data-featherlight="#item-3-lightbox">
						<!-- INFO -->
						<div class="info">
							<!-- CONTAINER MID -->
							<div class="container-mid">
								<h5>Hardley &amp; Sons</h5>
								<p>Design Direction</p>
							</div>
							<!-- /CONTAINER MID -->
						</div>
						<!-- /INFO -->
						<div class="background-image" style="background-image: url(assets/img/work/item-3.jpg)"></div>
					</a>
					<!-- /LIGHTBOX LINK -->
					<!-- LIGHTBOX -->
					<div id="item-3-lightbox" class="work-lightbox">
						<img class="img-responsive" src="assets/img/work/item-3.jpg" alt="image">
						<h3>Hardley &amp; Sons</h3>
						<p class="subline">Design Direction</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus eros, quis imperdiet sapien. Nam sodales nec risus nec interdum. Proin lobortis, ex condimentum ultricies eleifend, nisl nunc sollicitudin odio, eget egestas est turpis et metus. In non ligula quis mauris rutrum porta.</p>
					</div>
					<!-- /LIGHTBOX -->
				</div>
				<!-- /ITEM -->
				<!-- ITEM -->
				<div class="item scroll-animated-from-right">
					<!-- LIGHTBOX LINK -->
					<a href="#" data-featherlight="#item-4-lightbox">
						<!-- INFO -->
						<div class="info">
							<!-- CONTAINER MID -->
							<div class="container-mid">
								<h5>Starnation</h5>
								<p>UI/UX DESIGN</p>
							</div>
							<!-- /CONTAINER MID -->
						</div>
						<!-- /INFO -->
						<div class="background-image" style="background-image: url(assets/img/work/item-4.jpg)"></div>
					</a>
					<!-- /LIGHTBOX LINK -->
					<!-- LIGHTBOX -->
					<div id="item-4-lightbox" class="work-lightbox">
						<img class="img-responsive" src="assets/img/work/item-4.jpg" alt="image">
						<h3>Starnation</h3>
						<p class="subline">UI/UX DESIGN</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper faucibus eros, quis imperdiet sapien. Nam sodales nec risus nec interdum. Proin lobortis, ex condimentum ultricies eleifend, nisl nunc sollicitudin odio, eget egestas est turpis et metus. In non ligula quis mauris rutrum porta.</p>
					</div>
					<!-- /LIGHTBOX -->
				</div>
				<!-- /ITEM -->
			</div>
			<!-- /SHOWCASE -->
		</section>
		<!-- /WORK -->
		<!-- CONTACT -->
		<section id="contact">
			<h3 class="headline scroll-animated-from-right">Contact Me.</h3>
			<!-- CONTACT LIST -->
			<ul class="contact-list">
				<li class="scroll-animated-from-right"><i class="fa fa-mobile" aria-hidden="true"></i>01572 115522</li>
				<li class="scroll-animated-from-right"><i class="fa fa-envelope-o" aria-hidden="true"></i>[email protected]</li>
			</ul>
			<!-- /CONTACT LIST -->
			<!-- CONTACT FORM --> 
			<form id="contact-form" action="assets/php/contact.php" method="post">
				<input id="contact-form-name" type="text" name="name" class="form-control scroll-animated-from-right" placeholder="* Your Name">
				<input id="contact-form-email" type="text" name="email" class="form-control scroll-animated-from-right" placeholder="* Your Email">
				<!-- PHANTOM ELEMENT ( HONEYPOT CAPTCHA FOR SECURITY ) -->
				<div class="fhp-input"><input id="contact-form-company" type="text" name="company" class="form-control"></div>
				<!-- /PHANTOM ELEMENT ( HONEYPOT CAPTCHA FOR SECURITY ) -->
				<textarea id="contact-form-message" name="message" class="form-control scroll-animated-from-right" placeholder="* Your Message"></textarea>
				<button type="submit" class="form-control scroll-animated-from-right">Send Mail</button>
				<div class="success-message">* The Email was Sent Successfully!</div>
			</form>
			<!-- /CONTACT FORM --> 
		</section>
		<!-- /CONTACT -->
		<!-- FOOTER -->
		<section id="footer">
			<!-- SOCIAL ICONS -->
			<ul class="social-icons scroll-animated-from-right">
				<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
				<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
				<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
				<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
			</ul>
			<!-- /SOCIAL ICONS -->
			<p class="scroll-animated-from-right">Copyright &copy; 2019.Company name All rights reserved.<a target="_blank" href="http://sc.51qianduan.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
		</section>
		<!-- /FOOTER -->
	</div>
	<!-- /CONTENT AREA INNER -->
</div>
<!-- /CONTENT AREA -->
<!-- JAVASCRIPTS -->



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


热门标签: 扁平化 宽屏全屏 黑色 蓝色 欧美风 红色 中国风 绿色 韩系 灰色 日系 简洁简约 黄色 炫酷 紫色 卡通动画 橙色 精美 实用通用 艺术创意 粉色 大气 白色 棕色 清新 彩色 绘画 其他风格 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

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

×
单次下载支付

应付金额:279

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

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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