Код:
<!--HTML--><style type="text/css">
.regan .alec { width: 450px; height: 80px; background-color: #4e70ba; border-bottom: 7px solid #FBCA57; position: relative; top: 0px; left: 0px; opacity: 0; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; }
.moretti a:hover { color: #b8c968; }

.regan .anna { width: 245px; padding-top: 5px; padding-bottom: 5px; font-size: 14px; letter-spacing: 2px; color: #fff; text-align: center; text-transform: lowercase; line-height: 100%; font-style: italic; background-color: #4e70ba; font-family: cambria, serif; position: absolute; top: 65px; opacity: 0; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s;}
.regan { width: 450px; height: 400px; background-color: #f8f4ff; position: relative; -webkit-box-shadow: 1px 1px 21px 3px rgba(25, 25, 25, 0.30); -moz-box-shadow:    1px 1px 21px 3px rgba(25, 25, 25, 0.30); box-shadow: 1px 1px 21px 3px rgba(25, 25, 25, 0.30); overflow: hidden; }

.regan .img { width: 245px; height: 150px; position: absolute; top: 40px; left: 200px; transition-duration: .4s; -webkit-transition-duration: .4s; -moz-transition-duration: .4s; -ms-transition-duration: .4s; -o-transition-duration: .4s; z-index: 9; }
.regan:hover .img { top: 10px; z-index: 9;}
.regan:hover .alec { opacity: .99; }
.regan .moretti { width: 400px; height: 200px; padding-right: 5px; bottom: -250px; position: absolute; left: 25px; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; overflow: auto; font-family: arial, serif; font-size: 11px; text-align: center; color: #222; line-height: 100%;}
.moretti a { letter-spacing: 2px; font-family: cambria, serif; font-size: 12px; line-height: 100%; text-align: center; text-transform: lowercase; color: #000; font-style: italic; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s;}
.regan:hover .moretti { bottom: 25px; }
.moretti::-webkit-scrollbar { width: 10px; background-color: #222; border: 4px solid #fafafa; }
.moretti::-webkit-scrollbar-thumb { background-color: #222; border: 3px solid #fafafa; }
.regan:hover .anna { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; opacity: .99;}
</style>


<center><div class="regan"><div class="img"><div style="width: 245px; height: 150px; border-radius: 10%; background-image: url(http://67.media.tumblr.com/b0112f0c4c887b9f8c4a40aaf091c44f/tumblr_ncgfxikAxO1smv4t3o1_250.gif);"><div class="anna"> 

<font size="6" face="Lobster">Charlene "Charlie" Velkoro<br>
Шарлин "Чарли" Велкоро</font>

</div></a></div></div><div class="alec"></div>

<div class="moretti">
<center>
 <font size="3" face="Lobster"><b>в</b>нешность:</font> 

Phoebe Tonkin. <br>

 <font size="3" face="Lobster"> <b>д</b>ата рождения и возраст:</font> 

17.05.1986, 30 <br>

 <font size="3" face="Lobster"><b>м</b>есто рождения:</font> 

Город, Страна<br>

 <font size="3" face="Lobster"><b>о</b>риентация:</font>

 Гетеро<br>

 <font size="3" face="Lobster"><b>п</b>рофессия:</font> 

<br>

 <font size="3" face="Lobster"><b>п</b>осты от:</font>

от 2,5к до 6к </center><br>
<br><br>

<center><font size="3" face="Lobster">Мы живем только раз, а историй на целую книгу.</font></center>
<br>
<i>БИОГРАФИЯ И ХАРАКТЕР</i>

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

Отредактировано егермейстер (2016-12-03 08:11:14)