粉色宽屏风格的室内设计企业网站源码下载



7 26 9



模板描述:粉色宽屏风格 室内设计 企业网站,粉色宽屏风格的室内设计企业网站源码下载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 href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen">
<link href="css/easy-responsive-tabs.css" rel='stylesheet' type='text/css'/>
<link href="css/nav.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/team.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=Josefin+Sans:100,300,400,600,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">

2. 引入JS

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery-func.js"></script>
<script src="js/owl.carousel.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/jquery.picEyes.js"></script>
<script src="js/jquery.chocolat.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/easy-responsive-tabs.js"></script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>

3. HTML代码

<!-- Header -->
		<div class="logo-w3layouts">
			<h1><a href="index.html"><span>inn</span>er <span>mot</span>if</a></h1>
		</div>
		<!-- Navigation -->
		<div class="container">
			<button class="btn-nav">
				<div class="bar arrow-top-r"></div>
				<div class="bar arrow-middle-r"></div>
				<div class="bar arrow-bottom-r"></div>
			</button>
			<nav class="nav-container hidden hideNav">
				<ul class="nav-list">
					<li class="list-item"><a href="#home" class="active scroll" ><i class="fa fa-home"></i></a></li>
					<li class="list-item"><a href="#about" class="scroll" ><i class="fa fa-user"></i></a></li>
					<li class="list-item"><a href="#latest" class="scroll" ><i class="fa fa-calendar"></i></a></li>
					<li class="list-item"><a href="#team" class="scroll" ><i class="fa fa-users"></i></a></li>
					<li class="list-item"><a href="#gallery" class="scroll" ><i class="fa fa-picture-o"></i></a></li>
					<li class="list-item"><a href="#contact" class="scroll" ><i class="fa fa-phone"></i></a></li>
				</ul>
			</nav>
		</div>
		<!-- //Navigation -->
		<!-- banner-slider -->
			<div class="w3l_banner_info" id="home">
				<div class="slider">
					<div class="callbacks_container">
								<ul class="rslides" id="slider3">
									<li>
										<div class="slider-img">
											<img src="images/b2.jpg" class="img-responsive" alt="impetus">
										</div>
										<div class="slider_banner_info">
										<div class="w3ls-info">
											 <h4>Where dream comes true</h4>
											<p>Lorem ipsum dolor sit amet, ut magna aliqua. </p>
										</div>
										</div>
									</li>
									<li>
										<div class="slider-img">
											<img src="images/b1.jpg" class="img-responsive" alt="impetus">
										</div>
										<div class="slider_banner_info">
										  <div class="w3ls-info">
											<h4>Known for home decorations</h4>
											<p>Lorem ipsum dolor sit amet, ut magna aliqua. </p>
										</div>
										</div>
									</li>
									<li>
										<div class="slider-img">
											<img src="images/b3.jpg" class="img-responsive" alt="impetus">
										</div>
										<div class="slider_banner_info">
										<div class="w3ls-info">
											<h4>Expert at interior designs</h4>
											<p>Lorem ipsum dolor sit amet, ut magna aliqua. </p>
										</div>
										</div>
									</li>
								</ul>
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
		<!-- //banner-slider -->
	<!-- //Header -->
<!-- about -->
<div class="about" id="about">
	<div class="about-bar-w3-agile">
		<h2>We are creative designers</h2>
		<a  href="#" class="readmore" data-toggle="modal" data-target="#myModal1">Read more</a>
		<div class="clearfix"></div>
	</div>
	<div class="about-main-w3-agile">
	<div class="col-md-6 about-left-agileits-w3layouts">
		<h3><span>I</span>nner <span>M</span>otif</h3>
		<p class="bold">Where dream comes true</p>
		<p class="para-w3layouts">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
		<a  href="#" class="find-about" data-toggle="modal" data-target="#myModal1">Find out more</a>
	</div>
	<div class="col-md-6 about-right-agileinfo">
		<p class="bold2">Welcome to inner Motif</p>
		<p class="para-w3layouts">Consectetur adipi lorem ipsum dolor sit amet, est eligendi scing elit consectetur.</p>
		<a  href="#" class="find-about" data-toggle="modal" data-target="#myModal1">Find out more</a>
	</div>
	<div class="clearfix"></div>
	</div>
</div>
<!-- //about-bottom -->
<!-- Modal2 -->
						<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>Inner Motif</h4>
										<img src="images/aleft.jpg" alt=" " class="img-responsive">
										<h5>Expert at interior designs</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>
						<!-- //Modal2 -->
<!--latest-->
<div class="latest" id="latest">
<div class="container">
<h3 class="tittle">Upcoming <span>events</span></h3>
	<div id="horizontalTab">
		<ul class="resp-tabs-list">
			<li>2017</li>
			<li>2016</li>
			<li>2015</li>
			<li>2014</li>
		</ul>
		<div class="resp-tabs-container">
			<div class="tab1">
				<div class="col-md-4 tab-w3ls">
					<div class="tab-info">
						<h3>Feb 02 2017 <span>Lorem Ipsum</span></h3>
						<h4>Lorem ipsum dolor sit amet, consectetur lacinia.</h4>
						<p>Faucibus</p>
					</div>
				</div>
				<div class="col-md-4 tab-w3ls">
					<div class="tab-info">
						<h3>Jan 26 2017 <span>Lorem Ipsum</span></h3>
						<h4>Aliquam luctus, nibh eleifend lacinia gravida</h4>
						<p>malesuada</p>
					</div>
				</div>
				<div class="col-md-4 tab-w3ls">
					<div class="tab-info">
						<h3>Jan 02 2017 <span>Lorem Ipsum</span></h3>
						<h4>Duis quis velit nunc. Sed posuere massa quis sapien</h4>
						<p>malesuada</p>
					</div>
				</div>
			</div>
			<div class="tab2">
				<div class="col-md-4 tab-w3ls">
					<div class="tab-info">
						<h3>Dec 06 2016 <span>Lorem Ipsum</span></h3>
						<h4>Lorem ipsum dolor sit amet, consectetur lacinia.</h4>
						<p>Faucibus</p>
					</div>
				</div>
				<div class="col-md-4 tab-w3ls">
					<div class="tab-info">
						<h3>Sep 26 2016 <span>Lorem Ipsum</span></h3>
						<h4>Aliquam luctus, nibh eleifend lacinia gravida</h4>
						<p>malesuada</p>
					</div>
				</div>
				<div class="col-md-4 tab-w3ls">
					<div class="tab-info">
						<h3>Aug 03 2016 <span>Lorem Ipsum</span></h3>
						<h4>Duis quis velit nunc. Sed posuere massa quis sapien</h4>
						<p>malesuada</p>
					</div>
				</div>
			</div>
			<div class="tab3">
				<div class="col-md-4 tab-w3ls">
					<div class="tab-info">
						<h3>Oct 16 2015 <span>Lorem Ipsum</span></h3>
						<h4>Duis quis velit nunc. Sed posuere massa quis sapien</h4>
						<p>Faucibus</p>
					</div>
				</div>
				<div class="col-md-4 tab-w3ls">
					<div class="tab-info">
						<h3>Jul 02 2015 <span>Lorem Ipsum</span></h3>
						<h4>Aliquam luctus, nibh eleifend lacinia gravida</h4>
						<p>malesuada</p>
					</div>
				</div>
				<div class="col-md-4 tab-w3ls">
					<div class="tab-info">
						<h3>May 11 2015 <span>Lorem Ipsum</span></h3>
						<h4>Lorem ipsum dolor sit amet, consectetur lacinia.</h4>
						<p>malesuada</p>
					</div>
				</div>
			</div>
			<div class="tab4">
				<div class="col-md-4 tab-w3ls">
					<div class="tab-info">
						<h3>Nov 24 2014 <span>Lorem Ipsum</span></h3>
						<h4>Lorem ipsum dolor sit amet, consectetur lacinia.</h4>
						<p>Faucibus</p>
					</div>
				</div>
				<div class="col-md-4 tab-w3ls">
					<div class="tab-info">
						<h3>Jul 04 2014 <span>Lorem Ipsum</span></h3>
						<h4>Aliquam luctus, nibh eleifend lacinia gravida</h4>
						<p>malesuada</p>
					</div>
				</div>
				<div class="col-md-4 tab-w3ls">
					<div class="tab-info">
						<h3>May 10 2014 <span>Lorem Ipsum</span></h3>
						<h4>Duis quis velit nunc. Sed posuere massa quis sapien</h4>
						<p>malesuada</p>
					</div>
				</div>
			</div>
		</div>
	</div>	
</div>	
</div>
<!--//latest-->
<!-- team -->
<!-- Team -->
<div class="team" id="team">
		<div class="container">
			<h3 class="tittle">Meet Our <span>Team</span></h3>
		<section class="main">
			<ul class="ch-grid">
				<li class="t1">
					<div class="ch-item ch-img-1">				
						<div class="ch-info-wrap">
							<div class="ch-info">
								<div class="ch-info-front ch-img-1"></div>
								<div class="ch-info-back1">
									<ul class="social-icons">
										<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-linkedin"></i></a></li>
										<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
									</ul>
								</div>	
							</div>
						</div>
					</div>
					<h4>Mariya Thomas</h4>
					<p class="team-info">Founder</p>
				</li>
				<li class="t2">
					<div class="ch-item ch-img-2">
						<div class="ch-info-wrap">
							<div class="ch-info">
								<div class="ch-info-front ch-img-2"></div>
								<div class="ch-info-back2">
									<ul class="social-icons">
										<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-linkedin"></i></a></li>
										<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<h4>Kate Winslet</h4>
					<p class="team-info">Designer</p>
				</li>
				<li class="t3">
					<div class="ch-item ch-img-3">
						<div class="ch-info-wrap">
							<div class="ch-info">
								<div class="ch-info-front ch-img-3"></div>
								<div class="ch-info-back3">
									<ul class="social-icons">
										<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-linkedin"></i></a></li>
										<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<h4>Elizabeth</h4>
					<p class="team-info">Designer</p>
				</li>
				<li class="t4">
					<div class="ch-item ch-img-4">
						<div class="ch-info-wrap">
							<div class="ch-info">
								<div class="ch-info-front ch-img-4"></div>
								<div class="ch-info-back4">
									<ul class="social-icons">
										<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-linkedin"></i></a></li>
										<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<h4>Johnny Cage</h4>
					<p class="team-info">Designer</p>
				</li>
			</ul>
		</section>      
    </div>
</div>	
<!-- /Team -->
 <!--/gallery-->
 <div class="gallery" id="gallery">
	<div class="container">
	<h3 class="tittle">Catalogue</h3>
		<div class="agile_gallery_grids w3-agile">
				<ul class="clearfix demo">
					<li>
						<div class="gallery-grid1">
							<img src="images/g1.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
								<h4><span>I</span>nner <span>M</span>otif</h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g2.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
								<h4><span>I</span>nner <span>M</span>otif</h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g3.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
							<h4><span>I</span>nner <span>M</span>otif</h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g4.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
								<h4><span>I</span>nner <span>M</span>otif</h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g5.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4><span>I</span>nner <span>M</span>otif</h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g6.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4><span>I</span>nner <span>M</span>otif</h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g7.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4><span>I</span>nner <span>M</span>otif</h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g8.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
								<h4><span>I</span>nner <span>M</span>otif</h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g9.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4><span>I</span>nner <span>M</span>otif</h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g10.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
								<h4><span>I</span>nner <span>M</span>otif</h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g11.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
								<h4><span>I</span>nner <span>M</span>otif</h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g12.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
								<h4><span>I</span>nner <span>M</span>otif</h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
	</div>
</div>
<!--//gallery-->
<!--/reviews-->
	<div id="testimonials" class="testimonials">
		<div class="container">
		<h3 class="tittle">Testimonials</h3>
				<div class="test-monials">
				<!--//screen-gallery-->
						<div class="sreen-gallery-cursual">
						       <div id="owl-demo" class="owl-carousel">
					                 <div class="item-owl">
					                	<div class="test-review">
										<div class="img-agile">
												<img src="images/t1.jpg" class="img-responsive" alt=""/>
											</div>
											  <h5>Linda Carl</h5>
										<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum stet clita kasd gubergren</p>
					                	    </div>
					                </div>
					                 <div class="item-owl">
					                	<div class="test-review">
										<div class="img-agile">
											<img src="images/t2.jpg" class="img-responsive" alt=""/>
											</div>
											<h5>Williams Allen</h5>
										 <p>Polite sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum stet clita kasd gubergren</p>
					                	</div>
					                </div>
					                 <div class="item-owl">
					                	<div class="test-review">
										<div class="img-agile">
											<img src="images/t3.jpg" class="img-responsive" alt=""/>
											</div>
											<h5>Ashley Rose</h5>
										     <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum stet clita kasd gubergren</p>
					                	</div>
					                </div>
				              </div>
						<!--//screen-gallery-->
					</div>
				</div>
			</div>
		</div>
<!--//reviews-->
<!--footer-->
<div class="contact-agile" id="contact">
			<div class="container">
				<h3 class="tittle">Get in touch <span>with us</span></h3>
				<div class="contact-left">
					<h4>Our Address</h4>
					<p>1143 New Hampshire Ave NW,</p>
					<p>DC 20037, USA</p>
					<h4>Phone</h4>
					<p>+(010) 221 918 811</p>
				</div>
				<div class="contact-middle">
					<h4>Say Hello</h4>
					<form action="#" method="post">
					<div class="form-agileinfo">
						<p>Name</p>
						<input type="text" name="your name" placeholder="Your name" required="" />
						<p>Email</p>
						<input type="email" name="your email" placeholder="Your email" required="" />
					</div>
					<div class="form-agileits-w3layouts">
					<p>Comments</p>
						<textarea  name="your message" placeholder="Your message" required="" ></textarea>
							<input type="submit"   value="Send message">
					</div>
					<div class="clearfix"></div>
					</form>
				</div>
			</div>
		</div>
		<div class="map-w3ls">
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6209.852593501853!2d-77.0416869731965!3d38.902800718279195!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xae69b9ad9dbd5ebf!2sRenaissance+Washington%2C+DC+Dupont+Circle+Hotel!5e0!3m2!1sen!2sin!4v1479208161830"></iframe>
		</div>
			<div class="copy">
		        <p>&copy; 2017 Inner Motif . All Rights Reserved | Design by <a href="http://www.51qianduan.com//">xmoban.cn</a> </p>
		    </div>
<!--/footer -->
<!-- js -->
<!-- Navigation-JavaScript -->
	<script>
		$(window).load(function() {
			$(".btn-nav").on("click tap", function() {
				$(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
				$(this).toggleClass("animated");
			});
		});
	</script>
	<!-- //Navigation-JavaScript -->
<!-- required-js-files-->
							        <script>
							    $(document).ready(function() {
							      $("#owl-demo").owlCarousel({
							        items : 1,
							        lazyLoad : true,
							        autoPlay : true,
							        navigation : false,
							        navigationText :  false,
							        pagination : true,
							      });
							    });
							    </script>
								 <!--//required-js-files-->
<!-- 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 -->
<!--gallery-js -->
				<script>
					$(function(){
						//picturesEyes($('.demo li'));
						$('.demo li').picEyes();
					});
				</script>
<!--//gallery-js -->
<!--light-box-files -->
<!--//light-box-files -->
		<script type="text/javascript">
		$(function() {
			$('.gallery a').Chocolat();
		});
		</script>
<!-- //js -->
							<script>
								// You can also use "$(window).load(function() {"
								$(function () {
								  // Slideshow 3
								  $("#slider3").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>
<!--tabs-->
<script>
$(document).ready(function () {
$('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion           
width: 'auto', //auto or any width like 600px
fit: true,   // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = $(this);
var $info = $('#tabInfo');
var $name = $('span', $info);
$name.text($tab.text());
$info.show();
}
});
$('#verticalTab').easyResponsiveTabs({
type: 'vertical',
width: 'auto',
fit: true
});
});
</script>
<!--//tabs-->
<!-- smooth scrolling -->
	<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>
	<a href="#home" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 粉色 宽屏 全屏 满屏 设计 设计公司
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到