mobileshop
<!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>MobileShop</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
html {
background: #777;
}
body {
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
color: #fff;
width: 100%;
display: table;
}
#container {
width: 940px;
margin: auto;
background: url(mobileshop-images/container_bg.jpg);
}
#header_section {
width: 940px;
height: 293px;
background: url(mobileshop-images/header.jpg) no-repeat;
}
/* Head Menu */
#menu {
float: left;
width: 210px;
height: 20px;
margin-left:700px;
}
* html #menu{
margin-left: 350px;
}
#menu ul {
float: left;
width: 210px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#menu ul li{
display: inline;
}
#menu ul li a{
float: left;
padding-left:10px;
margin-left:5px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #7f7f7f;
background:url(mobileshop-images/head_menu.jpg) no-repeat;
}
#menu li a:hover, #menu li .current{
color: #058fdd;
}
/* Menu */
.ver_menu {
float: right;
width: 235px;
margin: 113px 40px 0px 0px;
}
* html .ver_menu {
margin: 108px 20px 0px 0px;
}
.ver_menu ul {
list-style-type: none;
padding: 0;
margin: 0px;
width: 235px;
}
.ver_menu li a {
display: block;
height: 25px;
padding-top: 7px;
color: #fff;
padding-left: 50px;
font-weight: bold;
background: url(mobileshop-images/menu_button.jpg);
text-decoration:none;
}
.ver_menu li a:hover, .ver_menu li .current {
background: url(mobileshop-images/menu_current.jpg);
text-decoration:none;
}
/* End of Menu */
#content{
float:left;
background: url(mobileshop-images/content_bg.jpg) repeat-x #ABABAB;
width: 940px;
}
#left_section{
float:left;
width:260px;
height:507px;
background:url(mobileshop-images/left_content.jpg);
margin:0px;
}
#left_section .validater{
float:left;
width:200px;
height:120px;
margin:380px 0px 0px 15px;
text-align:center;
}
#left_section .validater a{
color:#fff;
text-decoration:none;
}
#left_section .validater a:hover{
color:#fff;
text-decoration:none;
}
#center_section{
float:left;
width:370px;
padding-top:5px;
}
#center_section .new{
margin: 0px 10px 3px 10px;
}
#center_section .new h2{
color: #AA3300;
font-size:12px;
margin:0px;
}
#center_section .new p{
color: #fff;
font-size:11px;
text-align:justify;
}
#center_section .new a{
color :#66d2ff;
text-decoration:none;
}
#center_section .new img{
float:right;
border:none;
margin: 5px 10px 5px 0px;
}
#center_section .new .product {
margin: 0px 10px 0px 10px;
width: 330px;
height:100px;
}
#center_section .new .product img{
float:left;
border:none;
margin: 3px 0px 3px 5px;
}
#center_section .new .product .product_text{
float:left;
margin-left: 5px;
width: 235px;
}
#center_section .new .product .product_text h3{
margin : 2px 0px 3px 0px;
color: #0066CC;
font-size:9px;
}
#center_section .new .product .product_text p{
margin : 0px 3px 0px 3px;
color:#fff;
font-size:9px;
text-align:justify;
}
#center_section .new .product .product_text span a{
color:#ff0000;
font-size:9px;
text-decoration:none;
}
span.price {
color: #333333;
font-size:9px;
margin:0px;
}
span.detail {
color:#ff0000;
font-size:9px;
text-decoration:none;
}
#right_section{
float:right;
width:295px;
height:507px;
}
#right_section .hot{
float:right;
width:255px;
height:189px;
background:url(mobileshop-images/right_hot.jpg);
margin: 0px 40px 0px 0px;
}
* html #right_section .hot{
margin-right:20px;
}
#right_section .hot .hot_text{
float:right;
width:150px;
height:100px;
margin: 30px 10px 0px 0px;
}
#right_section .hot .hot_text h2{
color:#66d2ff;
font-size:11px;
}
#right_section .hot .hot_text p{
color:#666;
font-size:10px;
text-align:justify;
}
#right_section .hot .hot_text a{
color:#66d2ff;
text-decoration:none;
}
#right_section .promotion{
width:235px;
height:314px;
background:url(mobileshop-images/right_promotion.jpg) no-repeat;
float:right;
margin-right:40px;
}
* html #right_section .promotion{
margin-right:20px;
}
#right_section .promotion h1{
color :#2f92d7;
font-size:18px;
margin-left:10px;
}
#right_section .promotion h2{
color :#fff;
font-size:12px;
margin-left:10px;
}
#right_section .promotion p{
color :#808080;
font-size:11px;
margin:0px 10px 0px 10px;
text-align:justify;
}
#right_section .promotion a{
color :#fff;
text-decoration:none;
}
#right_section .promotion img{
float:right;
margin-right:20px;
border:none;
}
</style>
</head>
<body>
<div id="container">
<div id="header_section" >
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">Support</a></li>
<li><a href="http://www.free-css.com/">Shopping Cart</a></li>
<li><a href="http://www.free-css.com/">FAQs</a></li>
</ul>
</div>
<div class="ver_menu">
<ul>
<li><a href="http://www.free-css.com/" class="current">Home Page</a></li>
<li><a href="http://www.free-css.com/">Mobile Phones</a></li>
<li><a href="http://www.free-css.com/">Accessories</a></li>
<li><a href="http://www.free-css.com/">Promotions</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="left_section">
<div class="validater"> <a target="_blank" href="http://validator.w3.org/check?uri=referer"> <img height="31" alt="" src="http://www.w3.org/Icons/valid-xhtml10" width="88" vspace="8" border="0" /> </a> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"> <img alt="" src="http://jigsaw.w3.org/css-validator/mobileshop-images/vcss-blue" vspace="8" border="0" /> </a> Copyright 2024 <a href="http://www.free-css.com/">Your Company</a><br />
Designed by <a href="http://www.templatemo.com">Free Templates</a> </div>
</div>
<div id="center_section">
<div class="new">
<h2>Mobile Phone Website</h2>
<p>This is a FREE CSS web template provided by TemplateMo.com. You may apply this layout for any of your websites. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt.Duis vitae velit sed dui malesuada dignissim. <a href="http://www.free-css.com/"><img alt="" src="mobileshop-images/template_more_blue.jpg" /></a></p>
</div>
<div class="new">
<h2>Latest Phone Models </h2>
<div class="product"> <img alt="" src="mobileshop-images/product.jpg" />
<div class="product_text">
<h3>New Model One</h3>
<p>Nulla sed leo sed sapien sagittis aliquet. Vivamus vestibulum condimentum massa.<br />
<span class="price">$600</span> <span class="detail"><a href="http://www.free-css.com/">View Specs</a></span> </p>
</div>
</div>
<div class="product"> <img alt="" src="mobileshop-images/product.jpg" />
<div class="product_text">
<h3>Super Phone Two</h3>
<p>Sed pretium, neque hendrerit rhoncus accumsan, nibh tellus pharetra neque, quis rutrum elit justo vitae sapien.<br />
<span class="price">$500</span> <span class="detail"><a href="http://www.free-css.com/">View Specs</a></span> </p>
</div>
</div>
<div class="product"> <img alt="" src="mobileshop-images/product.jpg" />
<div class="product_text">
<h3>High End Mobile Three</h3>
<p>Donec a purus vel purus sollicitudin placerat. Nunc at sem. Sed pellentesque placerat augue. Phasellus id purus.<br />
<span class="price">$400</span> <span class="detail"><a href="http://www.free-css.com/">View Specs</a></span> </p>
</div>
</div>
<div class="product"> <img alt="" src="mobileshop-images/product.jpg" />
<div class="product_text">
<h3>Future Mobile Four</h3>
<p>Sed pellentesque placerat augue. Phasellus id purus. Donec a purus vel purus sollicitudin placerat. Nunc at sem.<br />
<span class="price">$350</span> <span class="detail"><a href="http://www.free-css.com/">View Specs</a></span> </p>
</div>
</div>
<a href="http://www.free-css.com/"><img alt="" src="mobileshop-images/template_more_blue.jpg" /></a> <br />
</div>
</div>
<div id="right_section">
<div class="hot">
<div class="hot_text">
<h2>Brand New Model</h2>
<p>Proin vulputate justo et quam. Cras nisl eros, elementum eu, iaculis vitae, viverra ut, ligula. Pellentesque metus. Duis dolor.</p>
</div>
</div>
<div class="promotion">
<h2>QUALITY PRODUCTS</h2>
<h1>NEW PROMOTION</h1>
<p>Vivamus vulputate felis. Etiam luctus. Quisque facilisis suscipit elit. </p>
<p> </p>
<p>Curabitur eleifend congue leo. Donec a purus vel purus sollicitudin placerat.</p>
<p> </p>
<p>Nunc at sem. Sed pellentesque placerat augue. Mauris pede nisl, placerat nec, lobortis vitae, dictum sed, neque.</p>
<p> </p>
<p><a href="http://www.free-css.com/"><img alt="" src="mobileshop-images/template_more_orange.jpg" /></a> </p>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category