白色欧美风格的摇滚乐队企业网站源码下载



4 12 5



模板描述:白色欧美风格 摇滚乐队 企业网站,白色欧美风格的摇滚乐队企业网站源码下载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 type="text/css" rel="stylesheet" href="css/cm-overlay.css" />
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<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'>
<link href="css/animate.css" rel="stylesheet" type="text/css" media="all">

2. 引入JS

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/wow.min.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script src="js/jquery.mobile.custom.min.js"></script>
<script src="js/jquery.cm-overlay.js"></script>
<script src="js/jarallax.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script src="js/responsiveslides.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 jarallax">
		<div class="agileinfo-dot">
			<div class="header">
				<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="agileits-logo">
								<h1><a href="index.html"><img src="images/logo1.png" alt="" /> Rock Music</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>
								<ul class="nav navbar-nav">
									<li class="active"><a href="index.html">Home</a></li>
									<li><a href="#about" class="scroll">About</a></li>
									<li><a href="#events" class="scroll">Events</a></li>
									<li><a href="#team" class="scroll">Team</a></li>
									<li><a href="#news" class="scroll">News</a></li>
									<li><a href="#mail" class="scroll">Mail Us</a></li>
								</ul>
							</nav>
						</div>
						<!-- /.navbar-collapse -->
					</nav>
				</div>
			</div>
			<div class="w3layouts-banner-info">
				<div class="container">
					<div class="w3ls-text">
						<h2>Week end DJ</h2>
					</div>
					<div class="w3-arrow bounce animated">
						<a href="#indro" class="scroll"><i class="fa fa-angle-down" aria-hidden="true"></i></a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //banner -->
	<!-- introduction -->
	<div class="introduction" id="indro">
		<div class="container">
			<div class="w3l-heading">
				<h3>Introduction</h3>
				<div class="w3ls-border"> </div>
			</div>
			<div class="introduction-info">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus iaculis lacus in pharetra. Morbi tincidunt nisi et bibendum varius. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vulputate arcu consequat enim vulputate posuere. Aenean malesuada quam vitae mi ullamcorper, vel lobortis risus rutrum.</p>
			</div>
		</div>
	</div>
	<!-- //introduction -->
	<!-- about -->
	<div class="about" id="about">
		<div class="container">
			<div class="w3l-heading about-heading">
				<h3>About Us</h3>
				<div class="w3ls-border about-border"> </div>
			</div>
			<div class="agileits-about-grids">
				<div class="about-grids">
					<div class="col-md-6 about-grid">
						<div class="col-xs-3 about-grid-left">
							<span class="glyphicon glyphicon-asterisk effect-1" aria-hidden="true"></span>
						</div>
						<div class="col-xs-9 about-grid-right">
							<h4>Cum soluta nobis est</h4>
							<p>Itaque earum rerum hic tenetur a sapiente delectus 
							reiciendis maiores alias consequatur aut</p>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="col-md-6 about-grid">
						<div class="col-xs-3 about-grid-left">
							<span class="glyphicon glyphicon-road effect-1" aria-hidden="true"></span>
						</div>
						<div class="col-xs-9 about-grid-right">
							<h4>Soluta nobis est cum</h4>
							<p>Itaque earum rerum hic tenetur a sapiente delectus 
							reiciendis maiores alias consequatur aut</p>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="about-grids1">
					<div class="col-md-6 about-grid">
						<div class="col-xs-3 about-grid-left">
							<span class="glyphicon glyphicon-plane effect-1" aria-hidden="true"></span>
						</div>
						<div class="col-xs-9 about-grid-right">
							<h4>Eligendi cum soluta nobis</h4>
							<p>Itaque earum rerum hic tenetur a sapiente delectus 
							reiciendis maiores alias consequatur aut</p>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="col-md-6 about-grid">
						<div class="col-xs-3 about-grid-left">
							<span class="glyphicon glyphicon-bed effect-1" aria-hidden="true"></span>
						</div>
						<div class="col-xs-9 about-grid-right">
							<h4>Nobis cum soluta est</h4>
							<p>Itaque earum rerum hic tenetur a sapiente delectus 
							reiciendis maiores alias consequatur aut</p>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>
	<!-- //about -->
	<!-- gallery -->
	<div class="gallery" id="events">
		<div class="container">
			<div class="w3l-heading">
				<h3>Our Events</h3>
				<div class="w3ls-border"> </div>
			</div>
			<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
					<ul id="myTab" class="nav nav-tabs" role="tablist">
						<li role="presentation" class="active"><a href="#home-main" id="home-tab" role="tab" data-toggle="tab" aria-controls="home-main" aria-expanded="true">All</a></li>
						<li role="presentation"><a href="#learning" role="tab" id="learning-tab" data-toggle="tab" aria-controls="learning">Category 1</a></li>
						<li role="presentation"><a href="#playing" role="tab" id="playing-tab" data-toggle="tab" aria-controls="playing">Category 2</a></li>
						<li role="presentation"><a href="#painting" role="tab" id="painting-tab" data-toggle="tab" aria-controls="painting">Category 3</a></li>
						<li role="presentation"><a href="#school" role="tab" id="school-tab" data-toggle="tab" aria-controls="school">Category 4</a></li>
					</ul>
					<div id="myTabContent" class="tab-content">
						<div role="tabpanel" class="tab-pane fade in active" id="home-main" aria-labelledby="home-tab">
							<div class="w3_tab_img">
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g1.jpg">
										  <figure class="imghvr-shutter-in-out-diag-2"><img src="images/g1.jpg" alt=" " class="img-responsive" />
										  </figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Lorem</h5>
										<p>Consectetur</p>
									</div>
								</div>
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g2.jpg">
										  <figure class="imghvr-shutter-in-out-diag-2"><img src="images/g2.jpg" alt=" " class="img-responsive" />
										  </figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Ipsum</h5>
										<p>Adipiscing </p>
									</div>
								</div>
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g3.jpg">
										  <figure class="imghvr-shutter-in-out-diag-2"><img src="images/g3.jpg" alt=" " class="img-responsive" />
											</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Vivamus</h5>
										<p>Ullamcorper  </p>
									</div>
								</div>
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g4.jpg">
										  <figure class="imghvr-shutter-in-out-diag-2"><img src="images/g4.jpg" alt=" " class="img-responsive" />
										</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Fusce</h5>
										<p>Tristique</p>
									</div>
								</div>
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g5.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g5.jpg" alt=" " class="img-responsive" />
											</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Nullam</h5>
										<p>accumsan</p>
									</div>
								</div>
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g6.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g6.jpg" alt=" " class="img-responsive" />
											</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Donec</h5>
										<p>Vulputate</p>
									</div>
								</div>
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g7.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g7.jpg" alt=" " class="img-responsive" />
											</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Vivamus</h5>
										<p>Sodales</p>
									</div>
								</div>
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g1.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g1.jpg" alt=" " class="img-responsive" />
											</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Morbi</h5>
										<p>Ornare </p>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="learning" aria-labelledby="learning-tab">
							<div class="w3_tab_img">
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g2.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g2.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Vivamus</h5>
										<p>Eleifend</p>
									</div>
								</div>
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g3.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g3.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Cras</h5>
										<p>Pulvinar</p>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="playing" aria-labelledby="playing-tab">
							<div class="w3_tab_img">
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g4.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g4.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Maecenas</h5>
										<p>Blandit</p>
									</div>
								</div>
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g5.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g5.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Sodales</h5>
										<p>Vivamus</p>
									</div>
								</div>
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g6.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g6.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Vivamus</h5>
										<p>Eleifend</p>
									</div>
								</div>
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g7.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g7.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Maecenas</h5>
										<p>Blandit</p>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="painting" aria-labelledby="painting-tab">
							<div class="w3_tab_img">
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g1.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g1.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Morbi</h5>
										<p>Ornare </p>
									</div>
								</div>
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g2.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g2.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Cras</h5>
										<p>Pulvinar</p>
									</div>
								</div>
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g3.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g3.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Donec</h5>
										<p>Vulputate</p>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="school" aria-labelledby="school-tab">
							<div class="w3_tab_img">
								<div class="col-sm-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/g4.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/g4.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
									<div class="agile-gallery-info">
										<h5>Lorem</h5>
										<p>Consectetur</p>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
					</div>
			</div>
			<script>
				$(document).ready(function(){
					$('.cm-overlay').cmOverlay();
				});
			</script>
		</div>
	</div>
	<!-- //gallery -->
	<!-- team -->
	<div class="team jarallax" id="team">
		<div class="team-dot">
			<div class="container">
				<div class="w3l-heading about-heading">
					<h3>Our Team</h3>
					<div class="w3ls-border about-border"> </div>
				</div>
				<div class="agileits-team-grids">
					<div class="col-md-3 agileits-team-grid">
						<div class="team-info">
							<img src="images/t1.jpg" alt="" />
							<div class="team-caption"> 
								<h4>Justo congue</h4>
								<p>Fusce laoreet</p>
								<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>
					</div>
					<div class="col-md-3 agileits-team-grid">
						<div class="team-info">
							<img src="images/t2.jpg" alt="" />
							<div class="team-caption"> 
								<h4>Justo congue</h4>
								<p>Fusce laoreet</p>
								<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>
					</div>
					<div class="col-md-3 agileits-team-grid">
						<div class="team-info">
							<img src="images/t3.jpg" alt="" />
							<div class="team-caption"> 
								<h4>Justo congue</h4>
								<p>Fusce laoreet</p>
								<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>
					</div>
					<div class="col-md-3 agileits-team-grid">
						<div class="team-info">
							<img src="images/t4.jpg" alt="" />
							<div class="team-caption"> 
								<h4>Justo congue</h4>
								<p>Fusce laoreet</p>
								<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>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>
	<!-- //team -->
	<!-- news -->
	<div class="news" id="news">
		<div class="container">
			<div class="w3l-heading">
				<h3>Our news</h3>
				<div class="w3ls-border"> </div>
			</div>
			<div class="wthree-news-grids">
				<!-- date -->
				<div id="design" class="date">
					<div id="cycler">   
						<div class="wthree-news-grid">
							<div class="wthree-news-left">
								<h4>03 <span>Jan 2017</span></h4>
							</div>
							<div class="date-text">
								<a href="#" data-toggle="modal" data-target="#myModal"> Lorem ipsum dolor sit amet</a>
								<p>Morbi felis sapien, pulvinar quis pharetra rutrum, auctor sit amet ipsum. Aliquam dictum massa ut porttitor ultricies. Duis non enim eros. Aliquam sed porttitor lectus.</p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="wthree-news-grid">
							<div class="wthree-news-left">
								<h4>08 <span>Sept 2017</span></h4>
							</div>
							<div class="date-text">
								<a href="#" data-toggle="modal" data-target="#myModal"> Cras vestibulum dapibus <span class="blinking"><img src="images/new.png" alt="" /></span></a>
								<p>Curabitur egestas porttitor erat quis cursus. Aliquam nec sapien urna. Curabitur tincidunt dolor sed metus maximus dapibus. Integer ligula enim, condimentum id commodo eget</p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="wthree-news-grid">
							<div class="wthree-news-left">
								<h4>17 <span>July 2017</span></h4>
							</div>
							<div class="date-text">
								<a href="#" data-toggle="modal" data-target="#myModal"> Fusce id molestie mauris</a>
								<p>Cras blandit felis augue, nec faucibus lectus hendrerit vitae. Vestibulum rutrum, magna id pellentesque fermentum, est risus scelerisque leo, at consequat nunc sem non tortor.</p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="wthree-news-grid">
							<div class="wthree-news-left">
								<h4>15 <span>Aug 2017</span></h4>
							</div>
							<div class="date-text">
								<a href="#" data-toggle="modal" data-target="#myModal"> Aliquam vulputate arcu enim <span class="blinking"><img src="images/new.png" alt="" /></span></a>
								<p>Aliquam sed porttitor lectus. Donec sagittis magna non eros convallis, dapibus iaculis nunc tincidunt. Pellentesque quam nisi, cursus non vestibulum ac, vehicula eu tortor.</p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="wthree-news-grid">
							<div class="wthree-news-left">
								<h4>24 <span>Sept 2017</span></h4>
							</div>
							<div class="date-text">
								<a href="#" data-toggle="modal" data-target="#myModal"> Donec ac turpis aliquet</a>
								<p>Curabitur facilisis fermentum gravida. Nunc suscipit nec enim ut suscipit. Mauris mollis lectus at mi vehicula rutrum vel non dolor. Nulla ut purus arcu. Pellentesque sed finibus</p>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="wthree-news-grid">
							<div class="wthree-news-left">
								<h4>24 <span>Oct 2017</span></h4>
							</div>
							<div class="date-text">
								<a href="#" data-toggle="modal" data-target="#myModal"> Morbi nec justo ut ex rhoncus luctus</a>
								<p>Nullam accumsan imperdiet elementum. Quisque volutpat sapien sed ipsum condimentum elementum. Suspendisse potenti. Maecenas fermentum justo sit amet interdum viverra.</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>						
					<script>
						function blinker() {
							$('.blinking').fadeOut(500);
							$('.blinking').fadeIn(500);
						}
						setInterval(blinker, 1000);
					</script>
					<script>
						function cycle($item, $cycler){
							setTimeout(cycle, 2000, $item.next(), $cycler);
							$item.slideUp(1000,function(){
								$item.appendTo($cycler).show();        
							});
						}
						cycle($('#cycler div:first'),  $('#cycler'));
					</script>
				</div>
				<!-- //date -->
			</div>
		</div>
	</div>
	<!-- //news -->
	<!-- modal -->
	<div class="modal about-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>						
						<h4 class="modal-title">Rock Music</h4>
						<h5>24 Sept 2017</h5>
					</div> 
					<div class="modal-body">
					<div class="agileits-w3layouts-info">
						<img src="images/1.jpg" alt="" />
						<p>Duis venenatis, turpis eu bibendum porttitor, sapien quam ultricies tellus, ac rhoncus risus odio eget nunc. Pellentesque ac fermentum diam. Integer eu facilisis nunc, a iaculis felis. Pellentesque pellentesque tempor enim, in dapibus turpis porttitor quis. Suspendisse ultrices hendrerit massa. Nam id metus id tellus ultrices ullamcorper.  Cras tempor massa luctus, varius lacus sit amet, blandit lorem. Duis auctor in tortor sed tristique. Proin sed finibus sem.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //modal -->
	<!-- contact -->
	<div class="contact" id="mail">
		<div class="container">
			<div class="w3l-heading about-heading">
				<h3>Get In Touch</h3>
				<div class="w3ls-border about-border"> </div>
			</div>
			<div class="introduction-info contact-info">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus iaculis lacus in pharetra. Morbi tincidunt nisi et bibendum varius. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vulputate arcu consequat enim vulputate posuere. Aenean malesuada quam vitae mi ullamcorper, vel lobortis risus rutrum.</p>
			</div>
		</div>
	</div>
	<div class="contact-form">
		<div class="col-md-4 contact-form-left">
			<h5>Our Location</h5>
			<div class="address-grids">
				<div class="address-grid">
					<div class="address-icon">
						<i class="fa fa-map-marker" aria-hidden="true"></i>
					</div>	
					<div class="address-info">
						<p>Eiusmod Tempor inc<br>
							St Dolore Place,<br>
							Kingsport 56777.
						</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="address-grid">
					<div class="address-icon">
						<i class="fa fa-phone" aria-hidden="true"></i>
					</div>	
					<div class="address-info">
						<p>+1 234 567 8901<br>
						+1 345 678 9012</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="address-grid">
					<div class="address-icon">
						<i class="fa fa-envelope" aria-hidden="true"></i>
					</div>	
					<div class="address-info">
						<p><a href="mailto:example@email.com">mail@example.com</a></p>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<div class="col-md-8 contact-form-right">
			<h5>Contact Form</h5>
			<div class="contact-form-grid">
				<form action="#" method="post">
					<div class="fields-grid">
						<div class="styled-input agile-styled-input-top">
							<input type="text" name="Full Name" required="">
							<label>Full Name</label>
							<span></span>
						</div>
						<div class="styled-input agile-styled-input-top">
							<input type="text" name="Phone" required=""> 
							<label>Phone</label>
							<span></span>
						</div>
						<div class="styled-input">
							<input type="email" name="Email" required=""> 
							<label>Email</label>
							<span></span>
						</div> 
						<div class="styled-input">
							<input type="text" name="Subject" required="">
							<label>Subject</label>
							<span></span>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="styled-input textarea-grid">
						<textarea name="Message" required=""></textarea>
						<label>Message</label>
						<span></span>
					</div>	 
					<input type="submit" value="SEND">
				</form>
			</div>
		</div>
		<div class="clearfix"> </div>
	</div>
	<!-- //contact -->
	<!-- footer -->
	<footer>
		<div class="container">
			<p>&copy; 2017 Rock Music . All Rights Reserved | Design by <a href="http://www.51qianduan.com//">xmoban.cn</a> </p>
		</div>
	</footer>
	<!-- //footer -->
	<script type="text/javascript">
		/* init Jarallax */
		$('.jarallax').jarallax({
			speed: 0.5,
			imgWidth: 1366,
			imgHeight: 768
		})
	</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 -->



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


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

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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