紫色欧美形式html项目案例展示网页模板代码



5 16 6



模板描述:html项目案例展示,紫色欧美形式html项目案例展示网页模板代码html模板下载

代码结构

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,700,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/responsive.css">

2. 引入JS

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/jquery.scrolly.js"></script>
<script src="js/lightbox.min.js"></script>
<script src="js/jquery.easing.1.3.min.js"></script>
<script src="js/main.js"></script>

3. HTML代码

<div class="header-area">
	<div class="container">
		<div class="row">
			<div class="col-md-3">
				<div class="logo">
					<h1><a href="">AKA</a></h1>
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
					</div>                         
				</div>
			</div>
			<div class="col-md-9">
				<div class="mainmenu">
					<div class="navbar-collapse collapse">
						<ul class="nav navbar-nav navbar-right">
							<li class="active"><a href="#home">Home</a></li>
							<li><a href="#services">Our Services</a></li>
							<li><a href="#portfolio">Our Portfolio</a></li>
							<li><a href="#pricing">Pricing</a></li>
							<li><a href="#contact-us">Contact us</a></li>
						</ul>
					</div>                         
				</div>
			</div>
		</div>
	</div>
</div> <!-- End header area -->
<div id="home" class="slider-area">
	<div data-velocity="-.2" class="overlay-bg slide-bg"></div>
	<div class="container">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<div id="slide-list" class="carousel slide" data-ride="carousel">
					<div class="carousel-inner" role="listbox">
						<div class="item active">
							<div class="slide-text-wrapper">
								<div class="slide-text">
									<h2>We are awesome</h2>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis nemo quasi quidem quos, aspernatur vel beatae deleniti eveniet tempora sunt ipsum eos debitis blanditiis vero! Optio cumque, laudantium hic aliquid!</p>
									<a href="" class="readmore">Learn More</a>
								</div>
							</div>
						</div>
						<div class="item">
							<div class="slide-text-wrapper">
								<div class="slide-text">
									<h2>We are creative</h2>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis nemo quasi quidem quos, aspernatur vel beatae deleniti eveniet tempora sunt ipsum eos debitis blanditiis vero! Optio cumque, laudantium hic aliquid!</p>
									<a href="" class="readmore">Learn More</a>
								</div>
							</div>
						</div>
					</div>
					  <ol class="carousel-indicators">
						<li data-target="#slide-list" data-slide-to="0" class="active"></li>
						<li data-target="#slide-list" data-slide-to="1"></li>
					  </ol>
				</div>                     
			</div>
		</div>
	</div>
</div> <!-- End slider area -->
<div id="services" class="promotion-area section-padding">
	<div class="container">
		<div class="row">
			<div class="col-sm-4">
				<div class="single-promotion">
					<div class="icon-holder">
						<i class="fa fa-connectdevelop"></i>
					</div>
					<h2><a href="">Website Design</a></h2>
					<p>Lorem ipsum dolor sit amet, dicta albucius ne. Nostro gubergren in ius, ea nam vocent electram. An verear efficiantur usu</p>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="single-promotion">
					<div class="icon-holder">
						<i class="fa fa-paint-brush"></i>
					</div>
					<h2><a href="">Graphic Design</a></h2>
					<p>Lorem ipsum dolor sit amet, dicta albucius ne. Nostro gubergren in ius, ea nam vocent electram.</p>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="single-promotion">
					<div class="icon-holder">
						<i class="fa fa-area-chart "></i>
					</div>
					<h2><a href="">Monthly Reporting</a></h2>
					<p>Lorem ipsum dolor sit amet, dicta albucius ne. Nostro gubergren in ius, ea nam vocent electram. An verear efficiantur usu</p>
				</div>
			</div>
		</div>
	</div>
</div> <!-- End services area -->
<div id="portfolio" class="portfolio-area section-padding">
	<div class="container">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<div class="page-title">
					<h2>Our Portfolio</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, tempore.</p>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">   
				<div class="portfolio-menu">
					<ul>
						<li class="active" data-filter="*">All</li>
						<li data-filter=".web-design">Web Design</li>
						<li data-filter=".graphic">Graphic</li>
						<li data-filter=".photography">photography</li>
						<li data-filter=".motion-video">motion video</li>
					</ul>
				</div>  
				<div class="portfolio-items">
					<div class="single-portfolio web-design">
						<img class="img-responsive portfolio-thumb" src="img/portfolio-1.jpg" alt="">
						<div class="portfolio-detail">
							<h2>Business card</h2>
							<div class="portfolio-link-wrap">
							<a href="https://www.51qianduan.com/">51前端</a>
							<a class="portfolio-link" href=""><i class="fa fa-link"></i></a>
							</div>
						</div>
					</div>
					<div class="single-portfolio graphic">
						<img class="img-responsive portfolio-thumb" src="img/portfolio-2.jpg" alt="">
						<div class="portfolio-detail">
							<h2>Logo design</h2>
							<div class="portfolio-link-wrap">
							<a href="https://www.51qianduan.com/">51前端</a>
							<a class="portfolio-link" href=""><i class="fa fa-link"></i></a>
							</div>
						</div>                           
					</div>
					<div class="single-portfolio web-design">
						<img class="img-responsive portfolio-thumb" src="img/portfolio-3.jpg" alt="">
						<div class="portfolio-detail">
							<h2>DVD cover</h2>
							<div class="portfolio-link-wrap">
							<a href="https://www.51qianduan.com/">51前端</a>
							<a class="portfolio-link" href=""><i class="fa fa-link"></i></a>
							</div>
						</div>                           
					</div>
					<div class="single-portfolio graphic">
						<img class="img-responsive portfolio-thumb" src="img/portfolio-4.jpg" alt="">
						<div class="portfolio-detail">
							<h2>Sea food logo</h2>
							<div class="portfolio-link-wrap">
							<a href="https://www.51qianduan.com/">51前端</a>
							<a class="portfolio-link" href=""><i class="fa fa-link"></i></a>
							</div>
						</div>                           
					</div>
					<div class="single-portfolio photography">
						<img class="img-responsive portfolio-thumb" src="img/portfolio-5.jpg" alt="">
						<div class="portfolio-detail">
							<h2>PSD Template</h2>
							<div class="portfolio-link-wrap">
							<a href="https://www.51qianduan.com/">51前端</a>
							<a class="portfolio-link" href=""><i class="fa fa-link"></i></a>
							</div>
						</div>                            
					</div>
					<div class="single-portfolio motion-video">
						<img class="img-responsive portfolio-thumb" src="img/portfolio-6.jpg" alt="">
						<div class="portfolio-detail">
							<h2>Print Design</h2>
							<div class="portfolio-link-wrap">
							<a href="https://www.51qianduan.com/">51前端</a>
							<a class="portfolio-link" href=""><i class="fa fa-link"></i></a>
							</div>
						</div>                            
					</div>
					<div class="single-portfolio photography">
						<img class="img-responsive portfolio-thumb" src="img/portfolio-7.jpg" alt="">
						<div class="portfolio-detail">
							<h2>Logo design</h2>
							<div class="portfolio-link-wrap">
							<a href="https://www.51qianduan.com/">51前端</a>
							<a class="portfolio-link" href=""><i class="fa fa-link"></i></a>
							</div>
						</div>                           
					</div>
					<div class="single-portfolio web-design">
						<img class="img-responsive portfolio-thumb" src="img/portfolio-8.jpg" alt="">
						<div class="portfolio-detail">
							<h2>Business card</h2>
							<div class="portfolio-link-wrap">
							<a href="https://www.51qianduan.com/">51前端</a>
							<a class="portfolio-link" href=""><i class="fa fa-link"></i></a>
							</div>
						</div>                            
					</div>
					<div class="single-portfolio graphic">
						<img class="img-responsive portfolio-thumb" src="img/portfolio-9.jpg" alt="">
						<div class="portfolio-detail">
							<h2>Logo design</h2>
							<div class="portfolio-link-wrap">
							<a href="https://www.51qianduan.com/">51前端</a>
							<a class="portfolio-link" href=""><i class="fa fa-link"></i></a>
							</div>
						</div>                           
					</div>
					<div class="single-portfolio web-design">
						<img class="img-responsive portfolio-thumb" src="img/portfolio-10.jpg" alt="">
						<div class="portfolio-detail">
							<h2>Font design</h2>
							<div class="portfolio-link-wrap">
							<a href="https://www.51qianduan.com/">51前端</a>
							<a class="portfolio-link" href=""><i class="fa fa-link"></i></a>
							</div>
						</div>                            
					</div>
					<div class="single-portfolio motion-video">
						<img class="img-responsive portfolio-thumb" src="img/portfolio-11.jpg" alt="">
						<div class="portfolio-detail">
							<h2>Website template</h2>
							<div class="portfolio-link-wrap">
							<a href="https://www.51qianduan.com/">51前端</a>
							<a class="portfolio-link" href=""><i class="fa fa-link"></i></a>
							</div>
						</div>                            
					</div>
					<div class="single-portfolio motion-video">
						<img class="img-responsive portfolio-thumb" src="img/portfolio-12.jpg" alt="">
						<div class="portfolio-detail">
							<h2>Another design</h2>
							<div class="portfolio-link-wrap">
							<a href="https://www.51qianduan.com/">51前端</a>
							<a class="portfolio-link" href=""><i class="fa fa-link"></i></a>
							</div>
						</div>                            
					</div>
				</div>                                                  
			</div>
		</div>  
	</div>
</div> <!-- End portfolio area -->
<div id="pricing" class="pricing-area section-padding">
	<div data-velocity="-.2" class="overlay-bg slide-bg"></div>
	<div class="container">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<div class="page-title">
					<h2>Pricing</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, tempore.</p>
				</div>
			</div>
		</div>           
		<div class="row">
			<div class="col-md-12">
				<div class="single-pricing">
					<div class="pricing-header">
						<h2>Basic Plan</h2>
						<h3>$150</h3>
						<p>Per month</p>
					</div>
					<div class="pricing-content">
						<ul>
							<li>50GB File Storage</li>
							<li>Secure Onlin Transfer</li>
							<li>5 User Access </li>
							<li>30 Projects Per Month </li>
							<li>24/7 Customer Service</li>
						</ul>
					</div>
					<div class="pricing-footer">
						<a href="" class="btn btn-filled">GET STARTED</a>
						<p>30 DAYS FREE TRIAL</p>
					</div>
				</div> <!-- End single pricing -->	
				<div class="single-pricing featured">
					<div class="pricing-header">
						<h2>Advance Plan</h2>
						<h3>$250</h3>
						<p>Per month</p>
					</div>
					<div class="pricing-content">
						<ul>
							<li>100GB File Storage</li>
							<li>Secure Onlin Transfer</li>
							<li>10 User Access </li>
							<li>50 Projects Per Month </li>
							<li>24/7 Customer Service</li>
						</ul>
					</div>
					<div class="pricing-footer">
						<a href="" class="btn btn-filled">GET STARTED</a>
						<p>30 DAYS FREE TRIAL</p>
					</div>
				</div> <!-- End single pricing -->	
				<div class="single-pricing">
					<div class="pricing-header">
						<h2>Ultra Plan</h2>
						<h3>$350</h3>
						<p>Per month</p>
					</div>
					<div class="pricing-content">
						<ul>
							<li>200 GB File Storage</li>
							<li>Secure Onlin Transfer</li>
							<li>30 User Access </li>
							<li>100 Projects Per Month </li>
							<li>24/7 Customer Service</li>
						</ul>
					</div>
					<div class="pricing-footer">
						<a href="" class="btn btn-filled">GET STARTED</a>
						<p>30 DAYS FREE TRIAL</p>
					</div>
				</div> <!-- End single pricing -->	
			</div>
		</div>
	</div>
</div> <!-- End pricing area -->
<div id="contact-us" class="contact-area section-padding">
	<div class="container">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<div class="page-title">
					<h2>Get in touch</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, tempore.</p>
				</div>
			</div>
		</div>            
		<div class="row">
			<div class="col-md-8">
				<div class="form-content">
					<h2>Contact with us</h2>
					<form id="contact" name="contact" method="post">  
						<div class="row">
							<div class="col-md-6">
								<p><label for="name">Name</label><input placeholder="Type your name" type="text" name="name" id="name" size="30" value="" required/></p>
							</div>
							<div class="col-md-6">
								<p><label for="name">Email</label><input placeholder="Type your email address" type="email" name="email" id="email" size="30" value="" required/></p>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<p><label for="message">Message</label><textarea placeholder="Your message" name="message" id="message" required></textarea></p>
								<div class="submit-wrapper">
									<p><input id="submit" type="submit" name="submit" value="Send" />  </p>
								</div>
							</div>
						</div>
					</form>	
				</div>                     
			</div>
			<div class="col-md-4">
				<div class="our-address">
					<h2>Our address</h2>
					<div class="single-address">
						<i class="fa fa-home"></i>
						<p>27 Indira road<br/>
						Farmgate, Dhaka, 1200<br/>
						Bangladesh</p>
					</div>
					<div class="single-address">
						<i class="fa fa-envelope"></i>
						<p><a href="https://www.51qianduan.com/">51前端</a></p>
					</div>
					<div class="single-address">
						<i class="fa fa-phone"></i>
						<p>+880 1913 421375</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div> <!-- End contact area -->
<footer class="footer-copyright">
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<div class="copyright-text">
					<p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p> 
				</div>
			</div>
			<div class="col-md-4">
				<div class="social-footer text-right">
					<a href=""><i class="fa fa-facebook"></i></a>
					<a href=""><i class="fa fa-twitter"></i></a>
					<a href=""><i class="fa fa-pinterest"></i></a>
					<a href=""><i class="fa fa-linkedin"></i></a>
					<a href=""><i class="fa fa-google-plus"></i></a>
				</div>
			</div>
		</div>
	</div>            
</footer> <!-- End footer bottom -->  
<!-- Latest jQuery form server -->
<!-- Bootstrap JS form CDN -->
<!-- jQuery sticky menu -->
<!-- jQuery Isotope -->
<!-- jQuery Parallax -->
<!-- jQuery lightbox -->
<!-- jQuery easing -->
<!-- Main Script -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 紫色 宽屏 全屏 满屏 文化传媒 文化 传媒

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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