黃色簡潔風格的網絡安全產品整站網站源碼下載



10 36 13



模板描述:藍色簡潔風格 網絡安全產品 整站網站,藍色簡潔風格的網絡安全產品整站網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href="css/popup.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel='stylesheet' type='text/css' />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script src="js/wow.min.js"></script>
<script type="text/javascript" src="js/responsive-nav.js"></script>
<script src="js/jquery.wmuSlider.js"></script>

3. HTML代碼

<div class="header">
   <div class="container">
      <div class="header_top">
	      <div class="header-left">
					 <div class="logo wow bounceInDown" data-wow-delay="0.4s">
						<a href="index.html"><img src="images/logo.png" alt=""/></a>
					 </div>
					 <div class="menu">
						  <a class="toggleMenu" href="#"><img src="images/nav.png" alt="" /></a>
						    <ul class="nav" id="nav">
						    	<li class="active"><a href="index.html">Product</a></li>
						    	<li><a href="industries.html">Industries</a></li>
						    	<li><a href="pricing.html">Pricing</a></li>
						    	<li><a href="features.html">Features</a></li>
						    	<div class="clearfix"></div>
							</ul>
				    </div>
				    <div class="clearfix"></div>
	      </div>
	      <ul class="phone wow fadeInUpBig" data-wow-delay="0.4s">
	      	<li><i class="ph_icon"> </i></li>
	      	<li><p>+1 (888) 587-58749</p></li>
	      </ul>
	      <div class="clearfix"> </div>
	   </div>
	   <div class="header_bottom">
	   	  <h1 class="m_head wow rollIn" data-wow-delay="0.4s">Protect Your sensitive<br> files across cloud services.</h1>
	   	  <div class="video_buttons">
		   	  <div class="video_but"> <a href="#" class="fa-btn btn-1 btn-1e">Try it out for free !</a></div>
		   	  <div class="video_right">
		   	            <a class="play-icon popup-with-zoom-anim" href="#small-dialog">
							<span> </span><p class="video_desc">Watch the video</p>
						</a>
						<div id="small-dialog" class="mfp-hide">
						<iframe width="560" height="315" src="//www.youtube.com/embed/n7rzi2hGAzA" frameborder="0" allowfullscreen></iframe>
					  </div>
			  </div>
		      <div class="clearfix"></div>
		 </div>
	   </div>
	   <div class="clearfix"></div>
	</div>
</div>
<div class="main">
     <div class="content_top">
     	<div class="container">
		   <ul class="clients wow fadeInUpBig" data-wow-delay="0.4s">
				<li><img src="images/pin.png"  class="img-responsive" alt=""/></li>
				<li><img src="images/design.jpg" class="img-responsive" alt=""/></li>
				<li><img src="images/dis.png" class="img-responsive" alt=""/></li>
				<li><img src="images/fresh.png" class="img-responsive" alt=""/></li>
				<li><img src="images/new.png" class="img-responsive" alt=""/></li>
				<li><img src="images/lout.png" class="img-responsive" alt=""/></li>
				<div class="clearfix"></div>
			</ul>
			<div class="wmuSlider example1">
			   <div class="wmuSliderWrapper">
				   <article style="position: absolute; width: 100%; opacity: 0;"> 
				   	 <div class="banner-wrap">
				   	     <h2>Lorem Ipsum is simply dummy</h2>  
				   	     <p>We're all about making sure you have a great experience with our software. 
							Our real, live customer support team will go out of their way to help you-by phone or by email. 
							For free. We also have free video tutorials, forums, training webinars, whitepapers, 
							and a great knowledgebase you can access 24/7.</p>
                         <h3>Majority Humour, <span class="m_1">99designs.com</span></h3>
				   	 </div>
					</article>
				    <article style="position: relative; width: 100%; opacity: 1;"> 
				   	   <div class="banner-wrap">
				   	     <h2>Team will go out of their</h2>  
				   	     <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum</p>
				   	     <h3>Suffered Alteration, <span class="m_1">99designs.com</span></h3>
				   	 </div>
				    </article>
				    <article style="position: relative; width: 100%; opacity: 1;"> 
				   	   <div class="banner-wrap">
				   	     <h2>Suffered alteration in some form</h2>  
				   	     <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum</p>
				   	     <h3>Randomised Words, <span class="m_1">99designs.com</span></h3>
				   	 </div>
				   </article>
				 </div>
				<a class="wmuSliderPrev">Previous</a><a class="wmuSliderNext">Next</a>
            </div>
            <script src="js/jquery.wmuSlider.js"></script> 
			  <script>
       			$('.example1').wmuSlider();         
   		     </script> 	           	      
       </div>
     </div>
     <div class="content_bottom wow rollIn" data-wow-delay="0.4s">
       <div class="container">
	       <h2>Protectly protects your sensitive files.</h2>
	       <p>We protect your sensitive files across all popular cloud services and devices, by encrypting them,
				controlling access to them and providing an audit trail for all changes to your files.</p>
		   <div class="grid_1 text-center">
		   	 <div class="col-md-4 span_1">
		   	 	<img src="images/sharing.jpg" class="img-responsive" alt=""/>
		   	 	<h3>Compliant file Sharing</h3>
		   	</div>
		   	<div class="col-md-4 span_1">
		   	 	<img src="images/shield.jpg" class="img-responsive" alt=""/>
		   	 	<h3>Endpoint Security</h3>
		   	 </div>
		   	 <div class="col-md-4 span_1">
		   	 	<img src="images/access.jpg" class="img-responsive" alt=""/>
		   	 	<h3>Access Control</h3>
		   	 </div>
		   	 <div class="clearfix"> </div>
		   </div>
       </div>
	 </div>
</div>
<div class="footer_icon">
	<i class="icon"><img src="images/footer_icon.png"> </i>
</div>
<div class="footer">
	<div class="container">
	 <div class="col-md-2 span_2">
	   	 <h3>Proteectly</h3>
	   	 <ul class="list1">
	   	 	<li><a href="contact.html">contact</a></li>
	   	 	<li><a href="#">Enterprise Features</a></li>
	   	 	<li><a href="#">Why Us?</a></li>
	   	 	<li><a href="#">Solution</a></li>
	   	 	<li><a href="#">Pricing</a></li>
	   	 </ul>
	   </div>
	   <div class="col-md-2 span_2">
	   	 <h3>About Us</h3>
	   	 <ul class="list1">
	   	 	<li><a href="#">Our Story</a></li>
	   	 	<li><a href="#">Our Leadership</a></li>
	   	 	<li><a href="#">Our Investors</a></li>
	   	 	<li><a href="#">Jobs</a></li>
	   	 </ul>
	   </div>
	   <div class="col-md-2 span_2">
	   	 <h3>Support</h3>
	   	 <ul class="list1">
	   	 	<li><a href="#">Help</a></li>
	   	 	<li><a href="#">Privacy Policy</a></li>
	   	 	<li><a href="#">Terms of Use</a></li>
	   	 	<li><a href="#">Solution</a></li>
	   	 	<li><a href="#">Pricing</a></li>
	   	 </ul>
	   </div>
	   <div class="col-md-6 span_3 wow fadeInRight" data-wow-delay="0.4s">
	   	   <ul class="list2 list3">
	   	   	 <i class="phone"> </i>
	   	   	 <li class="phone_desc"><p>+(888)548-4587</p></li>
	   	   	 <div class="clearfix"> </div>
	   	   </ul>
	   	   <ul class="list2">
	   	   	 <i class="msg"> </i>
	   	   	 <li class="phone_desc"><p><a href="mailto:[email protected]"> info(at)protectly.com</a></p></li>
	   	   	 <div class="clearfix"> </div>
	   	   </ul>
	   	   <p class="copy">&copy;2015 Template by <a href="http://w3layouts.com" target="_blank">w3layouts</a></p>
	   </div>
	</div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 網絡科技 科技公司 網絡科技公司 IT公司 網絡公司 軟件公司 IT軟件公司 藍色 pc+wap 移動+電腦 手機+電腦 簡潔 簡約 簡單 藝術創意 創意 藝術 文藝 文藝范 藝術氣息
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表