Gotowa karta #3

Imię i nazwisko:

DOM | WIEK | DATA URODZENIA | STATUS KRWI | ZAJĘCIA DODATKOWE | POZOSTAŁE INFORMACJE | POWIĄZANIA

Historia Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Charakter Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

więcej informacji po kliknięciu na imię i nazwisko.

<br/>

<center>

<div id="tło"> /*ta część kodu odpowiada za imię i nazwisko oraz to, co wysuwa się po najechaniu na napis*/

<div id="ramka">

</div>

<div id="rozwiń">

<div style="text-shadow:-2px 0 0 #724a53;

color: #c3cdc2; font-family:grand hotel;font-size:40px;

letter-spacing:2px;">imię i nazwisko:

</div><br />

<div align="justify";>

DOM | WIEK | DATA URODZENIA | STATUS KRWI | ZAJĘCIA DODATKOWE | POZOSTAŁE INFORMACJE | POWIĄZANIA

</div>

</div>

</div>

</center>

<center>

<style type="text/css">

#tło {

   height:700px;

   width:500px;

border:1px solid #434434;

   background: url("http://68.media.tumblr.com/71ef1934fce08931ddc94718e5beda42/tumblr_o8jwosd1Zk1s3376so1_500.jpg");

}

#ramka{

   margin-top:-240px!important;

   height:300px;

}

#rozwiń {

   overflow:hidden;

   width:80%; 

padding-left:10px;

padding-right:10px;

   height:60px;

margin-top: -92px;

color:#EDEDED;

   transition:all 2s;

   -moz-transition:all 2s; /* Firefox 4 */

   -webkit-transition:all 2s; /* Safari i Chrome */

   -o-transition:all 2s; /* Opera */

}

#rozwiń:hover {

   height:150px;

   transition:all 2s;

   -moz-transition:all 2s; /* Firefox 4 */

   -webkit-transition:all 2s; /* Safari i Chrome */

   -o-transition:all 2s; /* Opera */

}

</center>

</style> /*tutaj kończy się ta część kodu. Można ją usunąć całkowicie bądź zostawić*/

<style type="text/css">

.kp1 {width: 400px;height: 20px;}

.kp2 {width: 400px;height: 20px;}

.kp3{width: 500px; /*szerokość całej ramki*/

height: 380px; /*wysokość ramki*/

background: RGBa(65,58,48, 0.5); /*kolor tła*/

margin-left: -4px!important; /*położenie ramki*/

border: 1px solid RGBa(65,58,48, 0.7)!important;} /*obramowanie*/

.kp4{ /*odpowiada za napis historia*/

font-family:grand hotel;

text-align: right;

font-size:40px;

letter-spacing:2px;

text-shadow:-2px 0 0 #724a53;

color: #c3cdc2;

text-transform: lowercase;

line-height: 100%;

padding-top: -5px;

margin-left: -10px;}

.kp5{ /*odpowiada za napis charakter*/

color: #c3cdc2;

text-align: left;

text-shadow:-2px 0 0 #724a53;

font-size:40px;

font-family:grand hotel;

letter-spacing:2px;

text-transform: lowercase;

line-height: 100%;

padding-top: -5px;

margin-right: -10px;}

.kp6{width: 420px; /*odpowiada za mniejsze rameczki z tekstem*/

height:120px; /*wysokość ramki*/

background: RGBa(171, 167, 156, 0.5); /*tło*/

border-bottom: 5px solid #b5c0b0; /*obramowanie dolne*/

line-height: 120%;

padding-top:20px!important;

padding-left: 10px;

padding-right: 10px;

color:#434434; /*czcionka*/

text-align: justify;

}

</style>

<table><td></td><td>

<div class="kp3"><br>

<center><div class="kp1"><div class="kp4">Historia</div></div>

<div class="kp6">TUTAJ WKLEJ TEKST </div>

<br>

<div class="kp2"><div class="kp5">Charakter</div></div>

<div class="kp6">TUTAJ WKLEJ TEKST</div>

</center></td></table>