红色简洁风格的广告设计公司企业网站源码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

37 145 49



模板描述:红色简洁风格 广告设计公司 企业网站。红色简洁风格的广告设计公司企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,700,600,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/fullwidth.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/settings.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/responsive.css" media="screen">
<link rel="alternate stylesheet" type="text/css" href="css/colors/yellow-black.css" title="yellow" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="css/colors/violet-black.css" title="black" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="css/colors/orange-black.css" title="orange" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="css/colors/blue-black.css" title="blue" media="screen" />
<link rel="stylesheet" type="text/css" href="css/colors/red-black.css" title="red" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="css/colors/green-black.css" title="green" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="css/colors/pink-black.css" title="pink" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="css/colors/pale-green-black.css" title="pale-green" media="screen" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/retina-1.1.0.min.js"></script>
<script type="text/javascript" src="js/plugins-scroll.js"></script>
<script src="js/jquery.parallax.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/jquery.countTo.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.carouFredSel.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
<script src="js/styleswitch.js"></script>
<script src="js/style_switch_custom.js"></script>

3. HTML代码

<!-- Preloader -->
<div id="preloader">
    <div id="status">&nbsp;</div>
</div>
	<!-- Container -->
	<div id="container">
		<!-- Header
		    ================================================== -->
		<header class="clearfix" id="home">
			<!-- Static navbar -->
			<nav class="navbar navbar-default navbar-static-top">
				<div class="top-line">
					<div class="container">
						<div class="row">
							<ul class="top-socials col-md-4">
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-facebook"></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>
								<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
							</ul>
							<ul class="top-info col-md-5 col-md-offset-3">
								<li><a href="#"><i class="fa fa-envelope"></i>[email protected]</a></li>
								<li><p><i class="fa fa-phone"></i>+1 888 525 422 5663</p></li>
							</ul>
						</div>
					</div>
				</div>
				<!-- end topline -->
				<nav class="navigation">
					<div class="container">
						<div class="logo">
							<a href="index.html"><img src="images/logo.png" alt=""></a>
						</div>
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
						</div>
						<div class="navbar-collapse collapse">
							<ul class="nav navbar-nav">
                                <li><a href="index.html">Home</a></li>
								<li class="drop"><a href="services.html">Services</a>
									<ul class="drop-down">
										<li class="drop"><a href="services2.html">Services 2</a></li>
										<li class="drop"><a href="services2.html">Go to Level 3</a>
											<ul class="drop-down level3">
												<li><a href="#">Level 3</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li><a href="about.html">About Us</a></li>
								<li><a href="#">Portfolio</a>
									<ul class="drop-down">
										<li class="drop"><a href="portfolio-single.html">Portfolio Single</a></li>
										<li class="drop"><a href="portfolio-single-wide.html">Portfolio Single Wide</a></li>
										<li class="drop"><a href="portfolio-2column.html">Portfolio 2 Column</a></li>
										<li class="drop"><a href="portfolio-3column.html">Portfolio 3 Column</a></li>
										<li class="drop"><a href="portfolio-4column.html">Portfolio 4 Column</a></li>
									</ul>
								</li>
								<li class="drop"><a href="blog.html">Blog</a>
									<ul class="drop-down">
										<li><a href="blog-single.html">Blog Single</a></li>
									</ul>
								</li>
								<li class="drop"><a href="#">Pages</a>
									<ul class="drop-down">
										<li><a href="shortcodes.html">Shortcodes</a></li>
										<li><a href="typography.html">Typography</a></li>
										<li><a href="404.html">404 Page</a></li>
										<li><a href="coming-soon.html">Coming Soon</a></li>
									</ul>
								</li>
								<li><a href="contact.html">Contact</a></li>
								<li><div id="search">
									<img src="images/search.png" class="trigger" alt=""> 
								    <div class="search-bar">
								    <form action="#">
									    <input type="text" class="searchbox" placeholder="Search">
										<input type="submit" value="Go">
								    </form>      
									</div>
								</div></li>
							</ul>
						</div>
					</div>
				</nav>
			</nav>
		</header>
		<!-- End Header -->
		<!-- slider 
			================================================== -->
		<div id="slider" class="revolution-slider">
			<!--
			#################################
				- THEMEPUNCH BANNER -
			#################################
			-->
			<div class="fullwidthbanner-container">
				<div class="fullwidthbanner">
					<ul>
						<!-- THE FIRST SLIDE -->
						<li data-transition="boxfade" data-slotamount="10" data-masterspeed="300">
							<!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
							<img src="upload/revolution/slider.jpg" data-fullwidthcentering="on" alt="slide">
							<!-- THE CAPTIONS IN THIS SLDIE -->
							<div class="caption big_white randomrotate"
								 data-x="center"
								 data-y="160"
								 data-speed="100"
								 data-start="1200"
								 data-easing="easeOutExpo" >
								 GET OUR PERFECT THEME
							 </div>
							<!-- THE CAPTIONS IN THIS SLDIE -->
							<div class="caption small_text lfb stt"
								 data-x="center"
								 data-y="220"
								 data-speed="300"
								 data-start="2000"
								 data-easing="easeOutExpo" >
								 WITH ENDLESS POSSIBILITIES
							 </div>
							 <div class="caption modern_small_text_dark lfb"
								 data-x="center"
								 data-y="270"
								 data-speed="500"
								 data-start="2300"
								 data-easing="easeOutExpo">
								 <a href="#" class="lmore">Learn More</a>
							</div>
						</li>
						<!-- THE Secont SLIDE -->
						<li data-transition="random" data-slotamount="10" data-masterspeed="300">
							<!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
							<img src="upload/revolution/slider2.jpg" data-fullwidthcentering="on" alt="slide">
							<!-- THE CAPTIONS IN THIS SLDIE -->
							<div class="caption medium_text randomrotate"
								 data-x="center"
								 data-y="160"
								 data-speed="100"
								 data-start="1200"
								 data-easing="easeOutExpo" >
								 WE OFFER YOU
							 </div>
							<!-- THE CAPTIONS IN THIS SLDIE -->
							<div class="caption big_white lfb stt"
								 data-x="center"
								 data-y="220"
								 data-speed="300"
								 data-start="2000"
								 data-easing="easeOutExpo" >
								 GALACTICA
							 </div>
							<!-- THE CAPTIONS IN THIS SLDIE -->
							<div class="caption medium_text randomrotate"
								 data-x="center"
								 data-y="280"
								 data-speed="500"
								 data-start="2300"
								 data-easing="easeOutExpo" >
								 Responsive  •  Innovative  •  Simple
							 </div>
						</li>
						<!-- THE FIRST SLIDE -->
						<li data-transition="random" data-slotamount="10" data-masterspeed="300">
							<!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
							<img src="upload/revolution/slider3.jpg" data-fullwidthcentering="on" alt="slide">
							<!-- THE CAPTIONS IN THIS SLDIE -->
							<div class="caption big_white randomrotate"
								 data-x="center"
								 data-y="160"
								 data-speed="100"
								 data-start="1200"
								 data-easing="easeOutExpo" >
								 VERSATILE AND MODERN
							 </div>
							<!-- THE CAPTIONS IN THIS SLDIE -->
							<div class="caption small_text randomrotate"
								 data-x="center"
								 data-y="220"
								 data-speed="300"
								 data-start="2000"
								 data-easing="easeOutExpo" >
								 multi-page & onepage versions <br>
							     it will make you happy
							 </div>
							 <div class="caption modern_small_text_dark lfb"
								 data-x="380"
								 data-y="310"
								 data-speed="500"
								 data-start="2300"
								 data-easing="easeOutExpo">
								 <a href="#" class="lmore">Purchase Now</a>
							</div>
							 <div class="caption modern_small_text_dark lfb"
								 data-x="590"
								 data-y="310"
								 data-speed="600"
								 data-start="2600"
								 data-easing="easeOutExpo">
								 <a href="#" class="l-more">Learn More</a>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- End slider -->
		<!-- content 
			================================================== -->
		<div id="content">
			<div class="container">
				<!-- Our Services -->
				<div class="services">
					<div class="row">
						<div class="col-md-3">
							<div class="service-item">
								<i class="fa fa-heart"></i>
								<h1>Unique features</h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et magna aliqua.</p>
							</div>
						</div>
						<!-- end service item -->
						<div class="col-md-3">
							<div class="service-item">
								<i class="fa fa-arrows-alt"></i>
								<h1>RESPONSIVE LAYOUT</h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et magna aliqua.</p>
							</div>
						</div>
						<!-- end service item -->
						<div class="col-md-3">
							<div class="service-item">
								<i class="fa fa-align-left"></i>
								<h1>Tons of shortcodes</h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et magna aliqua.</p>
							</div>
						</div>
						<!-- end service item -->
						<div class="col-md-3">
							<div class="service-item">
								<i class="fa fa-gears"></i>
								<h1>Multi-purpose</h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et magna aliqua.</p>
							</div>
						</div>
						<!-- end service item -->
					</div>
					<!-- End Row -->
				</div>
				<!-- End Services -->
			</div>
			<!-- end container -->
			<!-- Features -->
			<div class="features">
				<div class="container">
					<div class="row">
						<div class="col-md-6 mb20">
							<div class="feat-img">
								<img src="upload/phones.png" alt="">
							</div>
						</div>
						<div class="col-md-6 mb20">
							<div class="feat-text mb30">
								<i class="fa fa-eye"></i>
								<div class="right-feat">
									<h4>Perfect Design</h4>
									<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.</p>
								</div>
							</div>
							<div class="feat-text mb30">
								<i class="fa fa-mobile-phone"></i>
								<div class="right-feat">
									<h4>Fully Responsive</h4>
									<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.</p>
								</div>
							</div>
							<div class="feat-text mb30">
								<i class="fa fa-flask"></i>
								<div class="right-feat">
									<h4>Perfect Design</h4>
									<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.</p>
								</div>
							</div>
							<a href="" class="learn-more">Learn More</a>
						</div>
					</div>
				</div>
			</div>
			<!-- End Features -->
			<div class="latest-projects">
				<h1>Latest Projects</h1>
				<div class="list_carousel responsive">
					<ul id="foo4">
						<li>
							<div class="view view-sixth">
								<img src="upload/recent1.jpg" alt="" />
							 	<div class="mask">							 
							    	<div class="top-post">
							    		<a href="upload/recent1.jpg"  data-fancybox-group="group"><i class="fa fa-search"></i></a>
							        	<a href="#"><i class="fa fa-link"></i></a>
							        </div>
							        <div class="bottom-post">
							        	<h2>Scene-large</h2>
							            <p>illustrations</p>
							        </div>
							    </div>
							</div>
						</li>
						<li>
							<div class="view view-sixth">
								<img src="upload/recent2.jpg" alt="" />
							 	<div class="mask">							 
							    	<div class="top-post">
							    		<a href="upload/recent2.jpg"  data-fancybox-group="group"><i class="fa fa-search"></i></a>
							        	<a href="#"><i class="fa fa-link"></i></a>
							        </div>
							        <div class="bottom-post">
							        	<h2>Scene-large</h2>
							            <p>illustrations</p>
							        </div>
							    </div>
							</div>
						</li>
						<li>
							<div class="view view-sixth">
								<img src="upload/recent3.jpg" alt="" />
							 	<div class="mask">							 
							    	<div class="top-post">
							    		<a href="upload/recent3.jpg"  data-fancybox-group="group"><i class="fa fa-search"></i></a>
							        	<a href="#"><i class="fa fa-link"></i></a>
							        </div>
							        <div class="bottom-post">
							        	<h2>Scene-large</h2>
							            <p>illustrations</p>
							        </div>
							    </div>
							</div>
						</li>
						<li>
							<div class="view view-sixth">
								<img src="upload/recent4.jpg" alt="" />
							 	<div class="mask">							 
							    	<div class="top-post">
							    		<a href="upload/recent4.jpg"  data-fancybox-group="group"><i class="fa fa-search"></i></a>
							        	<a href="#"><i class="fa fa-link"></i></a>
							        </div>
							        <div class="bottom-post">
							        	<h2>Scene-large</h2>
							            <p>illustrations</p>
							        </div>
							    </div>
							</div>
						</li>
						<li>
							<div class="view view-sixth">
								<img src="upload/recent1.jpg" alt="" />
							 	<div class="mask">							 
							    	<div class="top-post">
							    		<a href="upload/recent1.jpg"  data-fancybox-group="group"><i class="fa fa-search"></i></a>
							        	<a href="#"><i class="fa fa-link"></i></a>
							        </div>
							        <div class="bottom-post">
							        	<h2>Scene-large</h2>
							            <p>illustrations</p>
							        </div>
							    </div>
							</div>
						</li>
						<li>
							<div class="view view-sixth">
								<img src="upload/recent2.jpg" alt="" />
							 	<div class="mask">							 
							    	<div class="top-post">
							    		<a href="upload/recent2.jpg"  data-fancybox-group="group"><i class="fa fa-search"></i></a>
							        	<a href="#"><i class="fa fa-link"></i></a>
							        </div>
							        <div class="bottom-post">
							        	<h2>Scene-large</h2>
							            <p>illustrations</p>
							        </div>
							    </div>
							</div>
						</li>
						<li>
							<div class="view view-sixth">
								<img src="upload/recent3.jpg" alt="" />
							 	<div class="mask">							 
							    	<div class="top-post">
							    		<a href="upload/recent3.jpg"  data-fancybox-group="group"><i class="fa fa-search"></i></a>
							        	<a href="#"><i class="fa fa-link"></i></a>
							        </div>
							        <div class="bottom-post">
							        	<h2>Scene-large</h2>
							            <p>illustrations</p>
							        </div>
							    </div>
							</div>
						</li>
						<li>
							<div class="view view-sixth">
								<img src="upload/recent4.jpg" alt="" />
							 	<div class="mask">							 
							    	<div class="top-post">
							    		<a href="upload/recent4.jpg"  data-fancybox-group="group"><i class="fa fa-search"></i></a>
							        	<a href="#"><i class="fa fa-link"></i></a>
							        </div>
							        <div class="bottom-post">
							        	<h2>Scene-large</h2>
							            <p>illustrations</p>
							        </div>
							    </div>
							</div>
						</li>
					</ul>
					<div class="clearfix"></div>
					<a id="prev3" class="prev" href="#">&lt;</a>
					<a id="next3" class="next" href="#">&gt;</a>
				</div>
				<!-- End List Carousel -->
				<a href="#" class="more-work">More Works</a>
			</div>
			<!-- End Latest Projects -->
			<div class="ready parallax1">
				<div class="container">
					<h1>Are you ready for <span>Awesomeness?</span></h1>
					<p>We make unique products with the great attention to details</p>
					<ul>
						<li><a href="#" class="purchase">Purchase</a></li>
						<li><a href="#" class="l-more">Learn More</a></li>
					</ul>
					<div class="clear"></div>
				</div>
			</div>
			<!-- End Parallax -->
			<div class="index-about">
				<div class="container">
					<div class="row">
						<div class="col-md-6">
							<h1 class="main-title">About Our Company</h1>
							<div class="main-border"></div>
							<div class="left-about">
								<p><span>L</span> orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
								<ul class="site-features">
									<li><i class="fa fa-check-square-o"></i>100% Fully responsive layout, looks good on any type of device.</li>
									<li><i class="fa fa-check-square-o"></i>Multiple layout styles for home pages, portfolio and blog section</li>
									<li><i class="fa fa-check-square-o"></i>A lot of page elements, so it’s easy to customize your layout</li>
									<li><i class="fa fa-check-square-o"></i>We can offer you best solutions in the web</li>
								</ul>
							</div>
						</div>
						<!-- End Left About -->
						<div class="col-md-6">
							<h1 class="main-title">Clients About Us</h1>
							<div class="main-border"></div>
							<div class="testimonials">
								<ul class="bxslider">
						          <li>
							            <p>Joeby is a simple clean and modern PSD template for corporate/agency, business and portfolio sites. All layers are grouped and well organized – so it’s easy to modify. All layers are grouped and well organized – so it’s easy to modify. It’s fully responsive layout and it’s easy to modify anything. We begin by examining the nature of reality.</p>
										<div class="test-content">		
								             <img src="upload/user.png" alt="">
								             <h4>John Doe <span>creative director</span></h4>
										     <div class="clear"></div>
								        </div>
						          </li>
						          <li>
							            <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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.</p>
										<div class="test-content">		
								             <img src="upload/user.png" alt="">
								             <h4>John Doe <span>creative director</span></h4>
										     <div class="clear"></div>
								        </div>
						          </li>
						        </ul>
							</div>
						</div>
						<!-- End Right About -->
					</div>
				</div>
			</div>
			<!-- end index about -->
			<div class="buyit">
				<div class="container">
					<div class="buy-text">
						<h3>This is call to action area & you can add any important text here</h3>
					</div>
					<a href="#">Purchase</a>
					<div class="clear">	</div>
				</div>
			</div>
		</div>
		<!-- End content -->
		<!-- footer 
			================================================== -->
		<footer>
			<div class="inner-footer container">
				<div class="row">
					<div class="col-md-3 f-about">
						<div class="main-border"></div>
						<h3>About Us</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.</p>
						<ul class="foot-socials">
							<li><a href="#"><i class="fa fa-twitter"></i></a></li>
							<li><a href="#"><i class="fa fa-facebook"></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>
							<li><a href="#"><i class="fa fa-instagram"></i></a></li>
							<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
						</ul>
					</div>
					<div class="col-md-3 l-posts">
						<div class="main-border"></div>
						<h3>Latest Posts</h3>
						<ul>
							<li><a href="#">
								<img src="upload/post1.jpg" alt="">
								<div class="post-text">
									<h5>Awesome article title goes here</h5>
									<span>December 21, 2013</span>
								</div>
								<div class="clear"></div>
							</a></li>
							<li><a href="#">
								<img src="upload/post2.jpg" alt="">
								<div class="post-text">
									<h5>Awesome article title goes here</h5>
									<span>December 21, 2013</span>
								</div>
								<div class="clear"></div>
							</a></li>
						</ul>
					</div>
					<div class="col-md-3 f-contact">
						<div class="main-border"></div>
						<h3>Stay in touch</h3>
						<p>Phone:  + 1 888 246 56 23</p>
						<p>Fax: + 1 869 545 64 26</p>
						<a href="#">E-mail: [email protected]</a>
						<p>Address: Little Lonsdale St, Talay<br>	
						Victoria 8011 Philippines</p>
					</div>
					<div class="col-md-3 links">
						<div class="main-border"></div>
						<h3>Useful Links</h3>
						<ul>
							<li><a href="#">Home page is very creative</a></li>
							<li><a href="#">About us very useful</a></li>
							<li><a href="#">Our services are awesome</a></li>
							<li><a href="#">Contact us and stay in touch</a></li>
							<li><a href="#">Blog very flexible</a></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- end contanir & inner-footer -->
			<div class="last-div">
				<div class="container">
					<div class="row">
						<div class="copyright">
							© 2014 Galactica  | <a href="http://www.51qianduan.com//">Designed by Alexander Samokhin</a>
						</div>
						<nav class="foot-nav">
							<ul>
								<li><a href="#">Home</a></li>
								<li><a href="#">Services</a></li>
								<li><a href="#">About Us</a></li>
								<li><a href="#">Portfolio</a></li>
								<li><a href="#">Blog</a></li>
								<li><a href="#">Pages</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</nav>
						<div class="clear"></div>
					</div>
				</div>
			</div>
		</footer>
		<!-- End footer -->
		<div id="back-to-top">
          <a href="#top">Back to Top</a>
        </div>
        </div>
        <!-- Style Switch -->
		<div id="customizer" class="s-close">
			<span class="corner"><span class="cog"></span></span>
			<div id="options" class="visible">
				<div class="options-head">
					Style Switcher
				</div>	
				<div class="options-segment clearfix colors-sel">
					<h6 class="color-head">Color Scheme</h6>
					<ul class="color-scheme clearfix">
						<li class="yellow"><a href="css/colors/yellow-black" data-rel="yellow" class="styleswitch"></a></li>
						<li class="green"><a href="css/colors/green-black" data-rel="green" class="styleswitch"></a></li>
						<li class="red"><a href="css/colors/red-black" data-rel="red" class="styleswitch"></a></li>
						<li class="blue"><a href="css/colors/blue-black" data-rel="blue" class="styleswitch"></a></li>
						<li class="fblack"><a href="css/colors/violet-black" data-rel="black" class="styleswitch"></a></li>
						<li class="orange"><a href="css/colors/orange-black" data-rel="orange" class="styleswitch"></a></li>
						<li class="violet"><a href="css/colors/pink-black" data-rel="pink" class="styleswitch"></a></li>
						<li class="pale-green"><a href="css/colors/pale-green-black" data-rel="pale-green" class="styleswitch"></a></li>
					</ul>
				</div>	
			</div>
		</div>
		<!-- Style Switch -->
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.bxslider.js"></script>
	<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/retina-1.1.0.min.js"></script>
	<script type="text/javascript" src="js/plugins-scroll.js"></script>
	<script src="js/jquery.parallax.js"></script>
     <!-- jQuery KenBurn Slider  -->
    <script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
	<script type="text/javascript" src="js/jquery.countTo.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
	<!--
	##############################
	 - ACTIVATE THE BANNER HERE -
	##############################
	-->
	<script type="text/javascript">
		var tpj=jQuery;
		tpj.noConflict();
		tpj(document).ready(function() {
		if (tpj.fn.cssOriginal!=undefined)
			tpj.fn.css = tpj.fn.cssOriginal;
			var api = tpj('.fullwidthbanner').revolution(
				{
					delay:8000,
					startwidth:1170,
					startheight:500,
					onHoverStop:"off",						// Stop Banner Timet at Hover on Slide on/off
					thumbWidth:100,							// Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
					thumbHeight:50,
					thumbAmount:3,
					hideThumbs:0,
					navigationType:"bullet",				// bullet, thumb, none
					navigationArrows:"solo",				// nexttobullets, solo (old name verticalcentered), none
					navigationStyle:"round",				// round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
					navigationHAlign:"center",				// Vertical Align top,center,bottom
					navigationVAlign:"bottom",					// Horizontal Align left,center,right
					navigationHOffset:30,
					navigationVOffset: 40,
					soloArrowLeftHalign:"left",
					soloArrowLeftValign:"center",
					soloArrowLeftHOffset:40,
					soloArrowLeftVOffset:0,
					soloArrowRightHalign:"right",
					soloArrowRightValign:"center",
					soloArrowRightHOffset:40,
					soloArrowRightVOffset:0,
					touchenabled:"on",						// Enable Swipe Function : on/off
					stopAtSlide:-1,							// Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
					stopAfterLoops:-1,						// Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
					hideCaptionAtLimit:0,					// It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
					hideAllCaptionAtLilmit:0,				// Hide all The Captions if Width of Browser is less then this value
					hideSliderAtLimit:0,					// Hide the whole slider, and stop also functions if Width of Browser is less than this value
					fullWidth:"on",
					shadow:1								//0 = no Shadow, 1,2,3 = 3 Different Art of Shadows -  (No Shadow in Fullwidth Version !)
				});
				// TO HIDE THE ARROWS SEPERATLY FROM THE BULLETS, SOME TRICK HERE:
				// YOU CAN REMOVE IT FROM HERE TILL THE END OF THIS SECTION IF YOU DONT NEED THIS !
					api.bind("revolution.slide.onloaded",function (e) {
						jQuery('.tparrows').each(function() {
							var arrows=jQuery(this);
							var timer = setInterval(function() {
								if (arrows.css('opacity') == 1 && !jQuery('.tp-simpleresponsive').hasClass("mouseisover"))
								  arrows.fadeOut(300);
							},3000);
						})
						jQuery('.tp-simpleresponsive, .tparrows').hover(function() {
							jQuery('.tp-simpleresponsive').addClass("mouseisover");
							jQuery('body').find('.tparrows').each(function() {
								jQuery(this).fadeIn(300);
							});
						}, function() {
							if (!jQuery(this).hasClass("tparrows"))
								jQuery('.tp-simpleresponsive').removeClass("mouseisover");
						})
					});
				// END OF THE SECTION, HIDE MY ARROWS SEPERATLY FROM THE BULLETS
			});
	</script>
 	<!-- include jQuery + carouFredSel plugin -->
    <script type="text/javascript" src="js/jquery.carouFredSel.js"></script>
    <!-- optionally include helper plugins -->
    <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
    <!-- Style Switcher -->
	<script src="js/styleswitch.js"></script>
	<script src="js/style_switch_custom.js"></script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
小小的太阳
关注
TA的相关作品 >>更多
热搜关键词


热门标签: 扁平化 养生会馆 植物花草 游戏 黑色 bootstrap自适应 IT网络科技 蓝色 普通自适应 欧美风 旅游 红色 中国风 金融理财保险 绿色 韩系 高校 灰色 日系 简洁简约 工业产品 黄色 炫酷 家居装饰 紫色 卡通动画 橙色 招聘猎头 精美 实用通用 艺术创意 粉色 政府 婚庆 大气 白色 新闻资讯 婚纱摄影 棕色 清新 教育培训 彩色 绘画 设计 餐饮美食 其他风格 外贸 服装服饰 建筑 化工企业 医药器械 美容美发 动漫 电影视频 包装印刷 机械 汽车4S店 农业产品 咨询管理 酒店 健身房 化妆品 食品 花卉 房地产 协会组织 快递货运 数码电器 搬家 珠宝首饰 酒业 文化传媒 装修装饰 医院医疗 律师 酒吧音乐 图书 动物宠物 航空航天 股票 能源 公益 饮品 生活用品 家政保洁 体育 房屋租赁 商务 电力公司 打车租车 环保 宗教寺庙 工具文具 企业行业 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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