Web Layouts

Web Layouts

Copy and Paste HTML Code for your Website or Blog.

CSS 2 Column Layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS 2 Column Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="CSS 2 Column Layout" />
<meta name="keywords" content="CSS 2 Column Layout" />

* { padding: 0; margin: 0; }

body
{
margin:0px 0px 0px 0px;
}

#wrapper
{ 
margin: 0 auto;
width: 100%;
}

#header {
color: #333;
width: 100%;
float: left;
padding: 10px;
border: 0px solid #ccc;
height: 50px;
margin: 0px 0px 0px 0px;
}

#subheader
{
float: left;
width: 100%;
color: #FFFFFF;
padding: 5px;
border: 0px solid #ccc;
margin: 0px 0px 0px 0px;
background: #000080;
}

#leftcolumn
{ 
color: #333;
border: 0px solid #ccc;
margin: 0px 0px 0px 0px;
padding: 10px;
width: 200px;
float: left;
background-color:#8B0000;
}

#centercolumn
{ 
float: left;
color: #333;
border: 0px solid #ccc;
margin: 0px 0px 0px 0px;
padding: 10px;
width:600px;
display: inline;
background: #F2F2E6;
}

#footer
{ 
width: 100%;
clear: both;
color: #333;
border: 0px solid #ccc;
background: #000080;
margin: 0px 0px 10px 0px;
padding: 3px;
}

h1
{
font-family: verdana, arial, times;
text-align:center;
}

p
{
text-align: left;
font-family: arial, times;
font-size: 100%;
line-height: .5cm;
}

p.subheader
{
text-align: left;
font-family: arial, times;
font-size: 100%;
color:#ffffff;
line-height: .5cm;
}

p.lefthandcolumn
{
text-align: left;
font-family: arial, times;
font-size: 100%;
color:#ffffff;
line-height: .5cm;
}

p.footer
{
text-align: left;
font-family: arial, times;
font-size: 100%;
color:#ffffff;
line-height: .5cm;
}

a.free:link{color: #ffffff}
a.free:link {text-decoration: none}
a.free.link {font-size: 100%}
a.free:visited {text-decoration: none}
a.free:visited {color: #ffffff}
a.free:visited {font-size: 100%}
a.free:hover {text-decoration: none}
a.free:hover {color: #ffffff}
a.free:hover {font-size: 100%}
a.free:active {color: #ffffff}
a.free:active {font-size: 100%}

</style>

</head>

<body>

<h1>
 
your Header goes here

</h1>
		 </div>

your subheader goes here

</p>

</div>

left hand column
<br />
left hand column
<br />
left hand column
<br />
left hand column
<br />
left hand column
<br />
left hand column
<br />
left hand column
<br />
left hand column
<br />
left hand column
<br />
left hand column
<br />

</p>
		 
		 </div>

<p>

center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />
center column
<br />

</p>

</div>

© <script language="JavaScript" type="text/javascript">
      var today = new Date()
      var year = today.getYear()
      if (year < 1900)
      {
      year = year + 1900;
      }
      document.write(year)
      </script>   yourdomain.com</font></div>    All Rights Reserved

</p>
		    
</div>

</div>

</body>
</html>

CSS 3 Column Layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS 3 Column Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="CSS 3 Column Layout" />
<meta name="keywords" content="CSS 3 Column Layout" />

* { padding: 0; margin: 0; }

body
{
margin:0px 0px 0px 0px;
}

#wrapper
{ 
margin: 0 auto;
width: 100%;
}

#header {
color: #333;
width: 100%;
float: left;
padding: 10px;
border: 0px solid #ccc;
height: 50px;
margin: 0px 0px 0px 0px;
}

#subheader
{
float: left;
width: 100%;
color: #FFFFFF;
padding: 5px;
border: 0px solid #ccc;
margin: 0px 0px 0px 0px;
background: #000080;
}

#leftcolumn
{ 
color: #333;
border: 0px solid #ccc;
margin: 0px 0px 0px 0px;
padding: 10px;
width: 180px;
float: left;
background-color:#8B0000;
}

#centercolumn
{ 
float: left;
color: #333;
border: 0px solid #ccc;
margin: 0px 0px 0px 0px;
padding: 10px;
width: 450px;
display: inline;
background: #F2F2E6;
}

#rightcolumn
{ 
color: #333;
border: 0px solid #ccc;
margin: 0px 0px 0px 0px;
padding: 10px;
width: 180px;
float: left;
background-color:#008000;
}

#footer
{ 
width: 100%;
clear: both;
color: #333;
border: 0px solid #ccc;
background: #000080;
margin: 0px 0px 10px 0px;
padding: 3px;
}

h1
{
font-family: verdana, arial, times;
text-align:center;
}

p
{
text-align: left;
font-family: arial, times;
font-size: 100%;
line-height: .5cm;
}

p.subheader
{
text-align: left;
font-family: arial, times;
font-size: 100%;
color:#ffffff;
line-height: .5cm;
}

p.lefthandcolumn
{
text-align: left;
font-family: arial, times;
font-size: 100%;
color:#ffffff;
line-height: .5cm;
}

p.righthandcolumn
{
text-align: left;
font-family: arial, times;
font-size: 100%;
color:#ffffff;
line-height: .5cm;
}

p.footer
{
text-align: left;
font-family: arial, times;
font-size: 100%;
color:#ffffff;
line-height: .5cm;
}

</style>

</head>

<body>

<h1>
 
your Header goes here

</h1>
		 </div>

your subheader goes here

</p>

</div>

</p>
		 
		 </div>

<p>

</p>

</div>

right hand column
<br />
right hand column
<br />
right hand column
<br />
right hand column
<br />
right hand column
<br />
right hand column
<br />
right hand column
<br />
right hand column
<br />
right hand column
<br />
right hand column
<br />

</p>
		 
</div>

</p>
		    
</div>

</div>

</body>
</html>

Template 1

<html>
<title>Template 1</title>
<head>

html {
	margin:0;
	padding:0;
}
body {
	margin:0;
	padding:0;
	font-family:arial,helvetica;
	font-size:12px;
}

#title { 
	position:absolute; 
	top:105px;  
	left:5px; 
	width:728px; 
	height:40px; 
	background:#AAFFAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

#content { 
	position:absolute; 
	top:155px;  
	left:155px; 
	width:578px; 
	height:1200px; 
	background:#AAFFAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

#menu { 
	position:absolute; 
	top:155px;  
	left:5px; 
	width:140px; 
	height:400px;
	background:#AAFFAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

#top { 
	position:absolute; 
	top:5px;  
	left:5px; 
	width:728px; 
	height:90px; 
	background:#FFAAAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

#right { 
	position:absolute; 
	top:105px;  
	left:743px; 
	width:160px; 
	height:600px; 
	background:#FFAAAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

</style>
</head>

<body>

<div id=content> Content 
</div>

<div id=top> Leaderboard (728 x 90) 
</div>

<div id=right> Wide Skyscraper (160 x 600) </div>

</body>
</html>

Template 2

<html>
<title>Template 2</title>
<head>

html {
	margin:0;
	padding:0;
}
body {
	margin:0;
	padding:0;
	font-family:arial,helvetica;
	font-size:12px;
}

#titlea { 
	position:absolute; 
	top:80px;  
	left:10px; 
	width:234px; 
	height:55px; 
	background:#AAFFAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

#titleb { 
	position:absolute; 
	top:80px;  
	left:389px; 
	width:234px; 
	height:55px; 
	background:#AAFFAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

#content { 
	position:absolute; 
	top:145px;  
	left:160px; 
	width:463px; 
	height:800px; 
	background:#AAFFAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

#menu { 
	position:absolute; 
	top:145px;  
	left:10px; 
	width:140px; 
	height:400px;
	background:#AAFFAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

#topa { 
	position:absolute; 
	top:10px;  
	left:10px; 
	width:234px; 
	height:60px; 
	background:#FFAAAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

#topb { 
	position:absolute; 
	top:10px;  
	left:254px; 
	width:125px; 
	height:125px; 
	background:#FFAAAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

#topc { 
	position:absolute; 
	top:10px;  
	left:389px; 
	width:234px; 
	height:60px; 
	background:#FFAAAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

</style>
</head>

<body>

<div id=content>
Content
</div>

<div id=titlea>
Title
</div>

<div id=titleb>
Title
</div>

<div id=topa>
Half Banner (234 x 60)
</div>

<div id=topb>
Button (125 x 125) 
</div>

<div id=topc>
Half Banner (234 x 60)
</div>

</body>
</html>

Template 3

<html>
<title>Template 3</title>
<head>

html {
	margin:0;
	padding:0;
}
body {
	margin:0;
	padding:0;
	font-family:arial,helvetica;
	font-size:12px;
}

#top {
	position:absolute;
	top:10px;
	left:10px;
	width:728px;
	height:90px;
	float:none;
	background:#FFAAAA; 
	border:solid 2px red;
	color:000000;
}

#title { 
	position:absolute;
	top:110px;  
	left:10px; 
	width:728px; 
	height:40px; 
	background:#AAFFAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
	float:none;
}

#content { 
	position:absolute;
	top:160px;  
	left:160px; 
	width:578px; 
	height:1000px; 
	background:#AAFFAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
	float:left;
}

#menu { 
	position:absolute;
	top:160px;  
	left:10px; 
	width:140px; 
	min-height:450px;
	background:#AAFFAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
	float:left;
}

#quadrat { 
	position:relative;
	top:0px;  
	right:0px; 
	width:250px; 
	height:250px;
	background:#FFAAAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
	float:right;
}

</style>
</head>

<body>

<div id=top> Leaderboard (728 x 90) 
</div>

<div id=quadrat> Square (250 x 250) 
	</div> Content </div>

</body>
</html>

Template 4

<html>
<title>Template 4</title>
<head>

html {
	margin:0;
	padding:0;
}
body {
	margin:0;
	padding:0;
	font-family:arial,helvetica;
	font-size:12px;
}

#title { 
	position:absolute; 
	top:10px;  
	left:10px; 
	width:748px; 
	height:40px; 
	background:#AAFFAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

#content { 
	position:absolute; 
	top:130px;  
	left:160px; 
	width:468px; 
	height:800px; 
	background:#AAFFAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

#menu { 
	position:absolute; 
	top:60px;  
	left:10px; 
	width:140px; 
	height:400px;
	background:#AAFFAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

#top { 
	position:absolute; 
	top:60px;  
	left:160px; 
	width:468px; 
	height:60px; 
	background:#FFAAAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}

#right { 
	position:absolute; 
	top:60px;  
	left:638px; 
	width:120px; 
	height:240px; 
	background:#FFAAAA; 
	border:solid 2px red;
	color:000000;
	z-index:1;
}
</style>
</head>

<body>

<div id=content> Content 
</div>

<div id=top> Banner (468 x 60) 
</div>

<div id=right> Vertically banner (120 x 240) </div>

</body>
</html>

Sales Page Template

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<META NAME="Generator" CONTENT="Simple Sales Page Template">
<META NAME="Author" CONTENT="Surf City Domains">
<META NAME="Keywords" CONTENT="Simple Sales Page Template">
<META NAME="Description" CONTENT="Simple Sales Page Template">
<title>Sales Page Generator</title>

<div align="center">
  <table border="1" cellpadding="2" cellspacing="1" width="600" bgcolor="#FFFFE0">
    <tr>
      <td width="100%" class="topheader" height="100">
        <h1>Courtesy of Surf City Host</h1>
         <img src="SalesPageGenerator.gif"  WIDTH="385" HEIGHT="52" ALT="Sales Page Generator">
        <h1></h1>
	  </td>
    </tr>
    <tr>
      <td width="600" class=data>
        <div align="center">
          <table border="0" cellpadding="5" cellspacing="3" width="70%">
            <tr>
              <td width="14%" class="menutop" nowrap><A href="salespg2.html">Order Now</A></td>
              <td width="15%" class="menutop" nowrap><A href="resellers.html">Affiliates</A></td>
              <td width="15%" class="menutop" nowrap><A href="mailto:contactus@yourdomain.com">Contact Us</A></td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
    <tr>
      <td width="100%" class="data">
        <h3 align="center"><b> - REPLACE WITH YOUR DESCRIPTION - <br>Fancy Sales Page Template!<br> - REPLACE WITH YOUR DESCRIPTION - </b></h3>
      <p align="center"><img src="icons/Portable.png" width="234" height="256" border="0" ALT="Portable"><Br></p>
      <p align="left"><Sales_PAGE_DATA_SOLUTION></p>
	
     <Sales_PAGE_DATA_TESTIMONIAL_1>
      <div align="center">
        <center>
        <table border="1" cellpadding="2" cellspacing="1" width="70%" bgcolor="#FFFFCC">
          <tr>
            <td width="100%" class=testimonial>The Sales Page Template  - REPLACE WITH YOUR DESCRIPTION -  is motivates users to visit your website every time they are inspired by  - REPLACE WITH YOUR DESCRIPTION -  the Sales Page Template.</center>
            <p align="right"> - REPLACE WITH YOUR DESCRIPTION - <br>Surf City Host<br>
            Marketing Sales<br> - REPLACE WITH YOUR DESCRIPTION - </td>
        </tr>
        </table>
      </div>
     </Sales_PAGE_DATA_TESTIMONIAL_1>
	
      <p align="left"><b> - REPLACE WITH YOUR DESCRIPTION - <br>Sales Page Template is a free!<br> - REPLACE WITH YOUR DESCRIPTION - </b></p>
      <p align="left"><b> - REPLACE WITH YOUR DESCRIPTION - <br>Sales Page Template is absolutely free to download and use and distribute.<br> - REPLACE WITH YOUR DESCRIPTION - </b></p>
      <Sales_PAGE_DATA_IMAGE><p align="center"><img src="icons/0615.png" width="128" height="128" border="0" ALT="!"><Br></p>
	 </Sales_PAGE_DATA_IMAGE>
	  <Sales_PAGE_DATA_FAQ>
      <h3 align="left"> - REPLACE WITH YOUR DESCRIPTION - <br>Do I need to know HTML or Image editing to use it?<br> - REPLACE WITH YOUR DESCRIPTION - </h3>
      <p align="left"><b> - REPLACE WITH YOUR DESCRIPTION - <br>Sales Page Template requires ZERO knowledge of HTML or any programming language.<br> - REPLACE WITH YOUR DESCRIPTION - </b></p>
	  </Sales_PAGE_DATA_FAQ>
      <p align="left"> - REPLACE WITH YOUR DESCRIPTION - </p>

<h3 align="left"> - REPLACE WITH YOUR DESCRIPTION - <br>This is what you get...<br> - REPLACE WITH YOUR DESCRIPTION - </h3>
      <ul>
	  <Sales_PAGE_DATA_FEATURES>
          <p align="left"><b>The features of Sales Page Template</b><br>
		   - REPLACE WITH YOUR DESCRIPTION - <br>
          Simple to edit.<br>
		  Knowledge of HTML not necessary.<br>
		  Inbuilt Fancy Look.<br>
		  Template based page generation.<br>
		   - REPLACE WITH YOUR DESCRIPTION - </p>
        </li>
	  </Sales_PAGE_DATA_FEATURES>
      </ul>
	
     <Sales_PAGE_DATA_TESTIMONIAL_2>
      <div align="center">
        <center>
        <table border="1" cellpadding="2" cellspacing="1" width="70%" bgcolor="#FFFFCC">
          <tr>
            <td width="100%" class=testimonial> - REPLACE WITH YOUR DESCRIPTION - Do you want more visitors to your website or affiliate link? - REPLACE WITH YOUR DESCRIPTION - ...the most genuine and guaranteed way to get visitors to your site! - REPLACE WITH YOUR DESCRIPTION - </center>
            <p align="right"> - REPLACE WITH YOUR DESCRIPTION - <br>Surf City Domains <br>
            Marketing Sales<br> - REPLACE WITH YOUR DESCRIPTION - </td>
        </tr>
        </table>
      </div>
     </Sales_PAGE_DATA_TESTIMONIAL_2>
	
      <div align="center">
        <center>
		
		<br>
        <table border="1" cellpadding="2" cellspacing="1" width="70%">
          <tr>
            <td width="100%" class="productorder">
              <font size=4><a name="ORDERNOW"><A href="salespg2.html">Order Now</A></font>
            </td>
          </tr>
          <tr>
            <td width="100%" class="productorder" valign="top" align="left"> - REPLACE WITH YOUR DESCRIPTION - 
              <br>The price of Sales Page Template is $27.00 but if you order in the next 3 hours,
              you will get it for<br>  - REPLACE WITH YOUR DESCRIPTION -  <br>ONLY $0.00!
              <p align="center"> - REPLACE WITH YOUR DESCRIPTION - <br>Regular Price : <strike>$27.00</strike><br>
              Special Offer: Only  $0.00<br> - REPLACE WITH YOUR DESCRIPTION - <br>
              <SALES_PAGE_DATA_ORDER_URL></p>
              <p><SALES_PAGE_DATA_ORDER_INCENTIVE><br>
            </td>
        </tr>
        </table>
		<BR>
		<Sales_PAGE_DATA_TRY>
        <table border="1" cellpadding="2" cellspacing="1" width="70%">
          <tr>
            <td width="100%" class="productorder">
              <font size=4> - REPLACE WITH YOUR DESCRIPTION - <br>Try it out first<br> - REPLACE WITH YOUR DESCRIPTION - </font>
            </td>
          </tr>
          <tr>
            <td width="100%" class="productorder" valign="top" align="left">
              <p align="center"><BIZ_PAGE_DATA_TRY_MOTIVATION></p>
              <p align="center"><A HREF="salespg1.html" TARGET="_BLANK">Test Regular Version</A></p>
            </center>
            <Sales_PAGE_DATA_TRY_REQUIREMENTS><p align="left"> - REPLACE WITH YOUR DESCRIPTION - <br>You cannot sell the Sales Page Template.<br> - REPLACE WITH YOUR DESCRIPTION - </p>
			</Sales_PAGE_DATA_TRY_REQUIREMENTS>
			<Sales_PAGE_DATA_TRY_PROBLEMS>
            <p align="left"> - REPLACE WITH YOUR DESCRIPTION - <br>This must be a free gift or free download.<br> - REPLACE WITH YOUR DESCRIPTION - </p>
			</Sales_PAGE_DATA_TRY_PROBLEMS>
            <p align="left"> </td>
        </tr>
        </table>
		</Sales_PAGE_DATA_TRY>
		
      </div>
	 <Sales_PAGE_DATA_NOT_CONVINCED>
          <h3 align="left"> - REPLACE WITH YOUR DESCRIPTION - <br>Still not convinced?<br> - REPLACE WITH YOUR DESCRIPTION - </h3>
          <p align="left"><b> - REPLACE WITH YOUR DESCRIPTION - <br>What can we do to change your mind? We are practicly giving it away!<br> - REPLACE WITH YOUR DESCRIPTION - </b></p>
	</Sales_PAGE_DATA_NOT_CONVINCED>
      <b>
 - REPLACE WITH YOUR DESCRIPTION - 
              <br>The price of Sales Page Template is $27.00 but if you order in the next 24 hours,
              you will get it<br>  - REPLACE WITH YOUR DESCRIPTION -  <br>free of charge!
              <p align="center"> - REPLACE WITH YOUR DESCRIPTION - <br>Regular Price : <strike> $27.00</strike><br> - REPLACE WITH YOUR DESCRIPTION - <br>
              Special Offer: FREE!<br>
              <A HREF="salespg2.html" TARGET="_BLANK">FREE Sales Page Template</A></p>
              <p><SALES_PAGE_DATA_ORDER_INCENTIVE></p>
          <p align="left"> </p>
      </b>
    </td>
    </tr>
    <tr>
      <td width="100%" ALIGN="CENTER" class="data">
        Gift From Surf City Host
    </td>
    </tr>
  </table>

</body>

</html>

About Us | Link To Us | Privacy | Children's Policy