Код:
<!--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)