Код:
<!--HTML-->

<div class="low">
  
  <div class="light">
    
    <div class="tab">
      <div class="tabtitle">блоги</div>
      <svg height="10" width="500">
  <line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:1px" />
</svg>
и с чем их едят

<div class="clear"></div>
    </div>
    
    <div class="tabcontent">
      <b>К</b>аждый из вас имеет право создать <b>1 тему</b> на форуме. Название какое угодно, главное в рамках приличного. Считайте, что это ваша стена ВК, только теперь вы в праве добавлять сюда также какие-то ссылки по форуму, вести учеты и цепочки чего-либо. Хотите - видео с ютуба, хотите - песню. Оформляйте сообщения как душе угодно, пробуйте. И не забывайте, что в первом сообщении лучше указать, <b>хотите вы или нет</b>, чтобы кто-то вас комментировал. Чисто для собственного спокойствия.<br><b>ВСЕМ УДАЧИ!</b><br><img src="https://data.whicdn.com/images/106926110/superthumb.jpg">
    </div>
    
  </div>
  
</div>


<style>

@import url('https://fonts.googleapis.com/css?family=Lato');
  .low {
    border-top:50px solid white;
    width:500px;
    margin:0 auto;
    border-bottom:50px solid white; 
    overflow:hidden; 
  }
  
  .light {
    background:url(https://data.whicdn.com/images/12777435/large.png) white center center;
    width:500px;
    height:400px;
  } 
  
  .tab {
    width:390px;
    height:80px;
    background:white;
    line-height:80px;
    font-size:15px;
    font-family: 'Lato', sans-serif;
    text-transform:uppercase; 
    padding-left:10px; 
    -ms-transform: rotate(270deg); 
    -ms-transform-origin: 50% 50%; 
    -webkit-transform: rotate(270deg); 
    -webkit-transform-origin: 50% 50%; 
    transform: rotate(270deg);
    transform-origin: 90% 50%; 
    margin-left:100px;
    transition:1s ease 0.5s; 
  }
  
  .low:hover .tab {
    margin-left:-300px;
  }
  
  .tab svg {
    float:left; 
    width:170px;
    padding-top:40px;
  }
  .tabtitle { float:left; } 
  .clear { clear:both; } 
  
  .tabcontent {
    background:white; 
    height:400px;
    width:340px;
    padding:20px; 
    margin-left:500px;
    margin-top:-100px;
    transition:1s ease 0.5s; 
    font-family: 'Lato', sans-serif; 
    font-size:14px; 
    line-height:100%; 
    text-align:justify;
    overflow:auto; 
  }
  
  
  .tabcontent::-webkit-scrollbar {
    width: 2px;
  }
  .tabcontent::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  }
  .tabcontent::-webkit-scrollbar-thumb {
    background: rgb(255, 205, 76); 
  }
  
  .tabcontent b {
    color:rgb(255, 205, 76); 
  }
  
  .low:hover .tabcontent { 
    margin-left:120px; 
  }
</style>
Код:
<!--HTML-->

<center><div class="fearless"><div class="fearlessimg"><div class="fearlesshead"><div class="fearlessname">bubble butt</div><div class="fearlessat">@ pticin </div><div class="fearlesstext">что же такое блоги? попробуйте сами :)</div></div></div><div class="fearlesstweets">tweets  &nbsp; &nbsp; &nbsp; &nbsp; following &nbsp; &nbsp; &nbsp; &nbsp; followers<div class="fearlessnumber">0 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  0  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0 </div></div><div class="fearlessedit">edit profile</div></div><div class="fearlesscredit"> <a href="http://isguild.rusff.ru/profile.php?id=2">☾</a></center>

<style> 

.fearless { width:500px; height:300px; background-color: #FCFCFC; position: relative;  } 

.fearlessimg { width:500px; height:220px; background-image:url(https://static.tumblr.com/d4c4a4580c59bfc95913038d64988d1c/290izbx/29Dnj7zfp/tumblr_static_cxzesj0ifxw8wsoso0go80sgw_640_v2.jpg); position: relative;  } 

.fearlesshead { width:75px; height:75px; background-image:url(http://images6.fanpop.com/image/photos/39200000/Harry-Potter-harry-james-potter-39298612-75-75.png); text-align:center; position: relative; border: 3px solid white; top: 20px;  } 

.fearlessname { font-famiy: century gothic; font-size:12px; color:white; position:relative; top:80px; text-align:center; } 

.fearlessat { font-famiy: century gothic; font-size:11px; color:white; position:relative; top:85px; text-align:center; } 

.fearlesstext { font-famiy: century gothic; font-size:10px; color:white; position:relative; top:95px; text-align:center;  word-wrap: break-word;   } 

.fearlesstweets { color: #CBCFCD; text-transform: uppercase; font-size:12px; position:relative; top:20px; font-family:century gothic; text-align:left; left:35px;   } 

.fearlessnumber { color: #2E8CB1; font-size:20px;  position:relative;  top:15px; font-family:century gothic; text-align:left; left:15px; } 
.fearlessedit { color:black; font-family: century gothic; font-size:12px; text-transform:uppercase; top:-10px; left:155px; position: relative; border:2px solid black; padding:5px; width:90px;    } 

.fearlesscredit { postion:relative; font-size:15px; top:15px; } 


</style>