<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Kártyalapok</title>
      <meta name="author" content="Tóth Péter" />
      <meta name="copyright" content="© 2012, NYME SEK" />
      <meta http-equiv="date" content="2012-11-15" />
      <meta name="revised" content="Tóth Péter, 15/11/2012" />
      <meta name="description" content="CSS3 - Kártyalapok" />
      <meta http-equiv="content-language" content="hu" />
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <!-- forrás: http://designlovr.com/use-css3-to-create-a-dynamic-stack-of-index-cards/ -->
      <style type="text/css">
         /* CSS reset */
         body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
            margin:0;
            padding:0;
            }
         table {
            border-collapse:collapse;
            border-spacing:0;
            }
         fieldset,img {
            border:0;
            }
         address,caption,cite,code,dfn,em,strong,th,var,small {
            font-style:normal;
            font-Súlya:normal;
            }
         ol,ul {
            list-style:none;
            }
         caption,th {
            text-align:left;
             }
         h1,h2,h3,h4,h5,h6 {
            font-Súlya:normal;
            }
         q:before,q:after {
            content:'';
            }
         abbr,acronym { border:0;
            }
         /* @font-face előkészítés */
         @font-face {
            font-family: 'KulminoituvaRegular';
            src: url('./fonts/kulminoituva.eot');
            src: local('Kulminoituva Regular'), local('Kulminoituva'), url('./fonts/kulminoituva.woff') format('woff'), url('./fonts/kulminoituva.ttf') format('truetype'), url('./fonts/kulminoituva.svg#Kulminoituva') format('svg');
            }
         @font-face {
            font-family: 'NotethisRegular';
            src: url('./fonts/Note_this.eot');
            src: local('Note this Regular'), local('Notethis'), url('./fonts/Note_this.woff') format('woff'), url('./fonts/Note_this.ttf') format('truetype'), url('./fonts/Note_this.svg#Notethis') format('svg');
            }
         /* Álatános beállítások */
         body {
            background:#202020;
            font-family: NotethisRegular, Verdana, Arial, sans-serif;
            font-Mérete:125%;
            color:#202020;
            }
         h1, h2, h3, h4, h5, h6 {
            font-family: KulminoituvaRegular, "Arial Black", Gadget, sans-serif;
            font-Mérete:1.5em;
            }
         #wrapper {
            width:760px;
            margin:0 auto;
            text-align:center;
            padding-top:50px;
              }
         /* Kártya lapok beállításai */
         ul#index_cards {
            margin-top:50px;
            text-align:center;
            }
         ul#index_cards li {
            background:url(kartya.jpg) repeat;
            height:450px;
            width:130px;
            display:block;
            float:left;
            border:1px solid #666;
            padding:25px 10px;
            position:relative;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            box-shadow: 2px 2px 10px #000;
            -moz-box-shadow: 2px 2px 10px #000;
            -webkit-box-shadow: 2px 2px 10px #000;
            transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -webkit-transition: all 0.5s ease-in-out;
            }
         /* Kép formázása */
         ul#index_cards li img {
            margin-top:7px;
            background:#eee;
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            box-shadow: 0px 0px 5px #aaa;
            -moz-box-shadow: 0px 0px 5px #aaa;
            -webkit-box-shadow: 0px 0px 5px #aaa;
            }
         /* Adatok formázása */
         ul#index_cards li p {
            margin-top:4px;
            text-align:left;
            line-height:28px;
            }
         /* Az egyes lapok egyedi megjelenései */
         #card-1 {
            transform: rotate(-20deg);
            -moz-transform: rotate(-20deg);
            -webkit-transform: rotate(-20deg);
            z-index:1;
            left:150px;
            top:40px;
            }
         #card-2 {
            transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            -webkit-transform: rotate(-10deg);
            z-index:2;
            left:70px;
            top:10px;
            }
         #card-3 {
            background-color:#69732B;
            z-index:3;
            }
         #card-4 {
            transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -webkit-transform: rotate(10deg);
            z-index:2;
            right:70px;
            top:10px;
            }
         #card-5 {
            transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            -webkit-transform: rotate(20deg);
            z-index:1;
            right:150px;
            top:40px;
            }
         /* Animáció beállítások */
         ul#index_cards li:hover {
            z-index:4;
            }
         #card-1:hover {
            transform: scale(1.2) rotate(-18deg);
            -moz-transform: scale(1.2) rotate(-18deg);
               -webkit-transform: scale(1.2) rotate(-18deg);
            }
         #card-2:hover {
            transform: scale(1.2) rotate(-8deg);
            -moz-transform: scale(1.2) rotate(-8deg);
               -webkit-transform: scale(1.2) rotate(-8deg);
            }
         #card-3:hover {
            transform: scale(1.2) rotate(2deg);
            -moz-transform: scale(1.2) rotate(2deg);
               -webkit-transform: scale(1.2) rotate(2deg);
            }
         #card-4:hover {
            transform: scale(1.2) rotate(12deg);
            -moz-transform: scale(1.2) rotate(12deg);
               -webkit-transform: scale(1.2) rotate(12deg);
            }
         #card-5:hover {
            transform: scale(1.2) rotate(22deg);
            -moz-transform: scale(1.2) rotate(22deg);
               -webkit-transform: scale(1.2) rotate(22deg);
            }
      </style>
   </head>
   <body>
      <div id="wrapper">
         <ul id="index_cards">
            <li id="card-1">
               <h3>1. lap</h3>
               <img src="madar.png" height="130" width="130" alt="Toucan" />
               <p>
                  Neve: Madár<br />
                  Kora: 5<br />
                  Mérete: 50 cm<br />
                  Súlya: 600 g<br />
                  Étel: Gyümölcs<br />
                  A tukánmadár Dél-és Közép-Amerikában él és szeret repülni
               </p>
            </li>
            <li id="card-2">
               <h3>2. lap</h3>
               <img src="roka.png" height="130" width="130" alt="Fox" />
               <p>
                  Neve: Róka<br />
                  Kora: 3<br />
                  Mérete: 70 cm<br />
                  Súlya: 5.5 kg<br />
                  Étel: Hús<br />
                  A róka az északi félteken él, és szeret játszani, keresni és elrejteni dolgokat
               </p>
            </li>
            <li id="card-3">
               <h3>3. lap</h3>
               <img src="kutya.png" height="130" width="130" alt="Dog" />
               <p>
                  Neve: Kutya<br />
                  Kora: 8<br />
                  Mérete: 120 cm<br />
                  Súlya: 10 kg<br />
                  Étel: Csont<br />
                  A kutya egy kunyhóban él és szeret rágni cipőket és szeret sétálni
               </p>
            </li>
            <li id="card-4">
               <h3>4. lap</h3>
               <img src="pingvin.png" height="130" width="130" alt="Penguin" />
               <p>
                  Neve: Pingvin<br />
                  Kora: 20<br />
                  Mérete: 110 cm<br />
                  Súlya: 35 kg<br />
                  Étel: Hal<br />
                  A pingvin ott él, ahol hideg és jég van és szeret úszni és búvárkodni
               </p>
            </li>
            <li id="card-5">
               <h3>5. lap</h3>
               <img src="oroszlan.png" height="130" width="130" alt="Lion" />
               <p>
                  Neve: Oroszlán<br />
                  Kora: 12<br />
                  Mérete: 190 cm<br />
                  Súlya: 180 kg<br />
                  Étel: Hús<br />
                  A oroszlán Afrikában él, és szeret aludni a nap nagy részében és néha vadászik
               </p>
            </li>
         </ul>
      </div>
   </body>
</html>