Windows 8 Tarzı İndex Tasarımım (Yoruma Açık)

PHP Kod:

<!DOCTYPE html>
<html dir="ltr" lang="tr-TR">
<head>
<title>Bilal v1</title>
<link rel="stylesheet" href="style.css" media="all" type="text/css"/>
<meta http-equiv="Content-Type" content="text-html:charset=utf-8"/>
</head>
<body>
<header>
<div id="logo"><p>ßyßilæl</p></div>
<div id="portal"><a href="#"><img src="images/icon/portal.png"/><p>Portal</p></a></div>
<div id="forum"><a href="#"><img src="images/icon/forum.png"/><p>Forum</p></a></div>
<div id="uyelistesi"><a href="#"><img src="images/icon/uye.png"/><p>Üye Listesi</p></a></div>
<div id="fyonetici"><a href="#"><img src="images/icon/yön.ico"/><p>Yönetici Kadrosu</p></a></div>
<div id="yardim"><a href="#"><img src="images/icon/yardim.png"/><p>Yardım</p></a></div>
<div id="takvim"><a href="#"><img src="images/icon/takvim.png"/><p>Takvim</p></a></div>
<div id="uyeol"><a href="#"><img src="images/icon/yeni.png"/><p>Üye Ol</p></a></div>
<div id="girisyap"><a href="#"><img src="images/icon/gir.png"/><p>Giriş Yap</p></a></div>



</header>
</body>
</html>

PHP Kod:

/* Reset CSS */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    font: inherit;    vertical-align: baseline;}
    article, aside, detalis, fgcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}
    body{line-height:1;background:url(images/arkaplan.png)}
    ol,ul{list-style:none;}
    blockquote, q{quotes:none;}
    blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a {text-decoration:none;color:black;}    
    a:visited {text-decoration:none;color:black;}
        a:hover{text-decoration:none;color:black;}
         a:active{text-decoration:none;color:black;}
    table{border-collapse:collapse;border-spacing:0;}
    /*Genel Özellikler */

#logo p {
font-size:70px;
margin-top:100px;
margin-left:200px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#portal {
background:url(images/arka.png);
background-color:#4876ff;
width:199px;
height:150px;
margin-left:200px;
margin-top:10px;

}
#portal img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#portal p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#forum {
background:url(images/arka.png);
background-color:#5d478b;
width:199px;
height:150px;
margin-top:-150px;
margin-left:401px;
}
#forum img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#forum p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#uyelistesi {
background:url(images/arka.png);
background-color:#cd8500;
width:199px;
height:150px;
margin-top:2px;
margin-left:200px;
}
#uyelistesi img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#uyelistesi p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#fyonetici {
background:url(images/arka.png);
background-color:#008b00;
width:199px;
height:150px;
margin-top:-150px;
margin-left:401px;
}
#fyonetici img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#fyonetici p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#yardim {
background:url(images/arka.png);
background-color:#cdcd00;
width:199px;
height:150px;
margin-top:2px;
margin-left:200px;
}
#yardim img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#yardim p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#takvim {
background:url(images/arka.png);
background-color:#008080;
width:199px;
height:150px;
margin-top:-150px;
margin-left:401px;
}
#takvim img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#takvim p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#uyeol {
background:url(images/arka.png);
background-color:#7ac5cd;
width:199px;
height:150px;
margin-top:-454px;
margin-left:749px;
}
#uyeol img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#uyeol p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#girisyap {
background:url(images/arka.png);
background-color:#9acd32;
width:199px;
height:150px;
margin-top:-150px;
margin-left:950px;
}
#girisyap img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#girisyap p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;
}