[html]<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">

<style> #rachelgreen{ width: 400px; height: 550px; background: url(http://funkyimg.com/i/2E3pk.png); background-size: 400px; outline: 1px solid #8e6d9d; border: 18px solid #8e6d9d; position: relative; margin: 10px auto; overflow: hidden; }

#rachelgreen a{ text-decoration: none; cursor: crosshair; }

#rachelgreen ::-webkit-scrollbar { width: 0px; } #rachelgreen ::-webkit-scrollbar-track { background: #8e6d9d; border: 0.5px solid #8e6d9d; } #rachelgreen ::-webkit-scrollbar-thumb { background: #8e6d9d; border: 0.5px solid #8e6d9d; }

#rachelgreen .main{ width: 400px; height: 55px; top: 240px; left: 0; background: #8e6d9d; position: relative; opacity: 0.85; border-top: 0.5px solid #8e6d9d; border-bottom: 0.5px solid #8e6d9d; -webkit-transition: 0.5s ease-in 0.9s; transition: 0.5s ease-in 0.9s; z-index: 1; }

#rachelgreen:hover .main{ top: 52px; -webkit-transition: 0.5s ease-in 0s; transition: 0.5s ease-in 0s; }

#rachelgreen .icon{ width: 110px; height: 110px; position: relative; background: #8e6d9d; top: -30px; border-radius: 100px; border: 1px solid #8e6d9d; }

#rachelgreen .first{ height: 20px; position: absolute; top: 11px; right: 256px; color: #fff; letter-spacing: 2px; font-family: 'Playfair Display', serif; text-transform: uppercase; font-size: 12px; line-height: 12px; background: #8e6d9d; padding: 10px; }

#rachelgreen .last{ height: 20px; position: absolute; top: 11px; left: 256px; color: #fff; letter-spacing: 2px; font-family: 'Playfair Display', serif; text-transform: uppercase; font-size: 12px; line-height: 12px; background: #8e6d9d; padding: 10px; }

#rachelgreen .line{ width: 350px; top: 28px; border-top: 0.5px solid #8e6d9d; position: relative; }

#rachelgreen .base{ width: 400px; height: 550px; top: 0px; left: -400px; position: absolute; background: #transparent; -webkit-transition: 0.7s ease-in 0s; transition: 0.7s ease-in 0s; } #rachelgreen:hover .base{ left: 0px; -webkit-transition: 0.7s ease-in 0.7s; transition: 0.7s ease-in 0.7s; }

#rachelgreen .box{ width: 325px; height: 85px; background: #c7c1e0; opacity: 0.8; outline: 1px solid #fff; position: relative; top: 141px; margin-top: 13px; }

#rachelgreen c{ color: #fff; padding: 0px 0px;}

#rachelgreen .about{ width: 312px; height: 75px; background: #c7c1e0; opacity: 0.9; position: absolute; top: 160px; left: 44px; color: #8e6d9d; outline: 1px solid #8e6d9d; } #rachelgreen .about c{ float: left; background: #972b38; border-right: 1px solid #8e6d9d; } #rachelgreen .textbox{ width: 230px; height: 65px; position: absolute; top: 164px; right: 45px; overflow: auto; color: #000; text-align: justify; font-family: 'Times'; font-size: 10.5px; letter-spacing: 0px; line-height: 11px; }

#rachelgreen .enemies{ width: 312px; height: 75px; background: #c7c1e0; opacity: 0.9; position: absolute; top: 258px; left: 44px; outline: 1px solid #8e6d9d; } #rachelgreen .enemies c{ float: right; background: #2d767f; border-left: 0.5px solid #8e6d9d; } #rachelgreen .textbox2{ width: 230px; height: 65px; position: absolute; top: 262px; left: 45px; overflow: auto; color: #000; text-align: justify; font-family: 'Times'; font-size: 10.5px; letter-spacing: 0px; line-height: 11px; }

#rachelgreen .friends{ width: 312px; height: 75px; background: #c7c1e0; opacity: 0.9; position: absolute; top: 355px; left: 44px; outline: 1px solid #8e6d9d; } #rachelgreen .friends c{ float: left; border-right: 1px solid #8e6d9d; background: #7a916e; } #rachelgreen .textbox3{ width: 230px; height: 67px; position: absolute; top: 360px; right: 45px; overflow: auto; color: #000; text-align: justify; font-family: 'Times'; font-size: 10.5px; letter-spacing: 0px; line-height: 11px; }

</style>

<center>
<div id="rachelgreen">

<div class="main">
     <div class="line"></div>
     
     <div class="icon">
             <img src="http://funkyimg.com/i/2E3t1.png">
      </div>
     
     <div class="first"></div>
     <div class="last"></div>
</div>

<div class="base">
     <div class="box"></div>
     <div class="about"><c title='Вонхо'><img src="http://funkyimg.com/i/2Et4z.gif"></c></div> 
     <div class="textbox">
        Ваш главный администратор. Коды, мелкая текущая графика, всё, что касается мат.части, пиар и интерактивы - на все руки мастер. Куратор Земли. Я люблю вас всех и мечтаю, чтобы мы были большой, шумной, но крепкой семьей, и сделаю всё, что для этого необходимо.
     </div>
     
     <div class="box"></div>
     <div class="enemies"><c title='Чимин'> <img src="http://funkyimg.com/i/2Et4x.gif"></c></div>
     <div class="textbox2">
        Чимин - наш обитатель пиара, создатель рекламы и её вдохновитель. Куратор Моря, готовый утопить Вас в заботе и внимании, если понадобится какая-то помощь, так что не стесняйтесь за ней обращаться, неудержимый пиарщик всегда придет на выручку!
     </div>
     
     <div class="box"></div>
     <div class="friends"><c title='Чангюн'> <img src="http://funkyimg.com/i/2FeUw.gif"></c></div>
     <div class="textbox3">
        Чангюн - куратор Неба, наша творческая палочка выручалочка, вытворяющая такую красоту, что глаз не отвезти! Плашки, прекрасные аватары, залипательные рекламы и многая другая графика - его рук дело, а потому если хотите украсить свою жизнь - обращайтесь к братцу Гюну!
     </div>
 
 
</div>

</div>
</center>[/html]