Site's Title

Linkki Linkki Linkki Linkki Linkki Linkki

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempor tortor id ipsum lacinia sed dapibus est convallis. Duis in libero quam. Aliquam nunc enim, rutrum non venenatis vel, ultricies nec purus. Etiam blandit venenatis dui quis hendrerit. Mauris mauris ipsum, facilisis nec placerat ac, fermentum a magna. Curabitur commodo porta neque. Aenean vitae fringilla sem. Fusce laoreet ipsum neque. Quisque congue porta ante id viverra. Etiam dapibus nisi ut quam sodales placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque eu libero risus, ac sollicitudin justo.

Duis at libero

Duis at libero felis. Sed egestas bibendum massa et accumsan. Nam felis nisl, varius sit amet laoreet ac, eleifend in felis. Nullam condimentum est sit amet arcu vehicula interdum. Quisque quis dui ante. Mauris ac consequat nunc. Vestibulum at lacus vitae nunc lobortis interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut pretium dolor eget massa bibendum vel dictum tortor hendrerit. Fusce malesuada diam in urna suscipit vel malesuada lectus commodo. Fusce a ipsum sit amet dolor mattis vulputate.

Download

I m a g e s :

334.gif | mustabg-2.png | gazeimg.jpg

C S S :

Nimeä CSS-tiedostosi musta.css:ksi.

body { background: url(334.gif) repeat transparent fixed; font-family: Arial, Sans-serif; font-size: 12px; word-spacing: 4px; letter-spacing: 0.04em; } a:link { color: #41516A; letter-spacing: 1px; text-decoration: none; } a:visited { color: #41516A; letter-spacing: 1px; text-decoration: none; } a:hover { color: #442247; } B {color: #442247; font-family: Georgia, serif;} I {color: #41516A;} U { text-decoration: none; border-bottom: 1px solid #41516A; } h1, h2, h3, h4 { font-family: 'Century Gothic', Monospace; font-weight: normal; } h1 { font-size: 50px; text-align: right; margin: 0; letter-spacing: 4px; word-spacing: 1px; color: white; } h2 { font-size: 25px; text-align: center; letter-spacing: 2px; color: white; } h3 { font-size: 20px; text-align: center; letter-spacing: 1px; color: #CCCCCC; } h4 { font-size: 14px; letter-spacing: 1px; color: white; } h2:before, h4:before { content: "[ "; color: #AAA; } h2:after, h4:after { content: " ]"; color: #AAA; } #main { position: absolute; right: 25px; top: 0px; width: 650px; } #main .bg { background: url(mustabg-2.png) repeat fixed; padding: 20px 10px; padding-bottom: 50px; color: #dcdcdc; text-align: justify; } #main .navi { text-align: center; margin: 10px 0; } #main .image { background: url(gazeimg.jpg) no-repeat; height: 160px; } .copyt { text-align: center; font-size: 10px; padding-top: 10px; } #nav { position: fixed; top: 0px; right: 680px; width: 200px; background: url(mustabg-2.png) repeat; padding: 50px 10px 10px 10px; color: white; } .navi1 { padding: 5px 20px; text-decoration: none; font-family: 'Century Gothic', Monospace; font-weight: bold; font-size: 15px; text-transform: uppercase; letter-spacing: -1px; } a:link.navi1, a:visited.navi1 { background: #313131; color: #131313; } a:hover.navi1 { background: #131313; color: black; } .navi2 { display: block; width: 190px; padding: 3px 0 3px 10px; text-decoration: none; font-family: 'Century Gothic', Monospace; font-size: 13px; } a:link.navi2, a:visited.navi2 { background: #484848; border-bottom: 3px solid #313131; border-right: 3px solid #131313; color: #131313; margin-bottom: 2px; } a:hover.navi2 { background: #505050; letter-spacing: 1px; }

H T M L :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fi" xml:lang="fi"> <head> <title>O T S I K K O</title> <link href="musta.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="nav"> <h4>Navigation</h4> <a href="#" class="navi2">Linkki</a> <a href="#" class="navi2">Linkki</a> <h4>Navigation</h4> <a href="#" class="navi2">Linkki</a> <a href="#" class="navi2">Linkki</a> <a href="#" class="navi2">Linkki</a> <a href="#" class="navi2">Linkki</a> </div> <div id="main"> <div class="bg"> <h1>Site's Title</h1> <div class="navi"> <a href="#" class="navi1">Linkki</a> <a href="#" class="navi1">Linkki</a> <a href="#" class="navi1">Linkki</a> <a href="#" class="navi1">Linkki</a> <a href="#" class="navi1">Linkki</a> <a href="#" class="navi1">Linkki</a> </div> <div class="image"></div> <h2>Lorem ipsum</h2> <p> <a href="#">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempor tortor id ipsum lacinia sed dapibus est convallis. Duis in libero quam. Aliquam nunc enim, rutrum non venenatis vel, ultricies nec purus. Etiam blandit venenatis dui quis hendrerit. Mauris mauris ipsum, facilisis nec placerat ac, fermentum a magna. Curabitur commodo porta neque. Aenean vitae fringilla sem. Fusce laoreet ipsum neque. Quisque congue porta ante id viverra. Etiam dapibus nisi ut quam sodales placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque eu libero risus, ac sollicitudin justo. </p> <h3>Duis at libero</h3> <p> <b>Duis</b> <i>at</i> <u>libero</u> felis. Sed egestas bibendum massa et accumsan. Nam felis nisl, varius sit amet laoreet ac, eleifend in felis. Nullam condimentum est sit amet arcu vehicula interdum. Quisque quis dui ante. Mauris ac consequat nunc. Vestibulum at lacus vitae nunc lobortis interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut pretium dolor eget massa bibendum vel dictum tortor hendrerit. Fusce malesuada diam in urna suscipit vel malesuada lectus commodo. Fusce a ipsum sit amet dolor mattis vulputate. </p> <div class="copyt"> Layot ©<a href="http://tierran.net/dewymorning">Namuless</a> Image ©<a href="http://tenshirakuen.te.ohost.de/4images/">Tenshi Rakuen</a> Graphics ©<a href="http://fire-graphics.bytelabs.org/">Fire Graphics</a> & <a href="http://www.backgroundlabs.com/">Background Labs</a> </div> </div> </div> </body> </html>