Voor Bron
De tekst html en css.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>The Liblueen design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link rel="stylesheet" href="styles.css" /></head><body>
<div id="conteneur">
<div id="header">HKV Plastic aircraft model museum<br />
</div>
<div id="haut">
<ul class="menuhaut">
<li><a href="">OpenWebDesign</a></li>
<li><a href="">W3C Standards</a></li>
<li><a href="">Fine design</a></li>
<li><a href="">Flexibility</a></li>
<li><a href="">Colors</a></li>
<li><a href="">An other link</a></li>
</ul>
</div>
<div id="centre">
<h1>HKV plastic aircraft model museum<br />
</h1>
<h2>Plastic aircraft models in 1/72 and 1/48 scale<br />
</h2>
<p>This design is released under the Creative Common Attribution Licence</p>
<h2>Respect the standards</h2>
<p>Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tellus
libero, suscipit at, tincidunt eget, aliquam vitae, arcu. Nunc quam
dolor, facilisis hendrerit, <a href="">ultricies</a> id, <a href="">imperdiet</a>
id, libero. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Suspendisse potenti. Cras sit amet
felis eu leo placerat scelerisque. Cras orci pede, eleifend nec,
iaculis blandit, ullamcorper congue, odio. Quisque laoreet urna nec
urna. Nunc sit amet purus sit amet felis rutrum hendrerit. Aliquam
fermentum molestie eros. Cras nec elit varius augue eleifend sagittis.</p>
<p>In
sodales ultrices enim. Mauris nisl. Fusce vel urna nec magna hendrerit
auctor. Nulla euismod. Nulla bibendum. In mattis, sem nec eleifend
pellentesque, mi massa ornare tortor, ac fringilla augue augue nec mi.
Quisque viverra quam consectetuer leo. Ut leo augue, aliquam non,
vestibulum non, dignissim nec, sapien. Proin sodales. Quisque in orci.
Sed erat est, lacinia ut, varius sit amet, ullamcorper vitae, dui.
Nullam malesuada risus ac <a href="">lacus</a>. Suspendisse hendrerit.
Integer placerat interdum nulla. Pellentesque vel tellus eget turpis
scelerisque venenatis. Nullam adipiscing risus at massa.</p>
<h2>Free design</h2>
<p>Nunc
bibendum sapien. Ut ligula sapien, dignissim vitae, sollicitudin quis,
egestas scelerisque, risus. Vestibulum aliquam pretium ante. Nunc sem
mi, gravida in, sagittis quis, ullamcorper accumsan, ligula. Aliquam
convallis, nibh at tristique tempor, velit orci sollicitudin tellus, in
hendrerit purus nibh eu eros. Nam luctus turpis ac tortor. <a href="">Proin</a> et <a href="">elit</a>. Etiam varius eleifend velit. Morbi convallis semper orci.</p>
<h2>Some lists</h2>
<h3>An ul list</h3>
<ul>
<li>First element</li>
<li>Second element</li>
</ul>
<h3>An ol list</h3>
<ol>
<li>First element</li>
<li>Second element</li>
</ol>
</div>
<div id="pied">Design© 2017 hkv</div>
</div>
</body></html>
De CSS.
#centre {
border-style: none solid;
border-color: -moz-use-text-color #202020;
border-width: 0 1px;
padding: 24px;
color: #000000;
}
#conteneur {
margin: 16px 10%;
min-width: 960px;
background-color: #fafafa;
width: 80%;
position: absolute;
}
#haut {
background-color: #666666;
height: 38.4px;
max-height: 38.4px;
}
#header {
border: 1px solid #fafafa;
background-color: #990000;
color: #fafafa;
font-size: 32px;
height: 80px;
padding-left: 58px;
padding-top: 20px;
}
#pied {
border-style: none solid solid;
border-color: -moz-use-text-color #202020 #202020;
border-width: 0 1px 1px;
padding: 0.5em;
text-align: left;
background-color: #990000;
color: white;
}
.menuhaut {
margin: 0;
padding: 0;
font-size: 1em;
list-style-type: none;
}
.menuhaut a {
margin: 0 0.4em;
color: #fafafa;
text-decoration: none;
}
.menuhaut a:hover {
color: #ffff00;
text-decoration: none;
}
.menuhaut li {
border-right: 1px solid #ffffff;
margin: 0;
padding: 0.6em 10px;
display: inline;
float: left;
}
a {
color: #000000;
text-decoration: underline;
}
body {
background-color: #cdcdcd;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 0.75em;
}
h1 {
margin: 0.5em 0.5em 1em 0;
font-size: 1.6em;
}
h2 {
margin: 0.8em 0.5em 0.3em 0.6em;
font-size: 1.2em;
}
h3 {
margin: 0.8em 0.5em 0.3em 0.8em;
font-size: 1.1em;
}
h4 {
margin: 0.7em 0.5em 0.3em 1em;
font-size: 1em;
}
h5 {
margin: 0.6em 0.5em 0.2em 1.5em;
font-size: 0.9em;
}
p {
margin: 1px 0.5em 0.5em 1.5em;
}
Gr. Han