Picnic

Designer's Comments

Look carefully for specific instructions

Someone suggested that I should make this a website template, so I did. I think it came out pretty good. It's a bit larger than the myspace version. Enjoy!

Replace all that writing with your own content. The links in the navigation can be removed or replaced, and all of the sections will scroll when they get long enough.

Please don't remove the credit.
Enjoy!

Layout Code

Copy and paste to Template HTML

Help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Picnic</title>

a img {filter:gray; border:none;}
a img hover {filter:gray; border:none;}
img {filer:gray; border:none;}

a, a:link, a:active, a:visited {
 color:#CC6666;
 font-family:comic sans ms;
 font-size:12px;
 font-weight:normal;
 line-height:13px;
 letter-spacing:0px;
 text-decoration:none;
 } 
 
a:hover {
 color:#CC9999;
 font-family:comic sans ms;
 font-size:12px;
 font-weight:normal;
 line-height:13px;
 letter-spacing:0px;
 text-decoration:none;
}

b {
 color:#333333 !important;
 font-family:comic sans ms!important;
 font-size:12px !important;
 font-weight:bold;
 text-transform:none;
 text-decoration:none !important;
 line-height:13px;
 letter-spacing:-.5px;
}

i {
 color:#333333 !important;
 font-family:comic sans ms !important;
 font-size:12px !important;
 font-weight:normal;
 text-transform:none;
 text-decoration:none !important;
 line-height:13px;
 letter-spacing:-1px;
}

u {
 color:#333333 !important;
 font-family:comic sans ms !important;
 font-size:12px !important;
 font-weight:normal;
 text-transform:none;
 text-decoration:underline;
 line-height:13px;
 letter-spacing:-1px;
}

small {
 color:#333333 !important;
 font-family:comic sans ms !important;
 font-size:10px !important;
 font-weight:normal;
 text-transform:none;
 text-decoration:none !important;
 line-height:13px;
 letter-spacing:-1px;
}

big {
 color:#333333 !important;
 font-family:comic sans ms !important;
 font-size:14px !important;
 font-weight:normal;
 text-transform:none;
 text-decoration:none !important;
 line-height:13px;
 letter-spacing:-1px;
}

h1 {
 color:#222222 !important;
 font-family:comic sans ms;
 font-size:17px;
 font-weight:normal;
 line-height:17px;
 letter-spacing:-2px;
 border-bottom:2px dotted;
 border-color:#CC6666;
 margin-bottom:5px;
 margin-top:5px;
 text-align:left;
}

</style>

.titletext {
 color:#222222 !important;
 font-family:comic sans ms;
 font-size:22px;
 font-weight:normal;
 line-height:35px;
 letter-spacing:-2px;
}

.text {
 color:#222222 !important;
 font-family:comic sans ms !important;
 font-size:12px !important;
 font-weight:normal;
 text-transform:none;
 text-decoration:none !important;
 line-height:13px;
 letter-spacing:-1px;
}

.navilink:link, .navilink:active, .navilink:visited {
 color:#222222 !important;
 font-family:comic sans ms !important;
 font-size:16px !important;
 font-weight:normal;
 text-transform:none;
 text-decoration:none !important;
 line-height:18px;
 letter-spacing:-1px;
 margin:0px;
 margin-bottom:13px;
 display:block;
 border:none !important;
}

.navilink:hover {
 color:#CC6666 !important;
 font-family:comic sans ms !important;
 font-size:16px !important;
 font-weight:normal;
 text-transform:none;
 text-decoration:none !important;
 line-height:18px !important;
 letter-spacing:-1px;
 margin:0px;
 margin-bottom:13px;
 display:block;
 border:none !important;
}

.creditlink, .creditlink:visited, .creditlink:active {
 color:#cccccc !important;
 font-family:small fonts !important;
 font-size:8px !important;
 font-weight:normal;
 background-color:transparent !important;
 border:none; text-decoration:none;
 text-transform:uppercase !important;
}

.creditlink:hover {
    font-family:small fonts !important;
    font-size:8px !important; color:#ffffff !important;
    font-weight:normal;
    background-color:transparent !important;
    border:none; text-decoration:none;
    text-transform:uppercase !important;
 }
</style>

#napkins {
position:absolute;
width:800px;
height:500px;
top:80px;
left:50%;
margin-left:-400px;
border:none;
background-color:transparent;
overflow:hidden;
}

#title {
width:270px;
height:40px;
background-color:transparent;
border:none;
position:absolute;
z-index:2;
top:127px;
left:50%;
margin-left:-165px;
visibility:visible;
overflow:auto;
text-align:center;
}

#navigation {
width:65px;
height:270px;
background-color:transparent;
border:none;
position:absolute;
z-index:2;
top:180px;
left:50%;
margin-left:55px;
visibility:visible;
overflow:hidden;
text-align:left;
}

#subtitle {
width:235px;
height:90px;
background-color:transparent;
border:none;
position:absolute;
z-index:2;
top:195px;
left:50%;
margin-left:-215px;
visibility:visible;
overflow:auto;
}

#leftside {
width:300px;
height:193px;
background-color:transparent;
border:none;
position:absolute;
z-index:2;
top:305px;
left:50%;
margin-left:-280px;
visibility:visible;
overflow:auto;
}

#rightside {
width:130px;
height:298px;
background-color:transparent;
border:none;
position:absolute;
z-index:2;
top:192px;
left:50%;
margin-left:160px;
visibility:visible;
overflow:auto;
}

#creditlink {
position:absolute;
border:none;
width:130px;
height:20px;
z-index:2;
left: 6px !important;
top: 0px;
}
</style>
</head>

<body>

<div id="creditlink"><a href="http://crotchettheleper.createblog.com/" class="creditlink">Crotchet The Leper</a></div>
<div id="napkins"><img src="http://cbimg6.com/layouts/09/01/33328aa.png" /></div>

Your Title Here

</span>
</div>

Type whatever you'd like in this space. It will overflow when it gets full. You could maybe put site updates here, or some quotes, or

whatever... It's all up to you m'dears. Enjoy. Type whatever you'd like in this space. It will overflow when it gets full. You could maybe

put site updates here, or some quotes, or whatever... It's all up to you m'dears. Enjoy. Type whatever you'd like in this space. It will

overflow when it gets full. You could maybe put site updates here, or some quotes, or whatever... It's all up to you m'dears. Enjoy.

</span>
</div>

</div>

Here's a slightly larger section for you. Put whatever you'd like in here. It will scroll when it gets long enough. For now I'm just going

to repeat this text so you can see what it looks like with a scrollbar. But first, here's some stuff you might want to know:<br><br>

<a href="">Link</a><br>
<b>Bold</b><br>
<i>Italics</i><br>
<u>Underline</u><br>
<big>Big</big><br>
<small>Small</small><br><br>

Here's a slightly larger section for you. Put whatever you'd like in here. It will scroll when it gets long enough. For now I'm just going

to repeat this text so you can see what it looks like with a scrollbar. Here's a slightly larger section for you. Put whatever you'd like

in here. It will scroll when it gets long enough. For now I'm just going to repeat this text so you can see what it looks like with a

scrollbar. Here's a slightly larger section for you. Put whatever you'd like in here. It will scroll when it gets long enough. For now I'm

just going to repeat this text so you can see what it looks like with a scrollbar. Here's a slightly larger section for you. Put whatever

you'd like in here. It will scroll when it gets long enough. For now I'm just going to repeat this text so you can see what it looks like

with a scrollbar. Here's a slightly larger section for you. Put whatever you'd like in here. It will scroll when it gets long enough. For

now I'm just going to repeat this text so you can see what it looks like with a scrollbar. Here's a slightly larger section for you. Put

whatever you'd like in here. It will scroll when it gets long enough. For now I'm just going to repeat this text so you can see what it

looks like with a scrollbar. Here's a slightly larger section for you. Put whatever you'd like in here. It will scroll when it gets long

enough. For now I'm just going to repeat this text so you can see what it looks like with a scrollbar. Here's a slightly larger section for

you. Put whatever you'd like in here. It will scroll when it gets long enough. For now I'm just going to repeat this text so you can see

what it looks like with a scrollbar. Here's a slightly larger section for you. Put whatever you'd like in here. It will scroll when it gets

long enough. For now I'm just going to repeat this text so you can see what it looks like with a scrollbar. 
</span>
</div>

<h1>Header Text</h1>

Go ahead and replace this with your own text. This will scroll when it gets long enough. This is a a sidebar I guess; do whatever you want

with it! Go ahead and replace this with your own text. This is a a sidebar I guess; do whatever you want with it! Go ahead and replace this

with your own text. This is a a sidebar I guess; do whatever you want with it!

<h1>Header Text</h1>

Go ahead and replace this with your own text.
</span>
</div>

</body>
</html>

Layout Comments

Showing latest 10 of 12 comments

awesome job here! beautiful!

By calilani on Mar 18, 2009 2:07 am

How do you copy and past it onto template HTLM??? where is it????

By musicismylife10 on Feb 8, 2009 4:20 pm

wow this is lovely

By emmasawr on Jan 18, 2009 3:23 pm

At at first glance, this is a very appealing layout! ^^ I agree about the font (hard to read especially in Firefox ;o) and the blurry napkins. The flower is a very nice touch and I love the color scheme here. Lovely work! :D

By dreamgurl36 on Jan 8, 2009 10:15 am