Basic Template

Screen shot of Basic Template The name pretty much says it all. The Basic Template is just that, a basic website using inline CSS styling and minimal HTML tags.

The images and colors can easily be replaced with your own images and color palette.

Difficulty Level: Low

View | Download (with comments) | Download (w/out comments)
Right click to download the HTML file.
Keep in mind, you are downloading the HTML file only, NOT the images.

Or simply copy and paste the below code into the Advanced Web Shell Editor.
The below code does not contain comments.

<!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>Basic Style</title>
</head>
<body style="background:#fcc; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px">
<h1 style="text-align:center">Hi, welcome to my website!</h1>
<div style="margin:0 auto; width:700px">
<p>
<img src="images/monkey.png" alt="a sample image" style="float:right; margin:10px 0 10px 10px" />
<strong>At vero eos et accusamus et iusto odio</strong> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
<hr />
<p>
<img src="images/dog.png" alt="a sample image" style="float:left; margin:10px 10px 10px 0; width:150px" />
<strong>At vero eos et accusamus et iusto odio</strong> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
</div>
</body>
</html>

Stationary Template

Screen shot of Stationary Template The Stationary Template is designed for those looking to emulate letterhead on the web. The page uses <hr /> tags to create the horizontal rules, and inline CSS to give them different widths. CSS indenting will give each new paragraph a first line indent, and differnet font families help make the heading and body text have clear distinctions from each other.

The colors can easily be replaced with your own.

Difficulty Level: Very Low

View | Download (with comments) | Download (w/out comments)
Right click to download the HTML file.
Keep in mind, you are downloading the HTML file only, NOT the images.

Or simply copy and paste the below code into the Advanced Web Shell Editor.
The below code does not contain comments.

<!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>Stationary Template</title>
</head>
<body style="background:#d6ffc6; font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size:14px; line-height:20px">
<h1 style="font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size:40px; text-align:center">
Stationary Template</h1>
<hr style="width:700px" />
<div style="margin:0 auto; width:700px">
<p style="text-indent:25px">
<strong>At vero eos et accusamus et iusto odio</strong> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
<hr style="width:350px" />
<p style="text-indent:25px">
<strong>At vero eos et accusamus et iusto odio</strong> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
<hr style="width:700px" />
<p style="text-align:right">
Signature </p>
</div>
</body>
</html>

1 Column Layout Template

Screen shot of Basic Template The One Column Layout template is a basic CSS/div created layout. All the CSS shows up at the top of the document.

There are three main areas in this template: the header, the content area and the footer. A horizontal navigation bar has been created and P tags are used for the text. This template also includes a floated right image placeholder.

Difficulty Level: Medium

View | Download (with comments) | Download (w/out comments)
Right click to download the HTML file.
Keep in mind, you are downloading the HTML file only, NOT the images.

Or simply copy and paste the below code into the Advanced Web Shell Editor.
The below code does not contain comments.

<!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>One column layout</title>
</head>
<style>
body, h1, h2, h3, p, img, ul, li {
border:0;
margin:0;
padding:0;
}
body {
background:#FFC;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
h1, h2, h3, p {
margin-bottom:10px;
}
p {
letter-spacing:.04em;
line-height:20px;
}
div#header {
background-color:#e7e3c8;
border:1px solid #390;
margin:0 auto;
min-height:130px;
padding:15px;
text-align:center;
width:900px;
-moz-box-shadow:2px 2px 4px #515151;
-webkit-box-shadow:2px 2px 4px #515151;
box-shadow:2px 2px 4px #515151;
}
ul.navigation {
list-style:none;
margin-top:20px;
}
ul.navigation li {
display:inline-block;
margin:0 3px 5px;
}
ul.navigation li a {
-moz-border-radius:8px;
webkit-border-radius:8px;
border-radius:8px;
border:1px solid #390;
color:#fff;
background:#030;
padding:5px 10px;
text-decoration:none;
-moz-box-shadow:2px 2px 4px #515151;
-webkit-box-shadow:2px 2px 4px #515151;
box-shadow:2px 2px 4px #515151;
}
div.content {
margin:15px auto;
min-height:300px;
width:900px;
}
div#footer {
background-color:#e7e3c8;
border:1px solid #390;
margin:0 auto;
padding:15px;
text-align:center;
width:900px;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
.clear {
clear:both;
}
</style>

<body>
<div id="header">
<h1>Welcome to my web page</h1>
<h2>My header sub text</h2>
<ul class="navigation">
<li><a href="index.html" title="home">Home</a></li>
<li><a href="http://www.angelfire.com" title="Angelfire">Angelfire</a></li>
<li><a href="http://www.lycos.com" title="Lycos">Search the web</a></li>
</ul>
</div>
<div class="content">
<p><img src="images/monkey.png" class="float-right" alt="alternative text. This text is for screen readers or in the instance an image can't load, a description of what should have been here." /> <strong>At vero eos et accusamus et iusto odio</strong> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
<p> <em>At vero eos et accusamus et iusto odio</em> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
</div>
<div id="footer">
<p>Put footer text here. Like copyright info and such</p>
</div>
</body>
</html>

Two 50% Column Layout

Screen shot of Basic Template The Two 50% Column Layout template is a CSS/div created layout. All the CSS shows up at the top of the document.

There are five main areas in this template: the header, the content area which contains the left and right column divs, and the footer. A horizontal navigation bar has been created and P tags are used for the text. This template also includes a floated right image placeholder. As well as an unordered list containing various links.

Difficulty Level: Medium

View | Download (with comments) | Download (w/out comments)
Right click to download the HTML file.
Keep in mind, you are downloading the HTML file only, NOT the images.

Or simply copy and paste the below code into the Advanced Web Shell Editor.
The below code does not contain comments.

<!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>2 column 50%</title>
</head>
<head>
<style>
body, h1, h2, h3, p, img, ul, li {
border:0;
margin:0;
padding:0;
}
body {
background:#f7f1eb;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
h1, h2, h3, p {
margin-bottom:10px;
}
p {
letter-spacing:.04em;
line-height:20px;
}
div#header {
background-color:#9CF;
border:1px solid #390;
margin:0 auto;
min-height:130px;
padding:15px;
text-align:center;
width:900px;
-moz-box-shadow:2px 2px 4px #515151;
-webkit-box-shadow:2px 2px 4px #515151;
box-shadow:2px 2px 4px #515151;
}
ul.navigation {
list-style:none;
margin-top:20px;
}
ul.navigation li {
display:inline-block;
margin:0 3px 5px;
}
ul.navigation li a {
-moz-border-radius:8px;
webkit-border-radius:8px;
border-radius:8px;
border:1px solid #390;
color:#fff;
background:#030;
padding:5px 10px;
text-decoration:none;
-moz-box-shadow:2px 2px 4px #515151;
-webkit-box-shadow:2px 2px 4px #515151;
box-shadow:2px 2px 4px #515151;
}
ul.navigation li a:hover {
background-color:#090;
}
div.content {
margin:15px auto;
min-height:300px;
width:900px;
}
div.col-right {
float:right;
width:425px }
div.col-left {
float:left;
width:425px;
}
div.sidebar-left a {
color:#600 }
div.sidebar-left a:hover {
text-decoration:none }
.list {
padding-left:15px }
.list li {
margin-bottom:10px }
div#footer {
background-color:#9CF;
border:1px solid #390;
margin:0 auto;
padding:15px;
text-align:center;
width:900px;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
.clear {
clear:both;
}
</style>

</head>
<body>
<div id="header">
<h1>Welcome to my web page</h1> <h2>My header sub text</h2> <ul class="navigation">
<li><a href="index.html" title="home">Home</a>
</li>
<li><a href="http://www.angelfire.com" title="Angelfire">
Angelfire</a>
</li>
<li><a href="http://www.lycos.com" title="Lycos">
Search the web</a>
</li>
</ul>
</div>
<div class="content">
<div class="col-right">
<p>
<img src="images/monkey.png" class="float-right" alt="alternative text. This text is for screen readers or in the instance an image can't load, a description of what should have been here." />
<strong>At vero eos et accusamus et iusto odio</strong> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
<p>
<em>At vero eos et accusamus et iusto odio</em> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
</div>
<div class="col-left">
<h3>
A list of my favorite links</h3>
<ul class="list">
<li><a href="http://www.angelfire.com" title="Build your own website at Angelfire.com">Angelfire.com</a></li>
<li><a href="http://www.lycos.com" title="Lycos, go get it!">Lycos Search</a></li>
<li><a href="http://www.gamesville.com" title="Play and win at Gamesville.com">Gamesville.com</a></li>
<li><a href="http://www.facebook.com" title="Facebook">Facebook</a></li>
<li><a href="http://www.w3schools.com/" title="W3Schools.com">Website coding resources</a></li>
</ul>
<p>
<em>At vero eos et accusamus et iusto odio</em> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
</div>
<br class="clear" />
</div>
<div id="footer">
<p>
Put footer text here. Like copyright info and such</p>
</div>
</body>
</html>

Two Column Left Sidebar Layout

Screen shot of Basic Template The 2 Column Left Sidebar Layout template is a CSS/div created layout. All the CSS shows up at the top of the document.

There are five main areas in this template: the header, the content area which contains the right column and left sidebar divs, and the footer. A horizontal navigation bar has been created and P tags are used for the text. This template also includes a floated right image placeholder. As well as an unordered list containing various links.

Difficulty Level: Medium

View | Download (with comments) | Download (w/out comments)
Right click to download the HTML file.
Keep in mind, you are downloading the HTML file only, NOT the images.

Or simply copy and paste the below code into the Advanced Web Shell Editor.
The below code does not contain comments.

<!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>2 column left style</title>
</head>
<style>
body, h1, h2, h3, p, img, ul, li {
border:0;
margin:0;
padding:0;
}
body {
background:#FFC;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
h1, h2, h3, p {
margin-bottom:10px;
}
p {
letter-spacing:.04em;
line-height:20px;
}
div#header {
background-color:#e7e3c8;
border:1px solid #390;
margin:0 auto;
min-height:130px;
padding:15px;
text-align:center;
width:900px;
-moz-box-shadow:2px 2px 4px #515151;
-webkit-box-shadow:2px 2px 4px #515151;
box-shadow:2px 2px 4px #515151;
}
ul.navigation {
list-style:none;
margin-top:20px;
}
ul.navigation li {
display:inline-block;
margin:0 3px 5px;
}
ul.navigation li a {
-moz-border-radius:8px;
webkit-border-radius:8px;
border-radius:8px;
border:1px solid #390;
color:#fff;
background:#030;
padding:5px 10px;
text-decoration:none;
-moz-box-shadow:2px 2px 4px #515151;
-webkit-box-shadow:2px 2px 4px #515151;
box-shadow:2px 2px 4px #515151;
}
ul.navigation li a:hover {
background-color:#090;
}
div.content {
margin:15px auto;
min-height:300px;
width:900px;
}
div.col-right {
float:right;
width:660px }
div.sidebar-left {
float:left;
width:200px;
}
div.sidebar-left a {
color:#600 }
div.sidebar-left a:hover {
text-decoration:none }
.list {
padding-left:15px }
.list li {
margin-bottom:10px }
div#footer {
background-color:#e7e3c8;
border:1px solid #390;
margin:0 auto;
padding:15px;
text-align:center;
width:900px;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
.clear {
clear:both;
}
</style>

<body>
<div id="header">
<h1>Welcome to my web page</h1> <h2>My header sub text</h2> <ul class="navigation">
<li><a href="index.html" title="home">Home</a>
</li>
<li><a href="http://www.angelfire.com" title="Angelfire">
Angelfire</a>
</li>
<li><a href="http://www.lycos.com" title="Lycos">
Search the web</a>
</li>
</ul>
</div>
<div class="content">
<div class="col-right">
<p>
<img src="images/monkey.png" class="float-right" alt="alternative text. This text is for screen readers or in the instance an image can't load, a description of what should have been here." />
<strong>At vero eos et accusamus et iusto odio</strong> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
<p>
<em>At vero eos et accusamus et iusto odio</em> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
</div>
<div class="sidebar-left">
<h3>
A list of my favorite links</h3>
<ul class="list">
<li><a href="http://www.angelfire.com" title="Build your own website at Angelfire.com">Angelfire.com</a></li>
<li><a href="http://www.lycos.com" title="Lycos, go get it!">Lycos Search</a></li>
<li><a href="http://www.gamesville.com" title="Play and win at Gamesville.com">Gamesville.com</a></li>
<li><a href="http://www.facebook.com" title="Facebook">Facebook</a></li>
<li><a href="http://www.w3schools.com/" title="W3Schools.com">Website coding resources</a></li>
</ul>
</div>
<br class="clear" />
</div>
<div id="footer">
<p>
Put footer text here. Like copyright info and such</p>
</div>
</body>
</html>

2 Column Right Sidebar Layout Template

Screen shot of Basic Template The 2 Column Left Sidebar Layout template is a CSS/div created layout. All the CSS shows up at the top of the document.

There are five main areas in this template: the header, the content area which contains the left column and right sidebar divs, and the footer. A horizontal navigation bar has been created and P tags are used for the text. This template also includes a floated left image placeholder. As well as an unordered list containing various links.

Difficulty Level: Medium

View | Download (with comments) | Download (w/out comments)
Right click to download the HTML file.
Keep in mind, you are downloading the HTML file only, NOT the images.

Or simply copy and paste the below code into the Advanced Web Shell Editor.
The below code does not contain comments.

<!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>2 column right style</title>
</head>
<style>
body, h1, h2, h3, p, img, ul, li {
border:0;
margin:0;
padding:0;
}
body {
background:#9CF;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
h1, h2, h3, p {
margin-bottom:10px;
}
p {
letter-spacing:.04em;
line-height:20px;
}
div#header {
background-color:#6CF;
border:1px solid #003;
margin:0 auto;
min-height:130px;
padding:15px;
text-align:center;
width:900px;
-moz-box-shadow:2px 2px 4px #515151;
-webkit-box-shadow:2px 2px 4px #515151;
box-shadow:2px 2px 4px #515151;
}
ul.navigation {
list-style:none;
margin-top:20px;
}
ul.navigation li {
display:inline-block;
margin:0 3px 5px;
}
ul.navigation li a {
-moz-border-radius:8px;
webkit-border-radius:8px;
border-radius:8px;
border:1px solid #003;
color:#fff;
background:#03C;
padding:5px 10px;
text-decoration:none;
-moz-box-shadow:2px 2px 4px #515151;
-webkit-box-shadow:2px 2px 4px #515151;
box-shadow:2px 2px 4px #515151;
}
ul.navigation li a:hover {
background-color:#06F;
}
div.content {
margin:15px auto;
min-height:300px;
width:900px;
}
div.col-left {
float:left;
width:660px }
div.sidebar-right {
float:right;
width:200px;
}
.list {
padding-left:15px }
.list li {
margin-bottom:10px }
div#footer {
background-color:#6CF;
border:1px solid #003;
margin:0 auto;
padding:15px;
text-align:center;
width:900px;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
.clear {
clear:both;
}
</style>

<body>
<div id="header">
<h1>Welcome to my web page</h1> <h2>My header sub text</h2> <ul class="navigation">
<li><a href="index.html" title="home">Home</a>
</li>
<li><a href="http://www.angelfire.com" title="Angelfire">
Angelfire</a>
</li>
<li><a href="http://www.lycos.com" title="Lycos">
Search the web</a>
</li>
</ul>
</div>
<div class="content">
<div class="col-left">
<p>
<img src="images/dog.png" style="margin-right:15px" class="float-left" alt="alternative text. This text is for screen readers or in the instance an image can't load, a description of what should have been here." />
<strong>At vero eos et accusamus et iusto odio</strong> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
<p>
<em>At vero eos et accusamus et iusto odio</em> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
</div>
<div class="sidebar-right">
<h3>
A list of my favorite links</h3>
<ul class="list">
<li><a href="http://www.angelfire.com" title="Build your own website at Angelfire.com">Angelfire.com</a></li>
<li><a href="http://www.lycos.com" title="Lycos, go get it!">Lycos Search</a></li>
<li><a href="http://www.gamesville.com" title="Play and win at Gamesville.com">Gamesville.com</a></li>
<li><a href="http://www.facebook.com" title="Facebook">Facebook</a></li>
<li><a href="http://www.w3schools.com/" title="W3Schools.com">Website coding resources</a></li>
</ul>
</div>
<br class="clear" />
</div>
<div id="footer">
<p>
Put footer text here. Like copyright info and such</p>
</div>
</body>
</html>

2 Column Left Sidebar - 3 Column Footer Template

Screen shot of Basic Template The 2 Column Left Sidebar - 3 Column Footer template is a CSS/div created layout. All the CSS shows up at the top of the document.

There are eight main areas in this template: the header, the content area which contains the right column and left sidebar divs, and the footer which contains three floated divs. A horizontal navigation bar has been created and P tags are used for the text. This template also includes floated right and left image placeholders. As well as two an unordered list containing various links.

Difficulty Level: Hard

View | Download (with comments) | Download (w/out comments)
Right click to download the HTML file.
Keep in mind, you are downloading the HTML file only, NOT the images.

Or simply copy and paste the below code into the Advanced Web Shell Editor.
The below code does not contain comments.

<!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>2 column left with 3 column footer</title>
</head>
<style>
body, h1, h2, h3, p, img, ul, li {
border:0;
margin:0;
padding:0;
}
body {
background:#FFC;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
h1, h2, h3, p {
margin-bottom:10px;
}
p {
letter-spacing:.04em;
line-height:20px;
}
div#header {
background-color:#e7e3c8;
border:1px solid #390;
margin:0 auto;
min-height:130px;
padding:15px;
text-align:center;
width:900px;
-moz-box-shadow:2px 2px 4px #515151;
-webkit-box-shadow:2px 2px 4px #515151;
box-shadow:2px 2px 4px #515151;
}
ul.navigation {
list-style:none;
margin-top:20px;
}
ul.navigation li {
display:inline-block;
margin:0 3px 5px;
}
ul.navigation li a {
-moz-border-radius:8px;
webkit-border-radius:8px;
border-radius:8px;
border:1px solid #390;
color:#fff;
background:#030;
padding:5px 10px;
text-decoration:none;
-moz-box-shadow:2px 2px 4px #515151;
-webkit-box-shadow:2px 2px 4px #515151;
box-shadow:2px 2px 4px #515151;
}
ul.navigation li a:hover {
background-color:#090;
}
div.content {
margin:15px auto;
min-height:300px;
width:900px;
}
div.col-right {
float:right;
width:660px }
div.sidebar-left {
float:left;
width:200px;
}
div.sidebar-left a {
color:#600 }
div.sidebar-left a:hover {
text-decoration:none }
.list {
padding-left:15px }
.list li {
margin-bottom:10px }
div#footer {
background-color:#e7e3c8;
border:1px solid #390;
margin:0 auto;
padding:15px;
width:900px;
}
div.footerColumn {
width:275px;
float:left;
min-height:300px }
div.footerColumn.middle {
margin:0 20px;
padding:0 15px;
border-left:1px solid;
border-right:1px solid }
.float-left {
float:left;
}
.float-right {
float:right;
}
.clear {
clear:both;
}
</style>

<body>
<div id="header">
<h1>Welcome to my web page</h1> <h2>My header sub text</h2> <ul class="navigation">
<li><a href="index.html" title="home">Home</a>
</li>
<li><a href="http://www.angelfire.com" title="Angelfire">
Angelfire</a>
</li>
<li><a href="http://www.lycos.com" title="Lycos">
Search the web</a>
</li>
</ul>
</div>
<div class="content">
<div class="col-right">
<p>
<img src="images/monkey.png" class="float-right" alt="alternative text. This text is for screen readers or in the instance an image can't load, a description of what should have been here." />
<strong>At vero eos et accusamus et iusto odio</strong> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
<p>
<em>At vero eos et accusamus et iusto odio</em> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
</div>
<div class="sidebar-left">
<h3>
A list of my favorite links</h3>
<ul class="list">
<li><a href="http://www.angelfire.com" title="Build your own website at Angelfire.com">Angelfire.com</a></li>
<li><a href="http://www.lycos.com" title="Lycos, go get it!">Lycos Search</a></li>
<li><a href="http://www.gamesville.com" title="Play and win at Gamesville.com">Gamesville.com</a></li>
<li><a href="http://www.facebook.com" title="Facebook">Facebook</a></li>
<li><a href="http://www.w3schools.com/" title="W3Schools.com">Website coding resources</a></li>
</ul>
</div>
<br class="clear" />
</div>
<div id="footer">
<div class="footerColumn">
<img src="images/dog.png" alt="doggy!" />
</div>
<div class="footerColumn middle">
<p>
Put footer text here. Like copyright info and such</p>
</div>
<div class="footerColumn">
<ul class="list">
<li><a href="http://www.angelfire.com" title="Build your own website at Angelfire.com">Angelfire.com</a></li>
<li><a href="http://www.lycos.com" title="Lycos, go get it!">Lycos Search</a></li>
<li><a href="http://www.gamesville.com" title="Play and win at Gamesville.com">Gamesville.com</a></li>
<li><a href="http://www.facebook.com" title="Facebook">Facebook</a></li>
<li><a href="http://www.w3schools.com/" title="W3Schools.com">Website coding resources</a></li>
</ul>
</div>
<br class="clear" />
</div>
</body>
</html>

2 Column Right Sidebar Multi-Background Template

Screen shot of Basic Template The 2 Column Right Sidebar Multi-Background template is a CSS/div created layout. All the CSS shows up at the top of the document.

There are seven main areas in this template: the header, the content area which contains the left column and right sidebar divs, and the footer. There are two additional divs (outerContainer and container) which hold all the previously mentioned areas, and are what enables multiple background colors (or images) to be displayed on the website. A horizontal navigation bar has been created and P tags are used for the text. This template also includes a floated right image placeholder. As well as an unordered list containing various links.

Difficulty Level: Hard

View | Download (with comments) | Download (w/out comments)
Right click to download the HTML file.
Keep in mind, you are downloading the HTML file only, NOT the images.

Or simply copy and paste the below code into the Advanced Web Shell Editor.
The below code does not contain comments.

<!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>2 column right Template - Multi Background</title>
</head>
<style>
body, h1, h2, h3, p, img, ul, li {
border:0;
margin:0;
padding:0;
}
body {
background:#9CF;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
h1, h2, h3, p {
margin-bottom:10px;
}
p {
letter-spacing:.04em;
line-height:20px;
}
div#outerContainer {
margin:20px 40px;
background:#003;
border:4px solid #fff;
-moz-box-shadow:2px 2px 4px #515151;
-webkit-box-shadow:2px 2px 4px #515151;
box-shadow:2px 2px 4px #515151;
}
div#container {
padding:15px;
background:#fff;
width:940px;
margin:0 auto;
}
div#header {
background-color:#6CF;
border:1px solid #003;
margin:0 auto;
min-height:130px;
padding:15px;
text-align:center;
width:900px;
-moz-box-shadow:2px 2px 4px #515151;
-webkit-box-shadow:2px 2px 4px #515151;
box-shadow:2px 2px 4px #515151;
}
ul.navigation {
list-style:none;
margin-top:20px;
}
ul.navigation li {
display:inline-block;
margin:0 3px 5px;
}
ul.navigation li a {
-moz-border-radius:8px;
webkit-border-radius:8px;
border-radius:8px;
border:1px solid #003;
color:#fff;
background:#03C;
padding:5px 10px;
text-decoration:none;
-moz-box-shadow:2px 2px 4px #515151;
-webkit-box-shadow:2px 2px 4px #515151;
box-shadow:2px 2px 4px #515151;
}
ul.navigation li a:hover {
background-color:#06F;
}
div.content {
margin:15px auto;
min-height:300px;
width:900px;
}
div.col-left {
float:left;
width:660px }
div.sidebar-right {
float:right;
width:200px;
}
.list {
padding-left:15px }
.list li {
margin-bottom:10px }
div#footer {
background-color:#6CF;
border:1px solid #003;
margin:0 auto;
padding:15px;
text-align:center;
width:900px;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
.clear {
clear:both;
}
</style>

<body>
<div id="outerContainer">
<div id="container">
<div id="header">
<h1>Welcome to my web page</h1> <h2>My header sub text</h2> <ul class="navigation">
<li><a href="index.html" title="home">Home</a>
</li>
<li><a href="http://www.angelfire.com" title="Angelfire">
Angelfire</a>
</li>
<li><a href="http://www.lycos.com" title="Lycos">
Search the web</a>
</li>
</ul>
</div>
<div class="content">
<div class="col-left">
<p>
<img src="images/dog.png" style="margin-right:15px" class="float-left" alt="alternative text. This text is for screen readers or in the instance an image can't load, a description of what should have been here." />
<strong>At vero eos et accusamus et iusto odio</strong> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
<p>
<em>At vero eos et accusamus et iusto odio</em> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
</div>
<div class="sidebar-right">
<h3>
A list of my favorite links</h3>
<ul class="list">
<li><a href="http://www.angelfire.com" title="Build your own website at Angelfire.com">
Angelfire.com</a>
</li>
<li><a href="http://www.lycos.com" title="Lycos, go get it!">
Lycos Search</a>
</li>
<li><a href="http://www.gamesville.com" title="Play and win at Gamesville.com">
Gamesville.com</a>
</li>
<li><a href="http://www.facebook.com" title="Facebook">
Facebook</a>
</li>
<li><a href="http://www.w3schools.com/" title="W3Schools.com">
Website coding resources</a>
</li>
</ul>
</div>
<br class="clear" />
</div>
<div id="footer">
<p>
Put footer text here. Like copyright info and such</p>
</div>
</div>
</div>
</body>
</html>

3 Column Layout

Screen shot of 3 Column Layout Template The 3 Column Layout template is a CSS/div created layout. All the CSS shows up at the top of the document.

There are six main areas in this template: the header, the content area which contains the right and left sidebar divs with a middle column div, and the footer. A horizontal navigation bar has been created and P tags are used for the text. This template also includes a floated right image placeholder, as well as a normal image placeholder. An unordered list containing various links and a link that when clicked, will open an e-mail program to the address you include.

Difficulty Level: Hard

View | Download (with comments) | Download (w/out comments)
Right click to download the HTML file.
Keep in mind, you are downloading the HTML file only, NOT the images.

Or simply copy and paste the below code into the Advanced Web Shell Editor.
The below code does not contain comments.

<!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>2 column style</title>
</head>
<style>
body, h1, h2, h3, p, img, ul, li {
border:0;
margin:0;
padding:0;
}
body {
background:#FFC;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
h1, h2, h3, p {
margin-bottom:10px;
}
p {
letter-spacing:.04em;
line-height:20px;
}
div#header {
background-color:#e7e3c8;
border:1px solid #390;
margin:0 auto;
min-height:130px;
padding:15px;
text-align:center;
width:900px;
-moz-box-shadow:2px 2px 4px #515151;
-webkit-box-shadow:2px 2px 4px #515151;
box-shadow:2px 2px 4px #515151;
position:relative;
}
ul.navigation {
list-style:none;
margin-top:20px;
}
ul.navigation li {
display:inline-block;
margin:0 3px 5px;
}
ul.navigation li a {
-moz-border-radius:8px;
webkit-border-radius:8px;
border-radius:8px;
border:1px solid #390;
color:#fff;
background:#030;
padding:5px 10px;
text-decoration:none;
-moz-box-shadow:2px 2px 4px #515151;
-webkit-box-shadow:2px 2px 4px #515151;
box-shadow:2px 2px 4px #515151;
}
div.content {
margin:0 auto;
min-height:300px;
width:900px;
}
div.col-middle {
background-color:#fff;
float:left;
width:440px;
padding:15px;
border:1px solid #390;
border-top:none;
border-bottom:none;
margin:0 15px;
}
div.sidebar-left {
float:left;
width:195px;
padding:15px 0;
}
div.sidebar-right {
float:right;
width:195px;
padding:15px 0;
}
.list {
padding-left:15px }
.list li {
margin-bottom:10px }
div#footer {
background-color:#e7e3c8;
border:1px solid #390;
margin:0 auto;
padding:15px;
text-align:center;
width:900px;
}
.float-left {
float:left;
}
.float-right {
float:right;
}
.clear {
clear:both;
}
</style>

<body>
<div id="header">
<h1>Welcome to my web page</h1> <h2>My header sub text</h2> <ul class="navigation">
<li><a href="index.html" title="home">Home</a>
</li>
<li><a href="http://www.angelfire.com" title="Angelfire">
Angelfire</a>
</li>
<li><a href="http://www.lycos.com" title="Lycos">
Search the web</a>
</li>
</ul>
</div>
<div class="content">
<div class="sidebar-left">
<h3>
A list of my favorite links</h3>
<ul class="list">
<li><a href="http://www.angelfire.com" title="Build your own website at Angelfire.com">Angelfire.com</a></li>
<li><a href="http://www.lycos.com" title="Lycos, go get it!">Lycos Search</a></li>
<li><a href="http://www.gamesville.com" title="Play and win at Gamesville.com">Gamesville.com</a></li>
<li><a href="http://www.facebook.com" title="Facebook">Facebook</a></li>
<li><a href="http://www.w3schools.com/" title="W3Schools.com">Website coding resources</a></li>
</ul>
</div>
<div class="col-middle">
<p>
<img src="images/monkey.png" class="float-right" alt="alternative text. This text is for screen readers or in the instance an image can't load, a description of what should have been here." />
<strong>At vero eos et accusamus et iusto odio</strong> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
<p>
<em>At vero eos et accusamus et iusto odio</em> dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p>
</div>
<div class="sidebar-left">
<h3>
Right Sidebar header!</h3>
<a href="mailto:me@fakeemail.com">
Send me an e-mail!</a>
<br />
<br />
<img src="images/dog.png" alt="doggy!" style="width:100%" />
</div>
<br class="clear" />
</div>
<div id="footer">
<p>
Put footer text here. Like copyright info and such</p>
</div>
</body>
</html>

Don't want to see ads in your control panel or on your website? Upgrade to a paid account and remove them all!