model-4-me
?<!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" xml:lang="en">
<head>
<title>Model 4 Me</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
background: #000000 url(model-4-me-images/d_bg2.jpg);
font: 78.5%/1.6em Tahoma, verdana, geneva, sans-serif;
word-spacing:2px;
color:#444;
margin:20px;
}
* {
margin:0;
padding:0;
}
a {
color:#001A2A;
}
a:hover {
text-decoration:bold;
}
#wrapper {
background:#fff;
max-width:900px;
width:expression(this.width > 320 ? "320px" : this.width);
min-width:760px;
margin:0 auto;
}
* html #wrapper
{
w\idth: expression(document.documentElement.clientWidth > 900 ? "900px" : "auto");
}
#header {
background:url(model-4-me-images/head.jpg);
height:340px;
padding:0px 0px 0px 0px;
border:2px solid #1E475B;
margin:5px 5px 5px 5px;
}
#header h1 {
color:#FFFFFF;
}
#header h1 a {
color:#001A2A;
text-decoration:none;
}
#header h2 {
color:#001A2A;
}
#header form {
float:right;
}
#header form input {
padding:2px;
font:110% Tahoma;
color:#000;
border:1px solid #001A2A;
}
.clear {
clear:both;
}
.menu {
background:url(model-4-me-images/menu.jpg) top right repeat-x #000000;
height:50px;
}
ul#nav {
}
ul#nav li {
list-style:none;
float:left;
height:40px;
}
.clear {
clear:both;
}
ul#nav li a {
height:50px;
background:url(model-4-me-images/nav_a.jpg) top repeat-x #000000;
display:block;
width:115px;
margin-top: 8px;
padding-right:11px;
border-left:1px solid #001A2A;
color:#fff;
text-transform:uppercase;
text-align: center;
text-decoration:none;
font:120% Tahoma;
font-style:bold;
}
ul#nav li a:hover {
background:url(model-4-me-images/nav_a_hover.jpg) top repeat-x #000000;
color:#000000;
text-decoration:bold;
}
ul#nav li a em {
font-style:normal;
text-decoration:bold;
}
#sidebar {
width:330px;
float:right;
margin:5px 12px 0 0!important;
margin:5px 6px 0 0;
background:url(model-4-me-images/sidebar.jpg) bottom repeat-x #EEEEEE;
}
#sidebar h1 {
background:#001A2A;
color:#fff;
font:150% Tahoma;
padding:10px;
border-bottom:5px solid #fff;
}
#sidebar p {
padding:10px 20px;
margin:0 0 10px 0;
font-size:90%;
}
#sidebar p.first {
padding:20px;
font-size:110%;
}
#sidebar h2 {
font:150% Tahoma;
color:#001A2A;
border-bottom:1px solid #001A2A;
margin:10px;
}
#sidebar h3 {
font:90% Tahoma;
text-transform:uppercase;
margin:0 10px;
color:#1E475B;
letter-spacing:1px;
font-weight:bold;
}
#sidebar ul,ol {
margin:0 0 0 30px;
padding:5px;
}
#sidebar ul li {
padding:3px;
}
#content {
margin:5px 348px 0 0 !important;
}
#content .first {
background:url(model-4-me-images/nav_a_hover.jpg) bottom repeat-x #1E475B;
padding:20px;
}
#content .first h2 {
color:#fff;
background:none;
padding:0;
}
#content .first p {
color:#fff;
}
#content .first p a {
color:#fff;
font-weight:bold;
border-bottom:1px solid #001A2A;
text-decoration:none;
}
#content p {
line-height:27px;
margin:10px 15px;
padding:5px;
}
#content h2 {
font:160% Tahoma;
color:#001A2A;
margin:2px 0 5px 0;
padding:15px;
text-transform:uppercase;
background:url(model-4-me-images/h2.jpg) top repeat-x;
}
#content h2 a {
color:#001A2A;
text-decoration:none;
}
#content p img {
float:left;
margin:0 10px 0 0;
padding:1px;
background:#ccc;
border:4px solid #1E475B;
}
#content h3 {
font:140% Tahoma;
color:#1E475B;
margin:15px 15px;
}
blockquote {
margin:0 0 0 20px;
border-left:2px solid #1E475B;
}
#content ul {
margin:0 0 0 40px;
}
#content form {
padding:10px;
margin:20px;
border:1px solid #001A2A;
}
#content form label {
font-weight:bold;
color:#444;
display:block;
}
#content form input {
width:96%;
border:1px solid #001A2A;
padding:4px;
margin:5px 0 10px 0;
font:90% Tahoma;
}
#content form textarea {
width:96%;
border:1px solid #001A2A;
padding:4px;
margin:5px 0 10px 0;
font:90% Tahoma;
}
#footer {
margin:30px 0;
border-top:2px solid #001A2A;
padding:20px;
font:90% Tahoma;
color:#999;
}
#footer a {
color:#666;
font-weight:bold;
text-decoration:none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="http://www.free-css.com/"></a></h1>
</div>
<div class="menu">
<ul id="nav">
<li><a href="http://www.free-css.com/" accesskey="i"><em>H</em>ome</a></li>
<li><a href="http://www.free-css.com/" accesskey="a"><em>S</em>ervices</a></li>
<li><a href="http://www.free-css.com/" accesskey="e"><em>P</em>ortfolio</a></li>
<li><a href="http://www.free-css.com/" accesskey="c"><em>C</em>ontact</a></li>
</ul>
<br class="clear" />
</div>
<div id="sidebar">
<h1>What's New?</h1>
<p class="first">Here, of course you can include any information that you wish! A latest news section, some links to other web sites, latest comments, etc etc etc!</p>
<h2>Latest News</h2>
<h3>More Info Heading</h3>
<p>Here it is, the more info or latest news section!! Model 4 Me is a simple 2 column layout with a primarily teal color scheme. This is of course easily changed via the CSS.</p>
<h3>More Info</h3>
<p>You can see all of my free stuff on my personal site! Or by following this link to my <a href="http://www.free-css.com/">free stuff for all</a> page!</p>
<h2>Links</h2>
<ul>
<li><a href="http://www.free-css.com/">CSS Templates</a></li>
<li><a href="http://www.free-css.com/">Free For All</a></li>
</ul>
</div>
<div id="content">
<div class="first">
<h2 id="intro">Model 4 Me</h2>
<p>Model 4 Me is my latest design. This is a css / xhtml template created by SacDesigner.com. If you would like to download more free templates and other freebies as well, then you may do so by checking the Freebies section of my portfolio site. Hope all who use it will enjoy it. Do what you wish to it. It's all yours!! :o) Please just be kind enough to leave the designed by: link located in the footer or if you would like the designed by: link removed in the footer then please be kind enough to include a link to my website located somewhere within your web site such as a links or resources page. Thank You...</p>
</div>
<h2 id="about"><a href="http://www.free-css.com/">About the Author</a></h2>
<p> <img src="model-4-me-images/logo.jpg" alt="" /> Hi! My names Shannon and I'm a 29 year old web designer from California. My main projects are conducted through my website SacDesigner.com, but I (obviously) also enjoy creating free templates, logos, and icons for general use! You can keep track of my freebies here, which is probably a link worth bookmarking as I am adding new freebies every week. </p>
<p></p>
<p> If you want more of my free stuff, they can be found <a href="http://www.free-css.com/">here</a>! </p>
<h2 id="examples"><a href="http://www.free-css.com/">Example Elements</a></h2>
<p> OK, here I'll just put some example html elements that I'm sure most of you would like to use. </p>
<h3>Blockquote Example</h3>
<blockquote>
<p> Here's your blockquote text jfds jkndskf ndsknf sldnfjk sdnf jdsbf hdsbf jbsdjfk bdskj bdsjfb dsk bds bfsdj bfsjk bfsjdbf sbjd fjsbdk fsdbf sdb fksbd sb </p>
</blockquote>
<h3>List Example</h3>
<ul>
<li><span>Here</span></li>
<li><span>is the</span></li>
<li><span>list!</span></li>
</ul>
<h3>Image Example</h3>
<img src="model-4-me-images/logo.jpg" alt="" />
<h2 id="contact"><a href="http://www.free-css.com/">Contact</a></h2>
<p> If you decide to use this template please drop me a line to let me know! Don't hesitiate to get in touch if you're interested in a custom template or any of my web services or packages in general. I look forward to hearing from you! </p>
<h3>Example Contact Form</h3>
<form action="http://www.free-css.com/">
<label>Name</label>
<input value="Your Name" />
<label>Email</label>
<input value="Your Email" />
<label>Your Comments</label>
<textarea rows="5" cols="5"></textarea>
<input type="submit" />
</form>
</div>
<div id="footer">
<p>Design by <a href="http://www.sacdesigner.com">SacDesigner.com</a>.<br />
© 2007 Your Copyright Here.</p>
</div>
</div>
</body>
</html>
Related examples in the same category