FFVII: Reunion

Designer's Comments

Look carefully for specific instructions

Best viewed in IE.

Layout Code

Copy and paste to Template HTML

<head>
<title>____x//Final Fantasy VII: Reunion</title>
<style>
#header{display:none;}
body {background-color: #272727;background-image: url('http://cbimg9.com/layouts/08/06/28765ab.jpg'); background-repeat:repeat-y;}
div {color: #FFFFFF; font-family: geogia; font-size: 11px;}

h1, h2{text-align:left;color:#8B8B8B; font:15pt times;font-weight:normal;border-bottom:1px dashed #4D4D4D;margin-top:0px;margin-bottom:2px; padding-left:10px;}
h2 {border-bottom:1px dashed #000000;}
a:link,a:visited,a:active,a:hover{color:#CECECE;font:8pt Verdana; text-decoration: none;}
a.nav:link,a.nav:visited,a.nav:active,a.nav:hover{color:#CECECE;font:7pt Verdana; text-decoration: none; width:80px; text-align:center; background: #3B3B3B; border: 1px #000000 solid; padding: 2px; margin-bottom: 2px;}
a:hover{cursor: crosshair;}
a.nav:hover{background:#8D8D8D;}

#fut {position: absolute; top: 0px; left: 100px;}
#sus {position: absolute; top: 500px; left: 385px; width: 425px; overflow: auto; padding-bottom: 20px;}
#nova {position: absolute; top: 500px; left: 204px; width: 175px; overflow: hidden;}
b {color:#FFFFFF;}
</style>

</head>

<div id="nova">
<h2>Content Title Here</h2>
You can erase and other stuff in here if you want.<br><br>
<b>About the layout</b><br>
The layout is called Reunion because I found it like that xP. Images came from a book about, of course, Final Fantasy VII:AC. I got Tifa and Cloud from there.
The other images, came from the movie by screenshots. The text in the layout is from a song called Gekidou by UVERworld, one of my favorite JPN band and Crawl by Veltpunch.<h2>Navigation</h2><center><p>

<a href="#" class="nav">Link</a> 
<a href="#" class="nav">Link</a> 
<a href="#" class="nav">Link</a> 
<a href="#" class="nav">Link</a> 
<a href="#" class="nav">Link</a> 
<a href="#" class="nav">Link</a> 
<a href="#" class="nav">Link</a> 
<a href="#" class="nav">Link</a> 
<a href="#" class="nav">Link</a> 
<a href="#" class="nav">Link</a>

</p></center>
<h2>Credits</h2>
Layout by: <a href="http://twiztedxhunter.createblog.com/">twiztedxhunter</a><br>
images: <a href="http://www.bubbleys.net/screenshots/index.php">1</a> & <a href="http://gallery.digik.net/">2</a><br>
Resources: <a href="http://hybrid-genesis.com">1</a>

</div>
<div id="sus">

<h1>Content Title Here.</h1>
<a href="#">Link</a> <b>bold</b> <s>strike</s> <u>underline tha</u> <i>italics</i>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur aliquam 
mauris vel lectus facilisis facilisis. Aliquam vel sapien ut enim sagittis 
pellentesque. Etiam volutpat lectus ac velit. Aenean vel sapien. Duis at enim. 
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
himenaeos. Sed purus lorem, scelerisque a, facilisis quis, porttitor quis, 
magna. Curabitur sit amet erat. Vestibulum elementum nisi at metus. Curabitur 
sed tortor id velit venenatis posuere. </P>
<P>Vestibulum venenatis. Cras et dui. Morbi nec elit ut enim tristique commodo. 
Fusce vestibulum condimentum justo. Duis luctus, velit sed feugiat gravida, 
velit neque venenatis leo, sed elementum lacus turpis nec nisi. Nullam eget 
erat. Nunc fermentum. Vestibulum aliquet interdum eros. Aenean libero. Maecenas 
felis. Pellentesque tempor dolor non pede. Sed bibendum consequat urna. Proin 
scelerisque malesuada metus. Aliquam laoreet, ante at sollicitudin porttitor, 
quam sem lacinia nibh, non aliquet dolor nibh pulvinar nunc. </P>
<P>Phasellus placerat. Praesent venenatis faucibus nunc. Curabitur vulputate, 
lectus id pretium malesuada, mauris eros malesuada nibh, ut fringilla odio 
tortor non nunc. Pellentesque at dui. In magna arcu, mollis quis, suscipit 
mollis, lobortis non, nunc. Nunc facilisis nibh bibendum tortor. Nullam in erat 
quis risus tincidunt scelerisque. Duis bibendum nisi eu nisl. Curabitur iaculis 
eros eget ligula. Aliquam convallis. Cras nulla odio, placerat ac, ornare sit 
amet, aliquam ut, lectus. Quisque nisl urna, pellentesque aliquam, rutrum 
gravida, ultricies pretium, nibh. Fusce eu nulla. Donec vestibulum, neque eget 
interdum vehicula, arcu nulla tincidunt urna, eget porttitor dolor mauris non 
nibh. Proin elementum leo vel diam. Nam malesuada, sapien sed porttitor mollis, 
eros libero feugiat enim, ac tempor mi erat vitae tellus. Proin tortor. </P>
<P>Quisque in quam. Donec quis nisi. Fusce erat. Fusce rutrum, ipsum sit amet 
adipiscing adipiscing, arcu ante gravida purus, posuere gravida tortor metus ac 
magna. Integer scelerisque fringilla magna. Etiam id lectus ut leo adipiscing 
fermentum. Etiam vestibulum. Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Nulla congue justo eget erat. Fusce fringilla dui non elit. Etiam ultrices 
lobortis eros. Morbi risus. Suspendisse malesuada tincidunt neque. Nam iaculis 
imperdiet dui. Nulla nec massa. Integer ultricies, tortor eu cursus bibendum, 
lectus orci pretium sem, lobortis ornare nunc ante non nibh. Nam lobortis. 
Vivamus metus nulla, vestibulum id, sodales in, auctor non, mauris. Phasellus in 
augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </P>
<P>Mauris vestibulum semper purus. Vivamus at felis. Sed vitae urna. Morbi ac 
pede. Fusce elementum massa ac ligula. Fusce nec dolor et sapien tempus 
interdum. Donec pharetra, lectus at gravida eleifend, felis enim luctus mi, ac 
cursus lorem tellus id justo. Nam quis felis eget magna semper volutpat. 
Praesent convallis diam a pede. Nam a elit. Pellentesque sit amet pede. Aliquam 
molestie iaculis libero. Aliquam sodales. Nulla eu neque vitae nisi placerat 
bibendum. Nunc convallis feugiat quam. In ante. Suspendisse condimentum, nisl 
vel pretium scelerisque, pede nulla lacinia orci, eget molestie tellus felis nec 
eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
inceptos himenaeos. Nullam vestibulum mi at lacus. Integer nibh turpis, 
malesuada sed, rutrum a, semper eget, risus. </P></DIV>