Spending lovely Rainy Day, lailailaa!

Otsikko

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at nisl neque, iaculis tristique elit. Praesent in ligula urna. Donec gravida erat ac urna iaculis sollicitudin. Morbi viverra risus quis nisi hendrerit at suscipit nisi tristique. Nam iaculis pulvinar arcu id gravida. Aliquam libero nunc, faucibus quis facilisis eget, sodales vitae felis. In hac habitasse platea dictumst. Nullam vel tortor vel lorem cursus euismod. Donec vel nisi quis ante porttitor bibendum non eu purus. Nam mattis fringilla tristique. Pellentesque nec hendrerit augue.

Maecenas bibendum ipsum nec elit consequat elementum. Fusce quis neque sit amet sem convallis cursus. Integer rhoncus, diam eget porttitor rhoncus, arcu nisl hendrerit lorem, in ullamcorper nunc velit in dui. Integer a quam magna. Pellentesque aliquet felis nec massa scelerisque dapibus. Proin eu nulla sit amet ante dignissim pretium. Proin eu purus id velit rutrum laoreet. Duis non dolor et urna facilisis blandit. Vestibulum interdum arcu quis turpis eleifend sit amet porta nisl malesuada. Integer quis arcu eget lorem feugiat porta ac dictum tellus. Maecenas molestie, ipsum vel pulvinar iaculis, arcu dui dictum orci, ac fringilla eros erat nec velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Toinen otsikko

Sed faucibus elementum viverra. Mauris eleifend aliquam magna et tempus. Maecenas imperdiet est sed leo facilisis imperdiet. Curabitur elit nunc, rutrum non dignissim id, commodo quis dolor. Aliquam congue, leo pellentesque hendrerit imperdiet, nulla nisl porta metus, vel hendrerit nibh neque ut lacus. Donec consequat neque a tellus sollicitudin ultricies tristique enim dignissim. Maecenas diam tellus, faucibus lacinia volutpat non, egestas ac augue. Phasellus sit amet erat sapien, nec aliquet ante. Praesent faucibus libero vitae nisi hendrerit accumsan. Vestibulum ligula nunc, cursus condimentum congue elementum, commodo quis lorem. Morbi semper justo ornare mauris semper in pharetra elit rhoncus. Cras neque mauris, aliquet sed mattis interdum, fermentum ut nunc. Cras fringilla justo eget dolor varius a tristique lacus pharetra.

Asennus

IMG:

rainy.jpg | rainybg.jpg

CSS:

Name your css-folder rainy.css.

body { background: url(rainybg.jpg) repeat-x #000 fixed; color: white; font-family: Georgia, Serif; font-size: 12px; word-spacing: 2px; letter-spacing: 0.02em; } a:link, a:visited { text-decoration: none; color: #313131; } a:hover { color: #ADD8E6; } b {color: #459AE6;} i {color: #ADD8E6;} u { text-decoration: none; border-bottom: 1px solid #277AC5; } h1 { font-family: Arial, Helvetica, Sans-serif; font-size: 35px; text-transform: lowercase; letter-spacing: -2px; } h2 { font-family: Arial, Helvetica, Sans-serif; font-size: 25px; font-weight: normal; font-style: italic; text-transform: lowercase; letter-spacing: -2px; } h2:before { content: "["; font-weight: bold; font-style: normal; color: #ADD8E6; } h2:after { content: "]"; font-weight: bold; font-style: normal; color: #ADD8E6; } h3 { font-family: Arial, Helvetica, Sans-serif; font-size: 20px; font-weight: normal; font-style: italic; text-transform: lowercase; letter-spacing: -2px; padding-left: 30px; } h3:before { content: "["; font-style: normal; color: #ADD8E6; } h3:after { content: "]"; font-style: normal; color: #ADD8E6; } #text { position: absolute; top: 20px; left: 50px; width: 640px; text-align: justify; padding-bottom: 50px; } #text .header { background: url(rainy.jpg) no-repeat; height: 381px; } #text p { color: #313131; } #text p:hover { color: white; } #text .copyt { text-align: center; font-size: 10px; padding-top: 10px; } #nav { position: fixed; top: 0; left: 700px; width: 270px; background: #0f0f0f; padding: 40px 6px 10px; min-height: 200px; text-align: justify; font-size: 11px; } #nav .left {margin-right: 5px; float: left;} .navi { font-family: Arial, Helvetica, Sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } a:link.navi, a:visited.navi { text-decoration: none; color: grey; } a:hover.navi { color: #ADD8E6; border-bottom: 1px solid #277AC5; } input, select, textarea { border: 1px solid #ADD8E6A; background: transparent; font-family: Century gothic, Tresbuchet MS; font-size: 10px; color: #313131; padding: 10px; } input:hover, select:hover, textarea:hover { color: white; }

HTML:

<!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>Rainy day</title> <link href="rainy.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="text"> <h1> <font color="#277AC5">Spending</font> <font color="#459AE6">lovely</font> <font color="#ADD8E6">Rainy</font> Day, lailailaa! </h1> <div class="header"></div> <h2> Otsikko </h2> <p> <a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Etiam at nisl neque, iaculis tristique elit. Praesent in ligula urna. Donec gravida erat ac urna iaculis sollicitudin. Morbi viverra risus quis nisi hendrerit at suscipit nisi tristique. Nam iaculis pulvinar arcu id gravida. Aliquam libero nunc, faucibus quis facilisis eget, sodales vitae felis. In hac habitasse platea dictumst. Nullam vel tortor vel lorem cursus euismod. Donec vel nisi quis ante porttitor bibendum non eu purus. Nam mattis fringilla tristique. Pellentesque nec hendrerit augue. </p> <p> Maecenas bibendum ipsum nec elit consequat elementum. Fusce quis neque sit amet sem convallis cursus. Integer rhoncus, diam eget porttitor rhoncus, arcu nisl hendrerit lorem, in ullamcorper nunc velit in dui. Integer a quam magna. Pellentesque aliquet felis nec massa scelerisque dapibus. Proin eu nulla sit amet ante dignissim pretium. Proin eu purus id velit rutrum laoreet. Duis non dolor et urna facilisis blandit. Vestibulum interdum arcu quis turpis eleifend sit amet porta nisl malesuada. Integer quis arcu eget lorem feugiat porta ac dictum tellus. Maecenas molestie, ipsum vel pulvinar iaculis, arcu dui dictum orci, ac fringilla eros erat nec velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p> <h3> Toinen otsikko </h3> <p> Sed faucibus elementum viverra. Mauris eleifend aliquam magna et tempus. Maecenas imperdiet est sed leo facilisis imperdiet. Curabitur elit nunc, rutrum non dignissim id, commodo quis dolor. Aliquam congue, leo pellentesque hendrerit imperdiet, nulla nisl porta metus, vel hendrerit nibh neque ut lacus. Donec consequat neque a tellus sollicitudin ultricies tristique enim dignissim. Maecenas diam tellus, faucibus lacinia volutpat non, egestas ac augue. Phasellus sit amet erat sapien, nec aliquet ante. Praesent faucibus libero vitae nisi hendrerit accumsan. Vestibulum ligula nunc, cursus condimentum congue elementum, commodo quis lorem. Morbi semper justo ornare mauris semper in pharetra elit rhoncus. Cras neque mauris, aliquet sed mattis interdum, fermentum ut nunc. Cras fringilla justo eget dolor varius a tristique lacus pharetra. </p> <div class="copyt"> Layot ©<a href="http://tierran.net/dewymorning">Namuless</a> Image ©<a href="http://www.flickr.com/photos/the-nocturnal-weirdo/">The Nocturnal Weirdo</a> <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/deed.en">(license)</a> Pattern ©<a href="http://www.piccolecreazioni.com/velvetfactory/">Velvet Factory</a> </div> </div> <div id="nav"> <center> <a href="#" class="navi">home.</a> | <a href="#" class="navi">me.</a> | <a href="#" class="navi">contact.</a> | <a href="#" class="navi">extra.</a> <br /><br /> </center> <p> <img src="http://i835.photobucket.com/albums/zz275/nameless_X3/layots/50x50.jpg" class="left" border="0" /> <b>Your name</b> Chitting and chatting about you. You can add some affilates from here too or feel free to do whatever you want. Chitting and chatting about you. You can add some affilates from here too or feel free to do whatever you want. Chitting and chatting about you. You can add some affilates from here too or feel free to do whatever you want. Chitting and chatting about you. You can add some affilates from here too or feel free to do whatever you want. </p> <p> <a href="#">a link</a> <b>bold</b> <i>cursive</i> <u>underline</u> </p> </div> </body> </html>

home. | me. | contact. | extra.

Your name Chitting and chatting about you. You can add some affilates from here too or feel free to do whatever you want. Chitting and chatting about you. You can add some affilates from here too or feel free to do whatever you want. Chitting and chatting about you. You can add some affilates from here too or feel free to do whatever you want. Chitting and chatting about you. You can add some affilates from here too or feel free to do whatever you want.

a link bold cursive underline