黃色簡潔風格的數字服務器托管整站網站源碼下載



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=Slabo+27px' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fonts/css/font-awesome.min.css">
<link href="css/owl.carousel.css" rel="stylesheet">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
<script src="js/owl.carousel.js"></script>

3. HTML代碼

<!-- header -->
   <div class="header">
          <!-- container -->
         <!-- top-nav -->
      <div class="container">	 			
		<div class="logo">
		  <a href="index.html"><img src="images/logo.png" alt=""/></a>
		</div>	
		<div class="header_bottom_right">			
	        <div class="h_menu4"><!-- start h_menu4 -->
				<a class="toggleMenu" href="#">Menu</a>
				<ul class="nav">
					<li class="active"><a href="index.html">Home</a></li>
				    <li><a href="services.html">Services</a>
						<ul>
							<li><a href="services.html">Dedicated Servers</a></li>
       					 	<li><a href="services.html">VPS Servers</a></li>
       					 	<li><a href="services.html">Shared Hosting</a></li>
       					 	<li><a href="services.html">Colocation</a></li>
						</ul>
					</li>
					<li><a href="clients.html">Our Clients</a></li>
					<li><a href="404.html">News</a></li>
					<li><a href="about.html">About</a></li>
					<li><a href="support.html">Support</a></li>
				</ul>
				<script type="text/javascript" src="js/nav.js"></script>
	          </div><!-- end h_menu4 -->
              <div class="clearfix"> </div>
       			<!-- top-nav -->
       		</div>
       		<!-- header -->
         </div>
      </div>
       		<!-- banner -->
       		<div class="banner">
       			<div class="banner-box">
       			<!----sreen-gallery-cursual---->
							 <!-- requried-jsfiles-for owl -->
							<link href="css/owl.carousel.css" rel="stylesheet">
							    <script src="js/owl.carousel.js"></script>
							        <script>
							    $(document).ready(function() {
							      $("#owl-demo").owlCarousel({
							        items : 1,
							        lazyLoad : true,
							        autoPlay : true,
							        navigation : true,
							        navigationText :  false,
							        pagination : false,
							      });
							    });
							    </script>
							 <!-- //requried-jsfiles-for owl -->
							 <!-- start content_slider -->
						       <div id="owl-demo" class="owl-carousel">
					                <div class="item">
					                	<div class="banner-info">
							       				<div class="b-info-left">
							       					<h1>Dedicated servers</h1>
							       					<h2>Starting from 99usd</h2>
							       					<p>24x7 knowledgeable support</p>
							       					<p>Full Root access</p>
							       					<p class="m_10"> HP included with each server (more on request w/ justification) Your Choice of any OS (CentOS, Windows, Debian, Fedora)FREE Reboots</p>
							       				</div>
							       				<div class="b-info-right">
							       					<p>Call us: <span>(818) 995-1560</span></p>
							       					<p>E-mail us:<a href="#">[email protected]</a></p>
							       					<a href="#" class="btn1 btn-8 btn-8c">Compare our pricing plans</a>
							       				</div>
							       				<div class="clearfix"> </div>
							       			</div>
					                </div>
					                <div class="item">
					                	<div class="banner-info">
							       				<div class="b-info-left">
							       					<h1>Advanced Hosting</h1>
							       					<h2>Starting from 99usd</h2>
							       					<p>unlimited Bandwidth with Messive Storage</p>
							       					<p>Unlimited Databases and Email Addresses</p>
							       					<p class="m_10"> HP included with each server (more on request w/ justification) Your Choice of any OS (CentOS, Windows, Debian, Fedora)FREE Reboots</p>
							       				</div>
							       				<div class="b-info-right">
							       					<p>Call us: <span>(818) 995-1560</span></p>
							       					<p>E-mail us:<a href="#">[email protected]</a></p>
							       					<a href="#" class="btn1 btn-8 btn-8c">Compare our pricing plans</a>
							       				</div>
							       				<div class="clearfix"> </div>
							       			</div>
					                </div>
					                <div class="item">
					                	<div class="banner-info">
							       				<div class="b-info-left">
							       					<h1>Reliable Hosting</h1>
							       					<h2>Starting from 99usd</h2>
							       					<p>Apps including Wordpress, Drupal and Joomla</p>
							       					<p>Full Root access</p>
							       					<p class="m_10"> HP included with each server (more on request w/ justification) Your Choice of any OS (CentOS, Windows, Debian, Fedora)FREE Reboots</p>
							       				</div>
							       				<div class="b-info-right">
							       					<p>Call us: <span>(818) 995-1560</span></p>
							       					<p>E-mail us:<a href="#">[email protected]</a></p>
							       					<a href="#" class="btn1 btn-8 btn-8c">Compare our pricing plans</a>
							       				</div>
							       				<div class="clearfix"> </div>
							       			</div>
					                </div>
				              </div>
				             </div>
						<!--//sreen-gallery-cursual---->
						<div class="server-pic">
							<span> </span>
						</div>
       	     </div>
       		<!-- banner -->
       		<!-- welcome-note -->
       		<div class="welcome-note text-center">
       			<div class="container">
       				<p><i class="fa fb fa-rss"></i> We have recently upgraded serveral services. Our servers are faster then ever.<a href="#">Read full news story.</a></p>
       			</div>
       		</div>
       		<!-- welcome-note -->
       		<!-- palns -->
       		<div class="plans">
       			<div class="container">
       			<h2>Grow your business with <span>Digital Landscape</span></h2>
       			<!-- pricing-grids -->
       			<div class="pricing-grids">
	       			<div class="col-md-3 text-center">
	       			  <div class="pricing-grid">
		       				<h3>Dedicated Servers</h3>
		       				<small> </small>
		       				<big>from</big>
		       				<label><i>$</i><storng>99</storng><i>99</i><em>/month</em></label>
		       				<p><strong>1 TB</strong> Hard Drive</p>
		       				<p><strong>8 GB</strong> ECC DDR3</p>
		       				<p><strong>4000 GB</strong> Transfer</p>
		       				<p><strong>100 Mbps</strong> Uplink</p>
		       				<a href="#" class="btn1 btn2 btn-8 btn-8c">Order Now</a>
	       			  </div>
	       			</div>
	       			<div class="col-md-3 text-center">
	       			  <div class="pricing-grid">
		       				<h3>VPS</h3>
		       				<small> </small>
		       				<big>from</big>
		       				<label><i>$</i><storng>66</storng><i>99</i><em>/month</em></label>
		       				<p><strong>20 GB</strong> Hard Drive</p>
		       				<p><strong>512MB</strong> DDR3 RAM</p>
		       				<p><strong>500 GB </strong> Transfer</p>
		       				<p><strong>100 Mbps</strong> Uplink</p>
		       				<a href="#" class="btn1 btn2 btn-8 btn-8c">Order Now</a>
	       			   </div>
	       			</div>
	       			<div class="col-md-3 text-center">
	       			  <div class="pricing-grid">
		       				<h3>Shared Hosting</h3>
		       				<small> </small>
		       				<big>from</big>
		       				<label><i>$</i><storng>14</storng><i>99</i><em>/month</em></label>
		       				<p><strong>2 GB</strong> Hard Drive</p>
		       				<p><strong>100 GB</strong> Transfer</p>
		       				<p><strong>PHP</strong> and<strong>MySQL</strong></p>
		       				<p><strong>cPanel </strong> Included</p>
		       				<a href="#" class="btn1 btn2 btn-8 btn-8c">Order Now</a>
	       			   </div>
	       			</div>
	       			<div class="col-md-3 text-center">
	       			  <div class="pricing-grid">
		       				<h3>Colocation</h3>
		       				<small> </small>
		       				<big>from</big>
		       				<label><i>$</i><storng>56</storng><i>99</i><em>/month</em></label>
		       				<p><strong>1 TB</strong> Hard Drive</p>
		       				<p><strong>8 GB</strong> ECC DDR3</p>
		       				<p><strong>4000 GB</strong> Transfer</p>
		       				<p><strong>100 Mbps</strong> Uplink</p>
		       				<a href="#" class="btn1 btn2 btn-8 btn-8c">Order Now</a>
	       			    </div>
	       			  </div>
	       			</div>
	       			<div class="clearfix"> </div>
       			</div>
       			<!-- pricing-grids -->
       			</div>
       		</div>
       		<!-- palns -->
       </div>
       <!-- contact-info -->
       <div class="contact-info text-center">
       	<h3>Can't decide which one best suits you?</h3>
       	<h4>Call us - <span>(818) 995-1560</span></h4>
       	<p><span> </span>or<span> </span></p>
       	<h5>Email us - <a href="#">[email protected]</a></h5>
       </div>
       <!-- /contact-info -->
       <!-- bottom-grids -->
       <div class="bottom-grids">
	       <div class="container">
	       	 <div class="feature_grid">
		       <div class="col-md-6 bottom-grid">
		       	  <div class="feature">
	                   <i class="fa fa-shield"> </i>
	                  <h3>Lorem ipsum dolor <span class="m_1">sit amet conse</span></h3>
	                    <p>
	                        Lorem ipsum dolor sit amet, vix erat audiam ei. Cum doctus civibus efficiantur in. Nec id tempor imperdiet deterruisset, doctus volumus explicari qui ex
	                    </p>
	              </div>
		       	</div>
		        <div class="col-md-6 bottom-grid">
		       	  <div class="feature">
	                   <i class="fa fa-cloud-upload"> </i>
	                  <h3>Lorem ipsum dolor <span class="m_1">sit amet conse</span></h3>
	                    <p>
	                        Lorem ipsum dolor sit amet, vix erat audiam ei. Cum doctus civibus efficiantur in. Nec id tempor imperdiet deterruisset, doctus volumus explicari qui ex
	                    </p>
	              </div>
		       	</div>
		       <div class="clearfix"> </div>
		    </div>
		    <div class="feature_grid1">
		       <div class="col-md-6 bottom-grid">
		       	  <div class="feature">
	                   <i class="fa fa-globe"> </i>
	                  <h3>Lorem ipsum dolor <span class="m_1">sit amet conse</span></h3>
	                    <p>
	                        Lorem ipsum dolor sit amet, vix erat audiam ei. Cum doctus civibus efficiantur in. Nec id tempor imperdiet deterruisset, doctus volumus explicari qui ex
	                    </p>
	              </div>
		       	</div>
		        <div class="col-md-6 bottom-grid">
		       	  <div class="feature">
	                   <i class="fa fa-list-alt"> </i>
	                  <h3>Lorem ipsum dolor <span class="m_1">sit amet conse</span></h3>
	                    <p>
	                        Lorem ipsum dolor sit amet, vix erat audiam ei. Cum doctus civibus efficiantur in. Nec id tempor imperdiet deterruisset, doctus volumus explicari qui ex
	                    </p>
	              </div>
		       	</div>
		       <div class="clearfix"> </div>
		    </div>
	       </div>
       </div>
       <!-- /bottom-grids -->
       <!-- clients -->
       <div class="clients text-center">
	       	<div class="container">
	       		<h3>Some of our satisfied clients include...</h3>
	       		<ul>
	       			<li><a href="#"><img src="images/c-logo.png" title="disney" /></a></li>
	       			<li><a href="#"><img src="images/c-logo1.png" title="apple" /></a></li>
	       			<li><a href="#"><img src="images/c-logo3.png" title="microsoft" /></a></li>
	       			<li><a href="#"><img src="images/c-logo4.png" title="timewarener" /></a></li>
	       			<li><a href="#"><img src="images/c-logo5.png" title="disney" /></a></li>
	       			<li><a href="#"><img src="images/c-logo6.png" title="sony" /></a></li>
	       		</ul>
	       	</div>
       </div>
       <!-- clients -->
       <!-- footer -->
       <div class="footer">
       		<div class="container">
       		<!-- footer-grids -->
       		<div class="footer-grids">
	       		 <div class="col-md-3 footer-grid">
	       			<h3>Plans and Services</h3>
	       			<ul>
	       				<li><a href="#">Dedicated Servers</a></li>
	       				<li><a href="#">VPS Servers</a></li>
	       				<li><a href="#">Shared Hosting</a></li>
	       				<li><a href="#">Colocation</a></li>
	       			</ul>
	       		</div>
	       		<div class="col-md-3 footer-grid">
	       			<h3>Customer Services</h3>
	       			<ul>
	       				<li><a href="#">Contact Us</a></li>
	       				<li><a href="#">Returns</a></li>
	       				<li><a href="#">Site Map</a></li>
	       			</ul>
	       		</div>
	       		<div class="col-md-3 footer-grid">
	       			<h3>Extras</h3>
	       			<ul>
	       				<li><a href="#">Brands</a></li>
	       				<li><a href="#">Specials</a></li>
	       				<li><a href="#">Vouchers</a></li>
	       			</ul>
	       		</div>
	       		<div class="col-md-3 footer-grid">
	       			<h3>My Account</h3>
	       			<ul>
	       				<li><a href="#">Wish List</a></li>
	       				<li><a href="#">Newsletter</a></li>
	       			</ul>
	       			<ul class="socials">
	                 <li><a href="#"><i class="fa fb fa-facebook"></i></a></li>
	                 <li><a href="#"><i class="fa tw fa-twitter"></i></a></li>
	                 <li><a href="#"><i class="fa tw fa-google-plus"></i></a></li>
              		</ul>
	       		</div>
	       		<div class="clearfix"> </div>
       		</div>
       		<div class="copy">
	       			<p>Design by <a href="http://w3layouts.com/">W3layouts</a></p>
	       		</div>
       		<!-- footer-grids -->
       		</div>
       </div>
       <!-- footer -->
      <!-- container -->



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


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 扁平化 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 pc+wap 移動+電腦 手機+電腦 簡潔 簡約 簡單 黃色 設備 機械 設備廠 機械廠
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

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