Informacyjne prostokąty

Dom:

Data urodzenia:

Status krwi:

Bogin:

Patronus:

Różdżka:

<center><style type="text/css">

.kwadrat1 {background:#546449;border:1px solid #aeb9ab;top:30px;left:-15px;} 
/*tło kwadratu, obramowanie, wysokość, położenie*/

.kwadrat2 {background:#546449;border:1px solid #aeb9ab;top:80px;left:-15px;} 

.kwadrat3 {background:#546449;border:1px solid #aeb9ab;top:140px;left:-15px;} 

.kwadrat4 {background:#546449;border:1px solid #aeb9ab;top:200px;left:-15px;} 

.kwadrat5 {background:#546449;border:1px solid #aeb9ab;top:260px;left:-15px;} 

.kwadrat6 {background:#546449;border:1px solid #aeb9ab;top:320px;left:-15px;}  

.rozmiar{  text-align:center; position:absolute; 
width:130px;/*szerokość kwadratu*/
height:10px; /*wysokość kwadratu*/
padding-top:20px; /*odległość od tekstu*/
padding-bottom:20px; /*odległość od tekstu*/
text-transform: uppercase; /*drukowane litery*/

font-size: 11px; /*rozmiar czcionki*/display: block;margin:10px;}

div#karta {
width: 500px; /*szerokość zdjęcia*/
height: 540px; /*wysokość zdjęcia*/
border:1px solid #d2d3d3; /*obramowanie zdjęcia*/
border-bottom:5px solid #d2d3d3; /*dolne obramowanie zdjęcia*/
background: url('Link do zdjęcia') center no-repeat; transition:all 2s ease-in-out;-moz-transition:all 2s ease-in-out; /* Firefox 4 */-webkit-transition:all 2s ease-in-out; /* Safari i Chrome */-o-transition:all 2s ease-in-out; /* Opera */}


div#karta:hover {
-moz-transition:all 2s ease-in-out; /* Firefox 4 */-webkit-transition:all 2s ease-in-out; /* Safari i Chrome */-o-transition:all 2s ease-in-out; /* Opera */}

</style>
<div id="karta"></div></center>
<div class="rozmiar kwadrat1">Dom:</div>
<div class="rozmiar kwadrat2">Data urodzenia:</div>
<div class="rozmiar kwadrat3">Status krwi:</div>
<div class="rozmiar kwadrat4">Bogin:</div>
<div class="rozmiar kwadrat5">Patronus:</div>
<div class="rozmiar kwadrat6">Różdżka:</div>