Untitled Document

Taustakuva (mooning.png)¨

Lähdekoodi (.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="elaintyyli.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">
<div id="perustiedot">
<div class="kuvat">
<a name="kuvat"></a>
<a href="isokuva.jpg" target="_blank"><img src="isokuva.jpg" class="isokuva"/></a><br />
<a href="pikkukuva.jpg" target="blank_"><img src="pikkukuva.jpg" class="pikkukuva"/></a>
<a href="pikkukuva.jpg" target="blank_"><img src="pikkukuva.jpg" class="pikkukuva"/></a>
<a href="pikkukuva.jpg" target="blank_"><img src="pikkukuva.jpg" class="pikkukuva"/></a>
<p class="copy">
Kuvat © <a href="#" target="_blank">valokuvaaja</a>
</p>
</div>
<div class="tiedot">
<a name="ptiedot"></a>
<h1>hevosen nimi</h1>
<table class="tietotable" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" class="info" valign="middle">
Virallinen nimi
</td>
<td colspan="2" class="vastaus" valign="middle">
tieto
</td>
</tr>
<tr>
<td colspan="2" class="info" valign="middle">
Sukupuoli
</td>
<td colspan="2" class="vastaus" valign="middle">
tieto
</td>
</tr>
<tr>
<td colspan="2" class="info" valign="middle">
Rotu
</td>
<td colspan="2" class="vastaus" valign="middle">
tieto
</td>
</tr>
<tr>
<td colspan="2" class="info" valign="middle">
Säkäkorkeus
</td>
<td colspan="2" class="vastaus" valign="middle">
tieto
</td>
</tr>
<tr>
<td colspan="2" class="info" valign="middle">
Painotuslaji
</td>
<td colspan="2" class="vastaus" valign="middle">
tieto
</td>
</tr>
<tr>
<td colspan="2" class="info" valign="middle">
Koulutus
</td>
<td colspan="2" class="vastaus" valign="middle">
tieto
</td>
</tr>
</table><br />

<table class="tietotable" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" class="info" valign="middle">
Kasvattaja
</td>
<td colspan="2" class="vastaus" valign="middle">
tieto
</td>
</tr>
<tr>
<td colspan="2" class="info" valign="middle">
Omistaja
</td>
<td colspan="2" class="vastaus" valign="middle">
tieto
</td>
</tr>
<tr>
<td colspan="2" class="info" valign="middle">
Rekisterinumero
</td>
<td colspan="2" class="vastaus" valign="middle">
tieto
</td>
</tr>
</table>
</div>
</div>
<br clear="all" />

<a name="luonne"></a>
<h2>Luonnekuvaus</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra   ultricies massa non ultricies. Duis pharetra lectus et pellentesque   dapibus. Aenean vulputate ante nec mi sollicitudin, in ultricies ligula   lacinia. Nunc aliquet tellus sed neque blandit, at rhoncus nunc iaculis.   Vivamus ut nisi quis augue ultricies tempus. Duis nec suscipit libero,   ac dapibus velit. Suspendisse sit amet sapien sed diam congue tristique.   Morbi ornare volutpat porttitor. Aenean scelerisque ligula ac porta   convallis. Curabitur pretium dolor lorem. Pellentesque aliquam interdum   ante, eget elementum neque vulputate quis. Vivamus ullamcorper, magna   non facilisis gravida, turpis massa rutrum ligula, quis mattis augue   lorem non ligula. Curabitur dapibus imperdiet purus. Nam velit augue,   pretium ut elit in, molestie congue est. </p>
<p> Aenean vel quam lacinia, feugiat mi a, volutpat nibh. Vivamus et   tincidunt dui. Cras dui urna, euismod eu justo facilisis, tristique   consectetur augue. Praesent pharetra urna at scelerisque sodales.   Quisque faucibus sem eu enim elementum dignissim. Lorem ipsum dolor sit   amet, consectetur adipiscing elit. Proin non elit nisi. Aenean interdum   lectus arcu, quis sodales mi facilisis a. Maecenas at justo tincidunt,   pharetra massa eget, ullamcorper justo. Nam feugiat, justo et venenatis   hendrerit, turpis metus mattis nisl, porta bibendum neque justo ac   turpis. Nam viverra ante a arcu sollicitudin, eget laoreet ante ornare.   Cras at dui at tellus accumsan condimentum. </p>

<a name="suku"></a>
<h2>Suku</h2>
<table class="suku" border="0" cellpadding="2" cellspacing="5">
	<tr>
		<td rowspan="4">i. <a href="#" target="_blank">Isän nimi</a></td>
		<td rowspan="2">ii. </td>
		<td rowspan="1">iii. </td>
		<tr>
			<td rowspan="1">iie. </td>
		</tr>
		<td rowspan="2">ie. </td>
		<td rowspan="1">iei. </td>
		<tr>
			<td rowspan="1">iee. </td>
		</tr>
	</tr>
	<tr>
		<td rowspan="4">e. </td>
		<td rowspan="2">ei. </td>
		<td rowspan="1">eii. </td>
		<tr>
			<td rowspan="1">eie. </td>
		</tr>
		<td rowspan="2">ee. </td>
		<td rowspan="1">eei. </td>
		<tr>
			<td rowspan="1">eee. </td>
		</tr>
	</tr>
</table>
<h3>sukuselvitys</h3>
<p><b>i.</b> Aenean vel quam lacinia, feugiat mi a, volutpat nibh. Vivamus et tincidunt dui. Cras dui urna, euismod eu justo facilisis, tristique consectetur augue. Praesent pharetra urna at scelerisque sodales.</p> 
<p><b>e.</b> Aenean vel quam lacinia, feugiat mi a, volutpat nibh. Vivamus et tincidunt dui. Cras dui urna, euismod eu justo facilisis, tristique consectetur augue. Praesent pharetra urna at scelerisque sodales.</p> 
<h3>jälkeläiset</h3>
<p class="center">

00.00.0000  x <a href="#" target="_blank">toinen vanhempi</a> - o./t. <a href="#" target="_blank">varsan nimi</a> <br />

</p>

<a name="kisat"></a>
<h2>kilpailukalenteri</h2>
<table class="kisakalenteri" border="0" cellpadding="0" cellspacing="5">
<tr>
<td class="kisatd" valign="top">
<pre>
<b>LAJI</b>

00.00.0000 - <a href="#" target="_blank">kutsu</a> - luokka - tulos
00.00.0000 - <a href="#" target="_blank">kutsu</a> - luokka - tulos
00.00.0000 - <a href="#" target="_blank">kutsu</a> - luokka - tulos
00.00.0000 - <a href="#" target="_blank">kutsu</a> - luokka - tulos
</pre>
</td>
</tr>
</table>
<a name="pk"></a>
<h2>Päiväkirja</h2>
<div class="pk">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra   ultricies massa non ultricies. Duis pharetra lectus et pellentesque   dapibus. Aenean vulputate ante nec mi sollicitudin, in ultricies ligula   lacinia. Nunc aliquet tellus sed neque blandit, at rhoncus nunc iaculis.   Vivamus ut nisi quis augue ultricies tempus. Duis nec suscipit libero,   ac dapibus velit. Suspendisse sit amet sapien sed diam congue tristique.   Morbi ornare volutpat porttitor. Aenean scelerisque ligula ac porta   convallis. Curabitur pretium dolor lorem. Pellentesque aliquam interdum   ante, eget elementum neque vulputate quis. Vivamus ullamcorper, magna   non facilisis gravida, turpis massa rutrum ligula, quis mattis augue   lorem non ligula. Curabitur dapibus imperdiet purus. Nam velit augue,   pretium ut elit in, molestie congue est. </p>
  <p> Aenean vel quam lacinia, feugiat mi a, volutpat nibh. Vivamus et   tincidunt dui. Cras dui urna, euismod eu justo facilisis, tristique   consectetur augue. Praesent pharetra urna at scelerisque sodales.   Quisque faucibus sem eu enim elementum dignissim. Lorem ipsum dolor sit   amet, consectetur adipiscing elit. Proin non elit nisi. Aenean interdum   lectus arcu, quis sodales mi facilisis a. Maecenas at justo tincidunt,   pharetra massa eget, ullamcorper justo. Nam feugiat, justo et venenatis   hendrerit, turpis metus mattis nisl, porta bibendum neque justo ac   turpis. Nam viverra ante a arcu sollicitudin, eget laoreet ante ornare.   Cras at dui at tellus accumsan condimentum. </p>
   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra   ultricies massa non ultricies. Duis pharetra lectus et pellentesque   dapibus. Aenean vulputate ante nec mi sollicitudin, in ultricies ligula   lacinia. Nunc aliquet tellus sed neque blandit, at rhoncus nunc iaculis.   Vivamus ut nisi quis augue ultricies tempus. Duis nec suscipit libero,   ac dapibus velit. Suspendisse sit amet sapien sed diam congue tristique.   Morbi ornare volutpat porttitor. Aenean scelerisque ligula ac porta   convallis. Curabitur pretium dolor lorem. Pellentesque aliquam interdum   ante, eget elementum neque vulputate quis. Vivamus ullamcorper, magna   non facilisis gravida, turpis massa rutrum ligula, quis mattis augue   lorem non ligula. Curabitur dapibus imperdiet purus. Nam velit augue,   pretium ut elit in, molestie congue est. </p>
  <p> Aenean vel quam lacinia, feugiat mi a, volutpat nibh. Vivamus et   tincidunt dui. Cras dui urna, euismod eu justo facilisis, tristique   consectetur augue. Praesent pharetra urna at scelerisque sodales.   Quisque faucibus sem eu enim elementum dignissim. Lorem ipsum dolor sit   amet, consectetur adipiscing elit. Proin non elit nisi. Aenean interdum   lectus arcu, quis sodales mi facilisis a. Maecenas at justo tincidunt,   pharetra massa eget, ullamcorper justo. Nam feugiat, justo et venenatis   hendrerit, turpis metus mattis nisl, porta bibendum neque justo ac   turpis. Nam viverra ante a arcu sollicitudin, eget laoreet ante ornare.   Cras at dui at tellus accumsan condimentum. </p>
</div>
<a name="valmennukset"></a>
<h2>Valmennukset</h2>
<div class="pk">
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra   ultricies massa non ultricies. Duis pharetra lectus et pellentesque   dapibus. Aenean vulputate ante nec mi sollicitudin, in ultricies ligula   lacinia. Nunc aliquet tellus sed neque blandit, at rhoncus nunc iaculis.   Vivamus ut nisi quis augue ultricies tempus. Duis nec suscipit libero,   ac dapibus velit. Suspendisse sit amet sapien sed diam congue tristique.   Morbi ornare volutpat porttitor. Aenean scelerisque ligula ac porta   convallis. Curabitur pretium dolor lorem. Pellentesque aliquam interdum   ante, eget elementum neque vulputate quis. Vivamus ullamcorper, magna   non facilisis gravida, turpis massa rutrum ligula, quis mattis augue   lorem non ligula. Curabitur dapibus imperdiet purus. Nam velit augue,   pretium ut elit in, molestie congue est. </p>
  <p> Aenean vel quam lacinia, feugiat mi a, volutpat nibh. Vivamus et   tincidunt dui. Cras dui urna, euismod eu justo facilisis, tristique   consectetur augue. Praesent pharetra urna at scelerisque sodales.   Quisque faucibus sem eu enim elementum dignissim. Lorem ipsum dolor sit   amet, consectetur adipiscing elit. Proin non elit nisi. Aenean interdum   lectus arcu, quis sodales mi facilisis a. Maecenas at justo tincidunt,   pharetra massa eget, ullamcorper justo. Nam feugiat, justo et venenatis   hendrerit, turpis metus mattis nisl, porta bibendum neque justo ac   turpis. Nam viverra ante a arcu sollicitudin, eget laoreet ante ornare.   Cras at dui at tellus accumsan condimentum. </p>
</div>
<p class="center copy" style="padding-bottom: 10px;">
Ulkoasu © <a href="http://raitatossu.net/pilvimarja" target="_blank">Pilvimarja 2013</a> / Heidi, taustakuva © <a href="http://www.evelt.com/" target="_blank">Joel Klein</a> / <a href="http://subtlepatterns.com/" target="_blank">Subtle patterns</a>
</p>
</div>
<div id="footernavi">
<div class="inner">
<a href="#kuvat">Kuvat</a> -

<a href="#ptiedot">Perustiedot</a> -

<a href="#luonne">Luonne</a> -

<a href="#suku">Suku</a> -

<a href="#kisat">Kisakalenteri</a> -

<a href="#pk">Päiväkirja</a> -

<a href="#valmennukset">Valmennukset</a>
</div>
</div>
</body>
</html>

Tyylitiedosto (elaintyyli.css):

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Average+Sans);
@import url(http://fonts.googleapis.com/css?family=Paprika);
/* CSS Document - Pilvimarja / Heidi - http://raitatossu.net/pilvimarja */

a {
	color: #666;}
	
a:hover {
	color: #CCC;
	text-decoration: none;}

h1, h2 {
	font-family: 'Paprika', Arial, Helvetica, sans-serif;
	width: 100%;
	border-bottom: 1px solid #e9e9e9;
	}
h1:first-letter, h2:first-letter, h3:first-letter {
	text-transform: capitalize;}
body {
	margin: 0 auto;
	font-family: 'Average Sans', Arial, Helvetica, sans-serif;
	font-size: 100%;
	text-align: justify;
	background: #dedede url(mooning.png) fixed; /* JOS vaihdat taustakuvan, muista vaihtaa tekijänoikeudet sivun alalaitaan! */
	}
	
#wrapper {
	width: 90%;
	max-width: 900px;
	margin: 0 auto;
	background-color: #fff;
	height: 100%;
	padding: 2%;
	box-shadow: 0 0 5px #9d9d9d;
	min-width: 200px;
	}
	
.kuvat {
	float: left;
	width: 45%;
	margin-top: 10px;
	min-width: 200px;
	margin: 0 auto;
	text-align:center;
	}
	
.isokuva {
	border: 10px solid #fff;
	box-shadow: 0 0 5px #CCC;
	margin-bottom: 20px;
	width: 90%;
	height: auto;
	
	}

.pikkukuva {
	border: 5px solid #fff;
	border-radius: 3px;
	box-shadow: 0 0 2px #CCC;
	margin: 1%;
	width: 28%;
	height: auto;
	}
	
.tiedot {
	float: right; 
	width: 45%;
	min-width: 200px;
	margin: 0 auto;
	}
	
.tietotable {
	width: 100%;
	margin: 0 auto;
	}
	
	.tietotable td {
		border-bottom: 1px solid #dedede;
		width: 25%; 
		padding: 3px;
		padding-left: 25px;
	}
	
	.info {
		font-weight:bolder;
		font-size: 1.1em;
		padding-left: 25px;
	
		}
	.vastaus {
		background-color: #fff;
		padding-left: 0px;
		}
	
	.suku {
		width: 100%;
		border: 1px solid #dedede;
		background: #dedede url(mooning.png) fixed; 
		padding: 10px;
		}
		.suku td {
		border: 1px solid #e9e9e9;
		padding: 10px;
		background: #fff;
		opacity:0.4;
filter:alpha(opacity=40);
		}
		
		.suku a {
			color: #000;
			font-weight: bold;
			text-decoration: none;
			text-transform: uppercase;}
			
			.suku a:hover {
				color: #333;}
	.kisakalenteri {
		width: 100%;
		margin: 0 auto;}
	
.copy {
	font-size:small;}
	
.center {
	text-align:center;}
	
pre {
	font-family: 'Average Sans', Arial, Helvetica, sans-serif;}
	
	.pk {
		width: 90%;
		
		padding: 10px;
		margin: 0 auto;}
		
		.inner {
			width: 100%;
			height: 100%;
			padding-top: 10px;
			background: #999;
		opacity:0.4;
filter:alpha(opacity=40);
margin: 0 auto;}

.inner a{
	color: #000;
			font-weight: bold;
			text-decoration: none;
			text-transform: uppercase;
			
margin: 0 auto;}

#footernavi {
	text-align: center;
	position: fixed;
	bottom: 0;
	height: 40px;
	width: 100%;
	background: #dedede url(mooning.png) fixed;
	
	}