Order Now

Portfolio of Pixel to Xhtml

Convert your mockup / design to web standards, handy, search engines and users friendly XHTML code

Special
Pricing
$49

We're proud to present some of our most distinguished past client work. We invite you to check out these sites, view the source code and become comfortable with our skills and expertise before placing an order. As you can see from the vast range of designs and styles, nothing is too small or complex for our team.Keep your eyes open to see our future projects and know our quality services.

PixeltoXhtml
Hosting Polar

Hosting Polar, an unlimited webhosting service provider. Their Web hosting plans packed with all the features you are looking for which includes 99.99% uptime guarantee.

PixeltoXhtml PixeltoXhtml PixeltoXhtml
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hosting Polar</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!--main-->
<div class="main" align="center">
    <!--main Resize-->
    <div class="main_resize" align="center">
        <!--Header-->
        <div class="header">
            <div class="logo"></div>
            <div class="top_navi">
                <ul>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Forum</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
            <div class="top_loginbck">
                <div class="top_loginleftbck"></div>
                <div class="top_login">
                    <div class="top_loginemail"><strong><a href="#">Email Us</a></strong></div>
                    <div class="top_loginline"></div>
                    <div class="top_loginchat"><strong><a href="#">Chat Now</a></strong></div>
                    <div class="top_loginline"></div>
                    <div class="top_loginclient"><strong><a href="#">Client Login</a></strong></div>
                </div>
                <div class="top_loginrightbck"></div>
            </div>
        </div>
        <!--Header Ends-->
        <!--contentmain-->
        <div class="cont_main">
            <!--contentleft-->
            <div class="cont_left">
                <div class="cont_leftbg">
                    <div class="special_head"></div>
                    <div class="special_mid">
                        <ul>
                            <li><a href="#">100MB Bandwidth</a></li>
                            <li><a href="#">10GB Space</a></li>
                            <li><a href="#">10 MySQL Databases</a></li>
                            <li><a href="#">$10 Ads</a></li>
                            <li><a href="#">100 Email Accounts</a></li>
                        </ul>
                    </div>
                    <div class="special_btm"></div>
                </div>
            </div>
            <!--contentleft End-->
            <!--content Right-->
          <div class="cont_right">
            <div class="menu">
                <ul>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Web Hosting</a></li>
                    <li><a href="#">Reseller Hosting</a></li>
                    <li><a href="#">Virtual Servers</a></li>
                    <li><a href="#">Dedicated Servers</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
            <!--main_cont-->
            <div class="main_contbg">
                <div class="main_contleftbg"></div>
                <div class="main_contmid"></div>
              <div class="main_contrightbg"></div>  
                <!--content-->
                  <div class="content">
                       <div class="cont_logo" align="center"></div>
                    <div class="cont_ban"></div>
                    <div class="cont_link">
                        <ul>
                            <li><a href="#">UNLIMITED DISK SPACE</a></li>
                            <li><a href="#">UNLIMITED BANDWIDTH</a></li>
                            <li><a href="#">EASY CONTROL PANEL</a></li>
                            <li><a href="#">1-CLICK SCRIPT INSTALLS</a></li>
                        </ul>
                    </div>
                    <div class="cont_linknext">
                        <ul>
                            <li><a href="#">99.9% UPTIME GUARANTEE</a></li>
                            <li><a href="#">45 DAY MONEY BACK GUARANTEE</a></li>
                            <li><a href="#">24/7/365 TECHNICAL SUPPORT</a></li>
                            <li><a href="#">$100 GOOGLE ADWORDS CREDIT</a></li>
                        </ul>
                    </div>
                    <div class="cont_plansimg"></div>
                    <div class="cont_plansshad"></div>
                    <!--View plan-->
                    <div class="viewplan_bck">
                        <div class="viewplan_bg">
                            <div class="viewplan_inner">
                                <div class="viewplan_resaler"></div>
                                <div class="viewplan_text">voluptatem accusantium doloremque laudantium</div>
                                <div class="viewplan_text02">STARTING AT</div>
                                <div class="viewplan_doller01"></div>
                                <a href="#"><div class="viewplan_button"></div></a>
                            </div>
                        </div>
                        <div class="viewplan_leftbckspace"></div>
                        <div class="viewplan_bg">
                            <div class="viewplan_inner">
                                <div class="viewplan_virtual"></div>
                                <div class="viewplan_text">voluptatem accusantium doloremque laudantium</div>
                                <div class="viewplan_text02">STARTING AT</div>
                                <div class="viewplan_doller02"></div>
                                <a href="#"><div class="viewplan_button"></div></a>
                            </div>
                        </div>
                        <div class="viewplan_leftbckspace"></div>
                        <div class="viewplan_bg">
                            <div class="viewplan_inner">
                                <div class="viewplan_dedicator"></div>
                                <div class="viewplan_text">voluptatem accusantium doloremque laudantium</div>
                                <div class="viewplan_text02">STARTING AT</div>
                                <div class="viewplan_doller03"></div>
                                <a href="#"><div class="viewplan_button"></div></a>
                            </div>
                        </div>
                    </div>
                    <!--View plan-->
                    <!--welcome-->
                    <div class="welcome_bg">
                        <div class="welcome_bgleft"></div>
                        <div class="welcome_mid">
                            <div class="welcome">
                                 <div class="welcome_head"></div>
                                <div class="welcome_text">Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words.<br />
                                  <br />
                                Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. <br />
                                  <br />
                                Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words.</div>
                            </div>
                            <div class="welcome_line"></div>
                            <div class="latestnews">
                                <div class="latest_head"></div>
                                <div class="latest_space"></div>
                                <div class="latest_headtext">Hosting Polar</div>
                                <div class="latest_text">Lorem Ipsum available, but the majority have suffered predefined alteration</div>
                                <div class="latest_line"></div>
                                <div class="latest_text">February 16th, 2011&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Admin</div>
                                <div class="latest_line"></div>
                                <div class="latest_headtext">Hosting Polar</div>
                                <div class="latest_text">Lorem Ipsum available, but the majority have suffered predefined alteration</div>
                                <div class="latest_line"></div>
                                <div class="latest_text">February 16th, 2011&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Admin</div>
                                <div class="latest_line"></div>
                                <a href="#"><div class="readmore_btn"></div></a>
                            </div>
                        </div>
                        <div class="welcome_bgright"></div>
                    </div>
                    <!--welcome-->
                    <div class="submit_topspace"></div>
                    <div class="submit_bg">
                        <div class="submit_bgleft"></div>
                        <div class="submit_mid">
                            <div class="money_back">
                                <div class="money_head"></div>
                                <div class="resaller_head"></div>
                                <div class="dedicated_head"></div>
                            </div>
                            <div class="sub_line"></div>
                            <div class="submit_head"></div>
                            <div class="submit_text">The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed  Lorem Ipsum is that it has a more-or-less. </div>
                            <a href="#"><div class="submit_btn"></div></a>
                        </div>
                        <div class="submit_bgright"></div>
                    </div>
                </div>                
                <!--content End-->
                <div class="main_contbtmleft">
                    <div class="main_contbtmleftsub"></div>
                </div>
                <div class="main_contbmid"></div>
                <div class="main_contbtmright">
                    <div class="main_contbtmrightsub"></div>
                </div>                      
            </div>
            <!--main_cont Ends-->
               <!--footer-->
               <div class="footer">
                 <div class="footer_leftbg"></div>
                <div class="footer_mid">
                    <div class="footer_midleftmenu">
                        <ul>
                            <li><strong>HOSTING POLAR</strong></li>
                            <li> </li>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Dedicated Servers</a></li>
                            <li><a href="#">Web Hosting</a></li>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Reseller Hosting</a></li>
                            <li><a href="#">Contact Us</a></li>
                            <li><a href="#">Virtual Servers</a></li>
                        </ul>
                  </div>
                  <div class="footer_midline"></div>
                  <div class="footer_midmenu">
                        <ul>
                            <li><strong>WEB HOSTING</strong></li>
                            <li><a href="#">Shared Hosting</a></li>
                            <li><a href="#">Shared Cloud Hosting</a></li>
                            <li><a href="#">Reseller Hosting</a></li>
                        </ul>
                  </div>
                  <div class="footer_midline"></div>
                  <div class="footer_midmenu02">
                        <ul>
                            <li><strong>TECH SUPPORT</strong></li>                            
                            <li><a href="#">Support</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Tourm</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
                  </div>
                </div>
                <div class="footer_rightbg"></div>
            </div>            
            <div class="footer_btm">
                <div class="footer_btmleft"></div>
                  <div class="footer_btmmid">
                      <div class="footer_btmlogo"></div>
                    <div class="footer_btmtext">©2011 Hosting Polar.com - All Rights Reserved </div>
                 </div>
              <div class="footer_btmright"></div>
               </div>
               <!--footer End-->
          </div>        
            <!--content Right End-->
        </div>
        <!--contentmain Ends-->    
  </div>
    <!--main Resize End-->
</div>
<!--main End-->
</body>
</html>
body{
    background:#e7e7e7 url(../images/bg.jpg) repeat-x top center;
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size:10px;
    text-decoration:none;
    font-weight:normal;
    color:#ffffff;
}
.main{
    width:100%;
    margin:0;
}
.main_resize{
    width:942px;
    margin:0;
}
.header{
    width:942px;
    height:102px;
    margin:0;
    float:left;
}
.logo{
    width:288px;
    height:42px;
    float:left;
    margin-top:36px;
    background:url(../images/logo.jpg) no-repeat;
}
.top_navi{
    width:334px;
    height:16px;
    margin-top:41px;
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    font-size:11px;
}
.top_navi ul{
    float:left;
    margin:0px 0px 0px 12px;
    padding:0;
    list-style:none;
}
.top_navi li{
    height:16px;
    float:left;
    background:url(../images/arrow_top.jpg) no-repeat left;    
    padding-left:6px;
    padding-right:12px;
    padding-top:2px;

}
.top_navi li a{
    color:#FFFFFF;
    float:left;
    text-decoration:none;
    background:url(../images/topbtn_line.jpg) no-repeat top right;
    padding-left:10px;
    padding-right:12px;
}
.top_navi li a:hover{
    color:#FFFFFF;
    text-decoration:underline;
}
.top_loginbck{
    width:314px;
    height:52px;
    float:left;
    margin-top:24px;
    background:url(../images/top-btn_midbg.jpg) repeat-x top left;
}
.top_loginleftbck{
    width:16px;
    height:52px;
    float:left;
    background:url(../images/top-btn_lefftbg.jpg) no-repeat top left;
}
.top_login{
    width:286px;
    height:52px;
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    font-size:11px;
}
.top_loginemail{
    width:82px;
    height:12px;
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    font-size:11px;
    background:url(../images/email_img.jpg) no-repeat top left;
    margin:21px 0px 0px 0px;
    padding-left:7px;
}
.top_loginemail a{
    color:#FFFFFF;
    text-decoration:none;
}
.top_loginemail a:hover{
    color:#747474;
    text-decoration:none;
}
.top_loginline{
    width:1px;
    height:24px;
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    font-size:11px;
    background:url(../images/top-btn_line.jpg) no-repeat top left;
    margin:16px 0 0 0;
}
.top_loginchat{
    width:84px;
    height:12px;
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    font-size:11px;
    background:url(../images/chat_img.jpg) no-repeat top left;
    margin:21px 0px 0px 7px;
    padding-left:7px;
}
.top_loginchat a{
    color:#FFFFFF;
    text-decoration:none;
}
.top_loginchat a:hover{
    color:#747474;
    text-decoration:none;
}
.top_loginclient{
    height:24px;
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    font-size:11px;
    background:url(../images/clientlogin_bck.jpg) no-repeat top left;
    margin:13px 0px 0px 10px;
    padding:8px 0px 0px 21px;
}
.top_loginclient a{
    color:#FFFFFF;
    text-decoration:none;
}
.top_loginclient a:hover{
    color:#747474;
    text-decoration:none;
}
.top_loginrightbck{
    width:12px;
    height:52px;
    float:left;
    background:url(../images/top-btn_rightbg.jpg) no-repeat top left;
}
.cont_main{
    width:942px;
    margin:0;
    float:left;
}
.cont_left{
    width:267px;
    margin-top:121px;
    float:left;
}
.cont_leftbg{
    width:198px;
    float:right;
    background:url(../images/special-offer_midbg.jpg) repeat;
}
.special_head{
    width:198px;
    height:138px;
    float:left;
    padding-bottom:33px;
    background:url(../images/special-offer_head.jpg) no-repeat top left;
}
.special_mid{
    width:198px;
    float:left;
}
.special_mid ul{
    float:left;
    list-style:none;
    margin:0;
    padding:0px 0px 0px 15px;
}
.special_mid ul li{
    width:173px;
    height:35px;
    font:Myriad Pro;
    color:#FFFFFF;
    font-size:15px;
    font-weight:bold;
    text-align:left;
    text-decoration:none;
    font-weight:normal;
    background:url(../images/arrow_right.jpg) no-repeat top left;
    padding:0px 0px 0px 25px;
    margin:0 auto;
}
.special_mid ul li a{
    color:#FFFFFF;
    font:Myriad Pro;
    font-weight:bold;
    text-decoration:none;
    background:url(../images/arrow_line.jpg) repeat-x bottom left;
    padding:0px 0px 5px 0px;
}
.special_mid ul li a:hover{
    color:#be3939;
    text-decoration:none;
    
}
.special_btm{
    width:198px;
    height:20px;
    float:left;
    margin:0;
    background: url(../images/special-offer_leftbg.jpg) no-repeat bottom left;
}
.cont_right{
    width:675px;
    float:left;
}
.menu{
    width:675px;
    height:28px;
    float:left;    
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#FFFFFF;
    border-bottom:1px solid #3a3939;
}
.menu ul{
    float:left;
    height:28px;
    margin:0;
    padding:0;
    padding-left:16px;
    list-style:none;
}
.menu ul li{
    float:left;
    height:28px;
    margin:0;
    padding:0;
    background:url(../images/menu_line.jpg) no-repeat bottom right;
    padding:0px 10px 0px 10px;
}
.menu ul li a{
    float:left;
    height:28px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#FFFFFF;
    text-decoration:none;
    padding:5px 10px 0px 10px;
    margin:0;
}
.menu ul li a:hover, menu ul li a:active{
    color:#FFFFFF;
    text-decoration:none;
    background:url(../images/menu_leftbg.jpg) no-repeat top left;    
    background-color:#dc1b1b;
}
.active{
    color:#FFFFFF;
    height:28px;
    text-decoration:none;
    background:url(../images/menu_leftbg.jpg) no-repeat top left;    
    background-color:#dc1b1b;
}
.main_contbg{
    width:675px;
    float:left;
    background:url(../images/main-mid_bg.jpg) repeat-x top left;
}
.main_contleftbg{
    width:10px;
    height:35px;
    float:left;
    background: url(../images/main-left_topbg.jpg) no-repeat top left;
}
.main_contmid{
    width:655px;
    height:35px;
    float:left;
}
.main_contrightbg{
    width:10px;
    height:35px;
    float:left;
    background:url(../images/main-right_topbg.jpg) no-repeat;
    background-position:right;
}
.content{
    width:640px;
    float:left;
    padding-left:18px;
    padding-right:17px;
}
.cont_logo{
    float:left;
    width:556px;
    height:91px;
    margin:0 0 0 33px;
    background:url(../images/unlimited_img.jpg) no-repeat top center;
}
.cont_ban{
    float:left;
    width:237px;
    height:260px;
    background:url(../images/home_img.jpg) no-repeat top left;
}
.cont_link{
    width:183px;
    float:left;
}
.cont_link ul{
    float:left;
    list-style:none;
    margin:0;
    padding:0;
}
.cont_link ul li{
    height:35px;
    float:left;
    font:Arial;
    color:#FFFFFF;
    font-size:11px;
    font-weight:none;
    text-align:left;
    text-decoration:none;
    font-weight:normal;
    background:url(../images/arrow_left.jpg) no-repeat top left;
    padding:5px 0px 0px 30px;
    margin:0 auto;
}
.cont_link ul li a{
    float:left;    
    font:Arial;
    color:#FFFFFF;
    font-size:11px;
    font-weight:none;
    text-decoration:none;
    background:url(../images/arrow_lineleft.jpg) repeat-x bottom left;
    padding:0px 0px 10px 0px;
}
.cont_link ul li a:hover{
    color:#be3939;
    text-decoration:none;    
}
.cont_linknext{
    width:220px;
    float:left;
    margin:0 auto;
}
.cont_linknext ul{
    float:left;
    list-style:none;
    margin:0;
    padding:0;
}
.cont_linknext ul li{
    height:35px;
    float:left;
    font:Arial;
    color:#FFFFFF;
    font-size:11px;
    font-weight:none;
    text-align:left;
    text-decoration:none;
    font-weight:normal;
    background:url(../images/arrow_left.jpg) no-repeat top left;
    padding:5px 0px 0px 30px;
    margin:0 auto;
}
.cont_linknext ul li a{
    float:left;    
    font:Arial;
    color:#FFFFFF;
    font-size:11px;
    font-weight:none;
    text-decoration:none;
    background:url(../images/arrow_lineleft.jpg) repeat-x bottom left;
    padding:0px 0px 10px 0px;
}
.cont_linknext ul li a:hover{
    color:#be3939;
    text-decoration:none;    
}
.cont_plansimg{
    float:left;
    width:403px;
    height:80px;
    background:url(../images/viewweb_btn.jpg) no-repeat bottom center;
}
.viewplan_bck{
    width:640px;
    height:253px;
    float:left;
}
.viewplan_bg{
    width:187px;
    height:235px;
    float:left;
    background:url(../images/viewplan_bg.jpg) no-repeat top left;
    padding:0 0 0 ;
}
.viewplan_inner{
    width:157px;
    height:205px;
    float:left;
    padding:15px 15px 15px 15px;
    margin:0;
}
.viewplan_resaler{
    width:157px;
    height:22px;
    float:left;
    background:url(../images/reseller_head.jpg) no-repeat top center;    
}
.viewplan_virtual{
    width:157px;
    height:22px;
    float:left;
    background:url(../images/virtual_head.jpg) no-repeat top center;    
}
.viewplan_dedicator{
    width:164px;
    height:22px;
    float:left;
    background: url(../images/dedicated_head.jpg) no-repeat top center;    
}
.viewplan_text{
    width:164px;
    float:left;
    font:Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    line-height:18px;
    font-size:11px;
    text-align:center;
    padding:8px 0px 15px 0px;
}
.viewplan_text02{
    width:164px;
    float:left;
    font:Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    line-height:18px;
    font-size:11px;
    font-weight:bold;
    text-align:left;
    padding:0px 0px 13px 0px;
}
.viewplan_doller01{
    width:164px;
    height:54px;
    float:left;
    background: url(../images/doller_img01.jpg) no-repeat top center;    
}
.viewplan_doller02{
    width:164px;
    height:54px;
    float:left;
    background: url(../images/doller_img02.jpg) no-repeat top center;    
}
.viewplan_doller03{
    width:164px;
    height:54px;
    float:left;
    background: url(../images/doller_img03.jpg) no-repeat top center;    
}
.viewplan_button{
    width:164px;
    height:54px;
    float:left;
    background: url(../images/viewplan_btn.jpg) no-repeat top center;    
}
.viewplan_leftbckspace{
    width:36px;
    height:235px;
    float:left;
}
.welcome_bg{
    float:left;
    width:640px;
    background:url(../images/content_midbg.jpg) repeat-x top left;
}
.welcome_bgleft{
    float:left;
    width:18px;
    height:300px;
    background:url(../images/content_leftbg.jpg) no-repeat top left;
}
.welcome_mid{
    float:left;
    width:604px;
}
.welcome{
    float:left;
    width:320px;
}
.welcome_head{
    float:left;
    width:320px;
    height:40px;
    background:url(../images/welcome_head.jpg) no-repeat bottom left;
}
.welcome_line{
    float:left;
    width:18px;
    height:300px;
    background:url(../images/content_midine.jpg) no-repeat top center;
}
.welcome_text{
    float:left;
    width:304px;
    margin:0 auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#2e2e2e;
    text-align: justify;
    line-height:19px;
    padding:12px 8px 0px 8px;
}
.latestnews{
    float:left;
    width:266px;
    height:300px;
}
.latest_head{
    float:right;
    width:266px;
    height:52px;
    background:url(../images/latest_icon.jpg) no-repeat bottom left;
}
.latest_headtext{
    float:left;
    width:260px;
    height:20px;
    margin:0 auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#2e2e2e;
    text-align:left;
    font-weight:bold;
    line-height:14px;
    padding:0px 0px 0px 5px;
}
.latest_text{
    float:left;
    width:260px;
    margin:0 auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#2e2e2e;
    text-align: justify;
    line-height:15px;
    padding:0px 0px 0px 5px;
}
.latest_line{
    float: right;
    width:260px;
    height:6px;
    background: url(../images/latest_line.jpg) repeat-x left;
    padding:2px 0px 2px 5px;
}
.readmore_btn{
    float: right;
    width:90px;
    height:50px;
    background: url(../images/readmore_btn01.jpg) no-repeat bottom right;
}
.latest_space{
    float: right;
    width:260px;
    height:18px;
}
.welcome_bgright{
    float:left;
    width:18px;
    height:300px;
    background:url(../images/content_rightbg.jpg) no-repeat top left;
}
.cont_plansshad{
    float:left;
    width:403px;
    height:12px;
    background:url(../images/viewweb_shad.jpg)    no-repeat top left;
}
.submit_topspace{
    float:left;
    width:640px;
    height:10px;
}
.submit_bg{
    float:left;
    width:640px;
    height:169px;
    background:url(../images/money_midbg.jpg) repeat-x top left;
}
.submit_bgleft{
    float:left;
    width:16px;
    height:169px;
    background:url(../images/money_leftbg.jpg) no-repeat top left;
}
.submit_mid{
    float:left;
    width:598px;
    padding:24px 5px 0 5px;
}
.money_back{
    float:left;
    width:220px;
}
.money_head{
    float:left;
    width:220px;
    height:31px;
    background:url(../images/money_head.jpg) no-repeat top left;
}
.resaller_head{
    float:left;
    width:220px;
    height:48px;
    background:url(../images/number_bck.jpg) no-repeat top left;
}
.dedicated_head{
    float:left;
    width:220px;
    height:48px;
    background:url(../images/number_bck02.jpg) no-repeat top left;
}
.sub_line{
    float:left;
    width:10px;
    height:105px;
    background:url(../images/money_line.jpg) no-repeat top left;
    padding-top:6px;
}
.submit_head{
    float:left;
    width:368px;
    height:20px;
    background:url(../images/submit_head.jpg) no-repeat top left;
}
.submit_text{
    float:left;
    width:368px;
    font:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#000000;
    font-weight:normal;
    text-align:justify;
    line-height:18px;
}
.submit_btn{
    float:left;
    width:71px;
    height:50px;
    background:url(../images/submit_btn.jpg) no-repeat bottom left;
}
.submit_bgright{
    float:left;
    width:16px;
    height:169px;
    background:url(../images/money_rightbg.jpg) repeat-x top left;
}
.main_contbtmleft{
    width:18px;
    height:12px;
    float:left;
    background:#252324;
}
.main_contbtmleftsub{
    width:18px;
    height:12px;
    float:left;
    background:url(../images/main-left_btmbg.jpg) no-repeat bottom left;
}
.main_contbmid{
    width:640px;
    height:12px;
    float:left;
    background:#252324;
}
.main_contbtmright{
    width:17px;
    height:12px;
    float:left;
    background:#252324;
}
.main_contbtmrightsub{
    width:17px;
    height:12px;
    float:left;
    background: url(../images/main-right_btmbg.jpg) no-repeat top;
    background-position:right;
}
.footer{
    width:675px;
    height:177px;
    margin-top:3px;
    float:left;
    background:url(../images/btm-menu_midbg.jpg) repeat-x top left;    
}
.footer_leftbg{
    width:25px;
    height:177px;
    float:left;
    background: url(../images/btm-menu_leftbg.jpg) no-repeat top left;
}
.footer_mid{
    width:625px;
    float:left;
    padding-top:14px;
}
.footer_midleftmenu{
    width:240px;
    float:left;
}
.footer_midleftmenu ul{
    margin:0;
    padding:0;
    list-style:none;
}
.footer_midleftmenu ul li{
    float:left;
    width:115px;
    height:28px;
    font:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#ffffff;
    font-weight:normal;
    text-align:justify;
    line-height:24px;
}
.footer_midleftmenu ul li a{
    float:left;
    font:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#ffffff;
    font-weight:normal;
    text-align:justify;
    text-decoration:none;
    line-height:24px;
    
    background: url(../images/btm_dot.jpg) repeat-x bottom left;
}
.footer_midleftmenu ul li a:hover{
    color:#dc1b1b;
    text-decoration:none;
    background: url(../images/btm_dot02.jpg) repeat-x bottom left;
}
.footer_midmenu{
    width:130px;
    float:left;
}
.footer_midmenu ul{
    margin:0;
    padding:0;
    list-style:none;
}
.footer_midmenu ul li{
    float:left;
    height:28px;
    width:130px;
    font:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#ffffff;
    font-weight:normal;
    text-align:justify;
    line-height:24px;
}
.footer_midmenu ul li a{
    float:left;
    font:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#ffffff;
    font-weight:normal;
    text-align:justify;
    text-decoration:none;
    line-height:24px;
    background: url(../images/btm_dot.jpg) repeat-x bottom left;
}
.footer_midmenu ul li a:hover{
    color:#dc1b1b;
    text-decoration:none;
    background: url(../images/btm_dot02.jpg) repeat-x bottom left;
}
.footer_midmenu02{
    width:100px;
    float:left;
}
.footer_midmenu02 ul{
    margin:0;
    padding:0;
    list-style:none;
}
.footer_midmenu02 ul li{
    height:28px;
    font:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#ffffff;
    font-weight:normal;
    text-align:justify;
    line-height:24px;
}
.footer_midmenu02 ul li a{
    font:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#ffffff;
    font-weight:normal;
    text-align:justify;
    text-decoration:none;
    line-height:24px;
    background: url(../images/btm_dot.jpg) repeat-x bottom left;
    padding-bottom:5px;
}
.footer_midmenu02 ul li a:hover{
    color:#dc1b1b;
    text-decoration:none;
    background: url(../images/btm_dot02.jpg) repeat-x bottom left;
    padding-bottom:5px;
}
.footer_midline{
    width:26px;
    height:150px;
    float:left;
    background: url(../images/btm-menu_line.jpg) no-repeat top center;
}
.footer_rightbg{
    width:25px;
    height:177px;
    float:left;
    background:url(../images/btm-menu_rightbg.jpg) no-repeat top;
    background-position:right;
}
.footer_btm{
    width:675px;
    margin-top:8px;
    float:left;
    background:#101010;
}
.footer_btmleft{
    width:20px;
    height:57px;
    float:left;
    background: url(../images/btm_leftbg.jpg) no-repeat top left;
}
.footer_btmmid{
    width:638px;
    height:57px;
    float:left;
}
.footer_btmlogo{
    width:161px;
    height:57px;
    float:left;
    background: url(../images/btm_hostimg.jpg) no-repeat top left;
}
.footer_btmtext{
    width:477px;
    height:57px;
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    text-align: right;
    font-size:12px;
    line-height:57px;
    color:#888888;
    margin:0;
    padding:0;
}
.footer_btmright{
    width:17px;
    height:57px;
    float:left;
    background:url(../images/btm_rightimg.jpg) no-repeat top left;
}
PixeltoXhtml
Fruit Paradise

They are specialized in providing fresh fruits to customers all over the world. They collect fruits from highly reliable farmers and adopt the latest technique to pack the fruits and ship them in a highly secure manner.

PixeltoXhtml PixeltoXhtml PixeltoXhtml
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fruit Paradise</title>

<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
    /*background-image: url(image/bg.jpg);*/
    background-repeat: repeat-x;
    background-color: #aa1113;
}
-->
</style>
</head>

<body>
<div id="main">
<!--ogo containr-->
<div class="logo"><div class="logo_img_aj"></div>
<div class="logo_img"></div>
</div>
<!--ogo containr -->
<div class="body_emty"></div>
<!--button-->
<div class="body_but">
<div class="button_aj"></div>
<div class="navigation">
<ul>
<li><a href="">Home</a></li><li><a href=""> About Us</a> </li><li>&nbsp;<a href="">Ordering </a> </li><li> <a href="">Shippping </a>  </li><li><a href="">Contact Us</a>  </li>
</ul>

</div>


</div>
<!--button end-->
<div class="body_emty_a"></div>
<div class="body_emty_bottom">

<div class="navigation_b">
<ul>
<li><a href="">Home</a></li>
<li>|</li>
<li><a href="">About Us</a></li>
<li>|</li>
<li><a href="">Ordering  </a> </li>
<li>|</li>
<li><a href=""> Shippping   </a>  </li>
<li>|</li>
<li><a href="">Contact Us</a>    </li>
<li style="float:right;">© 2011 Fruit Paradise - All rights reserved   </li>
</ul>
</div>

</div>

</div>
</body>
</html>
@charset "utf-8";

body {
    background-image: url(image/bgrep.jpg);
    background-repeat: repeat-x;
    font-family: Arial, Helvetica, sans-serif;
    color: #393939;
    margin-top: 0px;
    background-color: #aa1113;    
}
div {
    border: 0 none;
    font-size: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: top;
}

a {
    outline: none;
    color: #0000;
}

a:hover {
        text-decoration: none;
    }
#main {
    width: 1024px;
    font-size: 0.75em;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-image: url(image/b_g.jpg);
    background-repeat: no-repeat;
    height: auto;
}.logo {
    height: 217px;
    width: 1024px;
    margin-top: 0px;
}
.logo_img {
    background-image: url(image/logo.jpg);
    background-repeat: no-repeat;
    float: left;
    height: 217px;
    width: 350px;
    
}
.logo_img_aj {
    float: left;
    height: 217px;
    width: 330px;
    
}
.body_emty {
    height:225px;
    width:1024px;
}
.body_but{
    height:103px;
    width:1024px;
}
.button_aj {
    height:103px;
    width:110px;
    float:left;
}
.navigation {
    height:30px;
    width:900px;
    float:left;
    margin-top: 29px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}
.navigation ul li  {
    float:left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #FFF;
    text-decoration: none;
    list-style-type: none;
    height: 15px;
    width: auto;
    margin:0px 105px 0 0;
}
.navigation ul li a  {
    
    font-size: 15px;
    color: #FFF;
    text-decoration: none;
    list-style-type: none;
    height: 15px;
    width: auto;
    
}
.body_emty_a {
    height:350px;
    width:1024px;
}
.body_emty_bottom {
    height:30px;
    width:1024px;
}
.navigation_b {
    width:1024px;
    float:left;
}

.navigation_b ul li a  {
    list-style:none;
    margin:0 5px 0 0;
    padding:0;
    float:left;
    margin:0 10px 0 0;
    text-decoration:none;
    color: #ffffff;
}*.navigation_b ul li  {
    list-style:none;
    margin:0 5px 0 0;
    
    float:left;
    margin:0 10px 0 0;
    text-decoration:none;
    color:#ffffff;    
}
.navigation_c {
    width:200px;
    float:left;
}
.navigation_b ul li a:hover  {
    list-style:none;
    margin:0 5px 0 0;
    padding:0;
    float:left;
    margin:0 10px 0 0;
    text-decoration: underline;
    color: #ffffff;
}
PixeltoXhtml
Bravo

A perfect place for tasty and hot food. Their aim is to provide different kinds of delicious food at affordable prices.

PixeltoXhtml PixeltoXhtml PixeltoXhtml
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bravo-Tasty and Hot</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
    background-image: url(images/bg.jpg);
    
}
-->
</style></head>
<body>
<!--maincontainer-->
<div id="main">
<div class="header">
<!--innerhead-->
<div class="header_inner">
<div class="header_inner_1"></div>
<div class="header_inner_2"></div>
<div class="header_inner_3"></div>
<div class="header_inner_2"></div>
<div  class="header_inner_5"></div>
</div>
<!--innerhead end-->
<!--innerbutton-->
<div class="navigation">
<ul>
<li></li>
<li></li><li></li><li></li>
<li class="active"><b><a href="" >Home</a></b></li>
<li></li><li></li><li></li>
<li><b><a href="" >  About Bravo</a></b></li>
<li></li><li></li><li></li>
<li><b><a href="" >Lunch Menu</a></b></li>
<li></li><li></li><li></li>
<li><b><a href="" >Reservation</a></b></li>
<li></li><li></li><li></li>

<li><b><a href="" >Contact Us</a></b></li>

</ul>

</div>
<!--innerbutton end-->
</div>
<!--bodybg-->
<div class="body_img">
<div class="body_img_adj"></div>
<div class="body_img_pasta"><div class="pasta_on">
<div class="pis_bigfont">Pasta</div><div class="pis_font">Lorem Ipsum is that it has a more-or-less normal. </div>
</div>



</div>
<div class="body_img_adj"></div>
<div class="body_img_chicken">
<div class="pasta_on"><div class="pis_bigfont">Hot-Chicken</div><div class="pis_font">Lorem Ipsum is that it has a more-or-less normal. </div>



</div>
</div>
<div class="body_img_adj"></div>
<div class="body_img_redwine"><div class="pasta_on"><div class="pis_bigfont">Red Wine</div><div class="pis_font">Lorem Ipsum is that it has a more-or-less normal. </div>
</div>

</div>
</div>
<!--bodybgimg ends-->
<!--bodymnu-->
<div class="bodymnu">
<div class="body_txt">
<div class="pis_bigfont_a">Welcome to BRAVO!</div><br />
<div class="pis_font"><p style="width: 279px">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.</p>
 <p style="width: 277px">Are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
 </div>


</div>
<div class="body_txt_a"><div class="pis_bigfont_b">Today’s Special</div>
<br />
<div class="navigation_a">
<ul >
<li class="list_body" >Suffered Alteration</li>
<li class="list_body">True Generator</li>
<li class="list_body">Characteristic Words</li>
<li class="list_body">Looks Reasonable</li>
</ul>
</div>

</div>
<div class="body_txt_a_a">
<div class="pis_bigfont_b">Lunch Menu</div>
<br />
<div class="navigation_a">
<ul >
<li class="list_body" >Suffered Alteration</li>
<li class="list_body">True Generator</li>
<li class="list_body">Characteristic Words</li>
<li class="list_body">Looks Reasonable</li>
</ul>
</div>

</div>
<div class="body_txt_a">
<div class="pis_bigfont_b">Dinner Menu</div>
<br />
<div class="navigation_a">
<ul >
<li class="list_body" >Suffered Alteration</li>
<li class="list_body">True Generator</li>
<li class="list_body">Characteristic Words</li>
<li class="list_body">Looks Reasonable</li>
</ul>
</div>

</div>


</div>
<!--bodymnu ends-->
<!--footer -->
<div class="footer">
<div class="footer_inside">
<div class="navigation_b">
<ul>
<li><a href="">Home</a></li>
<li>|</li>
<li><a href="">About Bravo</a></li>
<li>|</li>
<li><a href="">Lunch Menu</a> </li>
<li>|</li>
<li><a href=""> Reservation</a>  </li>
<li>|</li>
<li><a href="">Contact Us</a>    </li>
<li style="float:right;">© 2010 Bravo - All rights reserved   </li>
</ul>
</div>

</div>





</div>
<!--footer ends-->



</div>
<!--maincontainerends-->

</body>
</html>
@charset "utf-8";

body {
    background-image: url(image/bg.jpg);
    background-repeat: repeat-x;
    background: #dfdac7;
    font-family: Arial, Helvetica, sans-serif;
    color: #393939;
    margin-top: 0px;
}
div {
    border: 0 none;
    font-size: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: top;
}

a {
    outline: none;
    color: #0000;
}

    a:hover {
        text-decoration: none;
    }
    #main {
    width: 982px;
    font-size: 0.75em;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}.header {
    height: 234px;
    width: 982px;
    position: relative;
}
.header_inner {
    height: 158px;
    width: 982px;
    position: relative;
}
.header_inner_1 {
    background-image: url(../images/bgdg1.jpg);
    float: left;
    height: 97px;
    width: 206px;
}
.header_inner_2 {
    float: left;
    height: 158px;
    width: 120px;
}
.header_inner_3 {
    background-image: url(../images/logo.jpg);
    float: left;
    height: 98px;
    width: 283px;
    margin-top: 10px;
}

.header_inner_5 {
    background-image: url(../images/bgdg2.jpg);
    float: left;
    height: 158px;
    width: 251px;
    
}

.body_img {
    height: 390px;
    width: 982px;
    position: relative;
}
.body_img_adj {
    height: 390px;
    width: 27px;
    float:left;
}
.body_img_pasta {
    background-image: url(../images/pasta.jpg);
    float: left;
    height: 375px;
    width: 292px;
}
.pasta_on {
    height: 69px;
    width: 255px;
    margin-top: 301px;
    position: relative;
    padding-left: 30px;
}

.body_img_chicken {
    background-image: url(../images/chicken.jpg);
    float: left;
    height: 375px;
    width: 292px;
}
.body_img_redwine {
    background-image: url(../images/redwine.jpg);
    float: left;
    height: 375px;
    width: 292px;
}
.bodymnu {
    background-image: url(../images/bodybgmenu.jpg);
    height: 225px;
    width: 975px;
    margin-right: 3px;
    margin-left: 3px;
    position: relative;
}
.footer {
    height: 55px;
    width: 982px;
    position: relative;
}
.navigation {
    width:981px;
    float:left;
    
}

.navigation ul {
    list-style:none;
    margin:5px 0px 0 0;
    padding:0;
    float:left;
    margin:0 10px 0 0;
}
.navigation ul li:hover a {
    float:left;
    /*background-image: url(../images/button_right.jpg);*/
    background-repeat: no-repeat;
    background-position: right;
}
.navigation ul li.active b a {
    float:left;
    /*background-image: url(../images/button_right.jpg);*/
    background-repeat: no-repeat;
    background-position: right;
}
.navigation ul li:hover a {
    /*color:#fff;*/
}

.navigation ul li{
    float:left;
    padding:0 10px;
    height:24px;
    font: 18px/30px Arial, Helvetica, sans-serif;
    /*color:#fff;*/
}
.navigation ul li b a {
    color: #000;
    text-decoration:none;
}
.navigation ul li b a:hover {
    color:#333;
    text-decoration:none;
}

/*.navigation ul li b:hover {
    background:url(../images/button_left.jpg) left no-repeat;
}*/
.navigation ul li.active {
    background:url(../images/menuright.jpg) right no-repeat;
}
.navigation ul li.active b {
    background:url(../images/menuleft.jpg) left no-repeat;
    float:left;
}
.navigation ul li.active b a {
    color:#000000;
}
.pis_bigfont {
    font-family: Rockwell;
    font-size: 30px;
    font-weight: bold;
    color: #FFF;
    height: 35px;
    width: 255px;
}
.pis_bigfont_a {
    font-family: Rockwell;
    font-size: 25px;
    font-weight: bold;
    color: #FFF;
    height: 35px;
    width: 306px;
    margin-top: 20px;
}
.pis_bigfont_b {
    font-family: Rockwell;
    font-size: 25px;
    font-weight: bold;
    color: #FFF;
    height: 35px;
    width: 195px;
    margin-top: 20px;
}
.pis_font {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFF;
}

.body_txt {
    float: left;
    height: 225px;
    width: 306px;
    margin-left: 20px;
}
.body_txt_a {
    float: left;
    height: 225px;
    width: 195px;
    margin-left: 14px;
}
.body_txt_a_a {
    float: left;
    height: 225px;
    width: 195px;
    margin-left:20px;
}
.list_body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFF;
    text-decoration: underline;
    list-style-type: none;
    margin-top: 10px;
    margin-bottom: 10px;
}
.navigation_a {
    width:150px;
    float:left;
}

.navigation_a ul {
    list-style:none;
    margin:5px 0 0 0;
    padding:0;
    float:left;
    margin:0 10px 0 0;
}
.footer_inside {
    height: 20px;
    width: 982px;
    position: relative;
    margin-top: 25px;
}
.navigation_b {
    width:980px;
    float:left;
}

.navigation_b ul li a  {
    list-style:none;
    margin:5px 0 0 0;
    padding:0;
    float:left;
    margin:0 10px 0 0;
    text-decoration:none;
    color: #000;
}
.navigation_b ul li  {
    list-style:none;
    margin:5px 0 0 0;
    padding:0;
    float:left;
    margin:0 10px 0 0;
    text-decoration:none;
    color: #000;    
}
.navigation_c {
    width:200px;
    float:left;
}
.navigation_b ul li a:hover  {
    list-style:none;
    margin:5px 0 0 0;
    padding:0;
    float:left;
    margin:0 10px 0 0;
    text-decoration: underline;
    color: #000;
}
logo
About Us | Portfolio | Monthly Subscription Plan | FAQ | Contact Us
© 2013 PX Outline. All rights reserved.
Website Designed & Developed by PX Outline