[html]
<div class="title">

SHOWWOMAN

</div>
<div class="whodat">

королева шоу-бизнеса

</div>
<div id="background">  <div id="icon"><img src="https://i.imgur.com/FH5ulwE.png"></div>
  <div id="desc">
<p>

<p>шоувуман говорит громко и всегда задорно; шоувуман, на самом деле, — не существует.</p>

<p>то есть: она есть тут, но её тут нет: шоувуман существует только потому что шоувуман людям нужна. потому что смотреть, как ловкость рук помогает делать самые настоящие волшебные трюки — забавно. потому что в круге слишком мало подобных развлечений (в основном — для юных прибывших).</p>

<p>иногда хочется помимо плетения свитера посмотреть на что-нибудь, ну, такое. на что-нибудь, что вызывает самое настоящее восхищение и заставляет визжать от радости, хлопать в ладоши.</p>

<p>шоувуман это предлагает.</p>

<p>в основном — делает магические трюки вроде карт и голубей из шляпы: но может и другое — например, выбраться из цепей, погребённая под воду. или показать натренированное животное, показывающее удивительную ловкость (уверяю: шоувуман вегетарианка и животных вообще любит, с ними всё в порядке!)</p>

</p>
  </div>

</div>

<style>

.title
{
  font-size: 24px;
  font-family: Julius Sans One;
  font-weight: bold;
  position: relative;
margin: auto;
top: 55px;
right: 20px;
padding: 5px;
z-index: 2;
text-transform: uppercase;
display: block;
text-align: center;
}
#icon
{
  height: 80px;
  width: 80px;
  top: -15px;
  left: -15px;
  float: left;
  position: relative;}

#active#icon
{
transform: rotate(80deg);
}
#icon > img {
width: 80px;
  padding: 5px;
  border: solid 1px silver;
}
#background {
  margin: auto;
  top: 40px;
  background: white;
  position: relative;
  width: 480px;
  z-index: 1;
}
#desc
{padding: 20px;
position: relative;
right: -10px!important;
text-align: justify;
height: 200px; overflow: auto;
}
.whodat {
position: absolute;
font-size: 10px;
top: 47px;
transition: all ease-out 1s;
right: 300px;
z-index: 2;
opacity: 1;}
</style>[/html]