Breakaway-Kelly Clarkson

Designer's Comments

Look carefully for specific instructions

Enjoy the layout!
You do have a right to remove the text 'Welcome 2 Fun Ride',
But you MUST keep credit in tact.

P.S.
Credit to broken-doll's code for changing the color of the first letters in the headers.

Layout Code

Copy and paste to Template HTML

Help

<title>Breakaway - Kelly Clarkson</title>
<html>
<style type="text/css">

body{background-color: #000000;
background-image:url(http://cbimg6.com/layouts/09/06/34969ab.png);
background-image: repeat;
color: #000000;
font-family: century gothic;
font-size: 12px;}

#content{
position: absolute;
overflow: hidden;
top: 505px;
left: 120;
width: 300px}

#navcolumn{
position: absolute;
overflow: hidden;
top: 505px;
left: 510px;
width: 200px;}

h1{
color:#ffffff;
font-family: Courier New;
border: 0px solid; border-color: #FFFFFF;
background-image: url();
font-size: 30px;}
h1:first-letter {
color: #000000;
}

h2{
color:#000000;
font-family: Courier New;
border: 0px solid; border-color: #ffffff;
background-image: url();
font-size: 15px;
border-left: 1px dashed #000000;
letter-spacing: 1px;
text-transform: uppercase;}
h2:first-letter {
color: #ffffff;
}

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

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

.menu, a.menu:link, a.menu:active, a.menu:visited{
	color: #ffffff;
	background-image: url();
	font-family: verdana;
	font-size:9px;
       	letter-spacing:2px;
        text-transform: lowercase;
	line-height: 9px;
	text-align: left;
        width:85px;
        padding:2px;
        display: block;
        border:1px dashed #202020; margin-bottom:2px;
	}

a.menu:hover{
	color: #330000;
	
	font-family: century-gothic;
	font-size:9px;
	font-style: bold;
	font-weight: none;
	text-decoration: none;
                text-transform: uppercase;
	line-height:9px;
	text-align: right;
        width:85px;
        letter-spacing:2px;
        text-transform: lowercase;
        padding:2px;
        display: block;
        border:1px dashed #414141; margin-bottom:2px;
	}
</style>

<h1>Heading Here</h1>
   Hopefull this text your reading dosent get cut off!
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>

<div id="navcolumn">
<h2>Navigation </h2>
<a href="##" target="_self" class="menu">Link</a>
<a href="##" target="_self" class="menu">Link</a>
<a href="##" target="_self" class="menu">Link</a>
<a href="##" target="_self" class="menu">Link</a>
<a href="##" target="_self" class="menu">Link</a>

<h2>Credits:</h2>
Blending & Coding<a href="http://funride.org" target="_self" class="menu">Funride.org</a>
Always keep credit in tact!

<h2>Content</h2>
Hopefull this text your reading dosent get cut off!
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>

Layout Comments

Showing latest 4 of 4 comments

and you have your site name as the welcome header?
>\

By xii3 on Jul 23, 2009 6:42 pm

I agree with mystiicdesigns, the font is random and not as elegant as the picture.
Could of done better. i really love the blend.

By xii3 on Jul 23, 2009 6:39 pm

i like it, just dont like the font

By mystiicdesigns on Jun 25, 2009 12:36 pm

looks pretty suckish. the font doesn't go well with it and the color you chose for the first letter of a header is too dark. Also, the dotted border just doesn't match but the blending is pretty good.

By Mikeplyts on Jun 24, 2009 11:55 pm

Layout Details

Designer	funride
Submitted on	Jun 23, 2009
Page views	2,874
Favorites	6
Comments	4
Reviewer	schizo
Approved on	Jun 24, 2009

Layout Colors

Layout Tags

abstract, celebrities, colorful, fashion, music, kelly clarkson, breakaway, avril lavigne, avril, lavigne, kelly, clarkson

Layout Tools

Layout Affiliates

Here I Stand Layouts