<!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>22.Sayfam</title>
<style type="text/css">
.apartman{ width:350px; height:auto; margin:70px auto}
.baca{ width:25px; height:50px; background:#960; margin:0 0 0 250px}
.cati{ width:250px; height:250px; background:#930; transform:rotate(45deg); margin:-50px 0 0 50px; position:relative; z-index:1 }
.govde{ width:330px; height:470px; background:#0cf; margin:-125px 0 0 0; position:relative; z-index:2; padding:30px 0 0 20px}
.p1{ width:58px; height:58px; background:#ff9; border:1px solid #000; float:left; margin:0 0 65px 0 }
.p2{ width:58px; height:58px; background:#ff9; border:1px solid #000; float:left; margin:0 0 65px 65px }
.p3{ width:58px; height:58px; background:#ff9; border:1px solid #000; float:left; margin:0 0 65px 65px }
.p4{ width:58px; height:58px; background:#ff9; border:1px solid #000; float:left;  }
.p5{ width:58px; height:58px; background:#ff9; border:1px solid #000; float:left; margin:0 0 0 50px }
.solperde{ width:23px; height:56px; background:#fff; border-radius:0 0 20px 0; border-right:1px solid #000; border-bottom:1px solid #000; float:left}
.sagperde{ width:23px; height:56px; background:#fff; border-radius:0 0 0 20px; border-left:1px solid #000; border-bottom:1px solid #000; float:left; margin:0 0 0 10px}
.kapitabela{ width:90px; height:152px; float:left; margin:-56px 0 0 50px}
.tabela{ width:88px; height:21px; background:#FFF; border:1px solid #000; font: bold 10px tahoma; text-align:center; padding:4px 0 0 0}
.kapi{ width:86px; height:118px; background:#330; border-left:2px solid #000; border-right:2px solid #000; border-top:2px solid #000; margin:5px 0 0 0 }
.kapikolu{ width:15px; height:3px; background:#000; margin:50px 0 0 15px}
</style>
</head>

<body>
<div class="apartman">
<div class="baca"></div>
<div class="cati"></div>
<div class="govde">
<div class="p1">
<div class="solperde"></div>
<div class="sagperde"></div>
</div>
<div class="p2">
<div class="solperde"></div>
<div class="sagperde"></div>
</div>
<div class="p3">
<div class="solperde"></div>
<div class="sagperde"></div>
</div>
<div class="p1">
<div class="solperde"></div>
<div class="sagperde"></div>
</div>
<div class="p2">
<div class="solperde"></div>
<div class="sagperde"></div>
</div>
<div class="p3">
<div class="solperde"></div>
<div class="sagperde"></div>
</div>
<div class="p1">
<div class="solperde"></div>
<div class="sagperde"></div>
</div>
<div class="p2">
<div class="solperde"></div>
<div class="sagperde"></div>
</div>
<div class="p3">
<div class="solperde"></div>
<div class="sagperde"></div>
</div>
<div class="p4">
<div class="solperde"></div>
<div class="sagperde"></div>
</div>
<div class="kapitabela">
<div class="tabela">KARDEŞLER APT.</div>
<div class="kapi">
<div class="kapikolu"></div>
</div>
</div>
<div class="p5">
<div class="solperde"></div>
<div class="sagperde"></div>
</div>
</div>
</div>
</body>
</html>