Talvinen arabilei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget odio nec ante facilisis venenatis et a turpis. Donec at mi libero, vitae iaculis eros. Nullam lacus nisi, convallis ut mattis quis, scelerisque rhoncus sem. Duis et sem elit, ac convallis nulla. Donec vel nisi tincidunt nibh dignissim blandit vel a magna. Cras eu mi sit amet ligula rutrum euismod. Vivamus vel purus eu arcu dapibus suscipit. Aenean tincidunt, erat vitae pretium volutpat, quam nulla varius purus, vitae lacinia nisi nisl et felis. Praesent eget tortor nulla, et aliquam lorem. Mauris viverra mi nulla, ut sodales leo. Integer auctor bibendum libero eu dignissim.

Donec vel sapien nec lectus dapibus auctor ut sed magna. Donec aliquet volutpat vestibulum. Phasellus a augue at mauris laoreet dapibus in a lacus. Sed tempus pretium tortor, at euismod turpis gravida ac. Suspendisse blandit orci vel lectus fringilla lobortis. In semper dignissim gravida. Aliquam gravida scelerisque ante. Sed pharetra dictum vulputate. Sed sed euismod eros. Donec aliquet, lorem id elementum aliquet, dui massa lobortis massa, ut pharetra purus ligula vel quam. Proin non quam ac velit semper ornare. Donec vitae velit odio, at rutrum nulla. Donec nec leo quis lorem tristique molestie. Proin arcu orci, porttitor ac lobortis ut, semper quis quam. Maecenas a laoreet mi.

Quisque eu justo pharetra turpis eleifend congue. Nulla id orci enim, eget feugiat neque. Aenean lacinia dolor at justo pharetra facilisis. Integer mi velit, ultricies auctor gravida vel, sagittis eget enim. Donec ullamcorper iaculis lacinia. In hac habitasse platea dictumst. Maecenas neque tellus, tincidunt et dignissim a, sagittis sed est. Cras blandit tristique gravida. Duis gravida cursus egestas. Ut molestie blandit massa in malesuada.

Updates etc.

Sed facilisis mauris augue, non mattis massa. Integer auctor hendrerit nisl, ac hendrerit neque suscipit ut. Aliquam volutpat turpis sit amet augue blandit auctor a quis sem. Praesent imperdiet placerat justo, eu tristique nulla sagittis nec. Donec rutrum, leo id pretium feugiat, massa urna facilisis quam, commodo consequat risus ipsum vel leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget est at nunc pellentesque suscipit. Aliquam a orci in mauris feugiat rutrum non non tellus. Vestibulum eget orci in velit faucibus cursus. Proin ac ante at nunc pretium gravida a hendrerit justo. Vestibulum eu nunc in tortor aliquam rutrum ac eu neque. Quisque metus lorem, tempor ac auctor eu, posuere eu mauris. Fusce sed augue ut erat tincidunt porta.

Asennus

IMG:

arabitalvita.jpg | arabitalvi.jpg | arabitalvita2.jpg

CSS:

Name your CSS-folder arabi.css.

body {  
	background: url('arabitalvita.jpg') repeat-y 200px 0 #D9DBDA;  
	font-family: Arial, Sans-serif;  
	font-size: 12px;  
	color: #313131;
}

a:link, a:visited {  
	color: #A8A4A5;  
	text-decoration: none;
}

A:hover {color: #D9DBDA;}

h1 {  
	font-family: Georgia, sans-serif;  
	font-size: 20px;  
	font-weight: normal;  
	text-align: center;
}

h2 {  
	font-family: Georgia, sans-serif;  
	font-size: 17px;  
	font-weight: normal;   
	text-align: center;
}

#kuva {  
	position: absolute;  
	top: 0;  
	left: 200px;  
	width: 860px;  
	height: 600px;  
	background: url('arabitalvi.jpg') no-repeat;
}

#tausta {  
	position: absolute;  
	top: 203px;  
	left: 0;  
	width: 100%;  
	height: 279px;  
	background: url('arabitalvita2.jpg') repeat-x;
}

#otsikko {  
	position: absolute;  
	top: 40px;  
	left: 275px;  
	width: 700px;
}
#otsikko h1 {  
	text-transform: uppercase;  
	font-family: 'Century Gothic', Monospace;  
	font-size: 40px;  
	font-weight: normal;  
	color: #EAE9EE;  
	text-align: left;
}

#linkit {  
	position: absolute; 
	top: 145px;  
	left: 275px;  
	width: 700px;  
	text-align: center;
}

#linkit A:link {  
	background: #333532;  
	padding: 6px;  
	padding-top: 10px;  
	padding-left: 15px;  
	padding-right: 15px;  
	color: #EAE9EE;  
	border-top: 2px solid #FFFFFF;  
	border-right: 2px solid #FFFFFF;  
	border-left: 2px solid #FFFFFF;  
	text-decoration: none;
}

#linkit A:visited {  
	background: #333532;  
	padding: 6px;  
	padding-top: 10px;  
	padding-left: 15px;  
	padding-right: 15px;  
	color: #EAE9EE;  
	border-top: 2px solid #FFFFFF;  
	border-right: 2px solid #FFFFFF;  
	border-left: 2px solid #FFFFFF;  	text-decoration: none;
}

#linkit A:hover {  
	background: #D9DBDA;  
	color: #333532;
}

#tekstit {  
	position: absolute;  
	top: 580px;  
	left: 275px;  
	width: 712px;  
	padding-bottom: 50px;
	text-align: justify;
}
#tekstit .copyt {  
	font-size: 10px;  
	text-align: center;
	padding-top: 20px;
}

#tekstit .paivitys {  
	background: #A8A4A5;  
	color: #EAE9EE;  
	padding: 8px;
	margin: 0 30px;
}
#tekstit .paivitys h1 {  
	font-size: 15px;  
	text-align: right;  
	letter-spacing: 1px;
}

input, select, textarea {
	border: 5px solid #FFF;
	font-family: Arial, Sans-serif;  
	font-size: 12px;  
	background: #A8A4A5;  
	color: #EAE9EE;  
	padding: 10px;
}

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> T I T L E </title>
	<link href="arabi.css" type="text/css" rel="stylesheet" />
</head>
<body>

<div id="otsikko">
	<h1>Site's Title</h1>
</div>

<div id="linkit">
	<a href="linkki">Etusivu</a>
	<a href="linkki">Hevoset</a>
	<a href="linkki">Esittely</a>
	<a href="linkki">Toiminta</a>
	<a href="linkki">Kasvatus</a>
	<a href="linkki">Yhteys</a>
</div>

<div id="tekstit">
	<h1>Talvinen arabilei</h1>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget odio nec ante facilisis venenatis et a turpis. Donec at mi libero, vitae iaculis eros. Nullam lacus nisi, convallis ut mattis quis, scelerisque rhoncus sem. Duis et sem elit, ac convallis nulla. Donec vel nisi tincidunt nibh dignissim blandit vel a magna. Cras eu mi sit amet ligula rutrum euismod. Vivamus vel purus eu arcu dapibus suscipit. Aenean tincidunt, erat vitae pretium volutpat, quam nulla varius purus, vitae lacinia nisi nisl et felis. Praesent eget tortor nulla, et aliquam lorem. Mauris viverra mi nulla, ut sodales leo. Integer auctor bibendum libero eu dignissim.
</p>

<p>
Donec vel sapien nec lectus dapibus auctor ut sed magna. Donec aliquet volutpat vestibulum. Phasellus a augue at mauris laoreet dapibus in a lacus. Sed tempus pretium tortor, at euismod turpis gravida ac. Suspendisse blandit orci vel lectus fringilla lobortis. In semper dignissim gravida. Aliquam gravida scelerisque ante. Sed pharetra dictum vulputate. Sed sed euismod eros. Donec aliquet, lorem id elementum aliquet, dui massa lobortis massa, ut pharetra purus ligula vel quam. Proin non quam ac velit semper ornare. Donec vitae velit odio, at rutrum nulla. Donec nec leo quis lorem tristique molestie. Proin arcu orci, porttitor ac lobortis ut, semper quis quam. Maecenas a laoreet mi.
</p>

<p>
Quisque eu justo pharetra turpis eleifend congue. Nulla id orci enim, eget feugiat neque. Aenean lacinia dolor at justo pharetra facilisis. Integer mi velit, ultricies auctor gravida vel, sagittis eget enim. Donec ullamcorper iaculis lacinia. In hac habitasse platea dictumst. Maecenas neque tellus, tincidunt et dignissim a, sagittis sed est. Cras blandit tristique gravida. Duis gravida cursus egestas. Ut molestie blandit massa in malesuada.
</p>

<h1>Updates etc.</h1>

<p>
Sed facilisis mauris augue, non mattis massa. Integer auctor hendrerit nisl, ac hendrerit neque suscipit ut. Aliquam volutpat turpis sit amet augue blandit auctor a quis sem. Praesent imperdiet placerat justo, eu tristique nulla sagittis nec. Donec rutrum, leo id pretium feugiat, massa urna facilisis quam, commodo consequat risus ipsum vel leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget est at nunc pellentesque suscipit. Aliquam a orci in mauris feugiat rutrum non non tellus. Vestibulum eget orci in velit faucibus cursus. Proin ac ante at nunc pretium gravida a hendrerit justo. Vestibulum eu nunc in tortor aliquam rutrum ac eu neque. Quisque metus lorem, tempor ac auctor eu, posuere eu mauris. Fusce sed augue ut erat tincidunt porta.
</p>

</div>

<h2>Lorem Ipsum</h2>

<div class="copyt">
Layot ©<a href="http://tierran.net/dewymorning">Namuless</a> Image ©<a href="http://foto-vik.ru/">foto-vik.ru</a> <br />
<a href="#alku">Top</a>
</div>

</div>

</body>
</html>