Jonas Brothers

Website Templates / 2 Columns

Designer's Comments

Look carefully for specific instructions

DONT REMOVE THE CREDIT!

Layout Code

Copy and paste to Template HTML

Help

<title>Jonas Brothers</title>
<html>
<style type="text/css">

body{background-color: #000000;
background-image:url(http://cbimg6.com/layouts/09/07/35277ab.png);
background-image: repeat;
color: #000000;
font-family: arial;
text-transform: none;
font-size: 9px;
line-height: 10px;}

#maincontent{
position: absolute;
overflow: hidden;
top: 350px;
left: 25px;
width: 385px}

#navcolumn{
position: absolute;
overflow: hidden;
top: 350px;
left: 415px;
width: 175px}

textarea{
background-color: #055555;
border: 1px dotted #ffffff;
width: 88px;
height: 50px;
letter-spacing: 0px;
text-transform: uppercase;
font-family: small fonts;
color: #ffffff;
font-size: 9px;}

blockquote{
background-color: #D1C2C2;
border-left: 3px solid #801A39;
padding: 3px;
color: #000000;
width: 300px;
font-size: 9px;
font-family: small fonts;
}

h1{
color:#801A39;
font-family:times new roman; 
font-size: 20px;
background-color: #000000; 
display:block; 
text-align: left; 
font-weight: normal; 
letter-spacing: -2px; 
text-transform: uppercase; 
line-height: 16px;
margin:0px;
border-left:3px #801A39 solid;}

h2{
color:#000000;
font-family:times new roman; 
font-size: 20px;
background-color: #801A39; 
display:block; 
text-align: left; 
font-weight: normal; 
letter-spacing: -2px; 
text-transform: uppercase; 
line-height: 16px;
margin:0px;
border-left:3px #000000 solid;}

#banner{
position: absolute;
top: 0px;
left: 0px;
width: 1000px}

#content h1 { margin-left: 0px;
text-align: left; }
#content p { margin-left: 0px;
width: 300px; }

a.navi, a.navi:active, a.navi:link, a.navi:visited{
font-family: small fonts;
font-weight:normal;
font-size: 8px;
letter-spacing:1px;
text-transform: uppercase;
letter-spacing:0px;
color:000000;}

a.navi:hover{ 
font-family: small fonts;
font-weight:normal;
font-size: 8px;
letter-spacing:1px;
text-transform: uppercase;
letter-spacing:0px;
color:000000;
border-left: 3px solid #801A39;
}

</style>

<div id="maincontent">
<h1>Welcome</h1>
Hi and thanks for using one of Funride.org's premade layouts!
If you would like more then just e-mail me at nick@funride.org<br>
And you could even request a special type or artist<br>
I spent a lot of time on this layout about two hours between designing and coding.<br>
You may edit the css but may <b>NEVER</b> remove my credit on the windy city picture.<br><Br>

I decided to do the Demi Lovato because I love her and think she is really talented. I also kind of wanted to promote her new album 'Here We Go Again' in stores now<br>
So enjoy the layout!<br><br>

The design:<br>
I blended the three photos of Demi.<br>
Added the striped brush, lowered the opacity to 15%<br>
Added text and used stroke on it.
Then finally added the content areas.<br><br>

The code:<br>
This code took a long time to get right and match<br>
I spent a long time on the blockquote so please use it sometime. :D<br>

<blockquote>
This is just random text showing you what the blockquote is like.<br>
This is just random text showing you what the blockquote is like.<br>
This is just random text showing you what the blockquote is like.<br>
This is just random text showing you what the blockquote is like.<br>
</blockquote><br><Br><br>

<textarea>
Here is your textarea.
</textarea>

</div>

<div id="navcolumn">
<h2>Navigation</h2>
<a href="#" class="navi">link</a><br>
<a href="#" class="navi">link</a><Br>
<a href="#" class="navi">link</a><br>
<a href="#" class="navi">link</a><Br>

<h2>Navigation</h2>
<a href="#" class="navi">link</a><br>
<a href="#" class="navi">link</a><Br>
<a href="#" class="navi">link</a><br>
<a href="#" class="navi">link</a><Br>

<h2>Words</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor facilisis accumsan. Donec interdum, nisi a pretium adipiscing, nisi odio accumsan elit, vel commodo ligula mi at nulla. Curabitur ultricies facilisis dui, nec fermentum sem vulputate sed. Curabitur sed velit in lacus rutrum viverra sit amet sed est. Mauris lacinia cursus sapien vel suscipit. Fusce erat arcu, tristique sit amet vulputate sit amet, mollis id orci. Vivamus volutpat augue sit amet odio cursus non blandit magna congue. Vivamus porttitor adipiscing sem ac pellentesque. Etiam molestie, magna eu vehicula imperdiet, lectus nisi pretium eros, non dignissim nunc lectus nec ligula. Etiam purus quam, dignissim sit amet posuere et, fringilla sed felis. Integer feugiat turpis nec nunc bibendum eu facilisis nibh rutrum. Nam fermentum fermentum elit in volutpat. Aliquam tristique eros sed orci rutrum et condimentum eros porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi leo elit, consequat at luctus vitae, sodales vitae dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed nulla neque, laoreet vel vestibulum nec, faucibus non risus. Curabitur porttitor, dui at laoreet tincidunt, est turpis congue ligula, eget ullamcorper leo lorem ac nunc. Duis non porta justo. Praesent pharetra metus nec lorem ornare vulputate. Aenean a lobortis tellus. Praesent congue sagittis lobortis. Sed euismod massa id nisl euismod fringilla. Etiam consequat condimentum velit, et tempor turpis aliquet sed. Phasellus at erat ac nisl vulputate luctus. In viverra, justo molestie blandit imperdiet, turpis arcu sollicitudin elit, ut mattis lorem felis sit amet ipsum. Phasellus sed eros arcu, vitae ullamcorper nulla. Vestibulum in lorem ligula. Vestibulum a bibendum sapien. Aliquam pharetra blandit ligula vitae dignissim. Maecenas hendrerit est sit amet mauris pellentesque fermentum. Etiam massa eros, eleifend bibendum tempus sed, facilisis sit amet justo. Nam malesuada porta tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc eget sem dui, et rutrum mi. Etiam at nibh vitae nisi suscipit vestibulum. Nulla porttitor libero et felis ultricies vel ornare eros suscipit. Nulla nec scelerisque sem. Mauris ut magna ultrices risus semper dignissim. Mauris dapibus, nulla ac volutpat pulvinar, enim ligula aliquam felis, id laoreet turpis erat sed nulla. Aenean id dolor sit amet libero mattis laoreet ac vel dui. Proin sed nisl mi, vel vestibulum ante. In mollis nunc vel orci dictum non dignissim elit fringilla. Cras dui diam, commodo id porta tempus, tincidunt vitae neque. Curabitur sollicitudin rhoncus rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut accumsan mollis diam convallis pharetra. Phasellus porta condimentum mattis. Maecenas venenatis leo vel erat convallis eu dictum enim feugiat. Curabitur rhoncus, enim nec sodales tempus, purus purus tincidunt metus, in ornare odio elit quis neque. Etiam feugiat elit quis nisi elementum tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec turpis tortor, sed lobortis diam. Nam vitae est sem. Nullam et magna vitae mauris pharetra gravida. Vestibulum tempus porta nibh. Quisque a mauris at justo consequat viverra et eget quam. Suspendisse suscipit placerat turpis, a pharetra ligula feugiat sed. Nulla eget nulla suscipit nisi rhoncus sollicitudin non quis mauris. Sed et nisl tellus. Phasellus dignissim massa et massa pretium auctor. Nam id ligula id massa sollicitudin varius eget sed est. Sed nec erat felis, vel tincidunt ipsum. Suspendisse sit amet condimentum magna. Aliquam at massa et ipsum dignissim ullamcorper. Integer ut malesuada neque. Donec aliquet vehicula purus, ut fringilla magna ornare a. Mauris ultricies euismod dolor sed blandit. Vestibulum luctus, urna eget ultrices iaculis, lectus dui varius magna, quis sollicitudin nunc risus ut sapien. Aenean ante enim, dictum quis elementum eu, convallis non risus. Vestibulum in dolor turpis, a accumsan ante. Maecenas in fermentum enim. Aliquam congue felis quis neque sollicitudin sollicitudin. Fusce posuere elementum ornare. Nulla imperdiet turpis at ipsum interdum at posuere ligula vehicula. Proin hendrerit, nisl vitae imperdiet malesuada, tortor lorem ultrices sapien, ac viverra ligula metus a ante. Vivamus pellentesque nisi non tortor eleifend eu varius libero auctor. Aliquam adipiscing mollis imperdiet. Nam nisl tellus, lacinia vitae imperdiet sed, dapibus nec felis. Cras purus nisl, condimentum sed hendrerit id, congue a ligula. Suspendisse ac nunc fringilla felis cursus semper fermentum id quam.
</div>
</html>