Essence of Spring

Designer's Comments

Look carefully for specific instructions

Please do not change the images in any way. DO NOT REMOVE THE CREDIT. You can edit the navigation/content/etc as you want. :)

Tested in Firefox and Internet Explorer, and it should work in most screen resolutions. (made in 1200 x 800)

Oh, pls check out my little website. :)

---------------------
Credits
Resources used from HorizonRoad and Rainharbour (the site's closed, I think). Image of cherry blossoms from StockXchange.

Layout Code

Copy and paste to Template HTML

Help

<title>Essence of Spring</title>

#content A, A:link, #content A:visited { text-decoration: none;  color:#70ae4c; cursor: crosshair; border-bottom: 1px dashed #e8c278; font-family: century gothic; font-family: bold; font-size: 10pt;}
#content A:hover { text-decoration:; color:#495e50; cursor: crosshair; border-bottom: 1px dotted #ff70a6;}

#navi A, #navi A:link, #navi A:visited { display:block; font-family: georgia; font-size: 17px; font-style: italic; padding:4px; cursor: crosshair; text-align: left; line-height: 1.0; padding-left: 8px;}
#navi A:hover { text-decoration: none; text-align: center; width: 140px;}

.menu {margin: 0px; padding: 0px; color: #000; width: 130px; list-style: none;}
.menu li {padding: 1px 1px 2px 0px; margin: 0px;}
.menu li a, .menu li a:visited {margin: 0px; padding: 3px 3px; color: #e07b82; display: block; border: #fefded 1px solid; background: #fedcc7; text-decoration: none;}
.menu li a:hover {color: white; background: #bc4141; border: #dae9cd 1px outset; }

#topbg {height: 112px; background: url(http://cbimg6.com/layouts/08/08/31033ad.jpg) repeat-x; z-index: -1;}

b {font-weight: bold; color: #ca8282;}
u {text-decoration: underline; font-family: arial; font-size: 8pt; color: #d17fa4; border-bottom: 1px dotted #ffe6ac;}
i {text-decoration: none; color: #c8bf81; font-style: italic; font-weight: bold;}

body {
background-color:#e08782;
margin:0px;
background-image:url(http://cbimg6.com/layouts/08/08/31033ae.jpg); background-repeat:repeat-y;
font-family: tahoma, arial; font-size: 8pt; line-height: 14px;}

#content {width:385px; position:absolute; left:47px; top:300px;  _top: 310px; color:#a78d8d; text-align: justify; line-height: 14px;}

#navi {width:160px; position:absolute; left:439px; _left: 424px; top:120px; color:#6fca6f; text-align: center; z-index: 3;}

h1 { display: block; font-size: 13pt; font-family: "palatino linotype"; text-align: center; color: white; background-color: #c0e1a3; height: 15px; margin-top: 1px; margin-bottom: -4px; _margin-bottom: -12px;}

</style></head>
<div id="topbg"></div>
<BODY BGCOLOR="#ffd985" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD>
			<IMG SRC="http://cbimg6.com/layouts/08/08/31033aa.jpg" WIDTH=450 HEIGHT=100 ALT=""" BORDER="0" style="position: absolute; top: 0px; left: 0px;"></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="http://cbimg6.com/layouts/08/08/31033ab.jpg" WIDTH=450 HEIGHT=100 ALT="" BORDER="0" style="position: absolute; top: 100px; left: 0px; z-index: 1;"></TD>
	</TR>
<TR>
		<TD>
			<IMG SRC="http://cbimg6.com/layouts/08/08/31033ac.jpg" WIDTH=450 HEIGHT=100 ALT="" BORDER="0" style="position: absolute; top: 200px; left: 0px; z-index: 2;" usemap="#Map" ></TD>
	</TR>
		
</TABLE>
<map name="Map">
  <area shape="rect" coords="43,85,175,99" href="http://dreamgurl36.createblog.com" target="_blank" alt="Designed & Coded by dreamgurl36" title="Designed & Coded by dreamgurl36">
</map>
<body>

<p><h1>About This Layout</h1>

<p>So... lately I've been wanting to make new styles of layout, and this is the result: a layout <i>thinner</i> than what I usually make (mind you, I never like skinny layouts), a completely different style of <i>navigation</i>, and then I tried something new with an additional <b>top background</b> tiled horizontally. I added that because the layout was small and thus left a big empty space to the right that I just couldn't ignore... plus, I have widescreen. Moreover, the <u>banner</u> is also more simplistic with only some coloring adjustments. The over all color scheme is also classy (in my opinion anyway, >.<), which mainly highlights the contrast between that lovely shade of pink (I'm particularly font of it ♥) and the leaf green. Yellow and dark brown also matches beautifully well with the pink. :) All in all, I like this layout a lot. :) I put a lot of work into coding this one.

<p>Anyway, enough of all that stuff~ This is where your <i>main content</i> will go (obviously). Fill up as much or as little as you want! XD It's all up to you! Please <b>do not</b> alter the images/layout in any way. And it goes without saying: <u>do NOT remove the credit</u>. I mean, I've taken the ultra long time to code this, so the least you can do is leave the credit there. But of course, you <b>may</b> edit the navigation, contents, and such to suit your website needs. ^^ I think you'd need some basic knowledge of <i>html and css</i> to be able to fully make use of this layout. But it's nothing too complicated. There are plenty of tutorials on the web, and even some on <a href="http://www.createblog.com" target="_blank">CreateBlog</a> too.

<p>This layout was tested in <u>both</u> Internet Explorer and Firefox. In Firefox, the font of the text will be slightly different. Other than that, it works perfectly fine.... <b>compatible in FF and IE.</b> (I know there are some little glitches when you view the layout in IE (hint: the flickering nav), but it's beyond my patience and skills to repair them all. -__-") Therefore, it's best viewed in <u>Mozilla Firefox</u>. Oh, and it works in <i>all resolutions</i> too. :) Hope you enjoy it!</p>

<p><center><b>bold text</b>, <i>italic text</i>, <u>underlined text</u>, <a href="#">a link</a></center>

<p><h1>Your Header Title</h1>
<p>content content content content content content content content content content content content content content content content content content content content content content content content  content content content content content content content content content content content content</p>

<p>content content content content content content content content content content content content content content content content content content content content content content content content  content content content content content content content content content content content content</p>

</div>

<ul class="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#">About Me</a></li>
	<li><a href="#">Content</a></li>
	<li><a href="#">Guestbook</a></li>
	<li><a href="#">Links</a></li>
</ul>
</div>

</body>
</html>

Layout Comments

Showing latest 2 of 2 comments

where is the template html located?? i can't get this onto my profile..I LOVE THIS LAYOUT!!

By smiley-face on Oct 9, 2008 9:35 pm

Nice colors. I like the navi.

By tokyo-rose on Aug 31, 2008 9:36 pm

Layout Details

Designer	dreamgurl36
Submitted on	Aug 31, 2008
Page views	6,728
Favorites	46
Comments	2
Reviewer	schizo
Approved on	Aug 31, 2008

Essence of Spring

Designer's Comments

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates