<style type="text/css">#blue {width: 400px; height: 400px; position: relative; overflow: hidden;}

#blue .page { -WEBKIT-TRANSITION: .2S ALL EASE-IN-OUT; -MOZ-TRANSITION: .3S ALL EASE-IN-OUT; O-TRaNSITION: 0.2S ALL EASE-IN-OUT; position: absolute; left: 0px; bottom: 0px; width: 400px; height: 400px;}

#blue:hover .page {-WEBKIT-TRANSITION: 2S ALL EASE-IN-OUT; -MOZ-TRANSITION: 2S ALL EASE-IN-OUT; O-TRaNSITION: 2S ALL EASE-IN-OUT; left: -400px;}</style>
<center><link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'><div style="width: 500px; padding-left: 0px; padding-right: 0px; padding-top: 25px; padding-bottom: 0px; background-color: #; font-family: 'Great Vibes'; font-size: 70px;line-height: 60%; letter-spacing: -2px; color: #7ad1ff; text-shadow: 1px 0px 0px #000000; word-spacing: -2px; text-align: center">
List of names!<br></font></font>
<font style="font-family: verdana; font-size: 8px; text-transform: uppercase; line-height: 100%; letter-spacing: 3px; text-align: center; color: #000; text-shadow: 0px 0px 0px #000">
Привет, красавчик! Пришло время запомнить твое имя. 
</font></font>
</div></center>
<center><div style="width: 400px; padding: 20px; background: #b5dbfb; background-image: url(http://savepic.net/5693971.png); border: 10px solid #ace0fc;">
<div id="blue"><div class="page">

<img src="http://savepic.net/5670443.png" width="400px" height"400px">

</div><link href='http://fonts.googleapis.com/css?family=Carrois+Gothic+SC' rel='stylesheet' type='text/css'>

<div style="width: 380px; padding: 20px; border-right: 20px solid #bde6fb; text-align:justify; font-family: verdana; letter-spacing: 0px; font-size: 12px; color: #080808; background-image: url(http://savepic.net/5693971.png); overflow: auto; height: 350px">
<center><font style="font-family: verdana; font-size: 10px; color: 000000; line-height: 100%; text-align: justify; ">

<table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 32%;">
<center>
<b>Имена</b> </center><br>
<center><b>-A-B-C</b><br>
Apple[x]<br>
Catherine<br>
Charles [x]<br>
Cherry[x]<br>
<center><b>-D-E-F</b><br>
text<br>
<center><b>-G-H-I</b><br>
text<br>
<center><b>-J-K-L</b><br>
James <br>
Jack<br><br>
Karma [x]<br>
<center><b>-M-N-O</b><br>
Noel<br>
Ophelia<br>
Oliver<br>
<center><b>-P-Q-R</b><br>
text<br>
<center><b>-S-T-U</b><br>
Tarlyn [x]<br><br>
<center><b>-V-W-X</b><br>
William<br>
<center><b>-Y-Z-</b><br>
text<br>
</td>
<td style="width: 32%;">
<center><b>Фамилии</b></center><br>
<center><b>-A-B-C</b><br>
text<br>
<center><b>-D-E-F</b><br>
Dawson [x]<br><br>
<center><b>-G-H-I</b><br>
Hunt<br><br>
<center><b>-J-K-L</b><br>
Lewinsky [x]<br><br>
<center><b>-M-N-O</b><br>
McAdams<br>
Melton<br>
<center><b>-P-Q-R</b><br>
Potter<br>
Queen [x]<br><br>
<center><b>-S-T-U</b><br>
Stimmer [X[<br>
<center><b>-V-W-X</b><br>
Warrington<br>
Wilson<br><br>
<center><b>-Y-Z-</b><br>
text<br>

</td>

</td>
</tr>
</table>
  </div>






  <br></center>
</div></div></div></center>

Ваше имя<br>

Ваша фамилия<br>