Heavenly Innocence

Designer's Comments

Look carefully for specific instructions

This layout isn't what it looks like in the preview... it's fixed, meaning the whole page doesn't scroll and the empty white space below won't be visible.(in 1024 X 768)

So.. I decided to make a layout that is different from my usual style, and this is the result. ^^ This layout features a character from Arina Tanemura's arts.

Please do not alter the images in any way and leave the credits as they are.

Edit the navigation/content/etc as you want.

Tested in Firefox and Internet Explorer.

Should work in most screen resolutions.

Enjoy!

Layout Code

Copy and paste to Template HTML

Help

<html>
<head>
<title>Heavenly Innocence</title>

<style>

.head { display: block;
	background-color: #ffe6cc;
	border-top: 1px dashed #ffffff; 
	border-bottom: 1px dashed #fbffe4;
	font-size: 18px;
	font-style: italic;
	height: 24px;
	text-align: left;
	letter-spacing: 2px;
	color: #664633;
	margin: 0;
	padding-right: 0px;
	padding-top: 0px;
	margin-top: 15px;

</style>
<style>

.menu {
	position: absolute;
	left: 60px;
	top: 15px;
	margin: 0px;
	padding: 0px;
	color: #000;
	list-style: none;
}
.menu li {
	padding: 9px 9px 0px 0px;
	margin: 0px;
}
.menu li a, .menu li a:visited {
	margin: 0px;
	padding: 3px 3px;
	color: #632b00;
	display: block;
	border: #e2955a 1px solid;
	background: #ebc6a2;
	text-decoration: none;
}
.menu li a:hover {
	color: #e63400;
	background: #ffe2cc;
	border: #e05a00 1px solid;
}

.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
                       
</style>

</head>

<body>

<div style="position: absolute; left: 280px; top: 90px; width: 410px; height: 380px; overflow: auto; scrollbar-track-color:#ffe6cc; scrollbar-face-color:#fff3e6";>
<span class="head">Header Title Goes Here</span>
<p>This is where your main content will go. Fill up as much or as little as you want! XD It's all up to you!</p>

<p>Please do not alter the images/layout in any way. And it goes without saying.... do not remove the credit. 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 may edit the navigation, contents, and such to suit your website needs. ^^

<p>I think you'd need some basic knowledge of html 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 both Internet Explorer and Firefox. In Firefox, the font of the text will be slightly different. Other than that, it works perfectly fine.... compatible in both browsers. ^^

<p>Oh, and it works in all resolutions too. :) Hope you enjoy it!

<p><span class="head">Header Title Goes Here</span></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</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</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="#">Link Here</a></li>
	<li><a href="#">Link Here</a></li>
	<li><a href="#">Blah Blah</a></li>
	<li><a href="#">Blah Blah</a></li>
	<li><a href="http://dreamgurl36.createblog.com" target="_blank">Credit</a></li>
</ul>
<div style="position: absolute; left: 50px; top: 528px; width: 410px; height: 380px;">

Layout By : <a href="http://dreamgurl36.createblog.com" target="_blank">dreamgurl36</a><br>
Image From: <a href="http://www.aethereality.net" target="_blank">Aethereality</a>

</div>
<div id="footer">

</div>

</body>
</html>

Layout Comments

Showing latest 6 of 6 comments

Nice! I like the image. The layout is pretty simple, but it's still good.

By tokyo-rose on Mar 19, 2008 9:20 pm

I love this layout but there's a small problem with part of the image. Part of her face around the eye area just shows up as a red x no matter what I do.

By Jadedmind on Jan 7, 2008 12:47 pm