藍色簡潔風格的室內家具設計企業網站源碼下載



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/lsb.css" rel="stylesheet" type="text/css">
<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=Ubuntu:300,300i,400,400i,500,500i,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,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/waypoints.min.js"></script>
<script src="js/counterup.min.js"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
<script src="js/lsb.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>

3. HTML代碼

<!-- banner -->
	<div class="banner">
		<div class="container">
			<div class="w3_agile_logo">
				<h1><a href="index.html">Adorning<span>Interior Design</span></a></h1>
			</div>
			<div class="agileits_w3layouts_nav">
				<div id="toggle_m_nav">
					<div id="m_nav_menu" class="m_nav">
						<div class="m_nav_ham w3_agileits_ham" id="m_ham_1"></div>
						<div class="m_nav_ham" id="m_ham_2"></div>
						<div class="m_nav_ham" id="m_ham_3"></div>
					</div>
				</div>
				<div id="m_nav_container" class="m_nav wthree_bg">
					<nav class="menu menu--sebastian">
						<ul id="m_nav_list" class="m_nav menu__list">
							<li class="m_nav_item menu__item menu__item--current" id="m_nav_item_1"> <a href="index.html" class="menu__link"> Home </a></li>
							<li class="m_nav_item menu__item" id="moble_nav_item_2"> <a href="services.html" class="menu__link"> Services </a> </li>
							<li class="m_nav_item menu__item" id="moble_nav_item_3"> <a href="about.html" class="menu__link"> About Us </a> </li>
							<li class="m_nav_item menu__item" id="moble_nav_item_4"> <a href="blog.html" class="menu__link"> Blog </a> </li>
							<li class="m_nav_item menu__item" id="moble_nav_item_5"> <a href="mail.html" class="menu__link"> Contact Us </a> </li>
						</ul>
					</nav>
				</div>
			</div>
			<div class="clearfix"> </div>
			<div class="agile_banner_info">
				<h2><span>Interior design</span> <i>is making the best possible use of the available space</i></h2>
				<p>Nullam ligula magna, pulvinar eget justo sit amet, posuere iaculis magna. Donec lorem 
					lacus, gravida quis consectetur id, egestas non ligula.</p>
				<div class="agile_banner_info_pos">
					<ul>
						<li>Latest Designs</li>
						<li>Awards</li>
						<li>Furniture</li>
					</ul>
				</div>
			</div>
			<div class="agileinfo_more">
				<a href="single.html" class="hvr-radial-in">read more</a>
			</div>
		</div>
	</div>
<!-- //banner -->	
<!-- banner-bottom -->
	<div class="banner-bottom">
		<div class="container">
			<div class="col-md-6 agileits_banner_bottom_left">
				<h3>welcome to <span>Adoring</span></h3>
				<p class="w3l_para">Curabitur nec purus eget urna pulvinar placerat. Integer varius est vitae iaculis 
					suscipit. Integer sed rutrum lectus.</p>
				<div class="w3l_social_icons">
					<div class="w3l_social_icon_grid">
						<div class="w3l_social_icon_gridl w3_facebook">
							<a href="#">
								<i class="fa fa-facebook" aria-hidden="true"></i>
							</a>
						</div>
						<div class="w3l_social_icon_gridr">
							<p class="counter">23,536</p>
						</div>
						<div class="clearfix"> </div>
						<div class="w3l_social_icon_grid_pos">
							<label>-</label>
						</div>
					</div>
					<div class="w3l_social_icon_grid w3ls_social_icon_grid">
						<div class="w3l_social_icon_gridl w3_dribbble">
							<a href="#">
								<i class="fa fa-dribbble" aria-hidden="true"></i>
							</a>
						</div>
						<div class="w3l_social_icon_gridr">
							<p class="counter">13,676</p>
						</div>
						<div class="clearfix"> </div>
						<div class="w3l_social_icon_grid_pos">
							<label>-</label>
						</div>
					</div>
					<div class="w3l_social_icon_grid">
						<div class="w3l_social_icon_gridl w3_instagram">
							<a href="#">
								<i class="fa fa-instagram" aria-hidden="true"></i>
							</a>
						</div>
						<div class="w3l_social_icon_gridr">
							<p class="counter">45,342</p>
						</div>
						<div class="clearfix"> </div>
						<div class="w3l_social_icon_grid_pos">
							<label>-</label>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6 agileits_banner_bottom_right">
				<div class="w3ls_banner_bottom_right">
					<img src="images/2.jpg" alt=" " class="img-responsive" />
					<div class="w3ls_banner_bottom_right_pos">
						<img src="images/1.jpg" alt=" " class="img-responsive" />
					</div>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //banner-bottom -->
<!-- Stats -->
	<script src="js/waypoints.min.js"></script> 
	<script src="js/counterup.min.js"></script> 
	<script>
		jQuery(document).ready(function( $ ) {
			$('.counter').counterUp({
				delay: 10,
				time: 2000
			});
		});
	</script>
<!-- //Stats -->
<!-- banner-bottom-icons -->
	<div class="banner-bottom-icons">
		<div class="col-md-6 w3_banner_bottom_icons_left hover15">
			<div class="w3_agile_banner_bottom">
				<figure><img src="images/3.jpg" alt=" " class="img-responsive" /></figure>
			</div>
		</div>
		<div class="col-md-6 w3_banner_bottom_icons_right">
			<div class="col-xs-6 w3_banner_bottom_icons1">
				<div class="w3_banner_bottom_icons1_effect">
					<i class="fa-table"></i>
					<h3>interior enterprise</h3>
					<p>Curabitur ac enim et augue consectetur elementum sed vitae neque.</p>
				</div>
			</div>
			<div class="col-xs-6 w3_banner_bottom_icons1">
				<div class="w3_banner_bottom_icons1_effect">
					<i class="fa-trophy"></i>
					<h3>awards winning</h3>
					<p>Curabitur ac enim et augue consectetur elementum sed vitae neque.</p>
				</div>
			</div>
			<div class="col-xs-6 w3_banner_bottom_icons1">
				<div class="w3_banner_bottom_icons1_effect">
					<i class="fa-jpy"></i>
					<h3>reasonable price</h3>
					<p>Curabitur ac enim et augue consectetur elementum sed vitae neque.</p>
				</div>
			</div>
			<div class="col-xs-6 w3_banner_bottom_icons1">
				<div class="w3_banner_bottom_icons1_effect">
					<i class="fa-user"></i>
					<h3>free consultation</h3>
					<p>Curabitur ac enim et augue consectetur elementum sed vitae neque.</p>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="clearfix"> </div>
	</div>
<!-- //banner-bottom-icons -->
<!-- events-top -->
	<div class="events-top">
		<ul id="flexiselDemo1">	
			<li>
				<div class="agile_events_top_grid">	
					<div class="w3_agileits_evets_text_img">
						<a href="images/4.jpg" class="lsb-preview" data-lsb-group="header">
							<div class="view view-eighth">
								<img src="images/4.jpg" alt=" " class="img-responsive" />
								<div class="mask">
									<img src="images/plus.png" alt=" " class="img-responsive info" />
								</div>
							</div>
							<div class="agile_events_top_grid_pos">
								<img src="images/1.png" alt=" " class="img-responsive" />
							</div>
						</a>
					</div>
					<div class="agileits_w3layouts_events_text">
						<h3>Richard Carl</h3>
						<p>Business Dealer</p>
					</div>
				</div>
			</li>
			<li>
				<div class="agile_events_top_grid">	
					<div class="w3_agileits_evets_text_img">
						<a href="images/7.jpg" class="lsb-preview" data-lsb-group="header">
							<div class="view view-eighth">
								<img src="images/7.jpg" alt=" " class="img-responsive" />
								<div class="mask">
									<img src="images/plus.png" alt=" " class="img-responsive info" />
								</div>
							</div>
							<div class="agile_events_top_grid_pos">
								<img src="images/3.png" alt=" " class="img-responsive" />
							</div>
						</a>
					</div>
					<div class="agileits_w3layouts_events_text">
						<h3>Michael Crisp</h3>
						<p>Business Dealer</p>
					</div>
				</div>
			</li>
			<li>
				<div class="agile_events_top_grid">	
					<div class="w3_agileits_evets_text_img">
						<a href="images/6.jpg" class="lsb-preview" data-lsb-group="header">
							<div class="view view-eighth">
								<img src="images/6.jpg" alt=" " class="img-responsive" />
								<div class="mask">
									<img src="images/plus.png" alt=" " class="img-responsive info" />
								</div>
							</div>
							<div class="agile_events_top_grid_pos">
								<img src="images/2.png" alt=" " class="img-responsive" />
							</div>
						</a>
					</div>
					<div class="agileits_w3layouts_events_text">
						<h3>Adam Lii</h3>
						<p>Business Dealer</p>
					</div>
				</div>
			</li>
			<li>
				<div class="agile_events_top_grid">	
					<div class="w3_agileits_evets_text_img">
						<a href="images/5.jpg" class="lsb-preview" data-lsb-group="header">
							<div class="view view-eighth">
								<img src="images/5.jpg" alt=" " class="img-responsive" />
								<div class="mask">
									<img src="images/plus.png" alt=" " class="img-responsive info" />
								</div>
							</div>
							<div class="agile_events_top_grid_pos">
								<img src="images/4.png" alt=" " class="img-responsive" />
							</div>
						</a>
					</div>
					<div class="agileits_w3layouts_events_text">
						<h3>Thomas Paul</h3>
						<p>Business Dealer</p>
					</div>
				</div>
			</li>
			<li>
				<div class="agile_events_top_grid">	
					<div class="w3_agileits_evets_text_img">
						<a href="images/1.jpg" class="lsb-preview" data-lsb-group="header">
							<div class="view view-eighth">
								<img src="images/1.jpg" alt=" " class="img-responsive" />
								<div class="mask">
									<img src="images/plus.png" alt=" " class="img-responsive info" />
								</div>
							</div>
							<div class="agile_events_top_grid_pos">
								<img src="images/2.png" alt=" " class="img-responsive" />
							</div>
						</a>
					</div>
					<div class="agileits_w3layouts_events_text">
						<h3>Adam Lii</h3>
						<p>Business Dealer</p>
					</div>
				</div>
			</li>
		</ul>
	</div>
<!-- //events-top -->
<!-- flexisel -->
		<script type="text/javascript">
		$(window).load(function() {
			$("#flexiselDemo1").flexisel({
				visibleItems: 4,
				animationSpeed: 1000,
				autoPlay: true,
				autoPlaySpeed: 3000,    		
				pauseOnHover: true,
				enableResponsiveBreakpoints: true,
				responsiveBreakpoints: { 
					portrait: { 
						changePoint:480,
						visibleItems: 1
					}, 
					landscape: { 
						changePoint:640,
						visibleItems:2
					},
					tablet: { 
						changePoint:768,
						visibleItems: 2
					}
				}
			});
		});
	</script>
<!-- //flexisel -->
<!-- gallery-pop-up -->
	<script>
	$(window).load(function() {
		  $.fn.lightspeedBox();
		});
	</script>
<!-- //gallery-pop-up -->
<!-- events -->
	<div class="events">
		<div class="container">
			<h3 class="agileinfo_header">Adorning Events</h3>
			<p class="agileits_dummy_para">Fusce elementum sem ut ex condimentum facilisis.</p>
			<div class="w3ls_event_grids">
				<div class="col-md-6 wthree_events_grid_left">
					<div class="wthree_events_grid_left1">
						<div class="wthree_events_grid_left1_grid">
							<div class="col-xs-4 wthree_events_grid_left1_gridl">
								<p>10 Nov 2016</p>
							</div>
							<div class="col-xs-8 wthree_events_grid_left1_gridr">
								<h4><a href="#" data-toggle="modal" data-target="#myModal">sem ut ex condimentum</a></h4>
								<p>Curabitur maximus odio enim, ac blandit erat sollicitudin vitae.</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
					<div class="wthree_events_grid_left1">
						<div class="wthree_events_grid_left1_grid">
							<div class="col-xs-4 wthree_events_grid_left1_gridl">
								<p>13 Nov 2016</p>
							</div>
							<div class="col-xs-8 wthree_events_grid_left1_gridr">
								<h4><a href="#" data-toggle="modal" data-target="#myModal">placerat posuere magna</a></h4>
								<p>Curabitur maximus odio enim, ac blandit erat sollicitudin vitae.</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
					<div class="wthree_events_grid_left1">
						<div class="wthree_events_grid_left1_grid">
							<div class="col-xs-4 wthree_events_grid_left1_gridl">
								<p>17 Nov 2016</p>
							</div>
							<div class="col-xs-8 wthree_events_grid_left1_gridr">
								<h4><a href="#" data-toggle="modal" data-target="#myModal">maximus odio enim vitae</a></h4>
								<p>Curabitur maximus odio enim, ac blandit erat sollicitudin vitae.</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
				<div class="col-md-6 wthree_events_grid_right">
					<div class="wthree_events_grid_right1">
						<h3>5 <span>years of experience</span></h3>
						<h2>ador<span>ning</span></h2>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //events -->
<!-- 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">
					Adorning
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
				</div>
				<section>
					<div class="modal-body">
						<div class="col-md-6 w3_modal_body_left">
							<img src="images/2.jpg" alt=" " class="img-responsive" />
						</div>
						<div class="col-md-6 w3_modal_body_right">
							<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.
							<i>" Quis autem vel eum iure reprehenderit qui in ea voluptate velit 
								esse quam nihil molestiae consequatur.</i></p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</section>
			</div>
		</div>
	</div>
<!-- //bootstrap-pop-up -->
<!-- subscribe -->
	<div class="w3layouts_newsletter">
		<div class="container">
			<div class="w3layouts_newsletter_left">
				<h3>Subscribe to our newsletter</h3>
			</div>
			<div class="w3layouts_newsletter_right">
				<form action="#" method="post">
					<input type="email" name="Email" placeholder="Email..." required="">
					<input type="submit" value="Subscribe">
				</form>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //subscribe -->
<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="w3agile_footer_grids">
				<div class="col-md-3 agileinfo_footer_grid">
					<div class="footer-logo">
						<h2><a href="index.html">Adorning<span>Interior Design</span></a></h2>
					</div>
				</div>
				<div class="col-md-4 agileinfo_footer_grid">
					<h4>Call Us <span>+1234 567 891</span></h4>
					<p>My Company, 875 Jewel Road <span>8907 Ukraine.</span></p>
					<ul class="social-icons">
						<li><a href="#" class="icon icon-border facebook"></a></li>
						<li><a href="#" class="icon icon-border twitter"></a></li>
						<li><a href="#" class="icon icon-border instagram"></a></li>
						<li><a href="#" class="icon icon-border pinterest"></a></li>
					</ul>
				</div>
				<div class="col-md-2 agileinfo_footer_grid agileinfo_footer_grid1">
					<ul class="w3layouts_footer_nav">
						<li><a href="index.html"><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Home</a></li>
						<li><a href="icons.html"><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Web Icons</a></li>
						<li><a href="typography.html"><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Typography</a></li>
						<li><a href="mail.html"><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Contact Us</a></li>
					</ul>
				</div>
				<div class="col-md-3 agileinfo_footer_grid">
					<div class="agileinfo_footer_grid_left">
						<a href="single.html"><img src="images/6.jpg" alt=" " class="img-responsive" /></a>
					</div>
					<div class="agileinfo_footer_grid_left">
						<a href="single.html"><img src="images/4.jpg" alt=" " class="img-responsive" /></a>
					</div>
					<div class="agileinfo_footer_grid_left">
						<a href="single.html"><img src="images/5.jpg" alt=" " class="img-responsive" /></a>
					</div>
					<div class="agileinfo_footer_grid_left">
						<a href="single.html"><img src="images/7.jpg" alt=" " class="img-responsive" /></a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<div class="footer-copy">
		<div class="container">
			<p>? 2017 Adorning. All rights reserved | Design by <a href="http://www.cqetom.live/">xmoban.cn</a></p>
		</div>
	</div>
<!-- //footer -->
<!-- menu -->
<!-- //menu -->
<!-- for bootstrap working -->
<!-- //for bootstrap working -->
<!-- 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 -->
<!-- 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

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

老夫子电子