紫色簡潔風格的花卉栽培企業網站源碼下載



5 19 7



模板描述:紫色簡潔風格 花卉栽培 企業網站,紫色簡潔風格的花卉栽培企業網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900&amp;subset=latin-ext" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>

2. 引入JS

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

3. HTML代碼

<!-- header -->
	<div class="header">
	<div class="w3_agileits_nav">
	<div class="container">
				<div class="w3ls-nav">
					<nav class="navbar navbar-default">
							<div class="navbar-header">
								<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
							</div>
						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav">
								<li><a class="active" href="index.html">Home</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="services.html" >Services</a></li>
								<li><a href="gallery.html" >Gallery</a></li>	
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">Short Codes <b class="caret"></b></a>
										<ul class="dropdown-menu agile_short_dropdown">
											<li><a href="icons.html">Icons</a></li>
										<li><a href="typography.html">Typography</a></li>
										</ul>
								</li>
								<li><a href="contact.html">Contact</a></li>
							</ul>
							<div class="clearfix"> </div>							
						</div>	
					</nav>		
			</div>
			</div>
		</div>
		<div class="container">
			<div class="agile_header_grid">
				<div class="w3_agile_logo">
					<h1><a href="index.html">Floriculture</a></h1>
				</div>
				<div class="agileits_w3layouts_sign_in">
					<ul>
						<li><div class="agileinfo_search">
								<form action="#" method="post">
									<input type="text" name="Search" placeholder="Type text here..." required="">
									<input type="submit" value=" ">
								</form>
							</div></li>
							<li><a href="#small-dialog" class="play-icon popup-with-zoom-anim">Sign In</a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //header -->
<!-- pop-up-box -->
	<div id="small-dialog" class="mfp-hide w3ls_small_dialog wthree_pop">
		<h3 class="agileinfo_sign">Sign In</h3>	
		<div class="agileits_signin_form">
			<form action="#" method="post">
				<input type="email" name="email" placeholder="Your Email" required="">
				<input type="password" name="password" placeholder="Password" required="">
				<div class="agile_remember">
					<div class="agile_remember_left">
						<div class="check">
							<label class="checkbox"><input type="checkbox" name="checkbox"><i> </i>remember me</label>
						</div>
					</div>
					<div class="agile_remember_right">
						<a href="#">Forgot Password?</a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<input type="submit" value="SIGN IN">
				<p>Don't have an account <a href="#small-dialog1" class="play-icon popup-with-zoom-anim">Sign Up</a></p>
				<div class="w3agile_social_icons">
					<ul>
						<li class="wthree_follow">Follow us on :</li>
						<li><a href="#" class="w3_agile_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
						<li><a href="#" class="agile_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
						<li><a href="#" class="w3_agile_dribble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
					</ul>	
				</div>
			</form>
		</div>
	</div>
	<div id="small-dialog1" class="mfp-hide w3ls_small_dialog wthree_pop">
		<h3 class="agileinfo_sign">Sign Up</h3>	
		<div class="agileits_signin_form">
			<form action="#" method="post">
				<input type="text" name="name" placeholder="First Name" required="">
				<input type="text" name="name" placeholder="Last Name" required="">
				<input type="email" name="email" placeholder="Your Email" required="">
				<input type="password" name="password" placeholder="Password" required="">
				<input type="password" name="password" placeholder="Confirm Password" required="">
				<input type="submit" value="SIGN UP">
				<p>Already a member <a href="#small-dialog" class="play-icon popup-with-zoom-anim">Sign In</a></p>
				<div class="w3agile_social_icons">
					<ul>
						<li class="wthree_follow">Follow us on :</li>
						<li><a href="#" class="w3_agile_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
						<li><a href="#" class="agile_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
						<li><a href="#" class="w3_agile_dribble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
					</ul>	
				</div>
			</form>
		</div>
	</div>
<!-- //pop-up-box -->	
<script>
	$(document).ready(function() {
	$('.popup-with-zoom-anim').magnificPopup({
		type: 'inline',
		fixedContentPos: false,
		fixedBgPos: true,
		overflowY: 'auto',
		closeBtnInside: true,
		preloader: false,
		midClick: true,
		removalDelay: 300,
		mainClass: 'my-mfp-zoom-in'
	});
	});
</script>
<!-- banner -->	
	<div class="banner">
		<div class="container">
			<h3>Flowers come in a variety of colours, with shades ranging </h3>
			<div class="wthree_banner_grids">
				<div class="col-md-3 wthree_banner_grid">
					<span class="glyphicon glyphicon-grain" aria-hidden="true"></span>
					<h4>Corporis</h4>
				</div>
				<div class="col-md-3 wthree_banner_grid">
					<span class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></span>
					<h4>Suscipit</h4>
				</div>
				<div class="col-md-3 wthree_banner_grid">
					<span class="glyphicon glyphicon-apple" aria-hidden="true"></span>
					<h4>Laboriosam</h4>
				</div>
				<div class="col-md-3 wthree_banner_grid">
					<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
					<h4>Voluptate</h4>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="agileits_more">
				<ul>
					<li><a href="#" class="hvr-icon-hang" data-toggle="modal" data-target="#myModal">Read More</a></li>
				</ul>
			</div>
		</div>
	</div>
<!-- //banner -->
<!-- bootstrap-pop-up -->
	<div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					Floriculture
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
				</div>
				<section>
					<div class="modal-body">
						<img src="images/g9.jpg" alt=" " class="img-responsive" />
						<p>Ut enim ad minima veniam, quis nostrum 
							exercitationem ullam corporis suscipit laboriosam, 
							nisi ut aliquid ex ea commodi consequatur? Quis autem 
							vel eum iure reprehenderit qui in ea voluptate velit 
							esse quam nihil molestiae consequatur, vel illum qui 
							dolorem eum fugiat quo voluptas nulla pariatur.
							<i>" Quis autem vel eum iure reprehenderit qui in ea voluptate velit 
								esse quam nihil molestiae consequatur.</i></p>
					</div>
				</section>
			</div>
		</div>
	</div>
<!-- //bootstrap-pop-up -->
<div class="about">
		<div class="container">
			<div class="col-md-4 agileits_about_left">
				<h3 class="w3l_head">About Us</h3>
				<p class="w3ls_head_para w3ls_head_para1">quam ultrices</p>
			</div>
			<div class="col-md-8 agileits_about_right">
				<p>Duis turpis arcu, dictum eu tincidunt id, congue vel urna. Quisque posuere, 
					ipsum eu faucibus cursus, ex tortor elementum leo, eget varius lorem quam a nisl. 
					Mauris ut enim sed tortor auctor luctus at vitae est. Nunc erat odio, blandit 
					eget nisl ac, laoreet condimentum elit. <i>Duis dignissim auctor rhoncus. 
					Curabitur diam lorem, ultricies eu pellentesque sed, elementum sodales urna. 
					Pellentesque molestie maximus nisl at ultrices.</i></p>
				<ul>
					<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Quisque posuere</li>
					<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Nunc erat odio</li>
					<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Duis dignissim</li>
					<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Curabitur diam</li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!--services-->
	<div class="services">
		<div class="container">
				<h3 class="w3l_head w3l_head1">Services</h3>
			<p class="w3ls_head_para w3ls_head_para1">quam ultrices</p>
			<div class="service-row">
				<div class="col-md-4 col-sm-4 service-gds service-gd1">
					<div class="bott-img">
						<div class="icon-holder">
							<i class="fa fa-scissors" aria-hidden="true"></i>	
						</div>
						<h4 class="mission">Accusantium</h4>
						<p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse scelerisque a aenean hac montes.</p>
					</div>
				</div>
				<div class="col-md-4 col-sm-4 service-gds service-gd2">
					<div class="bott-img">
						<div class="icon-holder">
							<i class="fa fa-link" aria-hidden="true"></i>
						</div>
						<h4 class="mission">Consequatur</h4>
						<p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse scelerisque a aenean hac montes.</p>
					</div>
				</div>
				<div class="col-md-4 col-sm-4 service-gds service-gd3">
					<div class="bott-img">
						<div class="icon-holder">
							<i class="fa fa-modx" aria-hidden="true"></i>
						</div>
						<h4 class="mission">Reprehenderit</h4>
						<p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse scelerisque a aenean hac montes.</p>
					</div>
				</div>
				<div class="col-md-4 col-sm-4 service-gds service-gd4">
					<div class="bott-img">
						<div class="icon-holder">
							<i class="fa fa-arrows" aria-hidden="true"></i>
						</div>
						<h4 class="mission">Miruestno</h4>
						<p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse scelerisque a aenean hac montes.</p>
					</div>
				</div>
				<div class="col-md-4 col-sm-4 service-gds service-gd5">
					<div class="bott-img">
						<div class="icon-holder">
							<i class="fa fa-cog" aria-hidden="true"></i>
						</div>
						<h4 class="mission">Claritasest </h4>
						<p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse scelerisque a aenean hac montes.</p>
					</div>
				</div>
				<div class="col-md-4 col-sm-4 service-gds service-gd6">
					<div class="bott-img">
						<div class="icon-holder">
							<i class="fa fa-random" aria-hidden="true"></i>
						</div>
						<h4 class="mission">Processus</h4>
						<p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse scelerisque a aenean hac montes.</p>
					</div>
				</div>
				<div class="clearfix"> </div>				
			</div>
		</div>
	</div>
	<!--//services-->
	<!-- features -->
<div class="features">
		<div class="container">
				<h3 class="w3l_head w3l_head1">Features</h3>
			<p class="w3ls_head_para w3ls_head_para1">quam ultrices</p>
				<div class="w3_agile_features_grids">
				<div class="col-md-3 w3_agile_features_grid">
					<div class="ih-item circle effect1 agile_features_grid">
						<div class="spinner"></div>
						<div class="img"><img src="images/1.jpg" alt=" " class="img-responsive"></div>
					</div>
					<fieldset>
						<legend>Pharetra</legend>
							Donec ullamcorper ipsum quis turpis scelerisque, efficitur scelerisque urna pharetra.
					</fieldset>
				</div>
				<div class="col-md-3 w3_agile_features_grid">
					<div class="ih-item circle effect1 agile_features_grid">
						<div class="spinner"></div>
						<div class="img"><img src="images/4.jpg" alt=" " class="img-responsive"></div>
					</div>
					<fieldset>
						<legend>Efficitur</legend>
							Donec ullamcorper ipsum quis turpis scelerisque, efficitur scelerisque urna pharetra.
					</fieldset>
				</div>
				<div class="col-md-3 w3_agile_features_grid">
					<div class="ih-item circle effect1 agile_features_grid">
						<div class="spinner"></div>
						<div class="img"><img src="images/2.jpg" alt=" " class="img-responsive"></div>
					</div>
					<fieldset>
						<legend>Scelerisque</legend>
							Donec ullamcorper ipsum quis turpis scelerisque, efficitur scelerisque urna pharetra.
					</fieldset>
				</div>
				<div class="col-md-3 w3_agile_features_grid">
					<div class="ih-item circle effect1 agile_features_grid">
						<div class="spinner"></div>
						<div class="img"><img src="images/3.jpg" alt=" " class="img-responsive"></div>
					</div>
					<fieldset>
						<legend>Ullamcorper</legend>
							Donec ullamcorper ipsum quis turpis scelerisque, efficitur scelerisque urna pharetra.
					</fieldset>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //features -->
<!-- footer -->
	<div class="footer">
		<div class="container">
			<h2><a href="index.html">Floriculture</a></h2>
			<div class="agileits_w3layouts_nav_right">
					<ul>
						<li><a href="#" class="w3_agile_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
						<li><a href="#" class="agile_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
						<li><a href="#" class="w3_agile_dribble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
						<li><a href="#" class="w3_agile_vimeo"><i class="fa fa-vimeo" aria-hidden="true"></i></a></li>
					</ul>
				</div>
			<form action="#" method="post">
				<input type="email" name="email" placeholder="Your email..." required="">
				<input type="submit" value="Subscribe">
			</form>
			<div class="agileits_w3layouts_nav">
				<div class="agileits_w3layouts_nav_left">
					<ul>
						<li class="active"><a href="index.html">Home</a></li>
						<li><a href="services.html">Services</a></li>
						<li><a href="about.html">About</a></li>
						<li><a href="icons.html">Icons</a></li>
						<li><a href="gallery.html">Gallery</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</div>
				<h3>(+000) 123 456 789</h3>
				<div class="clearfix"> </div>
			</div>
			<p>? 2017 Floriculture. All rights reserved | Design by <a href="http://www.cqetom.live//">xmoban.cn</a></p>
		</div>
	</div>
<!-- //footer -->
<!-- start-smoth-scrolling -->
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
<!-- for bootstrap working -->
<!-- //for bootstrap working -->
<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
			$().UItoTop({ easingType: 'easeOutQuart' });
			});
	</script>
<!-- //here ends scrolling icon -->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 扁平化 植物花草 植物 花草 植物園 花草市場 園藝 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 pc+wap 移動+電腦 手機+電腦 簡潔 簡約 簡單 紫色
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子