藍色簡潔風格的室內裝潢公司企業網站源碼下載



6 23 8



模板描述:藍色簡潔風格 室內裝潢公司 企業網站,藍色簡潔風格的室內裝潢公司企業網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link href="//fonts.googleapis.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,700italic,700,400italic,300italic,300' rel='stylesheet' type='text/css'>

2. 引入JS

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script defer src="js/jquery.flexslider.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/jarallax.js"></script>
<script src="js/SmoothScroll.min.js"></script>

3. HTML代碼

	<!-- banner -->
	<div class="banner jarallax">
		<div class="agileinfo-dot">
			<div class="w3ls-banner-info-bottom">
				<div class="container">
					<div class="banner-address">
						<div class="col-md-3 banner-address-left">
							<p><i class="fa fa-map-marker" aria-hidden="true"></i> St Dolore Place,ingsport 56777.</p>
						</div>
						<div class="col-md-3 banner-address-left">
							<p><i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:[email protected]">[email protected]</a></p>
						</div>
						<div class="col-md-3 banner-address-left">
							<p><i class="fa fa-phone" aria-hidden="true"></i> +1 234 567 8901</p>
						</div>
						<div class="col-md-3 agileinfo-social-grids">
							<ul>
								<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-rss"></i></a></li>
							</ul>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
			</div>
			<div class="header">
				<div class="container">
					<div class="header-top-grids">
						<div class="agileits-logo">
							<h1><a href="index.html">Style Decor</a></h1>
						</div>
						<div class="top-nav">
							<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>
								<!-- 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">Gallery</a></li>
											<li><a href="#" class="dropdown-toggle hvr-bounce-to-bottom" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Codes<span class="caret"></span></a>
												<ul class="dropdown-menu">
													<li><a class="hvr-bounce-to-bottom" href="icons.html">Icons</a></li>
													<li><a class="hvr-bounce-to-bottom" href="typography.html">Typography</a></li>          
												</ul>
											</li>	
											<li><a href="mail.html">Mail Us</a></li>
										</ul>
									</nav>
								</div>
								<!-- /.navbar-collapse -->
							</nav>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<div class="w3layouts-banner">
				<div class="container">
					<section class="slider">
						<div class="flexslider">
							<ul class="slides">
								<li>
									<div class="agileits_w3layouts_banner_info">
										<h3>simply dummy text of the printing</h3>
										<p>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</p>
									</div>
								</li>
								<li>
									<div class="agileits_w3layouts_banner_info">
										<h3>simply dummy text of the printing</h3>
										<p>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</p>
									</div>
								</li>
								<li>
									<div class="agileits_w3layouts_banner_info">
										<h3>simply dummy text of the printing</h3>
										<p>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</p>
									</div>
								</li>
							</ul>
						</div>
				</section>
			<!-- flexSlider -->
				<script type="text/javascript">
					$(window).load(function(){
					  $('.flexslider').flexslider({
						animation: "slide",
						start: function(slider){
						  $('body').removeClass('loading');
						}
					  });
					});
				</script>
			<!-- //flexSlider -->
				</div>
			</div>
		</div>
	</div>
	<!-- //banner -->
	<!-- 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 -->
	<!-- banner-bottom -->
	<div class="banner-bottom">
		<div class="container">
			<div class="w3_banner_bottom_grid_pos">
				<h3 class="agileinfo_header">Welcome to  <span>Interior</span></h3>
				<p class="agileits_dummy_para">vitae scelerisque condimentum, 
						risus orci lobortis nibh, at gravida .</p>
			</div>
			<div class="w3ls_banner_bottom_grid1">
				<div class="col-md-6 w3l_banner_bottom_right">
					<h3>scelerisque condimentum</h3>
					<p>Praesent lobortis, ligula vitae scelerisque condimentum, 
						risus orci lobortis nibh, at gravida justo magna in metus.</p>
					<ul>
						<li><i class="fa fa-table" aria-hidden="true"></i>10 years experience</li>
						<li><i class="fa fa-certificate" aria-hidden="true"></i>Certified Interior</li>
						<li><i class="fa fa-usd" aria-hidden="true"></i>Low Prices</li>
					</ul>
				</div>
				<div class="col-md-6 w3l_banner_bottom_left">	
					<img src="images/g13.jpg" alt=" " class="img-responsive" />
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="agileits_banner_bottom_grid_three">
				<div class="col-md-4 agileinfo_banner_bottom_grid_three_left">
					<div class="wthree_banner_bottom_grid_three_left1 grid">
						<figure class="effect-roxy">
							<img src="images/g11.jpg" alt=" " class="img-responsive" />
							<figcaption>
								<h3>Interior <span>Design</span></h3>
								<p>Vestibulum pulvinar lobortis lorem lectus pretium non.</p>
							</figcaption>			
						</figure>
					</div>
					<p class="w3_agileits_para">Pellentesque vehicula augue eget nisl ullamcorper, 
						molestie blandit ipsum auctor. Mauris volutpat augue dolor.</p>
				</div>
				<div class="col-md-4 agileinfo_banner_bottom_grid_three_left">
					<div class="wthree_banner_bottom_grid_three_left1 grid">
						<figure class="effect-roxy">
							<img src="images/g10.jpg" alt=" " class="img-responsive" />
							<figcaption>
								<h3>Interior <span>Design</span></h3>
								<p>Vestibulum pulvinar lobortis lorem lectus pretium non.</p>
							</figcaption>			
						</figure>
					</div>
					<p class="w3_agileits_para">Pellentesque vehicula augue eget nisl ullamcorper, 
						molestie blandit ipsum auctor. Mauris volutpat augue dolor.</p>
				</div>
				<div class="col-md-4 agileinfo_banner_bottom_grid_three_left">
					<div class="wthree_banner_bottom_grid_three_left1 grid">
						<figure class="effect-roxy">
							<img src="images/g9.jpg" alt=" " class="img-responsive" />
							<figcaption>
								<h3>Interior <span>Design</span></h3>
								<p>Vestibulum pulvinar lobortis lorem lectus pretium non.</p>
							</figcaption>			
						</figure>
					</div>
					<p class="w3_agileits_para">Pellentesque vehicula augue eget nisl ullamcorper, 
						molestie blandit ipsum auctor. Mauris volutpat augue dolor.</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //banner-bottom -->
<!-- register -->
	<div class="jarallax register">
		<div class="container">
			<div class="col-md-6 w3layouts_register_left">
				<h3><span>Register</span> now</h3>
				<p>Aliquam sit amet sapien felis. Proin vel dolor sed risus maximus gravida. 
					Ut suscipit orci sem, eget lobortis sem dictum eu. Etiam congue ex sed volutpat fringilla.</p>
			</div>
			<div class="col-md-6 w3layouts_register_right">
				<form action="#" method="post">	
					<input name="Name" placeholder="First Name" type="text" required="">
					<input name="Name" placeholder="Last Name" type="text" required="">
					<input name="Email" placeholder="Email" type="email" required="">
					<input name="Subject" placeholder="Subject" type="text" required="">
					<input type="submit" value="Send">
				</form>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //register -->
<div class="banner-bottom-1">
		<div class="container">	
			<h3 class="agileinfo_header">Our  <span>Services</span></h3>
				<p class="agileits_dummy_para">vitae scelerisque condimentum, 
						risus orci lobortis nibh, at gravida .</p>
			<div class="w3ls_banner_bottom_grids-1">
				<ul class="cbp-ig-grid">
					<li>
						<div class="w3_grid_effect">
							<span class="cbp-ig-icon w3_road"></span>
							<h4 class="cbp-ig-title">ipsum imperdiet</h4>
							<span class="cbp-ig-category">Interior</span>
						</div>
					</li>
					<li>
						<div class="w3_grid_effect">
							<span class="cbp-ig-icon w3_cube"></span>
							<h4 class="cbp-ig-title">suscipit tortor</h4>
							<span class="cbp-ig-category">Interior</span>
						</div>
					</li>
					<li>
						<div class="w3_grid_effect">
							<span class="cbp-ig-icon w3_users"></span>
							<h4 class="cbp-ig-title">Vestibu magna</h4>
							<span class="cbp-ig-category">Interior</span>
						</div>
					</li>
					<li>
						<div class="w3_grid_effect">
							<span class="cbp-ig-icon w3_ticket"></span>
							<h4 class="cbp-ig-title">convallis turpis</h4>
							<span class="cbp-ig-category">Interior</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
<!-- events -->
	<div class="events">
		<div class="container">
			<h3 class="agileinfo_header">News &  <span>Events</span></h3>
				<p class="agileits_dummy_para">vitae scelerisque condimentum, 
						risus orci lobortis nibh, at gravida .</p>
			<div class="events-grids">
				<div class="col-md-4 events-grid1">
					<div class="events-grid11">
						<div class="events-grid11-info">
							<h4><i class="glyphicon glyphicon-calendar" aria-hidden="true"></i><label>20 January 2017</label>molestiae consequatur</h4>
							<p>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>
					</div>
				</div>
				<div class="col-md-4 events-grid1">
					<div class="events-grid11">
						<div class="events-grid11-info">
							<h4><i class="glyphicon glyphicon-calendar" aria-hidden="true"></i><label>20 January 2017</label>molestiae consequatur</h4>
							<p>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>
					</div>
				</div>
				<div class="col-md-4 events-grid1">
					<div class="events-grid11">
						<div class="events-grid11-info">
							<h4><i class="glyphicon glyphicon-calendar" aria-hidden="true"></i><label>20 January 2017</label>molestiae consequatur</h4>
							<p>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>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //events -->
<!-- footer -->
<div class="footer">
		<div class="container">
			<h2 class="agileinfo_header">Subscribe to  <span>Newsletter</span></h2>
				<p class="agileits_dummy_para">vitae scelerisque condimentum, 
						risus orci lobortis nibh, at gravida .</p>
				<div class="news-w3l">
					<form action="#" method="post">
						<input type="email" name="Email" placeholder="Enter Your Email..." required="">
						<input type="submit" value="Send">
					</form>
				</div>
			<div class="agile_footer_copy">
				<div class="w3agile_footer_grids">
					<div class="col-md-4 w3agile_footer_grid">
						<h3>About Us</h3>
						<p>Duis aute irure dolor in reprehenderit in voluptate velit esse.<span>Excepteur sint occaecat cupidatat 
							non proident, sunt in culpa qui officia deserunt mollit.</span></p>
					</div>
					<div class="col-md-4 w3agile_footer_grid">
						<h3>Contact Info</h3>
						<ul>
							<li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>1234k Avenue, 4th block, <span>New York City.</span></li>
							<li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:[email protected]">[email protected]</a></li>
							<li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>+1234 567 567</li>
						</ul>
					</div>
					<div class="col-md-4 w3agile_footer_grid w3agile_footer_grid1">
						<h3>Navigation</h3>
						<ul>
							<li><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span><a href="about.html">About</a></li>
							<li><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span><a href="gallery.html">Gallery</a></li>
							<li><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span><a href="icons.html">Web Icons</a></li>
							<li><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span><a href="mail.html">Mail Us</a></li>
						</ul>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<div class="w3_agileits_copy_right_social">
				<div class="col-md-6 agileits_w3layouts_copy_right">
					<p>? 2017 Style Decor. All rights reserved | Design by <a href="http://www.cqetom.live//">xmoban.cn</a></p>
				</div>
				<div class="col-md-6 w3_agile_copy_right">
					<ul class="agileinfo_social_icons">
						<li><a href="#" class="w3_agileits_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
						<li><a href="#" class="wthree_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
						<li><a href="#" class="agileinfo_google"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
						<li><a href="#" class="agileits_pinterest"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //footer -->
	<!-- jarallax -->
	<script type="text/javascript">
		/* init Jarallax */
		$('.jarallax').jarallax({
			speed: 0.5,
			imgWidth: 1366,
			imgHeight: 768
		})
	</script>
	<!-- //jarallax -->
<!-- //here ends scrolling icon -->



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子