.this is Displayout

Displayout is one of those "offering you free petpage layouts" deals. Read the rules, then scroll down and grab the code to a layout or two.

All the images used here are used with respect to copyright.

.the Rules

There's just one rule:
Displayout layouts are linkware. That means you leave the link back to Displayout on the layout, even if you modify it. That's it.

.the Layouts

Just copy the code in the box and paste it into the "edit" box for your pet page.

Lemonslice
A juicy layout in yellow and white featuring a large image. Simple to use.
Preview: here.
<style type="text/css"> A:link { text-decoration: none; color: #000000; } A:visited { text-decoration: none; color: #000000; } A:active { text-decoration: underline overline; color: #efcb39; } A:hover { text-decoration: underline overline; color: #000000; cursor: crosshair; } a { font-family: tahoma; color: #000000; font-size: 12pt; } body { background: #FFFFFF; font-family: tahoma; color: #000000; font-size: 10pt; } .title { font-family: arial; font-weight: bold; color: #000000; font-size: 30pt; } .sec { font-family: arial; color: #000000; font-weight: bold; font-size: 13pt; } </style> <br><div align="center"> <table cellpadding="5" style="background: #faf1f9; background-image: url('http://i9.tinypic.com/7ys57dj.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: scroll; border: #000000 1px solid; font-family: verdana; color: #000000; font-size: 10pt;" width="452"> <tr><td height="300" align="right"><span class="title"><br><br><br><br> .title goes here </span></td></tr> <tr><td height="75"><div align="center"> <a href="#1"> Section 1 link </a> | <a href="#2"> Section 2 link </a> | <a href="#3"> Section 3 link </a> </div></td></tr> <tr><td> <a name="1"></a><span class="sec"> . SECTION 1 </span> <p> Title your sections anything you like. Clicking on the "section link" will drop the page down to that section. Please do not remove the credit, even if you modify this layout. Enjoy! </p> <br><br><a name="2"></a><span class="sec"> . SECTION 2 </span> <p> Text goes here. </p> <br><br><a name="3"></a><span class="sec"> . SECTION 3 </span> <p> Text goes here. </p> <br><br><br><br> </td></tr> </table> <span style="font-size: 8pt;">Layouts by <a href="http://www.neopets.com/~displayout" style="font-family: arial; color: #e4a312; font-weight: bold; font-size: 9pt;">Displayout</a>.</span> </div>


Typekey
A classic layout in cream and black featuring an enlarged antique typewriter key as the title image.
Preview: here.
<style type="text/css"> A:link { text-decoration: none; color: #000000; } A:visited { text-decoration: none; color: #000000; } A:active { text-decoration: none; color: #f3e9d7; font-style: italic; } A:hover { text-decoration: none; color: #000000; cursor: crosshair; font-style: italic; } body { background: #000000; font-family: tahoma; color: #f3e9d7; font-size: 10pt; } .title { font-family: georgia; font-weight: bold; color: #000000; font-size: 34pt; } .sec { font-family: arial; color: #FFFFFF; font-weight: bold; font-size: 13pt; } </style> <br><div align="center"> <table cellpadding="5" style="background: #000000; background-image: url('http://i17.tinypic.com/6ywxc09.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: scroll; border: none; font-family: verdana; color: #f3e9d7; font-size: 10pt;" width="600"> <tr><td height="435" align="center"><span class="title"><br><br> title goes here </span></td></tr> <tr><td height="75"><div align="center"> <a href="#1"> Section 1 link </a><span style="color: #000000; font-size: 15pt;">|</span><a href="#2"> Section 2 link </a><span style="color: #000000; font-size: 15pt;">|</span><a href="#3"> Section 3 link </a> </div></td></tr> <tr><td> <a name="1"></a><span class="sec">~ SECTION 1 </span> <p> Title your sections anything you like. Clicking on the "section link" will drop the page down to that section. Please do not remove the credit, even if you modify this layout. Enjoy! </p> <br><br><a name="2"></a><span class="sec">~ SECTION 2 </span> <p> Text goes here. </p> <br><br><a name="3"></a><span class="sec">~ SECTION 3 </span> <p> Text goes here. </p> <br><br><br><br> </td></tr> </table> <span style="font-size: 8pt; color: #8d8a86;">Layouts by <a href="http://www.neopets.com/~displayout" style="font-family: arial; color: #9c9790; font-weight: bold; font-size: 9pt;">Displayout</a>.</span> </div>


Little Drawing
This simple scroll-box layout uses the motif of a brightly coloured child's drawing.
Preview: here.
<div align="center"> <table cellpadding="0" cellspacing="0" border="0" height="600" width="700"> <tr> <td colspan="3" height="111" width="650"><img src="http://i5.tinypic.com/739stc5.png"></td> <td rowspan="3" height="600" width="50" valign="top" align="left" class="title"> <br><br><br><br> This is where your title goes. </td> </tr> <tr> <td width="355" height="455"><img src="http://i1.tinypic.com/6tfqj2p.png"></td> <td width="237" height="455" valign="top"><div style="width: 233px; height: 450px; position: relative; padding: 2px; border: none; background-color: #FFFFFF; overflow: auto;"> <span class="head"> This is a section header </span> <p> This layout is called Little Drawing. Type in your own titles and text for the different sections. You're welcome to modify the code if you know how, but I will request that you leave the link so that other people can get their own free layout. </p> <p> Enjoy! </p> <br><br><span class="head"> This is a section header </span> <p> Type here. </p> <br><br><span class="head"> This is a section header </span> <p> Type here. </p> <br><br> </div></td> <td width="58" height="455"><img src="http://i1.tinypic.com/870n4ea.png"></td> </tr> <tr><td colspan="3" height="34" width="650"><img src="http://i6.tinypic.com/87iazjp.png"></td></tr> </table> <span style="font-family: verdana; font-size: 7pt;">Layout by <a href="http://www.neopets.com/~displayout" style="color: #549bb8; font-weight: bold; font-size: 8pt;">Displayout</a>.</span><style type="text/css"> A:link { text-decoration: none; color: #549bb8; } A:visited { text-decoration: none; color: #549bb8; } A:active { text-decoration: underline; color: #549bb8; } A:hover { text-decoration: underline; color: #549bb8; cursor: crosshair; } body { background: #FFFFFF; font-family: courier; color: #000000; font-size: 11pt; } td { font-family: courier; color: -blocked-; font-size: 11pt; } .head { font-family: arial; color: #000000; font-weight: bold; font-size: 15pt; } .title { font-family: impact; color: #000000; font-size: 25pt; } </style> <br><br><br><span class="head">Tread</span><br> A simple layout in red and white with black text - good for pages with lots of information.<br> Preview: <a href="http://www.neopets.com/~tread_layout">here</a>.<br><textarea rows="4" cols="34"><div align="center"> <table cellpadding="5" style="background: #FFFFFF; background-image: url('http://i18.tinypic.com/8b3xu69.png'); background-repeat: no-repeat; background-position: top center; background-attachment: scroll;" width="570"> <tr><td height="75" align="center"> <a href="#1" style="color: #FFFFFF; font-size: 12pt; font-family: tahoma;"> Section 1 </a> | <a href="#2" style="color: #FFFFFF; font-size: 12pt; font-family: tahoma;"> Section 2 </a> | <a href="#3" style="color: #FFFFFF; font-size: 12pt; font-family: tahoma;"> Section 3 </a> </td></tr> <tr><td height="330" align="right" valign="top"> <span class="title"><br> Title goes here. </span><br><span class="under"> Subtitle goes here. </span> </td></tr> <tr><td> <a name="1"></a><span class="head"> Section 1 </span> <p> This layout is called Tread. Replace the titles and this text with your own content. You are free to modify the code if you know how, but I do request that you leave the link back to Displayout for other people who might want free layouts. </p> <p> Enjoy! </p> <br><br><a name="2"></a><span class="head"> Section 2 </span> <p> Type here. </p> <br><br><a name="3"></a><span class="head"> Section 3 </span> <p> Type here. </p> <br><br> </td></tr> </table> <span style="font-family: arial; font-size: 8pt;">Layout by <a href="http://www.neopets.com/~displayout" style="font-size: 9pt;">Displayout</a>.</span> </div> <style type="text/css"> A:link { text-decoration: none; color: #bf3422; font-weight: bold; } A:visited { text-decoration: none; color: #bf3422; font-weight: bold; } A:active { text-decoration: none; color: #FFFFFF; font-weight: bold; } A:hover { text-decoration: none; color: #FFFFFF; font-weight: bold; background-color: #000000; cursor: crosshair; } body { background: #FFFFFF; font-family: verdana; color: #000000; font-size: 8pt; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; } .title { font-family: tahoma; font-weight: bold; color: #000000; font-size: 40pt; letter-spacing: -5px; } .head { font-family: garamond; color: #000000; font-weight: bold; font-size: 20pt; } .under { font-family: garamond; font-size: 15px; color: #000000; font-style: italic; letter-spacing: 10px; } td { font-family: verdana; color: #000000; font-size: 8pt; } </style>


Viewfound
An image-heavy layout in silver and black with red accents. This layout features a photographic image of a pair of hands forming a square.
Preview: here.
<style type="text/css"> A:link { text-decoration: none; color: #bf3422; font-weight: bold; } A:visited { text-decoration: none; color: #bf3422; font-weight: bold; } A:active { text-decoration: none; color: #FFFFFF; font-weight: bold; } A:hover { text-decoration: none; color: #FFFFFF; font-weight: bold; background-color: #bf3422; cursor: crosshair; } body { background: #000000; font-family: verdana; color: #d9d9d9; font-size: 8pt; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; } .title { font-family: georgia; font-weight: bold; color: #d9d9d9; font-size: 25pt; letter-spacing: -5px; } .head { font-family: georgia; color: #d9d9d9; font-weight: bold; font-size: 14pt; letter-spacing: -2px; } td { font-family: verdana; color: #d9d9d9; font-size: 8pt; } </style> <div align="center"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td colspan="3"> <img src="http://i2.tinypic.com/6srl1ug.png"> </td></tr> <tr> <td> <img src="http://i9.tinypic.com/6tmqb7p.png"> </td> <td width="178" height="372" valign="top"> <div style="width: 175px; height: 340px; position: relative; padding: 2px; border: none; background-color: #000000; overflow: auto;"> <div align="center"> <span class="title"> Your Title </span><br><br><a href="#1">Link 1</a> | <a href="#2">Link 2</a> | <a href="#3">Link 3</a> </div> <br><br><a name="1"></a><span class="head">Section 1</span> <p>This layout is called Viewfound. Replace the test and titles with your own content. You are welcome to modify the code if you know how; however, I do request that you leave the link back to Displayout so that other people can get their own free layouts.</p> <p>Enjoy!</p> <br><br><a name="2"></a><span class="head">Section 2</span> <p>Type here.</p> <br><br><a name="3"></a><span class="head">Section 3</span> <p>Type here.</p> <br><br> </div> <br><div align="center" style="font-family: arial; font-size: 7pt;">Layout by <a href="http://www.neopets.com/~displayout" style="font-family: arial; font-size: 8pt;">Displayout</a>.</div> </td> <td> <img src="http://i18.tinypic.com/85mn814.png"> </td> </tr> <tr><td colspan="3"> <img src="http://i19.tinypic.com/7315uz6.png"> </td></tr> </table> </div>


Vintaged, Light Version
A "vintage" layout in cream and ink-purple inspired by Victorian periodicals.
Preview: here.
<br><br><br><div align="center"> <table cellpadding="5" cellspacing="0" width="600" style="border: #FFFFFF 2px solid; background: #cfc9b7;"> <tr><td style="background: url('http://i4.tinypic.com/7x2h348.png'); height: 150px;"></td></tr> <tr><td valign="top" align="center" class="title"> Title goes here <br><span class="subtitle"> And your subtitle goes here. </span><hr> </td></tr> <tr><td> <div align="center"> <span class="head"> Section .01 </span><br> </div> <p> This layout is named Vintaged, Light Version. Replace the titles and text with your own content. You are free to modify the code if you know how, but I request that you leave the link back to Displayout so that other people can get their own free layouts. </p> <p> Enjoy! </p> <hr> <br><br><div align="center"> <span class="head"> Section .02 </span><br> </div> <p> Type here. This layout looks best with larger chunks of text per section; if you plan on creating smaller sections, you might want to take out the "hr" tag below each section. </p> <hr> <br><br><div align="center"> <span class="head"> Section .03 </span><br> </div> <p> Type here. This layout looks best with larger chunks of text per section; if you plan on creating smaller sections, you might want to take out the "hr" tag below each section. </p> <hr> <br><br> </td></tr> <tr><td align="right"><span style="color: #3f2231; font-family: garamond; font-size: 9pt; letter-spacing: 2px;"><i>Layout by</i> <a href="http://www.neopets.com/~displayout" style="color: #3f2231;"><b>Displayout</b></a>.</span></td></tr> </table> </div> <style type="text/css"> A:link { text-decoration: underline; color: #3f2231; font-weight: bold; } A:visited { text-decoration: underline; color: #3f2231; font-weight: bold; } A:active { text-decoration: none; color: #3f2231; font-weight: bold; } A:hover { text-decoration: none; color: #3f2231; font-weight: bold; background-color: #FFFFFF; cursor: crosshair; } body { background: #FFFFFF; background-image: url("http://i3.tinypic.com/6x9z9qc.png"); background-repeat: repeat; font-family: times new roman; color: #3f2231; font-size: 11pt; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; } .title { font-family: georgia; font-weight: bold; font-style: italic; color: #3f2231; font-size: 35pt; letter-spacing: -5px; } .head { font-family: georgia; color: #3f2231; font-weight: bold; font-size: 14pt; letter-spacing: -2px; } .subtitle { font-family: georgia; color: #3f2231; font-size: 10pt; letter-spacing: 11px; } td { font-family: times new roman; color: #3f2231; font-size: 11pt; } </style>


Vintaged, Dark Version
A "vintage" layout in gold and deep gray inspired by Victorian periodicals.
Preview: here.
<br><br><br><div align="center"> <table cellpadding="5" cellspacing="0" width="600" style="border: #000000 2px solid; background: #2b2b2b;"> <tr><td style="background: url('http://i13.tinypic.com/72iv19s.png'); height: 150px;"></td></tr> <tr><td valign="top" align="center" class="title"> Title goes here <br><span class="subtitle"> And your subtitle goes here. </span><hr> </td></tr> <tr><td> <div align="center"> <span class="head"> Section .01 </span><br> </div> <p> This layout is named Vintaged, Dark Version. Replace the titles and text with your own content. You are free to modify the code if you know how, but I request that you leave the link back to Displayout so that other people can get their own free layouts. </p> <p> Enjoy! </p> <hr> <br><br><div align="center"> <span class="head"> Section .02 </span><br> </div> <p> Type here. This layout looks best with larger chunks of text per section; if you plan on creating smaller sections, you might want to take out the "hr" tag below each section. </p> <hr> <br><br><div align="center"> <span class="head"> Section .03 </span><br> </div> <p> Type here. This layout looks best with larger chunks of text per section; if you plan on creating smaller sections, you might want to take out the "hr" tag below each section. </p> <hr> <br><br> </td></tr> <tr><td align="right"><span style="color: #cdba7f; font-family: garamond; font-size: 9pt; letter-spacing: 2px;"><i>Layout by</i> <a href="http://www.neopets.com/~displayout" style="color: #cdba7f;"><b>Displayout</b></a>.</span></td></tr> </table> </div> <style type="text/css"> A:link { text-decoration: underline; color: #cdba7f; font-weight: bold; } A:visited { text-decoration: underline; color: #cdba7f; font-weight: bold; } A:active { text-decoration: none; color: #cdba7f; font-weight: bold; } A:hover { text-decoration: none; color: #cdba7f; font-weight: bold; background-color: #000000; cursor: crosshair; } body { background: #000000; background-image: url("http://i2.tinypic.com/6l1rgup.png"); background-repeat: repeat; font-family: times new roman; color: #cdba7f; font-size: 11pt; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; } .title { font-family: georgia; font-weight: bold; font-style: italic; color: #cdba7f; font-size: 35pt; letter-spacing: -5px; } .head { font-family: georgia; color: #cdba7f; font-weight: bold; font-size: 14pt; letter-spacing: -2px; } .subtitle { font-family: georgia; color: #cdba7f; font-size: 10pt; letter-spacing: 11px; } td { font-family: times new roman; color: #cdba7f; font-size: 11pt; } </style>



.yeah, And

The layouts are "what you see is what you get", and mostly don't come with technical support. I am, however, generally willing to help you out a bit if you happen to catch me online_ I don't take requests, but I will be adding new layouts every once in a while. Neomail me if you have questions or feedback.