綠色簡潔風格的集團公司整站網站源碼下載



5 16 6



模板描述:綠色簡潔風格 集團公司 整站網站,綠色簡潔風格的集團公司整站網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">

2. 引入JS

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/counterup.min.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script defer src="js/jquery.flexslider.js"></script>

3. HTML代碼

<!-- banner -->
	<div class=" banner">
		<div class="wthree-different-dot">
			<!-- header -->
			<div class="header">
				<div class="container">
					<nav class="navbar navbar-default">
						<!-- Brand and toggle get grouped for better mobile display -->
						<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 class="w3layouts-logo">
								<h1><a href="index.html"><span>B</span>usiness group</a></h1>
							</div>
						</div>
						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
							<nav>
								<ul class="nav navbar-nav">
									<li class="active"><a href="index.html">Home</a></li>
									<li><a href="about.html">About</a></li>
									<li><a href="gallery.html">Portfolio</a></li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-hover="Pages" data-toggle="dropdown">Pages <b class="caret"></b></a>
									<ul class="dropdown-menu">
										<li><a href="icons.html">Icons</a></li>
										<li><a href="typography.html">Short Codes</a></li>
									</ul>
							  </li>
									<li><a href="contact.html">Contact Us</a></li>
								</ul>
							</nav>
						</div>
						<!-- /.navbar-collapse -->
					</nav>
				</div>
			</div>
			<!-- //header -->
			<div class="banner-top">
					<div class="slider">
						<div class="callbacks_container">
							<ul class="rslides callbacks callbacks1" id="slider4">
								<li>	
								<div class="wthree-different-dot">
									<div class="banner_text">
									<div class="container">
										<span>Corporate</span>
										<h2>Business</h2>
										<div class="more-button text-center">
											<a href="#" class="hvr-bounce-to-bottom scroll" data-toggle="modal" data-target="#myModal1">Read More</a>
										</div>
										<div class="thim-click-to-bottom">
											<a href="#welcome" class="scroll">
												<i class="fa  fa-chevron-down"></i>
											</a>
										</div>
									</div>
									</div>
								</div>
								</li>
								<li>
								<div class="wthree-different-dot">	
									<div class="banner_text">
									<div class="container">
										<span>Corporate</span>
										<h3>Confidence</h3>
										<div class="more-button text-center">
											<a href="#" class="hvr-bounce-to-bottom scroll" data-toggle="modal" data-target="#myModal1">Read More</a>
										</div>
										<div class="thim-click-to-bottom">
											<a href="#welcome" class="scroll">
												<i class="fa  fa-chevron-down"></i>
											</a>
										</div>
									</div>
									</div>
									</div>
								</li>
								<li>	
								<div class="wthree-different-dot">
									<div class="banner_text">
									<div class="container">
										<span>Corporate</span>
										<h3>Successfull</h3>
										<div class="more-button text-center">
											<a href="#" class="hvr-bounce-to-bottom scroll" data-toggle="modal" data-target="#myModal1">Read More</a>
										</div>
										<div class="thim-click-to-bottom">
											<a href="#welcome" class="scroll">
												<i class="fa  fa-chevron-down"></i>
											</a>
										</div>
									</div>
									</div>
									</div>
								</li>
								<li>	
								<div class="wthree-different-dot">
									<div class="banner_text">
									<div class="container">
										<span>Corporate</span>
										<h3>Discussion</h3>
										<div class="more-button text-center">
											<a href="#" class="hvr-bounce-to-bottom scroll" data-toggle="modal" data-target="#myModal1">Read More</a>
										</div>
										<div class="thim-click-to-bottom">
											<a href="#welcome" class="scroll">
												<i class="fa  fa-chevron-down"></i>
											</a>
										</div>
									</div>
									</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		<div class="clearfix"></div>
		</div>
	<!-- //banner -->
<!-- Modal1 -->
						<div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
							<div class="modal-dialog">
							<!-- Modal content-->
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">&times;</button>
										<h4>Business Group</h4>
										<img src="images/b2.jpg" alt=" " class="img-responsive">
										<h5>Success your business </h5>
										<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
									</div>
								</div>
							</div>
						</div>
<!-- //Modal1 -->
<!-- welcome -->
<div class="about" id="welcome">
	<div class="container">
		<h3> group of people authorized to act </h3>
		<h3><span>Welcome</span> to corp</h3>
		<div class="col-md-6 aboutleft">
			<h3>corporation is a legal entity that is separate and distinct from its owners</h3>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
			Lorem Ipsum has been the industry's standard dummy text ever since the 1500s but also the leap into electronic typesetting dolor amet.</p>
			<p>when an unknown printer took a galley of type and scrambled it to make a type specimen book.
			It has survived not only five centuries, but also the leap into electronic typesetting.</p>
			<p>Vestibulum dictum porta nisl non lacinia. Integer laoreet ultricies nunc, vitae eleifend elit rutrum sit amet. In elementum,
			magna id pellentesque auctor, risus dolor congue urna, nec dapibus eros magna a odio. Duis laoreet 
			risus eget malesuada consequat. Nunc et tortor dignissim, laoreet est eget</p>
			<p>Duis commodo auctor libero at ultrices. Quisque mi dui, condimentum ac tellus vel, gravida aliquam nunc. Ut ac auctor velit.</p>
		</div>
		<div class="col-md-6 aboutright">
			<img src="images/about.jpg" alt="" />
			<div class="aboutimg">
				<img src="images/aboutimg.jpg" alt="" />
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- welcome -->
<!-- services -->
	<div class="services" id="services">
		<div class="container">
			<div class="w3l-heading">
				<h3>Our Services</h3>
			</div>
			<div class="services-grids">
				<div class="col-md-3 wthree-services-grid">
					<div class="wthree-services-icon">
						<i class="fa fa-desktop" aria-hidden="true"></i>
					</div>
					<div class="wthree-services-info">
						<h5>posuere augue</h5>
						<span></span>
						<p>Lorem sed nisi leo. Ut at sagittis nisi. Cras porttitor a purus ac rutrum. </p>
					</div>
				</div>
				<div class="col-md-3 wthree-services-grid">
					<div class="wthree-services-icon">
						<i class="fa fa-clone" aria-hidden="true"></i>
					</div>
					<div class="wthree-services-info">
						<h5>posuere augue</h5>
						<span></span>
						<p>Lorem sed nisi leo. Ut at sagittis nisi. Cras porttitor a purus ac rutrum. </p>
					</div>
				</div>
				<div class="col-md-3 wthree-services-grid">
					<div class="wthree-services-icon">
						<i class="fa fa-navicon" aria-hidden="true"></i>
					</div>
					<div class="wthree-services-info">
						<h5>posuere augue</h5>
						<span></span>
						<p>Lorem sed nisi leo. Ut at sagittis nisi. Cras porttitor a purus ac rutrum. </p>
					</div>
				</div>
				<div class="col-md-3 wthree-services-grid">
					<div class="wthree-services-icon">
						<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
					</div>
					<div class="wthree-services-info">
						<h5>posuere augue</h5>
						<span></span>
						<p>Lorem sed nisi leo. Ut at sagittis nisi. Cras porttitor a purus ac rutrum. </p>
					</div>
				</div>
				<div class="clearfix"> </div>
				<div class="services-bottom-grids">
					<div class="col-md-4 wthree-services-grid">
						<div class="wthree-services-icon">
							<i class="fa fa-server" aria-hidden="true"></i>
						</div>
						<div class="wthree-services-info">
							<h5>posuere augue</h5>
							<span></span>
							<p>Lorem sed nisi leo. Ut at sagittis nisi. Cras porttitor a purus ac rutrum Praesent posuere augue. </p>
						</div>
					</div>
					<div class="col-md-4 wthree-services-grid">
						<div class="wthree-services-icon">
							<i class="fa fa-signing" aria-hidden="true"></i>
						</div>
						<div class="wthree-services-info">
							<h5>posuere augue</h5>
							<span></span>
							<p>Lorem sed nisi leo. Ut at sagittis nisi. Cras porttitor a purus ac rutrum Praesent posuere augue. </p>
						</div>
					</div>
					<div class="col-md-4 wthree-services-grid">
						<div class="wthree-services-icon">
							<i class="fa fa-suitcase" aria-hidden="true"></i>
						</div>
						<div class="wthree-services-info">
							<h5>posuere augue</h5>
							<span></span>
							<p>Lorem sed nisi leo. Ut at sagittis nisi. Cras porttitor a purus ac rutrum Praesent posuere augue. </p>
						</div>
					</div>
				<div class="clearfix"> </div>
				</div>
			</div>
				<div class="clearfix"> </div>
		</div>
	</div>
<!-- //services -->
<!-- team -->
<div class="team-section">
	 		      <div class="container">
			<div class="w3l-heading">
				<h3>Our Team</h3>
			</div>
		      <div class="team-row">
				<div class="col-md-3 team-grids">
					<div class="team-img">
						<img class="img-responsive" src="images/t1.jpg" alt="">
						<div class="captn">
							<ul class="top-links">
									<li><a href="#"><i class="fa fa-facebook"></i></a></li>
									<li><a href="#"><i class="fa fa-twitter"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
						</div>
					</div>
					<div class="team-agile">
						<h4>Edwards</h4>
						<p>Lorem sed nisi leo. Ut at sagittis nisi. Cras porttitor a purus ac.</p>
					</div>
				</div>
				<div class="col-md-3 team-grids">
					<div class="team-img">
						<img class="img-responsive" src="images/t2.jpg" alt="">
						<div class="captn">
							<ul class="top-links">
									<li><a href="#"><i class="fa fa-facebook"></i></a></li>
									<li><a href="#"><i class="fa fa-twitter"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
						</div>
					</div>
					<div class="team-agile">
						<h4>Jessica </h4>
						<p>Lorem sed nisi leo. Ut at sagittis nisi. Cras porttitor a purus ac.</p>
					</div>
				</div>
				<div class="col-md-3 team-grids">
					<div class="team-img">
						<img class="img-responsive" src="images/t3.jpg" alt="">
						<div class="captn">
							<ul class="top-links">
									<li><a href="#"><i class="fa fa-facebook"></i></a></li>
									<li><a href="#"><i class="fa fa-twitter"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
						</div>
					</div>
					<div class="team-agile">
						<h4>Michael</h4>
						<p>Lorem sed nisi leo. Ut at sagittis nisi. Cras porttitor a purus ac.</p>
					</div>
				</div>
				<div class="col-md-3 team-grids">
					<div class="team-img">
						<img class="img-responsive" src="images/t4.jpg" alt="">
						<div class="captn">
							<ul class="top-links">
									<li><a href="#"><i class="fa fa-facebook"></i></a></li>
									<li><a href="#"><i class="fa fa-twitter"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
						</div>
					</div>
					<div class="team-agile">
						<h4>Selena</h4>
						<p>Lorem sed nisi leo. Ut at sagittis nisi. Cras porttitor a purus ac.</p>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div> 
		</div>	
</div>		
<!-- //team -->
<!-- servicesbottom -->
<!-- Counter -->
	<div class="col-md-6 services-bottom">
			<div class="col-md-6 agileits_w3layouts_about_counter_left">
				<div class="countericon">
					<i class="glyphicon glyphicon-tasks" aria-hidden="true"></i>
				</div>
				<div class="counterinfo">
					<p class="counter">436</p> 
					<h3>Business Growth</h3>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="col-md-6 agileits_w3layouts_about_counter_left">
				<div class="countericon">
					<i class="glyphicon glyphicon-erase" aria-hidden="true"></i>
				</div>
				<div class="counterinfo">
					<p class="counter">147</p> 
					<h3>Awards</h3>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
			<div class="col-md-6 agileits_w3layouts_about_counter_left">
				<div class="countericon">
					<i class="fa fa-calendar" aria-hidden="true"></i>
				</div>
				<div class="counterinfo">
					<p class="counter">18</p>
					<h3>Years Experience</h3>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="col-md-6 agileits_w3layouts_about_counter_left">
				<div class="countericon">
					<i class="fa fa-thumbs-up" aria-hidden="true"></i>
				</div>
				<div class="counterinfo">
					<p class="counter">150</p>
					<h3>Management</h3>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
	</div>
<!-- //Counter -->
<!-- Clients -->
	<div class=" col-md-6 clients">
			<h3>Testimonials</h3>
			<span></span>
			<section class="slider">
				<div class="flexslider">
					<ul class="slides">
						<li>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .</p>
								<div class="client">
									<img src="images/c1.jpg" alt="" />
									<h5>Brian Fantana</h5>
									<div class="clearfix"> </div>
								</div>
						</li>
						<li>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .</p>
								<div class="client">
								<img src="images/c2.jpg" alt="" />
									<h5>Brick Tamland</h5>
									<div class="clearfix"> </div>
								</div>
						</li>
						<li>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .</p>
								<div class="client">
								<img src="images/c3.jpg" alt="" />
									<h5>Ron Burgundy</h5>
									<div class="clearfix"> </div>
								</div>
						</li>
						<li>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .</p>
								<div class="client">
								<img src="images/c4.jpg" alt="" />
									<h5>Arturo Mendez</h5>
									<div class="clearfix"> </div>
								</div>
						</li>
					</ul>
				</div>
			</section>
</div>
			<div class="clearfix"> </div>
<!-- //Clients -->
<div class="statbottom">
	<div class="container">
		<h3>The purpose of a business is to create a customer</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
		incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .</p>
		<div class="more-button text-center">
			<a href="#" class="hvr-bounce-to-bottom scroll" data-toggle="modal" data-target="#myModal1">Load More</a>
		</div>
	</div>
</div>
<!-- //servicesbottom -->
<!-- ad -->
<div class="container">
<!-- 自適應廣告 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1112982054462406"
     data-ad-slot="7771152246"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- /ad -->
<!-- subscribe section -->
<section class="subscribe" id="subscribe">
	<div class="container">
		<h3>Subscribe to our newsletter</h3>
	</div>
	<form action="#" method="post" class="newsletter">
		<input class="email" type="email" placeholder="Enter Your Email..." required="">
		<input type="submit" class="submit" value="subscribe">
	</form>
</section>
<!-- //subscribe section -->
<!-- footer -->
<div class="footer">
	<div class="container">
		<div class="col-md-4 footerleft">
			<h3>Lorem ipsum</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
		incididunt ut labore dolore magna aliqua. Ut enim ad minim quis .</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
		incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p>
		</div>
		<div class="col-md-4 footermiddle">
			<h3>Get in touch</h3>
			<p>1572 km2 London Borough of EalingCity</p>
			<p>London,No 008921</p>
			<p class="phone">phone: +0(21) 334 5678</p>
			<p class="phone">Fax: +0(21) 334 5678</p>
			<p class="phone">Mail: <a href="mailto:[email protected]">[email protected]</a></p>
		</div>
		<div class="col-md-4 footerright">
			<h3>Twitter feed</h3>
			<ul class="w3agile_footer_grid_list">
				<li>Ut aut reiciendis voluptatibus adipiscing <a href="#">example.com</a> alias, ut aut.
				<span><i class="fa fa-twitter" aria-hidden="true"></i> 02 days ago</span></li>
				<li>Itaque earum rerum hic tenetur a sapiente <a href="#">example.com</a> ut aut.
				<span><i class="fa fa-twitter" aria-hidden="true"></i> 03 days ago</span></li>
			</ul>
		</div>
		<div class="clearfix"> </div>
	</div>
</div>
<!-- //footer -->
<!-- copyright -->
<div class="wthree_copy_right">
	<div class="container">
		<p>? 2017 Business group. All rights reserved | Design by <a href="http://www.cqetom.live//">xmoban.cn</a></p>
	</div>
</div>
<!-- //copyright -->
<!-- Default-JavaScript-File -->
<!-- //Default-JavaScript-File -->
<!-- scrolling script -->
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script> 
<!-- //scrolling script -->
					<!--banner Slider starts Here-->
						<script>
							// You can also use "$(window).load(function() {"
							$(function () {
							  // Slideshow 4
							  $("#slider4").responsiveSlides({
								auto: true,
								pager:true,
								nav:true,
								speed: 500,
								namespace: "callbacks",
								before: function () {
								  $('.events').append("<li>before event fired.</li>");
								},
								after: function () {
								  $('.events').append("<li>after event fired.</li>");
								}
							  });
							});
						 </script>
					<!--banner Slider ends Here-->
		<!-- Stats-Number-Scroller-Animation-JavaScript -->
				<script src="js/waypoints.min.js"></script> 
				<script src="js/counterup.min.js"></script> 
				<script>
					jQuery(document).ready(function( $ ) {
						$('.counter').counterUp({
							delay: 100,
							time: 1000
						});
					});
				</script>
		<!-- //Stats-Number-Scroller-Animation-JavaScript -->
	<!-- 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 -->
			<!-- FlexSlider-JavaScript -->
	<script type="text/javascript">
		$(function(){
			SyntaxHighlighter.all();
				});
				$(window).load(function(){
				$('.flexslider').flexslider({
					animation: "slide",
					start: function(slider){
						$('body').removeClass('loading');
					}
			});
		});
	</script>
	<!-- //FlexSlider-JavaScript -->



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


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 扁平化 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 pc+wap 移動+電腦 手機+電腦 綠色 簡潔 簡約 簡單 商務 商務公司
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子