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



7 27 10



模板描述:红色简洁风格 广告设计公司 企业网站,红色简洁风格的广告设计公司企业网站源码下载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>hellogalactica@gmail.com</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: hellogalactica@gmail.com</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>



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 扁平化 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 红色 设计 设计公司

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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