View file opencloud-pack/mobile/index.html

File size: 11.79Kb
<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Open Cloud webtemplate for high end mobiles, like samsung, nokia, lg, sony erricsson, htc mobile website templates for free | Home :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Open Cloud  Iphone web template, Andriod web template, Smartphone web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<link href="mobile/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="mobile/css/font-awesome.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
   <!-- Start Header -->
       <div class="header">	
   	 	    <div class="header-top">
   	 	      <div class="wrap"> 
   	 	    	 <div class="header-top-left">
   	 	    	 	<p>Support: +0123456789</p>
   	 	    	 </div>
   				  <div class="header-top-right">
				        <ul>
				            <li><a href"#"><i class="fa fa-comments"></i>Sales Chat</a></li>
				            <li><a href="login.html"><i class="fa fa-lock"></i>Login</a></li>
				            <li><a href="#" ><i class="fa fa-sign-in"></i>Sign Up</a></li>
				         </ul>
				    </div>
			      <div class="clear"></div>
			     </div> 
		      </div>
                <div class="header-logo-nav">
				         <div class="logo"> <a href="index.html"><img src="mobile/images/logo.png" alt="" /></a></div>
				         <div class="drp-dwn">
						 	  <select onchange="window.location=this.options[this.selectedIndex].value">
								<option value="index.html"  selected="selected">Home</option>
								<option value="about.html">About</option>
								<option value="products.html">Products</option>
								<option value="solutions.html">Solutions</option>
								<option value="support.html">Support</option>
								<option value="contact.html">Contact Us</option>
							 </select>
						</div> 
					    <div class="clear"> </div>
				       </div>
	                   <div class="header-banner">
					  	 <div class="row">
				          <div class="col-md-6">
				          <div class="banner-desc">
				        	<h2>Get the right cloud for you app.</h2>
				           <ul>
				          	<li><span><i class="fa fa-chevron-right"></i>more than 12,3456 clients trust us</span></li>
				            <li><span><i class="fa fa-chevron-right"></i>24/7 support</span></li>
				            <li><span><i class="fa fa-chevron-right"></i>performance, reliability, security</span></li>
				            <li><span><i class="fa fa-chevron-right"></i>Flexible contracts</span></li>
				          </ul>
				          <div class="see-features"><a href="#">See Features</a></div>
				          </div>
				        </div>
				        <div class="col-md-6">
				        	<div class="banner-img">
			                <img src="mobile/images/devices.png" alt="First slide" />
			             </div>
				        </div>
				      </div>
	            </div>
	           <span class="big-arrow"></span>
             </div>
   <!-- End Header -->
   
   <!-- Start Main Content -->
	 <div class="main">	 
	 	 <div class="wrap">
	 	<div class="features">
	 		<div class="row">
		        <div class="col-lg-4">
		          <img src="mobile/images/private-cloud.png" alt="" />
		          <h2>Private Cloud</h2>
		          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus augue vitae est volutpat eleifend. </p>
		          <p><a class="read-more" href="#">Read More</a></p>
		        </div><!-- /.col-lg-4 -->
		        <div class="col-lg-4">
		        <img src="mobile/images/dedicated-servers.png" alt="" />
		          <h2>Dedicated Servers</h2>
		          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus augue vitae est volutpat eleifend. </p>
		          <p><a class="read-more" href="#">Read More</a></p>
		        </div><!-- /.col-lg-4 -->
		        <div class="col-lg-4">
		          <img src="mobile/images/hybrid-cloud.png" alt="" />
		          <h2>Hybrid Cloud</h2>
		          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus augue vitae est volutpat eleifend. </p>
		          <p><a class="read-more" href="#">Read More</a></p>
		        </div><!-- /.col-lg-4 -->
		      </div>
		   </div>
		   
		   <div class="support">
		   	<div class="container-fluid">
			  <div class="row">
			   <div class="col-lg-10">
			   	<h2>24/7 Service & Support</h2>
			   	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus augue vitae est volutpat eleifend. </p>
			   </div>
			    <div class="col-lg-2">
			      <p><a class="read-more" href="#">Live Chat</a></p>
			   </div>
			  </div>
			</div>
		   </div>
		   
		   <div class="list-performance">
		   	 <div class="row">
			   <div class="col-lg-6">
			   	<h2>What We Provide</h2>
			   	<ul>
			   		<li><i class="fa fa-check"></i>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
			   		<li><i class="fa fa-check"></i>Cras bibendum ornare mauris porta aliquam</li>
			   		<li><i class="fa fa-check"></i>Maecenas quis rutrum quam</li>
			   		<li><i class="fa fa-check"></i>Suspendisse imperdiet sapien eu metus adipiscing</li>
			   		<li><i class="fa fa-check"></i>Maecenas quis rutrum quam, ut vulputate quam.</li>
			   		<li><i class="fa fa-check"></i>Mauris accumsan at leo ut fringilla. In bibendum varius nulla at ornare.</li>
			   	</ul>
			   </div>
			    <div class="col-lg-6">
			     <h2>Performance</h2>
			     <ul class="progress-bars">
			     	<li><div class="progress">
                           <div class="bar" style="width:95%;"></div>
                        </div>
                    </li>
			     	<li><div class="progress">
                           <div class="bar" style="width:97%;"></div>
                        </div></li>
			     	<li><div class="progress">
                           <div class="bar" style="width:90%;"></div>
                        </div></li>
			     	<li><div class="progress">
                           <div class="bar" style="width:88%;"></div>
                        </div></li>
			     </ul>
			   </div>
			 </div>
		   </div>
		 </div>  
		 <div class="testimonials-news">
	      <div class="news">
	      	<div class="wrap">
	      	  <h2>News</h2>
	      	  <div class="row">
		        <div class="col-lg-3 news-grid">
		          <img src="mobile/images/news-img.jpg" alt="" />
		          <div class="news-desc">
		          <h2>this is your last news</h2>
		          <p>Sed quis augue vitae diam condimentum mollis. Quisque bibendum, urna quis ornare accumsan, nisl justo placerat sem [...]</p>
		          <p><a class="read-more" href="#">Read More</a></p>
		            <div class="news-desc-bottom">
		            	<p class="left">Category: Something</p>
		            	<p class="right"><i class="fa fa-comment"></i> 125</p>
		               <div class="clear"></div>
		            </div>
		            <div class="image-icon"><span><i class="fa fa-align-left"></i></span></div>
		          </div>
		        </div><!-- /.col-lg-4 -->
		        <div class="col-lg-3 news-grid news-grid-middle">
		        <img src="mobile/images/news-img.jpg" alt="" />
		         <div class="news-desc">
		          <h2>this is your last news</h2>
		          <p>Sed quis augue vitae diam condimentum mollis. Quisque bibendum, urna quis ornare accumsan, nisl justo placerat sem [...]</p>
		          <p><a class="read-more" href="#">Read More</a></p>
		            <div class="news-desc-bottom">
		            	<p class="left">Category: Something</p>
		            	<p class="right"><i class="fa fa-comment"></i> 125</p>
		               <div class="clear"></div>
		            </div>
		            <div class="image-icon"><span><i class="fa fa-align-left"></i></span></div>
		          </div>
		        </div><!-- /.col-lg-4 -->
		        <div class="col-lg-3 news-grid">
		          <img src="mobile/images/news-img.jpg" alt="" />
		         <div class="news-desc">
		          <h2>this is your last news</h2>
		          <p>Sed quis augue vitae diam condimentum mollis. Quisque bibendum, urna quis ornare accumsan, nisl justo placerat sem [...]</p>
		          <p><a class="read-more" href="#">Read More</a></p>
		            <div class="news-desc-bottom">
		            	<p class="left">Category: Something</p>
		            	<p class="right"><i class="fa fa-comment"></i> 125</p>
		               <div class="clear"></div>
		            </div>
		            <div class="image-icon"><span><i class="fa fa-align-left"></i></span></div>
		          </div>
		        </div><!-- /.col-lg-4 -->
		        <div class="clear"></div>
		      </div>
	      	 </div>
	      </div>
	 </div>
    </div>
   <!-- End Main Content -->
	   
  <!-- Start Footer -->
       <span class="footer-arrow"></span>
       <div class="footer">	  
       	 <div class="wrap">	      
		  <div class="row">
			   <div class="col-lg-6">
			   	<h2>About Open Cloud</h2>
			   	<p>Vivamus non elementum enim. Vestibulum fringilla placerat vestibulum. Donec consequat scelerisque lorem, quis laoreet tortor dapibus nec. Duis sodales quis odio quis pretium. Etiam auctor sollicitudin enim. Duis tempus semper sodales. </p>
			    <ul class="links">
			    	<li><a href="#">About</a> /</li>
			    	<li><a href="#">Term of Services</a> /</li>
			    	<li><a href="#">Press</a> /</li>
			    	<li><a href="#">Staff</a> /</li>
			    	<li><a href="#">News</a></li>
			    </ul> 
			   </div>
			    <div class="col-lg-6">
			     <h2>Products</h2>
			     <div class="products-list">
			     <ul>
			     	<li><a href="#"><i class="fa fa-chevron-right"></i> Private cloud  </a></li>
			     	<li><a href="#"><i class="fa fa-chevron-right"></i>  DEDICATED SERVER    </a></li>
			     	<li><a href="#"><i class="fa fa-chevron-right"></i>  Hybrid cloud</a></li>
			     	<li><a href="#"><i class="fa fa-chevron-right"></i> support </a></li>
			       <li><a href="#"><i class="fa fa-chevron-right"></i> dedicated hosting</a></li>
                   <li><a href="#"><i class="fa fa-chevron-right"></i> email hosting </a></li>
                   <li><a href="#"><i class="fa fa-chevron-right"></i> solutions</a></li>
                   <li><a href="#"><i class="fa fa-chevron-right"></i> Knowledge Center</a></li>
			     </ul>
			     <div class="clear"></div>
			    </div>
			     <div class="subscribe">
			    	<form>
			    		<input type="text" placeholder="youremail@domain.com" />
			    		<input type="submit" value="Subscribe" />
			    	</form>
			    </div>
			   </div>
			  </div>
			 </div>
		   </div>
			 <div class="footer-bottom">
			 	<div class="wrap">
			 	<div class="copy-right">
			 		<p>open cloud Copyright 2013 all right reserved. Template by  <a href="http://w3layouts.com" target="_blank">w3layouts</a></p>
			 	</div>
			 	<div class="social-icons">
			 		<ul>
			 			<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-google-plus"></i></a></li>
			 			<li><a href="#"><i class="fa fa-rss"></i></a></li>
			 			<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
			 		</ul>
			 	</div>
			 	<div class="clear"></div>
			 </div>
	       </div>
  <!-- End Footer -->
  </body>
</html>