[html]<center>
  <div class="nonameinst"><div class="nonameinst2">
    
<!-- Ссылка на аватар -->
      <img src="http://placehold.it/100x100" class="man">
     
 <div class="user-info">
<!-- В следующей строке, после собачки добавь никнейм -->
        <div class="seeds">@yournickname</div> 

<!-- Добавить номер публикации и подписчиков -->
        <div class="buds2">000 публикаций 000 подписчиков</div> 

<!-- В следующей строке добавь текст статуса -->
        <div class="buds">текст статуса</div>
      </div>
      <a href="https://bostoncrazzy.rusff.me/" class="knop">Подписаться</a> 
    </div>

<!-- В следующей строке замени ссылку, на ссылку фото твоей публикации -->
    <div class="foto" style="background-image:URL(http://placehold.it/400x400);"> 

      <div class="text">
<!-- Сюда напиши текст публикации -->
        Текст вашего поста Текст вашего поста Текст вашего поста Текст вашего поста Текст вашего поста Текст вашего поста Текст вашего поста Текст вашего поста Текст вашего поста Текст вашего поста Текст вашего поста Текст вашего поста Текст вашего поста Текст вашего поста Текст вашего поста
      </div>
    </div>
  </div>
</center>

<style type="text/css">
  .nonameinst {
    width: 470px;
    padding: 10px 0;
    height: auto;
    position: relative;
    background-color: #fff;
    margin: auto;
  }
  .nonameinst2 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px;
    background-color: #fff;
    text-align: center;
  }
  .user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 20px;
  }
  .seeds, .buds, .buds2, .knop, .man {
    display: block;
  }
  .seeds {
    font-family: Lato, sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: lowercase;
    color: #000;
    margin-bottom: 5px;
  }
  .buds {
    font-size: 12px;
    text-transform: uppercase;
    color: #000;
    text-align: left;
    margin-bottom: 5px;
  }
  .buds2 {
    font-size: 10px;
    text-transform: uppercase;
    color: #000;
    text-align: left;
    margin-bottom: 5px;
  }
  .knop {
    width: 90px;
    height: 20px;
    background: #3897f0;
    border-radius: 5px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    margin-left: auto;
    text-decoration: none;
  }
  .man {
    height: 100px;
    width: 100px;
    border-radius: 50%;
  }
  .foto {
    height: 400px;
    width: 400px;
    margin: 15px auto;
    background-size: cover;
    position: relative;
  }
  .foto:hover .text {
    opacity: 0.7;
  }
  .text {
    opacity: 0;
    width: 360px;
    height: 250px;
    background-color: #fff;
    position: absolute;
    font-size: 14px;
    color: #555;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
    text-align: justify;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
</style>[/html]