index.php
<!DOCTYPE html>
<html>
<head>
<title>Opdracht - Cristiaan</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="opmaak.css" media="screen">
</head>
<body>
<div id="wrapper">
<?php
include 'menu.html';
?>
<div id="main">
<p>
Hallo, mijn naam is Cristiaan Schipper en ik ben 22 jaar oud.<br />
U bent aangekomen op mijn portfolio website.<br />
Deze is op het moment in aanbouw.
<strong>hard en goed werken.</strong>
<br />
</p>
</div>
<div id="footer"><footer>Webdesign door Cristiaan Schipper</footer></div>
</div>
</body>
</html>
opmaak.css
/*imports*/
@import url(http://fonts.googleapis.com/css?family=Quicksand);
@import url(http://fonts.googleapis.com/css?family=Rancho);
body{
background-color: #8d8d8d;
color:#000000;
}
/*overige elementen*/
a{
color:#000000;
}
strong{
color:#000000;
}
p
{
text-decoration: none;
color:#000000;
}
h3
{
color:#FFCC00;
}
h1
{
color:#FFCC00;
}
h2
{
color:#FFCC00;
}
li:first-child
{
text-decoration: underline
}
/*DIVS*/
#wrapper
{
margin: auto;
padding-top:10px;
}
#menu
{
width: 50%;
min-height: 40px;
margin: auto;
margin-bottom: 10px;
border: 2px;
padding:3px;
overflow:hidden;
}
#main
{
background-color:#99d9ea;
width: 70%;
min-height: 600px;
min-width: 50%;
height:40%;
border-color: #3f3b3b;
border-style: solid;
border-width: 1px;
overflow:hidden;
padding: 10px;
width: 70%;
margin-left: 200px;
}
#footer
{
margin-left:200px;
}
/*CLASSES*/
.menubutton {
width:200px;
height:60px;
margin:4px;
position:inherit ;
font-size:16pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align:center;
color:#000000;
}
a:hover {
color: #000000;
}
.center
{
text-align:center;
}
menu.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="opmaak.css" media="screen"></head>
<body>
<div id="menu">
<a href="" class="menubutton">Home</a>
<a href="" class="menubutton">Opdrachten</a>
<a href="" class="menubutton">Contact</a>
<a href="" class="menubutton">About Me</a>
</div>
</body>
</html>
Geen opmerkingen:
Een reactie posten