model_2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Model</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
body {
margin-top: 20px;
background: #df88c6 url(model_2-images/img01.gif) repeat-x;
font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fed0f1;
}
h1, h2, h3 {
margin-bottom: 1em;
text-transform: uppercase;
color: #FFFFFF;
}
h1 { font-size: 2.8em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.2em; }
p, blockquote, ul, ol {
margin-bottom: 1.5em;
text-align: justify;
line-height: 1.8em;
}
blockquote, ul, ol {
margin-left: 3em;
}
blockquote {
margin-right: 3em;
}
a {
color: #fed0f1;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
img { border: none; }
img.left {
float: left;
margin: 0 15px 15px 0;
}
img.right {
float: right;
margin: 0 15px 0 15px;
}
hr { display: none; }
.hr {
}
/* Boxed */
.boxed {
}
.boxed .title {
margin: 0;
padding: 5px 15px;
background: url(model_2-images/img08.gif) no-repeat left center;
text-transform: uppercase;
font-size: small;
}
.boxed .content {
padding: 15px;
background: url(model_2-images/img09.gif) repeat-x;
}
.boxed ol, .boxed ul {
margin-left: 0;
list-style-position: inside;
}
/* Logo */
#logo {
width: 760px;
height: 200px;
margin: 0 auto;
background: #000000 url(model_2-images/img02.jpg) no-repeat;
}
#logo h1 {
float: left;
width: 600px;
margin: 0;
padding: 164px 0 0 0;
text-align: right;
letter-spacing: 5px;
font-size: 18px;
}
#logo h2 {
float: right;
margin: 0;
padding: 170px 20px 0 0;
font-size: 11px;
}
#logo a {
text-decoration: none;
color: #FFFFFF;
}
/* Page */
#page {
width: 760px;
margin: 0 auto;
background-color: #974680;
}
/* Content */
#content {
float: left;
width: 480px;
padding: 20px;
background: url(model_2-images/img03.jpg) no-repeat;
}
#welcome {
padding-bottom: 20px;
}
#olist {
clear: left;
float: left;
width: 230px;
}
#ulist {
float: left;
width: 230px;
padding-left: 20px;
}
/* Sidebar */
#sidebar {
float: right;
width: 200px;
padding: 20px;
background: url(model_2-images/img04.jpg) no-repeat;
}
#sidebar blockquote {
margin-left: 0;
margin-right: 0;
}
/* Menu */
#menu {
margin-bottom: 19px;
}
#menu h2 {
display: none;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
display: block;
padding-top: 1px;
background: url(model_2-images/img07.gif) repeat-x;
}
#menu li.first {
background: none;
}
#menu a {
display: block;
width: 165px;
padding: 7px 10px 7px 25px;
text-transform: uppercase;
background: url(model_2-images/img08.gif) no-repeat 10px 50%;
text-decoration: none;
letter-spacing: 1px;
font-size: x-small;
font-weight: bold;
}
#menu a:hover {
background-color: #0A0A0A;
}
/* Footer */
#footer {
width: 760px;
margin: 0 auto;
padding: 20px 0;
background: url(model_2-images/img05.gif) repeat-x;
}
#footer p {
margin: 0;
text-align: center;
font-size: x-small;
color: #fed0f1;
}
#footer a {
color: #fed0f1;
}
</style>
</head>
<body>
<div id="logo">
<h1>welcome to model world</h1>
</div>
<div id="page">
<div id="content">
<div id="welcome">
<p style="margin: 0;"><img src="model_2-images/img06.jpg" alt="" width="160" height="200" class="left" /></p>
<h2 class="title">Welcome to Model!</h2>
<p>Model is a free, tableless, W3C-compliant web design layout by <span>New York Lasik </span>. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like.</p>
<p>We only ask you to not remove <span>"Lasik Eye Surgery </span>and the link http://www.worldclasslasik.com from the footer of the template.</p>
</div>
<!-- end #welcome -->
<div id="olist" class="boxed">
<h2 class="title">An Ordered List In A Box</h2>
<div class="content">
<ol>
<li><a href="#">Ut semper vestibulum est</a></li>
<li><a href="#">Vestibulum luctus enatis</a></li>
<li><a href="#">Integer rutrum nisl in mi</a></li>
<li><a href="#">Etiam malesuada rutrum</a></li>
<li><a href="#">Aenean elementum facilisis</a></li>
<li><a href="#">Ut tincidunt elit vitae</a></li>
<li><a href="#">Sed quis odio sagittis leo</a></li>
</ol>
</div>
</div>
<!-- end #olist -->
<div id="ulist" class="boxed">
<h2 class="title">Boxed Bulleted List</h2>
<div class="content">
<ul>
<li><a href="#">Etiam malesuada rutrum</a></li>
<li><a href="#">Aenean elementum facilisis</a></li>
<li><a href="#">Ut tincidunt elit vitae</a></li>
<li><a href="#">Lorem ipsum lorem ipsum</a></li>
<li><a href="#">Lorem ipsum lorem ipsum</a></li>
<li><a href="#">Lorem ipsum lorem ipsum</a></li>
<li><a href="#">Lorem ipsum lorem ipsum</a></li>
</ul>
</div>
</div>
<!-- end #ulist -->
</div>
<!-- end #content -->
<div id="sidebar">
<div id="menu">
<h2>Navigation Menu</h2>
<ul>
<li class="first"><a href="#" accesskey="1">Homepage</a></li>
<li><a href="#" accesskey="2">About Us</a></li>
<li><a href="#" accesskey="3">Product Catalog</a></li>
<li><a href="#" accesskey="4">Our Services</a></li>
<li><a href="#" accesskey="5">Customer Support</a></li>
<li><a href="#" accesskey="6">Community Forums</a></li>
<li><a href="#" accesskey="7">Contact Us</a></li>
</ul>
</div>
<!-- end #menu -->
<div class="boxed">
<h2 class="title">A Sidebar's Blockquote</h2>
<div class="content">
<blockquote>
<p>Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum</p>
</blockquote>
</div>
</div>
</div>
<!-- end #sidebar -->
<div style="clear: both; height: 1px;"></div>
</div>
<!-- end #page -->
<div id="footer">
<p id="legal">Copyright © 2011Model. All Rights Reserved. Designed by <a href="http://www.worldclasslasik.com">Lasik Eye Surgery</a>.</p>
<p id="links"><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
</div>
</body>
</html>
Related examples in the same category