綠色扁平風格的家居設計企業網站源碼下載



5 17 6



模板描述:綠色扁平風格 家居設計 企業網站,綠色扁平風格的家居設計企業網站源碼下載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 rel="stylesheet" type="text/css" href="css/style3.css" />
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" />

2. 引入JS

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

3. HTML代碼

<!-- header -->
	<div class="header" id="home">
		<div class="container">
			<div class="w3l_header_left"> 
				<ul>
					<li><span class="fa fa-phone" aria-hidden="true"></span>+ (00) 777 4356 088</li>
					<li><span class="fa fa-envelope-o" aria-hidden="true"></span><a href="mailto:[email protected]">[email protected]</a></li>
				</ul>
			</div>
			<div id="example2">	
				<div class="wrapper2">
					<div class="content-wrapper2">
						<div class="search-button2">
							<span></span>
						</div>
						<div class="search-box2">
							<form action="#" method="post">
								<input type="search" name="Search" placeholder="Search here..." required="">
								<input type="submit" value="Send"> <img src="images/close.png" alt=" " />
							</form>
						</div>
					</div>
				</div>
			</div>
			<div class="w3l_header_right">
			    <ul>
					<li><a href="login.html"><span class="fa fa-user" aria-hidden="true"></span>log in</a></li>
					<li><a href="sign-up.html"><span class="fa fa-user" aria-hidden="true"></span>sign up</a></li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<div class="logo_nav">
		<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="logo">
						<h1><a class="navbar-brand" href="index.html">Intricate <span>For your home Designs</span></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 class="link-effect-2" id="link-effect-2">
						<ul class="nav navbar-nav">
							<li class="active"><a href="index.html"><span data-hover="Home">Home</span></a></li>
							<li><a href="about.html"><span data-hover="About">About</span></a></li>
							<li><a href="services.html"><span data-hover="Services">Services</span></a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span data-hover="Pages">Pages </span> <b class="caret"></b></a>
								<ul class="dropdown-menu agile_short_dropdown">
									<li><a href="icons.html">Web Icons</a></li>
									<li><a href="short-codes.html">Typography</a></li>
								</ul>
							</li>
							<li><a href="mail.html"><span data-hover="Mail Us">Mail Us</span></a></li>
						</ul>
					</nav>
				</div>
				<!-- /.navbar-collapse -->
			</nav>
		</div>
	</div>
<!-- //header -->
<!-- banner -->
	<div class="banner-silder">
			 <div class="banner">
					<ul>
					</ul>
				  <ol>
				  </ol>
				  <i class="left"></i><i class="right"></i>
				  <div class="banner_wthree_agile_info">
				     <section class="rw-wrapper">
						<div class="rw-sentence">
							<span>We are Ready to Design</span>
							<br />
							<span>Your Build </span>
							<div class="rw-words rw-words-1">
								<span>Amazing Home</span>
								<span>Magic Home</span>
								<span>Amazing Home</span>
								<span>Magic Home</span>
								<span>Awesome Designs</span>
							</div>
						</div>
			         </section>
					 <div class="wthree_more">
					   <a href="single.html" class="button--wayra button--border-thick button--text-upper button--size-s">Learn More</a>
				     </div>
				  </div>
		     </div>
	</div>
<!-- //banner -->
<!-- banner-bottom -->
	<div class="banner-bottom">
		<div class="container">
			<div class="col-md-7 banner_bottom_left">
				<h2>WE CREATE THE FUTURE</h2>
				<p><i>We shape your Homes</i> 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.</p>
				<div class="wthree_more wthree_more1">
					<a href="single.html" class="button--wayra button--border-thick button--text-upper button--size-s">Read More</a>
				</div>
			</div>
			<div class="col-md-5 banner_bottom_right">
			   <div class="img_agile">
			      <img src="images/ab.jpg" class="img-responsive" alt="" />
			   </div>
			</div>
			<div class="clearfix"> </div>
			<div class="banner_bottom_agile_grids">
				<div class="wthree_banner_bottom_right_grids">
					<div class="col-md-3 banner_bottom_right_grid">
						<div class="view view-tenth">
							<div class="agile_text_box">
								<i class="fa fa-eye" aria-hidden="true"></i>
								<h3>EXTERIOR DESIGN</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adip.</p>
							</div>
							<div class="mask">
								<img src="images/a1.jpg" class="img-responsive" alt="" />
							</div>
						</div>
					</div>
					<div class="col-md-3 banner_bottom_right_grid">
						<div class="view view-tenth">
							<div class="agile_text_box">
								<i class="fa fa-building-o" aria-hidden="true"></i>
								<h3>INTERIOR DESIGN</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adip.</p>
							</div>
							<div class="mask">
								<img src="images/a2.jpg" class="img-responsive" alt="" />
							</div>
						</div>
					</div>
					<div class="col-md-3 banner_bottom_right_grid">
						<div class="view view-tenth">
							<div class="agile_text_box">
								<i class="fa fa-eraser" aria-hidden="true"></i>
								<h3>LANDSCAPE DESIGN</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adip.</p>
							</div>
							<div class="mask">
								<img src="images/a3.jpg" class="img-responsive" alt="" />
							</div>
						</div>
					</div>
					<div class="col-md-3 banner_bottom_right_grid">
						<div class="view view-tenth">
							<div class="agile_text_box">
								<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
								<h3>DESIGN ESTIMATES</h3>
								<p>Lorem ipsum dolor sit amet, consectetur adip.</p>
							</div>
							<div class="mask">
								<img src="images/a4.jpg" class="img-responsive" alt="" />
							</div>
						</div>
					</div>
					<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!-- banner-bottom -->
<div class="services">
   <div class="container">
            <h3>Services We Do</h3>
			<p class="quia">What We Do</p>
       <div class="wthree_services_bottom_left banner_bottom_agile_grids">
			<div class="wthree_services_bottom_left_grid">
				<div class="col-md-4 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/10.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
							<h3>Intricate Designs</h3>
						</div>
					</div>
				    <div class="serve_info_agile two">
					    <h4>Residential Design</h4>
						<p>Our working process</p>
					 </div>
				</div>
				<div class="col-md-4 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/11.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
							<h3>Intricate Designs</h3>
						</div>
					</div>
						 <div class="serve_info_agile two">
					    <h4>Commercial Design</h4>
						<p>Our working process</p>
					 </div>
				</div>
				<div class="col-md-4 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/8.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
							<h3>Intricate Designs</h3>
						</div>
					</div>
						 <div class="serve_info_agile two">
					    <h4>Corporate Design</h4>
						<p>Our working process</p>
					 </div>
				</div>
				<div class="col-md-4 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/4.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
							<h3>Intricate Designs</h3>
						</div>
					</div>
						 <div class="serve_info_agile">
					    <h4>Hospitality  Design</h4>
						<p>Our working process</p>
					 </div>
				</div>
					<div class="col-md-4 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/9.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
							<h3>Intricate Designs</h3>
						</div>
					</div>
					 <div class="serve_info_agile">
					    <h4>Restaurant Design</h4>
						<p>Our working process</p>
					 </div>
				</div>
					<div class="col-md-4 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/5.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
							<h3>Intricate Designs</h3>
						</div>
					</div>
						 <div class="serve_info_agile">
					    <h4>Industrial Design</h4>
						<p>Our working process</p>
					 </div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
</div>
<!-- news -->
	<div class="special-services"> 
		<div class="container">  
			<h3>Latest News</h3>
			<p class="quia">View Our News</p>
			<div class="banner_bottom_agile_grids">
			<div class="news_w3l_agileinfo">
				<div class="col-md-7 agile-w3grid-img img_agile">
					<a href="single.html" class="wthree-agile-img">  
						<img src="images/1.jpg" class="img-responsive" alt=""/>
					</a>  
				</div>
				<div class="col-md-5 agile-news-w3grid-text"> 
					<h4><a href="single.html">Eco Materials</a></h4>
					<h6><a href="#"><i class="fa fa-user" aria-hidden="true"></i> By Admin</a> <i class="fa fa-calendar-o" aria-hidden="true"></i>  Jan 15 , 2017 </h6>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum iaculis enim, non convallis felis mattis at. Donec fringilla lacus eu pretium rutrum.</p>
				</div> 
				<div class="clearfix"> </div>
			</div> 
			<div class="news_w3l_agileinfo news_w3l_agileinfo-mdl">
				<div class="col-md-7 agile-w3grid-img news-img-right-info img_agile">
					<a href="single.html" class="wthree-agile-img">  
						<img src="images/4.jpg" class="img-responsive" alt=""/>
					</a>  
				</div>
				<div class="col-md-5 agile-news-w3grid-text"> 
					<h4><a href="single.html">Interior Solutions</a></h4>
					<h6><a href="#"><i class="fa fa-user" aria-hidden="true"></i> By Admin</a> <i class="fa fa-calendar-o" aria-hidden="true"></i> Feb 21, 2017 </h6>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum iaculis enim, non convallis felis mattis at. Donec fringilla lacus eu pretium rutrum. </p>
				</div> 
				<div class="clearfix"> </div>
			</div> 
		   </div>
		</div>
	</div>
	<!-- //news --> 
<!-- testimonials -->
	<div class="testimonials">
		<div class="container">
			<h3>Testimonials</h3>
			<p class="quia">What our customers say</p>
			<div class="w3_testimonials_grids">
				<section class="slider">
					<div class="flexslider">
						<ul class="slides">
							<li>	
								<div class="w3_testimonials_grid">
									<img src="images/1.png" alt=" " class="img-responsive" />
									<h4><i class="fa fa-quote-left" aria-hidden="true"></i> <i>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil 
										impedit quo minus id quod maxime placeat facere possimus, omnis voluptas.</i></h4>
									<h5>John Frank</h5>
								</div>
							</li>
							<li>	
								<div class="w3_testimonials_grid">
									<img src="images/2.png" alt=" " class="img-responsive" />
									<h4><i class="fa fa-quote-left" aria-hidden="true"></i> <i>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil 
										impedit quo minus id quod maxime placeat facere possimus, omnis voluptas.</i></h4>
									<h5>Michael Doe</h5>
								</div>
							</li>
							<li>	
								<div class="w3_testimonials_grid">
									<img src="images/3.png" alt=" " class="img-responsive" />
									<h4><i class="fa fa-quote-left" aria-hidden="true"></i>  <i>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil 
										impedit quo minus id quod maxime placeat facere possimus, omnis voluptas.</i></h4>
									<h5>Thomas Carl</h5>
								</div>
							</li>
						</ul>
					</div>
				</section>
			</div>
		</div>
	</div>
<!-- //testimonials -->
<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="col-md-3 w3agile_footer_grid">
				<h3>About Us</h3>
				<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis 
					voluptatibus.</p>
			</div>
			<div class="col-md-2 w3agile_footer_grid">	
				<h3>Links</h3>
				<ul>
					<li><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="mail.html">Mail Us</a></li>
				</ul>
			</div>
			<div class="col-md-4 w3agile_footer_grid">
				<h3>Twitter Posts</h3>
				<ul class="w3agile_footer_grid_list">
					<li>Ut aut reiciendis voluptatibus maiores alias, ut aut reiciendis.
						<span><i class="fa fa-twitter" aria-hidden="true"></i> 02 days ago</span></li>
					<li>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis 
						voluptatibus.<span><i class="fa fa-twitter" aria-hidden="true"></i> 03 days ago</span></li>
				</ul>
			</div>
			<div class="col-md-3 w3agile_footer_grid">
				<h3>Instagram</h3>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a1.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a2.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a3.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a4.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a1.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a2.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a3.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a4.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="w3agile_footer_grid_left">
					<a href="single.html"><img src="images/a3.jpg" alt=" " class="img-responsive" /></a>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<div class="agileinfo_copy_right">
		<div class="container">
			<div class="agileinfo_copy_right_left">
				<p>? 2017 Intricate. All rights reserved | Design by <a href="http://www.cqetom.live//">xmoban.cn</a></p>
			</div>
			<div class="agileinfo_copy_right_right">
				<ul class="social">
					<li><a class="social-linkedin" href="#">
						<i class="fa fa-facebook" aria-hidden="true"></i>
						<div class="tooltip"><span>Facebook</span></div>
						</a></li>
					<li><a class="social-twitter" href="#">
						<i class="fa fa-twitter" aria-hidden="true"></i>
						<div class="tooltip"><span>Twitter</span></div>
						</a></li>
					<li><a class="social-google" href="#">
						<i class="fa fa-google" aria-hidden="true"></i>
						<div class="tooltip"><span>Google+</span></div>
						</a></li>
					<li><a class="social-facebook" href="#">
						<i class="fa fa-pinterest-p" aria-hidden="true"></i>
						<div class="tooltip"><span>Pinterest</span></div>
						</a></li>
					<li><a class="social-instagram" href="#">
						<i class="fa fa-instagram" aria-hidden="true"></i>
						<div class="tooltip"><span>Instagram</span></div>
						</a></li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //footer -->
<a href="#home" class="scroll" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- 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 -->
<script>
        $(function(){ 
  // parameters
  // image height
  var images_height = '650px';
  // array of images
  var images_url = [
      'images/banner1.jpg',
      'images/banner2.jpg',
      'images/banner3.jpg'
  ];
  var images_count = images_url.length;
  // create nodes
  for(var j=0;j<images_count+1;j++){
      $('.banner ul').append('<li></li>')
  }
  // pagination
  for(var j=0;j<images_count;j++){
      if(j==0){
          $('.banner ol').append('<li class="current"></li>')
      }else{
          $('.banner ol').append('<li></li>')
      }
  }
  // convert images into backgrounds
  $('.banner ul li').css('background-image','url('+images_url[0]+')');
  $.each(images_url,function(key,value){
      $('.banner ul li').eq(key).css('background-image','url('+value+')');
  });
  $('.banner').css('height',images_height);
  $('.banner ul').css('width',(images_count+1)*100+'%');
  $('.banner ol').css('width',images_count*20+'px');
  $('.banner ol').css('margin-left',-images_count*20*0.5-10+'px');
  var num = 0;
  var window_width = $(window).width();
  $(window).resize(function(){
      window_width = $(window).width();
      $('.banner ul li').css({width:window_width});
      clearInterval(timer);
      nextPlay();
      timer = setInterval(nextPlay,2000);
  });
  $('.banner ul li').width(window_width);
  // pagination dots
  $('.banner ol li').mouseover(function(){
      $(this).addClass('current').siblings().removeClass('current');
      var i = $(this).index();
      //console.log(i);
      $('.banner ul').stop().animate({left:-i*window_width},500);
      num = i;
  });
  // autoplay
  var timer = null;
  function prevPlay(){
      num--;
      if(num<0){
          $('.banner ul').css({left:-window_width*images_count}).stop().animate({left:-window_width*(images_count-1)},500);
          num=images_count-1;
      }else{
          $('.banner ul').stop().animate({left:-num*window_width},500);
      }
      if(num==images_count-1){
          $('.banner ol li').eq(images_count-1).addClass('current').siblings().removeClass('current');
      }else{
          $('.banner ol li').eq(num).addClass('current').siblings().removeClass('current');
      }
  }
  function nextPlay(){
      num++;
      if(num>images_count){
          $('.banner ul').css({left:0}).stop().animate({left:-window_width},500);
          num=1;
      }else{
          $('.banner ul').stop().animate({left:-num*window_width},500);
      }
      if(num==images_count){
          $('.banner ol li').eq(0).addClass('current').siblings().removeClass('current');
      }else{
          $('.banner ol li').eq(num).addClass('current').siblings().removeClass('current');
      }
  }
  timer = setInterval(nextPlay,2000);
  // auto pause on mouse enter
  $('.banner').mouseenter(function(){
      clearInterval(timer);
      $('.banner i').fadeIn();
  }).mouseleave(function(){
      timer = setInterval(nextPlay,2000);
      $('.banner i').fadeOut();
  });
  // goto next
  $('.banner .right').click(function(){
      nextPlay();
  });
  // back to previous
  $('.banner .left').click(function(){
      prevPlay();
  });
});
    </script>
<!-- flexSlider -->
					<script type="text/javascript">
					$(window).load(function(){
					  $('.flexslider').flexslider({
						animation: "slide",
						start: function(slider){
						  $('body').removeClass('loading');
						}
					  });
					});
				  </script>
				<!-- //flexSlider -->
<!-- for bootstrap working -->
<!-- //for bootstrap working -->



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子