Hanabi (Fireworks)

Designer's Comments

Look carefully for specific instructions

There's comments throughout the coding that should help you a bit, although basic HTML/CSS know-how will certainly help you.

Layout Code

Copy and paste to Template HTML

Help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>rhythmsicle -> Hanabi [Fireworks]</title>
<meta http-equiv="imagetoolbar" content="false" />

<div id="content">
<h1>Irashaimase!</h1>
<p class="basic">This is Reili's layout, entitled <i>Kanashii Hanabi</i>! It's simple, easy to use, and it has a pretty girl on it. What more do you want from me?! -.-U The div, id'd "content", is where you put stuff. 'kay? &the sidebar is where the sidebar-y stuff goes, naturally. Don't touch the credits in the sidebar/footer! It <b>tells</b> you where to stop editing, so stop there.</p><br>

<center><i>fireworks aren't so great<br>when you're all alone<br>summer is lonely<br>when there's no one around<br>the dying fireworks<br>remind me of what's not there</i><br>(text of the image to your left)</center>

<h1>Bunnies can kill you.</h1>
<p class="basic">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer dignissim. Nam adipiscing. Fusce fringilla enim et diam. Donec quam. Curabitur fringilla magna eget est. Maecenas elementum imperdiet ipsum. Ut pellentesque scelerisque arcu. Etiam ornare arcu a purus. Praesent quis lorem. Proin at lacus in nisi fermentum consequat. Vestibulum volutpat semper dui. Cras euismod purus nec ante.</p>

<p class="basic">Ut ut leo faucibus risus sollicitudin ultricies. Phasellus ornare enim id nulla. Praesent gravida mi. Nunc fermentum nunc vitae leo. In sodales, ligula at lacinia viverra, lacus massa placerat massa, sit amet molestie risus lectus sit amet nibh. Fusce sollicitudin. Integer fermentum fermentum diam. Morbi eu augue. In quis nisi vitae felis dictum auctor. Duis quam lorem, dignissim sed, adipiscing sit amet, eleifend varius, lorem. Maecenas non nunc. Praesent pede. Donec lorem. Sed nec diam. Vivamus dignissim vehicula dui.</p>

<p class="basic">Mauris consequat dui quis dui. Donec fringilla lectus ac lacus. In hac habitasse platea dictumst. Maecenas sapien libero, feugiat eget, facilisis ut, vehicula vitae, odio. Maecenas sem odio, laoreet at, fringilla ultrices, tincidunt eget, odio. Maecenas libero. Sed suscipit odio sit amet lacus. Mauris sed eros. Nullam nulla. Nullam pretium. Quisque sollicitudin, eros in ullamcorper sollicitudin, turpis sapien gravida enim, quis molestie nunc sapien nec metus.</p>

<p class="basic">Praesent ut quam. Duis aliquet, erat ut hendrerit porta, leo sapien lobortis lectus, eu blandit erat lacus quis quam. Quisque libero enim, consectetuer non, blandit sed, vestibulum non, nulla. Aliquam nonummy, neque nec molestie ullamcorper, orci nulla lacinia dolor, vel suscipit metus risus sit amet tortor. Nam sagittis tellus sed ipsum. Etiam vitae lectus. Integer non turpis. Proin ut neque fermentum ipsum tristique consectetuer. Pellentesque tortor libero, sagittis ut, dapibus nec, imperdiet eget, orci. Aliquam erat volutpat. Nunc ac est. Vivamus lectus.</p>

<p class="basic">Phasellus enim lorem, adipiscing id, dignissim a, dignissim sit amet, libero. Vestibulum eget justo egestas sem sagittis ullamcorper. Mauris id neque vestibulum enim viverra fermentum. Vestibulum malesuada. In blandit, lectus a porta ultrices, tellus metus gravida neque, vitae ultricies lacus eros sed nulla. Vivamus sit amet risus ut erat fringilla lacinia. Maecenas porttitor, ipsum eu malesuada euismod, magna ligula laoreet pede, in imperdiet quam erat sit amet odio. Mauris venenatis pede at nulla. Aliquam non sapien. Integer dapibus velit vitae lorem bibendum tempus. Aliquam erat volutpat. Nullam mattis, nisl nec pulvinar adipiscing, sem lectus tristique lorem, eget elementum orci arcu vitae justo. Aliquam erat lectus, faucibus id, convallis id, lobortis nec, enim. Pellentesque elementum. Cras arcu.</p>

<p class="basic">Nullam porttitor. Proin venenatis blandit purus. Aenean laoreet bibendum metus. Curabitur gravida elementum magna. Nulla pede nunc, sagittis et, tempus mollis, euismod et, odio. Maecenas ac magna a elit lobortis pulvinar. Aliquam vitae lacus quis purus pharetra sodales. Suspendisse leo arcu, dictum et, bibendum eleifend, sodales nec, tellus. Sed consectetuer turpis eleifend eros. Quisque et arcu sed quam lobortis venenatis. Cras vel turpis. Donec et justo. Nullam non justo dapibus arcu tristique commodo. Nulla turpis tortor, scelerisque eget, consequat ut, eleifend nec, nibh. Mauris odio. Aenean massa urna, adipiscing sed, consequat eget, malesuada at, purus.</p>

<p class="basic">Nullam sed diam. Nullam dui diam, ullamcorper non, dignissim id, porta a, leo. Suspendisse nonummy elit bibendum velit. Nullam feugiat. In dolor ante, dapibus quis, commodo ut, varius id, diam. Ut a lacus eu diam euismod sodales. Nullam feugiat fringilla erat. Ut diam. Nullam non neque eu dui lacinia molestie. In hac habitasse platea dictumst. Nunc adipiscing tortor nec erat. Nunc lectus ante, porta at, tristique nec, fermentum ac, nunc. Donec dictum. Curabitur vitae erat et nisi varius placerat. Nullam quis mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam eget felis sit amet lectus vulputate consectetuer. Duis lacinia purus id lectus. Suspendisse placerat, libero quis facilisis semper, urna justo aliquam mauris, ac semper elit nulla et nulla.</p>

<p class="basic">Aliquam luctus turpis eget risus. Nunc ipsum ante, aliquam eu, pretium sit amet, feugiat at, arcu. Sed metus. Nulla diam. Duis vel ligula a sapien mattis tincidunt. In condimentum rhoncus eros. Nullam eleifend, mi vitae aliquam egestas, risus ante facilisis nunc, et dapibus tortor orci et eros. Maecenas odio. Sed rhoncus placerat ligula. Morbi lobortis felis vel pede. Integer quis diam et justo adipiscing tempus. Mauris ac felis eget magna adipiscing elementum. Quisque eu est at mauris condimentum ultricies. Nunc justo. Fusce sem. Pellentesque eget nunc.</p>

<p class="basic">Suspendisse pede. Cras gravida nulla sit amet sapien elementum dapibus. Etiam ut sem. Sed id mauris. Praesent elementum suscipit leo. Suspendisse in erat quis tortor blandit vulputate. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc luctus sapien. Quisque ante pede, faucibus mattis, rhoncus vel, tempor non, metus. Curabitur accumsan luctus erat. Donec auctor turpis a purus. Sed egestas mauris ut turpis. Proin pharetra. Aliquam sagittis varius augue. Morbi quis purus et massa viverra malesuada. Etiam a eros quis tortor elementum auctor. Praesent ornare, arcu eu interdum fringilla, diam tortor pellentesque dolor, ut facilisis lacus metus id elit. Phasellus vitae purus sit amet quam fringilla dignissim.</p>

<hr />
<p class="footer">Designed and coded by <a href="http://blewmyallowanceonmanga.net/">Reili</a>.</p>
</div>

<div id="sidebar">
<h2>Hello!</h2>
<p class="basic">Write a bit about yourself here, 'cause that's what this section is for! ^_^ It can be funny, strange, boring... Whatever you want to say about yourself goes here!</p>
<h2>Navigate!</h2>
<ul class="navi">
<li><a href="#">Text</a>: description</li>
<li><a href="#">Text</a>: description</li>
<li><a href="#">Text</a>: description</li>
<li><a href="#">Text</a>: description</li>
</ul>
<h2>Creditation!</h2>

<ul class="navi">
<li><a href="http://blewmyallowanceonmanga.net/">Reili</a>: design and coding</li>
<li><a href="http://www.aethereality.net/">Aethereality</a>: image source</li>
<li><a href="http://hybrid-genesis.net/">Hybrid Genesis</a>: textures</li>
</ul>
</div>
</body>
</html>

Layout Comments

Showing latest 10 of 10 comments

It's very pretty, and resizes *okay* compared to lots I've seen up here.

However, if you're smaller than 1024x, the sidebar creates a float drop, and it looks dumb when the sidebar is below the text. Try absolute positioning with a flexible width, perhaps? (e.g width:XX%;)

Love what you did with the girl, it looks so pretty and.. I don't know.. sparkly, heavenly.

By sarahwynne on Jun 7, 2007 1:18 pm

graphics are great

By Chicago on May 14, 2007 10:03 pm

Really like this, I love the little graphic and I like how the content is set up ^Yea firefox seems to have a weird alignment problem with Reili's layouts.

By Insurmountable on Mar 11, 2007 1:25 pm

QUOTEpoised' date='Jan 21 2007, 11:24 PM' post='2427253'] Hm... is that Latin in the text? Haha. It's dummy text. One thing I don't like about the image is that it doesn't blend into the background. The cut-out edges sort

By shadowfax on Jan 21, 2007 11:29 pm

Hm... is that Latin in the text? Haha.

By expoised on Jan 21, 2007 11:24 pm

QUOTE(miceylulu @ Jan 15 2007, 2:45 PM) [snapback]2417119[/snapback]I really don't like this one. It's too simple and for me the banner is behind the text, so, eehhhh...What do you mean "The banner is behind the text"? Anyways,

By arcanum on Jan 17, 2007 12:27 am