smartphone
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SmartPhone - About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document */
*{margin:0; padding:0}
body{background:#000000; margin:0px;
padding:0px;
font-size:11px;
color:#ABABAB;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
a {
color:#ffffff;
text-decoration:underline;
}
a:hover {
text-decoration:none;
}
#wrapper
{
width:1002px;
margin:0 auto;
}
#header
{
margin:0px;
padding:0px;
}
.logo
{
width:300px;
height:95px;
background:url(smartphone-images/logo.jpg);
border-right:2px solid #C8C6AF;
float:left;
}
.topMenu
{ width:495px;
background:url(smartphone-images/header.jpg);
padding:37px 0 43px 0;
float:left;
}
.topMenu ul
{
margin:0px;
padding:0px; text-align:center;
}
.topMenu li
{
display:inline;
margin:0px 0px 0px 0px;
padding:0px 4px 0px 10px; background:url(smartphone-images/menu_border.gif) no-repeat 0 1px;
}
.topMenu li.first{background:none}
.topMenu li a
{
text-decoration:none;
color:#CCCCCC;
font-weight:bold;
}
.topMenu li a:hover{color:#c8c5a2}
.topMenu li a.current{color:#c8c5a2}
.devices
{
width:204px;
height:95px;
background:url(smartphone-images/devices.jpg);
padding:0px 0px 0px 0px;
float:right;
}
.clear
{
clear:both;
margin:0px;
padding:0px;
}
#workZone
{
margin:0px;
padding:0px;
}
.leftCol
{
width:300px;
border-right:2px solid #C8C6AF;
background:#0A0506;
float:left;
height: 100%;
}
.picPhone
{
width:300px;
height:502px;
background:url(smartphone-images/phone-new.jpg);
}
.boldText
{
color:#DAD8BF;
padding:205px 0px 0px 45px;
font:bold 18px Arial, Helvetica, sans-serif;
}
.boldTextwhite
{
color:#fff;
padding:0px 0px 0px 8px;
margin:0px;
font-style:italic;
font:bold 12px Incised901 Nd BT, Arial, Helvetica, sans-serif;
}
.more
{
text-align:right;
border-bottom:1px solid #3d3d3f;
}
.more a
{
color:#fff;
font-weight:bold;
padding:0px 20px 0px 0px;
text-decoration:none;
margin:0px;
}
h2
{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
font-size:18px;
color:#FFFFFF;
font-weight:100;
font-family:Georgia, "Times New Roman", Times, serif;
}
h1
{
padding:10px 0px 0px 0px;
margin:0px 0px 0px 0px;
font-size:24px;
color:#FFFFFF;
font-weight:100;
font-family:Georgia, "Times New Roman", Times, serif;
}
/*h3
{
padding:25px 0px 0px 0px;
margin:0px 0px 0px 0px;
font-size:11px;
color:#C8C6AF;
font-weight:bold;
}*/
.brownText
{
color:#CCC9A2;
}
.featuresContainer
{
margin:0px;
padding:0px 0px 0px 20px;
background:url(smartphone-images/leftcolbg.jpg) left top repeat-x;
}
.featueesText
{
padding:15px 5px 30px 0px;
}
.learn a
{
color:#DAD8BF;
text-decoration:underline;
font-weight:bold;
}
.specification
{
margin:0px 0px 0px 0px;
padding:0px 0px 20px 0px;
}
.specification ul
{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.specification li
{
margin:10px 5px 0px 0px;
padding:0px 0px 0px 15px;
list-style:none;
background:url(smartphone-images/left-col-arrew.png) 0px 2px no-repeat;
}
.orderNow
{
text-align:center;
padding:17px 0px 17px 0px;
}
.midCol
{
width:40px;
float:left;
margin:0px 0px 0px 0px;
padding:40px 0px 70px 0px;
background:#0C0D0F url(smartphone-images/colmid-bg.jpg) left bottom repeat-x;
border-right:2px solid #C8C6AF;
}
.columnmiddle {
width:496px;
float:left;
padding:0px 0px 70px 0px;
background:#0C0D0F url(smartphone-images/colmid-bg.jpg) left bottom repeat-x;
border-right:2px solid #C8C6AF;
}
.rightCol
{
width:202px;
float:left;
margin:0px 0px 0px 0px;
padding:0px 0px 50px 0px;
background:#c8c6af;
}
.welCome
{
padding:0px 0px 0px 20px;
margin:0px 0px 0px 0px;
border-top:1px solid #3D3D3F;
}
.welComesoft
{
padding:0px 20px 0px 20px;
margin:0px 0px 0px 0px;
}
.welCometext
{
padding:5px 20px 0px 0px;
text-align:justify;
}
.smartphonzone {
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border-top:1px solid #3D3D3F;
}
.latestContainer
{
width:450px;
margin:20px 0px 0px 0px;
}
.pic1
{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 4px;
text-align:center;
float:left;
}
.pic2
{
padding:0px 0px 20px 0px;
margin:10px 0px 0px 4px;
text-align:center;
float:left;
}
.piclinks {
margin:0px 0px 0px 0px;
padding:5px 0px 5px 0px;
}
.piclinks a
{
color:#dad8bf;
text-align:center;
}
.piclinks a:hover {
color:#ffffff;
text-decoration:none;
}
.softLinks
{
margin:10px 0px 0px 0px;
padding:3px 0px 20px 0px;
width:431px;
}
.softLinks ul
{
margin:0px;
padding:0px;
}
.softLinks li
{
background:url(smartphone-images/smart-links-bg.png) left top no-repeat;
margin:0px 0px 10px 0px;
padding:5px 0px 5px 35px;
list-style:none;
}
.softLinks li a
{
color:#DAD8BF;
font-weight:bold;
text-decoration:none;
}
.devicezone {
border-bottom:3px solid #A9A693;
border-left:3px solid #A9A693;
color:#626262;
}
.deviceheadingcolumn {
background:#73715D url(smartphone-images/deviceleft.png) left top repeat-y;
border-bottom:1px solid #A9A693;
color:#E4E2CE;
padding:0px 0px 5px 18px;
}
h3 {
color:#E4E2CE;
margin:0px;
padding:20px 0px 0px 0px;
font-size:11px;
}
.deviceheading {
color:#E4E2CE;
margin:0px;
padding:8px 0px 8px 0px;
font:bold 11px, Verdana, Arial, Helvetica, sans-serif;
}
h4
{
margin:0px 0px 0px 13px;
font-size:18px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#942722;
padding:0px;
}
.aboutText
{
padding:0px 0px 0px 13px;
font-size:16px;
font-weight:bold;
float:left;
margin:0px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#53513D;
}
.phoneBox1
{
width:202px;
margin:0px;
padding:48px 0px 0px 0px;
background:url(smartphone-images/phonepicbg.png) repeat-x;
float:left;
}
.phoneBox2
{
width:202px;
margin:0px;
padding:48px 0px 0px 0px;
background:url(smartphone-images/phonepicbg.png) repeat-x;
float:left;
}
.phn-img {
float:right;
margin:0px 10px 0px 0px;
}
.phoneBox3
{
width:202px;
margin:0px;
padding:48px 0px 0px 0px;
background:url(smartphone-images/phonepicbg.png) repeat-x;
float:left;
}
.devicelink {
}
.devicelink ul {
margin:0px;
padding:0px;
}
.devicelink ul li {
background:#DAD8BF url(smartphone-images/l-right.png) 95% 50% no-repeat;
padding:9px 0px 10px 0px;
list-style:none;
}
.devicelink ul li a {
background:url(smartphone-images/arrow-invert.png) 10px 3px no-repeat;
color:#626262;
padding:0px 0px 0px 33px;
font-weight:bold;
}
/* inner pages css start */
h1.inner{font:24px Georgia, "Times New Roman", Times, serif; color:#fff; text-align:left; font-weight:100; margin:0px; padding:0 0px 10px 0px; text-decoration:none}
h1.inner span{color:#ccc9a2;}
.aboutus-img{float:right; border:4px solid #fff; margin:0px 0px 10px 20px;}
h5{font:15px Myriad Pro, Arial, Helvetica, sans-serif; color:#fff; font-weight:100; padding:0px 0px 5px 0px; border-bottom:1px dotted #fff; margin:0px 0px 10px 0px; background:none }
h6{font:17px Myriad Pro, Arial, Helvetica, sans-serif; color:#fff; font-weight:100; padding:0px 0px 5px 0px; margin:0px 0px 0px 0px; background:none }
.aboutcolumnzone{padding:20px 0px 16px 0px;}
.aboutcolumn1{width:48%; float:left; margin:0px 0px 10px 0px;}
.aboutcolumn2{width:48%; float:right; margin:0px 0px 10px 0px;}
.abouticon{float:left; margin:0px 20px 0px 0px;}
.insidereadmore{padding:10px 0px 10px 0px;}
.insidereadmore a{color:#5D2D23; font-size:14px; text-decoration:none}
.insidereadmore a:hover{text-decoration:underline}
a.projects{color:#CC9900; font-size:12px; text-decoration:underline}
a:hover.projects{text-decoration:none}
input.button{color:#ffffff; background:#414141; font:bold 11px Arial, Helvetica, sans-serif; text-decoration:none; padding:10px 10px; margin:0px 5px 5px 0; border:1px solid #fff;}
input.button:hover{cursor:pointer; color:#cccccc;}
.project-img{float:right; margin-left:20px; border: 6px solid #fff;}
.whiteheading{font:30px Myriad Pro, Arial; color:#000; font-weight:100; padding:0px; margin:25px 0px 20px 0px;}
.ourprojectrow{margin-bottom:20px; border-bottom:1px dotted #fff; padding-bottom:10px;}
.servicecolumnzone{padding:20px 0px 16px 0px;}
.servicecolumn1{width:48%; float:left; margin:0px 0px 10px 0px;}
.servicecolumn2{width:48%; float:right; margin:0px 0px 10px 0px;}
.blog-posted-row{padding:3px;}
.blog-posted-row a{color:#CC9900; font-size:12px; text-decoration:underline; padding:0 0 0 8px}
.blog-posted-row a:hover{text-decoration:none}
/* inner pages css ends */
</style>
</head>
<body>
<!--wrapper starts here-->
<div id="wrapper">
<!--header starts here-->
<div id="header">
<div class="logo"> </div>
<div class="topMenu">
<ul>
<li class="first"><a class="current" href="about_us.html">About Us</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="privacy.html">Privacy</a></li>
</ul>
</div>
<div class="devices"> </div>
<div class="clear"></div>
</div>
<!--header ends here-->
<!--workZone starts here-->
<div id="workZone">
<!--leftCol starts here-->
<div class="leftCol">
<div class="picPhone">
<div class="boldText">BOLD </div>
<div class="boldTextwhite">SMARTPHONE</div>
</div>
<!--featuresContainer starts here-->
<div class="featuresContainer">
<h2>Features</h2>
<div class="featueesText">The Smartphone Bold smartphone embodies elegant design - without sacrificing the features or functionality you expect from a premium smartphone. <br />
<br />
<span class="learn"><a href="http://www.free-css.com/">Learn about the Smartphone Bold smartphone features.</a></span> </div>
<div class="specification">
<h2>Specifications</h2>
<ul>
<li>Wireless Email, Internet, SMS / MMS</li>
<li>Keyboard backlighting</li>
<li>Integrated earpiece/ microphone</li>
<li>TFT LCD resln. 480 x 320 pixel color display</li>
<li>GSM Standby Time: 9 days</li>
<li>Expandable memory - support microSD card</li>
<li>Wi-Fi: 802.11b/g USB cable, Wall Charger </li>
</ul>
<br />
<span class="learn"><a href="http://www.free-css.com/">Learn more about the Smartphone Bold smartphone specifications.</a></span> </div>
<div class="clear"></div>
</div>
<!--featuresContainer ends here-->
<div class="orderNow"><a href="http://www.free-css.com/"><img src="smartphone-images/order-now.png" alt="" border="0" /></a> </div>
<div class="clear"></div>
</div>
<!--leftCol left here-->
<!--midCol starts here-->
<div class="columnmiddle">
<div style="padding:0 15px 10px 15px;">
<h1 class="inner">Company <span>Information</span></h1>
<div><img src="smartphone-images/photo-about.jpg" alt="" width="177" height="117" class="aboutus-img" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, risus neque venenatis arcu, a semper massa mi eget ipsum.<br />
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisqueeleifend, arcu a dictum varius, risus neque venenatis arcu, a semper massa mi eget ipsum. Proin sed odio et ante adipiscing lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius, risus neque venenatis arcu, a semper massa mi eget ipsum. Proin sed odio et ante adipiscing lobortis. <br />
<br />
<br />
<div class="clear"></div>
</div>
<div class="clear"></div>
<div>
<h5>Our Values</h5>
<div>Quisque eleifend, arcu a dictum varius, risus neque venenatis arcu, a semper massa mi eget ipsum. Proin sed odio et ante adipiscing lobortis. Proin sed odio et ante adipiscing lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis.</div>
</div>
<div class="clear"></div>
<div class="aboutcolumnzone">
<div class="aboutcolumn1">
<div>
<h5>Customer Service</h5>
<img src="smartphone-images/ico-med-1.png" alt="" class="abouticon" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius,
<div class="insidereadmore"><a href="http://www.free-css.com/">Read More...</a></div>
</div>
</div>
<div class="aboutcolumn2">
<div>
<h5>Award Winning</h5>
<img src="smartphone-images/ico-med-2.png" alt="" class="abouticon" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius,
<div class="insidereadmore"><a href="http://www.free-css.com/">Read More...</a></div>
</div>
</div>
<div class="clear"></div>
<div class="aboutcolumn1">
<div>
<h5>Global Reach</h5>
<img src="smartphone-images/ico-med-3.png" alt="" class="abouticon" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius,
<div class="insidereadmore"><a href="http://www.free-css.com/">Read More...</a></div>
</div>
</div>
<div class="aboutcolumn2">
<div>
<h5>Availability</h5>
<img src="smartphone-images/ico-med-4.png" alt="" class="abouticon" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. Quisque eleifend, arcu a dictum varius,
<div class="insidereadmore"><a href="http://www.free-css.com/">Read More...</a></div>
</div>
</div>
<div class="clear"></div>
</div>
<div>
<h5>Our Commitment</h5>
<div> Quisque eleifend, arcu a dictum varius, risus neque venenatis arcu, a semper massa mi eget ipsum. Proin sed odio et ante adipiscing lobortis. Proin sed odio et ante adipiscing lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed odio et ante adipiscing lobortis. </div>
</div>
</div>
<!--midCol ends here-->
<div class="clear"></div>
</div>
<!--rightCol starts here-->
<div class="rightCol">
<div class="devicezone">
<div>
<div class="deviceheadingcolumn">
<h3>Device Features</h3>
</div>
<div class="deviceheadingcolumn">
<h3>Compare Devices</h3>
</div>
<div class="clear"></div>
<div class="devicelink">
<ul>
<li><a href="http://www.free-css.com/">SmartPhone Bold</a></li>
<li><a href="http://www.free-css.com/">SmartPhone Bold</a></li>
<li><a href="http://www.free-css.com/">SmartPhone Bold</a></li>
<li><a href="http://www.free-css.com/">SmartPhone Bold</a></li>
<li><a href="http://www.free-css.com/">SmartPhone Bold</a></li>
<li><a href="http://www.free-css.com/">SmartPhone Bold</a></li>
<li><a href="http://www.free-css.com/">SmartPhone Bold</a></li>
<li><a href="http://www.free-css.com/">SmartPhone Bold</a></li>
</ul>
</div>
</div>
</div>
<div class="phoneBox1">
<h4>Learn More</h4>
<div class="aboutText">about New<br />
SmartPhone</div>
<div class="phn-img"> <img src="smartphone-images/col3pic1.png" alt="" /> </div>
<div class="clear"></div>
</div>
<div class="phoneBox2">
<h4>About</h4>
<div class="aboutText">New<br />
Softwares</div>
<div class="phn-img"> <img src="smartphone-images/col3pic2.png" alt="" /> </div>
<div class="clear"></div>
</div>
<div class="phoneBox3">
<h4>How To Order</h4>
<div class="aboutText">New<br />
SmartPhone</div>
<div class="phn-img"> <img src="smartphone-images/col3pic3.png" alt="" /> </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<!--rightCol ends here-->
<!--workZone ends here-->
<div class="clear"></div>
</div>
<div style="text-align:center; color:#FFF;"> Copyright (c) Sitename.com. All rights reserved. Design by Stylish <a href="http://www.stylishtemplate.com" style="color:#FFF; text-decoration:underline;">Website Templates</a>. </div>
<!--wrapper ends here-->
</div>
</body>
</html>
Related examples in the same category