红色欧美风格的物流公司企业网站源码下载



4 14 5



模板描述:红色欧美风格 物流公司 企业网站,红色欧美风格的物流公司企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" 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/flexslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css">
<link href="//fonts.googleapis.com/css?family=Tulpen+One" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="js/lightbox-plus-jquery.min.js"> </script>
<script src="js/jquery-2.2.3.min.js"></script>
<script defer src="js/jquery.flexslider.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 src="js/bars.js"></script>
<script src="js/bootstrap.js"></script>

3. HTML代码

	<!-- header -->
	<div id="home" class="header">
		<div class="container">
			<div class="header-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 class="logo">
							<h1><a class="navbar-brand" href="index.html"><span>M</span> <span>T</span> <span>J</span><br><i>Packers & Movers</i></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">
					 <ul class="nav navbar-nav">
						<li class="hvr-sweep-to-bottom active"><a href="index.html">Home</a></li>
						<li class="hvr-sweep-to-bottom"><a href="#about" class="scroll">About</a></li>
						<li class="hvr-sweep-to-bottom"><a href="#services" class="scroll">Services</a></li>
						<li class="hvr-sweep-to-bottom"><a href="#gallery" class="scroll">Gallery</a></li>
						<li class="hvr-sweep-to-bottom"><a href="#news" class="scroll">News</a></li> 
						<li class="hvr-sweep-to-bottom"><a href="#contact" class="scroll">Contact Us</a></li>
					  </ul>
					</div><!-- /.navbar-collapse -->
				</nav>
			</div>
		</div>
	</div>
	<!-- //header -->
	<!-- banner -->
	<div class="banner">  
		<!-- banner-text -->
		<div class="banner-text"> 
			<h4><span class="glyphicon glyphicon-phone"></span> +11 222 333 444</h4>	
			<div class="flexslider">
				<ul class="slides">
					<li>
						<h5>Duis euismod massa ut sem fringilla blandit </h5>
						<h6>1</h6>
						<h2>International Packers & Movers</h2>
					</li>
					<li>
						<h5>Sem fringilla blandit duis euismod massa ut </h5>
						<h6>1</h6>
						<h3>Safe & Secure Transportation</h3>
					</li>
					<li>
						<h5>Fringilla blandit duis euismod massa ut sem</h5>
						<h6>1</h6>
						<h3>We Are Best Moving Experts</h3>
					</li>
				</ul>
			</div>    
		</div> 
		<!-- //banner-text -->   
	</div>
	<!-- //banner -->
	<!-- welcome -->
	<div class="welcome">
		<div class="container"> 
			<h3 class="w3title-agile">Welcome</h3> 
			<div class="w3l-welcome-info">
				<div class="col-sm-6 col-xs-6 welcome-grids">
					<div class="welcome-img">
						<img src="images/img1.jpg" class="img-responsive zoom-img" alt="">
					</div>
				</div>
				<div class="col-sm-6 col-xs-6 welcome-grids">
					<div class="welcome-img">
						<img src="images/img2.jpg" class="img-responsive zoom-img" alt="">
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="w3l-welcome-text">
				<p>Nam libero tempore cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus omnis optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae </p>
			</div>
		</div>
	</div>
	<!-- //welcome -->
	<!-- about -->
	<div id="about" class="about">
		<div class="container">
			<h3 class="w3title-agile">About Us</h3>  
			<div class="about-tp">
				<div class="col-md-6 about-agileits-w3layouts-left">
					<iframe src="https://player.vimeo.com/video/108777231?color=6c6e95&title=0&byline=0"></iframe>
				</div>
				<div class="col-md-6 about-agileits-w3layouts-right">
					<h4>Voluptatibus maiores  </h4>
					<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
					<div class="bar_group bars-w3ls-row">
						<div class='bar_group__bar thin' label='Ut Commodo' show_values='true' tooltip='true' value='350'></div>
						<div class='bar_group__bar thin' label='Nulla Facilisi' show_values='true' tooltip='true' value='222'></div>
						<div class='bar_group__bar thin' label='Lorem ipsum dolor' show_values='true' tooltip='true' value='450'></div>
						<div class='bar_group__bar thin' label='Nam ex velit' show_values='true' tooltip='true' value='286'></div>
					</div> 
				</div>
				<div class="clearfix"></div> 
			</div>
		</div>
	</div>
	<!-- //about-->
	<!-- services -->
	<div id="services" class="services">
		<div class="container">
			<h3 class="w3title-agile">Our Services</h3> 
			<div class="w3-agileits-services-grids"> 
				<div class="col-md-6 w3-agileits-services-right">
					<div class="services-right-grids">
						<div class="col-sm-6 col-xs-6 services-right-grid">
							<div class="services-icon hvr-radial-in">
								<i class="fa fa-anchor" aria-hidden="true"></i>
							</div>
							<div class="services-icon-info">
								<h5>Phasellus suscipit</h5>
							</div>
						</div>
						<div class="col-sm-6 col-xs-6 services-right-grid">
							<div class="services-icon hvr-radial-in">
								<i class="fa fa-line-chart" aria-hidden="true"></i>
							</div>
							<div class="services-icon-info">
								<h5>Phasellus suscipit</h5>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="services-right-grids">
						<div class="col-sm-6 col-xs-6 services-right-grid">
							<div class="services-icon hvr-radial-in">
								<i class="fa fa-check-square-o" aria-hidden="true"></i>
							</div>
							<div class="services-icon-info">
								<h5>Phasellus suscipit</h5>
							</div>
						</div>
						<div class="col-sm-6 col-xs-6 services-right-grid">
							<div class="services-icon hvr-radial-in">
								<i class="fa fa-ship" aria-hidden="true"></i>
							</div>
							<div class="services-icon-info">
								<h5>Phasellus suscipit</h5>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="services-right-grids">
						<div class="col-sm-6 col-xs-6 services-right-grid">
							<div class="services-icon hvr-radial-in">
							<i class="fa fa-truck" aria-hidden="true"></i>
							</div>
							<div class="services-icon-info">
								<h5>Phasellus suscipit</h5>
							</div>
						</div>
						<div class="col-sm-6 col-xs-6 services-right-grid">
							<div class="services-icon hvr-radial-in">
								<i class="fa fa-plane" aria-hidden="true"></i>
							</div>
							<div class="services-icon-info">
								<h5>Phasellus suscipit</h5>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="col-md-6 w3-agileits-services-left">
					<div class="srvs-slider-w3info">
						<div class="flexslider">
							<ul class="slides">
								<li>
									<div class="w3ls-services-text">
										<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent maximus metus nec mattis tempus.</h5>
										<p>Donec feugiat tellus sem, laoreet iaculis orci lobortis vel. Sed sed luctus orci, at lacinia risus. Ut porttitor ante ac tincidunt elementum. Curabitur ex dolor, condimentum vitae nunc vel, pulvinar semper justo.<span>Vestibulum ex lectus, posuere eu viverra at, mattis et enim. Nam efficitur sem et lectus fringilla, at pharetra nulla luctus.</span></p>
									</div>
								</li>
								<li>
									<div class="w3ls-services-text">
										<h5>Aliquam id felis id mi ultrices rhoncus. Quisque pellentesque felis vel magna faucibus sed.</h5>
										<p>Nullam maximus dolor sed velit gravida, quis vestibulum eros sagittis. Nulla ultricies metus a turpis pretium volutpat. Cras consectetur tempus lectus id accumsan. Vivamus gravida justo mattis ex pretium, <span>eu sollicitudin tortor ullamcorper. Quisque vitae diam molestie, tincidunt velit vitae, viverra nisl. Mauris ultrices commodo.</span></p>
									</div>
								</li>
								<li>
									<div class="w3ls-services-text">
										<h5>Etiam eu est aliquet orci suscipit egestas sed ut leo. Ut ultrices neque vel mi venenatis</h5>
										<p>Ut porttitor, ante at tincidunt eleifend, quam massa laoreet odio, eu tincidunt lorem mauris ut velit. Etiam tempor nibh ut odio pellentesque, lacinia placerat dui hendrerit. Integer mi lorem, consequat non malesuada et,<span>pellentesque eget nisl. Praesent sed dui ac lectus vehicula molestie. Etiam maximus ultrices dolor, sit amet tincidunt</span></p>
									</div>
								</li>
							</ul>
						</div>  
					</div>  
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //services -->
	<!-- gallery -->
	<div id="gallery" class="gallery">
		<div class="container"> 
			<h3 class="w3title-agile">Our Gallery</h3> 
		</div>
		<div class="gallery-grids">
			<div class="gallery-top-grids">
				<div class="col-sm-3 gallery-grids-left">
					<div class="gallery-grid">
						<a class="example-image-link" href="images/g1.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae cursus ligula">
							<img src="images/g1.jpg" alt="" />
							<div class="w3captn-agileits">
								<h4>Our Gallery</h4>
								<p>Aliquam non</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 gallery-grids-left">
					<div class="gallery-grid">
						<a class="example-image-link" href="images/g2.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae cursus ligula">
							<img src="images/g2.jpg" alt="" />
							<div class="w3captn-agileits">
								<h4>Our Gallery</h4>
								<p>Aliquam non</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 gallery-grids-left">
					<div class="gallery-grid">
						<a class="example-image-link" href="images/g3.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae cursus ligula">
							<img src="images/g3.jpg" alt="" />
							<div class="w3captn-agileits">
								<h4>Our Gallery</h4>
								<p>Aliquam non</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 gallery-grids-left">
					<div class="gallery-grid">
						<a class="example-image-link" href="images/g4.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae cursus ligula">
							<img src="images/g4.jpg" alt="" />
							<div class="w3captn-agileits">
								<h4>Our Gallery</h4>
								<p>Aliquam non</p>
							</div>
						</a>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="gallery-top-grids">
				<div class="col-sm-3 gallery-grids-left">
					<div class="gallery-grid">
						<a class="example-image-link" href="images/g5.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae cursus ligula">
							<img src="images/g5.jpg" alt="" />
							<div class="w3captn-agileits">
								<h4>Our Gallery</h4>
								<p>Aliquam non</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 gallery-grids-left">
					<div class="gallery-grid">
						<a class="example-image-link" href="images/g6.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae cursus ligula">
							<img src="images/g6.jpg" alt="" />
							<div class="w3captn-agileits">
								<h4>Our Gallery</h4>
								<p>Aliquam non</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 gallery-grids-left">
					<div class="gallery-grid">
						<a class="example-image-link" href="images/g7.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae cursus ligula">
							<img src="images/g7.jpg" alt="" />
							<div class="w3captn-agileits">
								<h4>Our Gallery</h4>
								<p>Aliquam non</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 gallery-grids-left">
					<div class="gallery-grid">
						<a class="example-image-link" href="images/img1.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae cursus ligula">
							<img src="images/img1.jpg" alt="" />
							<div class="w3captn-agileits">
								<h4>Our Gallery</h4>
								<p>Aliquam non</p>
							</div>
						</a>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="gallery-top-grids">
				<div class="col-sm-3 gallery-grids-left">
					<div class="gallery-grid">
						<a class="example-image-link" href="images/img2.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae cursus ligula">
							<img src="images/img2.jpg" alt="" />
							<div class="w3captn-agileits">
								<h4>Our Gallery</h4>
								<p>Aliquam non</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 gallery-grids-left">
					<div class="gallery-grid">
						<a class="example-image-link" href="images/g4.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae cursus ligula">
							<img src="images/g4.jpg" alt="" />
							<div class="w3captn-agileits">
								<h4>Our Gallery</h4>
								<p>Aliquam non</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 gallery-grids-left">
					<div class="gallery-grid">
						<a class="example-image-link" href="images/g1.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae cursus ligula">
							<img src="images/g1.jpg" alt="" />
							<div class="w3captn-agileits">
								<h4>Our Gallery</h4>
								<p>Aliquam non</p>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 gallery-grids-left">
					<div class="gallery-grid">
						<a class="example-image-link" href="images/g.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae cursus ligula">
							<img src="images/g2.jpg" alt="" />
							<div class="w3captn-agileits">
								<h4>Our Gallery</h4>
								<p>Aliquam non</p>
							</div>
						</a>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!-- //gallery --> 
	<!-- news --> 
	<div id="news" class="content-mid">
		<div class="col-md-3 content-mid1">
			<div class=" content-mid-img">
			</div>
		</div>
		<div class="col-md-6 content-mid2">
			<div class=" grid-middle">
				<div class="grid-mid"> 
					<h3 class="w3title-agile">Latest News</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p> 
					<div class="news-agileitsinfo">
						<div class="col-sm-6 latest-grid">
							<div class="col-md-9 col-xs-9 news-w3lsleft">
								<h5><a href="#myModal" data-toggle="modal">Lorem ipsum dolor sit</a></h5>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
							</div>
							<div class="col-md-3 col-xs-3 news-w3lsright">
								<h4>20<span>Feb</span></h4>					
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="col-sm-6 latest-grid">
							<div class="col-md-3 col-xs-3 news-w3lsright">
								<h4>16<span>Feb</span></h4>					
							</div>
							<div class="col-md-9 col-xs-9 news-w3lsleft in-news">
								<h5><a href="#myModal" data-toggle="modal">Lorem ipsum dolor sit</a></h5>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
							</div> 
							<div class="clearfix"> </div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="news-agileitsinfo">
						<div class="col-sm-6 latest-grid">
							<div class="col-md-9 col-xs-9 news-w3lsleft">
								<h5><a href="#myModal" data-toggle="modal">Lorem ipsum dolor sit</a></h5>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
							</div>
							<div class="col-md-3 col-xs-3 news-w3lsright">
								<h4>11<span>Feb</span></h4>					
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class=" col-sm-6 latest-grid">
							<div class="col-md-3 col-xs-3 news-w3lsright">
								<h4>09<span>Feb</span></h4>					
							</div>
							<div class="col-md-9 col-xs-9 news-w3lsleft in-news">
								<h5><a href="#myModal" data-toggle="modal">Lorem ipsum dolor sit</a></h5>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
							</div> 
							<div class="clearfix"> </div>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-3 content-mid1">
			<div class=" content-mid-img1">
			</div>			
		</div>
		<div class="clearfix"></div>
	</div>
	<!-- //news -->
	<!-- testimonials -->
	<div class="testimonials">
		<div class="container">
			<h3 class="w3title-agile">testimonials</h3> 
			<div class="w3_testimonials_grids">
				<section class="slider">
					<div class="flexslider flexslider1">
						<ul class="slides">
							<li>	
								<div class="w3_testimonials_grid">
									<img src="images/1.png" alt=" " class="img-responsive" />
									<h4><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>
									<p>Founder</p>
								</div>
							</li>
							<li>	
								<div class="w3_testimonials_grid">
									<img src="images/2.png" alt=" " class="img-responsive" />
									<h4><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>
									<p>Transport Agent</p>
								</div>
							</li>
							<li>	
								<div class="w3_testimonials_grid">
									<img src="images/3.png" alt=" " class="img-responsive" />
									<h4><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>
									<p>Transport Agent</p>
								</div>
							</li>
						</ul>
					</div>
				</section>
				<!-- flexSlider -->  
					<script type="text/javascript">
					$(window).load(function(){
					  $('.flexslider1').flexslider({
						animation: "slide",
						start: function(slider){
						  $('body').removeClass('loading');
						}
					  });
					});
				  </script>
				<!-- //flexSlider -->
			</div>
		</div>
	</div>
	<!-- //testimonials -->
	<!-- news letter -->
	<div class="subscribe">
		<div class="container">
			<h3 class="w3title-agile">Get our free newsletter</h3>
			<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur adipisci velit sed quia non numquam eius.</p>
			<form>
				<input type="email" name="email" placeholder="Email Address" class="user" required="">
				<input type="submit" value="Subscribe">
			</form>
			<p class="spam">We never share your information or use it to spam you</p>
		</div>
	</div>
	<!-- //news letter -->
	<!-- map -->
	<div id="contact" class="map">
		<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d2482.432383990807!2d0.028213999961443994!3d51.52362882484525!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1423469959819" ></iframe>
		<div class="map-pos">
			<h3>ADDRESS</h3>
			<p>1234k Avenue, 4th block</p>
			<p>Newyork City.</p>
			<p>Call : 123 456 7890</p>
			<p><a href="mailto:info@example.com">info@example.com</a></p>
		</div>
	</div>
	<!-- //map -->
	<!-- contact -->
	<div class="contact">
		<div class="container">
			<h3 class="w3title-agile">Contact Us</h3>
			<form action="#" method="post">
				<div class="col-sm-6 contact-left">
					<input type="text" name="Name" placeholder="Your Name" required="">
					<input type="email" name="Email" placeholder="Email" required="">
					<input type="text" name="Mobile Number" placeholder="Mobile Number" required="">
				</div>
				<div class="col-sm-6 contact-right"> 
					<textarea name="Message" placeholder="Message" required=""></textarea>
					<input type="submit" value="Submit" >
				</div>
				<div class="clearfix"></div>
			</form>
		</div>
	</div> 
	<div class="footer">
		<div class="container">
			<ul class="foo-nav">
				<li><a class="scroll" href="#home">HOME</a></li>
				<li><a class="scroll" href="#about">ABOUT</a></li>
				<li><a class="scroll" href="#services">SERVICES</a></li>
				<li><a class="scroll" href="#gallery">GALLERY</a></li>
				<li><a class="scroll" href="#news">NEWS</a></li>
				<li><a class="scroll" href="#contact">CONTACT</a></li>
			</ul>
			<p><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+123 456 7890</p>
			<div class="social-w3licon">
				<a href="#" class="social-button twitter"><i class="fa fa-twitter"></i></a>
				<a href="#" class="social-button facebook"><i class="fa fa-facebook"></i></a> 
				<a href="#" class="social-button google"><i class="fa fa-google-plus"></i></a> 
				<a href="#" class="social-button dribbble"><i class="fa fa-dribbble"></i></a> 
			</div>  
		</div>
	</div>
	<div class="copy-right">
		<div class="container">
			<p>&copy; 2017 MTJ. All rights reserved | Design by <a href="http://www.51qianduan.com/">xmoban.cn</a></p>
		</div>
	</div>
	<!-- //contact -->
	<!-- modal-about -->
	<div class="modal bnr-modal fade" id="myModal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
				</div> 
				<div class="modal-body modal-spa">
					<img src="images/g2.jpg" class="img-responsive" alt=""/>
					<h4>Consectetur adipiscing elit</h4>
					<p>Donec fringilla lacus eu pretium rutrum. Cras aliquet congue ullamcorper. Etiam mattis eros eu ullamcorper volutpat. Proin ut dui a urna efficitur varius. uisque molestie cursus mi et congue consectetur adipiscing elit cras rutrum iaculis enim, Lorem ipsum dolor sit amet, non convallis felis mattis at. Maecenas sodales tortor ac ligula ultrices dictum et quis urna. Etiam pulvinar metus neque, eget porttitor massa vulputate in.<br> Fusce lacus purus, pulvinar ut lacinia id, sagittis eu mi. Vestibulum eleifend massa sem, eget dapibus turpis efficitur at. Aliquam viverra quis leo et efficitur. Nullam arcu risus, scelerisque quis interdum eget, fermentum viverra turpis. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut At vero eos </p>
				</div> 
			</div>
		</div>
	</div>
	<!-- //modal-about -->     
	<!-- js --> 
	<!-- FlexSlider --> 
	<script type="text/javascript">
		$(window).load(function(){
		  $('.flexslider').flexslider({
			animation: "slide",
			start: function(slider){
			  $('body').removeClass('loading');
			}
		  });
		});
	</script>
	<!-- End-slider-script -->
	<script src="js/SmoothScroll.min.js"></script> 
	<!-- start-smooth-scrolling -->
	<script type="text/javascript" src="js/easing.js"></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>
	<!-- //end-smooth-scrolling -->	
	<!-- smooth-scrolling-of-move-up -->
	<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>
	<!-- //smooth-scrolling-of-move-up -->  
	<script src="js/bars.js"></script> 
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 扁平化 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 pc+wap 移动+电脑 手机+电脑 红色 简洁 简约 简单 运输 货运 快递 货运公司 快递公司 运输公司
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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