catch your destiny

Designer's Comments

Look carefully for specific instructions

- ;)

Layout Code

Copy and paste to Template HTML

<html>
<head>
<title>{//...catch your destiny...\}</title>
<style>
body	{
	background-color: #efe6b8;
	color: #94c8c8;
	font-family: "Verdana", Arial, Helvetica, sans-serif;
	font-size: 9px;
        z-index: 1; }

#background{
   z-index: 1; 
	}

#content	{
	width:530px;
	left: 480px;
	top: 289px;
	position: absolute;
	z-index: 3;
	}

#navigation	{
	width: 320px;
	left: 139px;
	top: 45px;
	position: absolute;
	z-index: 4;
	}

h1{
color: #98b2ba;
font: normal 14px arial;
text-transform: uppercase;
letter-spacing: 4px;
line-height: 15px;
text-align: center; 
border-bottom: 1px dotted #fcf8f8 ; 
}

b, strong	{
	color: #ccca87;
	font-family: "Verdana", Arial, Helvetica, sans-serif; 
	font-size: 9px;
	font-weight: bold;

}

i, em	{
	color: #cea89c;
	font-family: "Verdana", Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: italic;
	font-weight: normal;
	text-decoration: none;
	text-transform: uppercase;
	}

u 	{
	color: #bfc4c3;
	font-family: "Verdana", Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	text-transform: uppercase;
        padding:1px;
	border-bottom: 1px solid  #606060;
	}

a:link, a:active, a:visited	{
color: #606060 ;
font: normal 12px arial;
text-transform: lowcase;
letter-spacing: 6px;
line-height: 15px;
text-align: center; 
padding:2px;

}
	
a:hover	{
	color: #8aac9c;
font: normal 11px arial;
text-transform: uppercase;
letter-spacing: 6px;
line-height: 15px;
text-align: center;  
	}

#navi a {
display: block;
color:#3e595d;
text-decoration:none;
font-family:verdana;
font-size: 7pt;
line-height:15px;
height:12px;
text-align:left;
border: 0px;
}

#navi a:hover {
background-color:#cbc9c3;
color:#827986 ;
text-decoration:none;
font-family:verdana;
font-size: 7pt;
line-height:15px;
height:12px;
border: 0px;
text-align:left;
cursor: default;
border: 1px solid #88848a;
}

</style>
</head>

<td width=50%><a href="http://ceres-aven.createblog.com/"> Index</a></td>
<td width=50%><a href="http://ceres-aven.createblog.com/">Credits</a></td>
</tr>
<tr>
<td width=50%><a href=http://ceres-aven.createblog.com/ "> Link</a></td>
<td width=50%><a href="http://ceres-aven.createblog.com/">Link </a></td>
</tr>
<tr>
<td width=50%><a href="http://ceres-aven.createblog.com/"> Index</a></td>
<td width=50%><a href="http://ceres-aven.createblog.com/">Credits</a></td>
</tr>
<tr>
<td width=50%><a href=http://ceres-aven.createblog.com/ "> Link </a></td>
<td width=50%><a href="http://ceres-aven.createblog.com/"> Link </a></td>

</tr>
<tr>
<td width=50%><a href="http://ceres-aven.createblog.com/"> Index</a></td>
<td width=50%><a href="http://ceres-aven.createblog.com/">Credits</a></td>
</tr>
<tr>
<td width=50%><a href=http://ceres-aven.createblog.com/ "> Link</a></td>
<td width=50%><a href="http://ceres-aven.createblog.com/"> Link </a></td> 
</tr>
<tr>
<td width=50%><a href="http://ceres-aven.createblog.com/"> Index</a></td>
<td width=50%><a href="http://ceres-aven.createblog.com/">Credits</a></td>
</tr>
<tr>
<td width=50%><a href=http://ceres-aven.createblog.com/ "> Link</a></td>
<td width=50%><a href="http://ceres-aven.createblog.com/"> Link </a></td> 
</tr> 
</table><br>

</div> 
</div></div>

<div id="content">
<div style="overflow: auto; width: 530px; height: 470px;"> 
<h1>styles</h1>
<B>B</B> <I>I</I> <U>U</U> <A href="http://">link</A> 
<h1>heder</h1>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
<h1>header</h1>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
<h1>header</h1>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
<h1>header</h1>
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
<h1>header</h1>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 
		At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. 
<h1>header</h1>
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. 
<h1>header</h1>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
</div>
		
			</div>

</html>

Layout Comments

Showing latest 10 of 10 comments

Wow I love FF13. I love the banner but I don't Like the Fact that the Body is a Scroll bar and it is directly next to the webpage scroll bar (woul've been better if it was align to the left) the navigation isnt in centered to the navigation background. but overall I do love the colors you used and picture

By blackk49 on Mar 23, 2008 2:35 pm

nice!

By purplelilac8o8 on Mar 22, 2008 9:37 pm

pretty nice layout but it messes up on higher resolutions, mines is 1200x800

By Blaqheartedstar on Mar 21, 2008 9:51 pm

Hmm it's misaligned for me in both FF and IE... resolution 1280 x 800. From the preview image, it looks great though. ^^

By dreamgurl36 on Mar 21, 2008 6:40 pm

the navigation is misaligned, but REALLY NICE COLORS!

By emberfly on Mar 20, 2008 10:15 pm

The colors make my eyes happy.

By monstrum on Mar 20, 2008 9:29 pm

I think this is a good start but, in my opinion, there could be a little more with the coding. Perhaps a content area below the navigation like Synesthesia suggested. Otherwise this is an awesome layout!

By Lifrasthir on Mar 20, 2008 9:08 pm

Either it doesn't work well in FireFox, or it isn't compatible with all screen resolutions. If it's with screen resolutions, you may be able to fix it with margin-left's and stuff. But other than that, it is so lovely! :]

By Korima on Mar 20, 2008 8:18 pm

this is so pretty.

in ie, i think the navigation div box is a little too low. unless thats just my computer..

By aaayotiffany on Mar 20, 2008 8:16 pm

I think there should be a content area below the navigation. The left side looks too empty without one. Pretty banner, though!

By tokyo-rose on Mar 20, 2008 7:55 pm

Layout Details

Designer	Fr3eak
Submitted on	Mar 20, 2008
Page views	7,084
Favorites	33
Comments	10
Reviewer	miyashu
Approved on	Mar 20, 2008

catch your destiny

Designer's Comments

Layout Code

Layout Comments

Layout Details

Layout Tags

Layout Tools

Layout Affiliates