фронт ВК

<html>
<head>
    <meta charset="UTF-8">

    <title>VK</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
       <style>
           body {
               background: #e1e5ed;
           }
         input[type="text"]:focus { outline: none; }
    .ts_input::-webkit-input-placeholder {
  color: #e1e3e8;
}

           input {
                width: 540px;
        height: 50px;
           }
            a {
    text-decoration: none; /* Отменяем подчеркивание у ссылки */
   }
           .menu a {
               color: #285473;
           }
           .kolonka a {
               color: #285473;
           }
             li {
    list-style-type: none;
    padding-left: 15;

   }

   ul {
    margin: 0;
    padding: 0;
   }
           hr {
               opacity: 0.2;
           }
        .ts_input {
     border: 0;
    box-sizing: border-box;
    padding: 6px 6px 6px 19px;
    margin: 7px 0;
    height: 28px;
    line-height: 16px;
    width: 230px;
    border-radius: 14px;
    -o-transition: background-color 0.05s, color 0.05s;
    transition: background-color 0.05s, color 0.05s;
    background: #305075;
    padding-left: 19px;
    border-left: 8px solid transparent;
    background-position: left 8px;
    color: #d9e2ec;
    margin-left: 385px;

           }
           .header {
     position: relative;

    height: 42px;
    margin: 0 auto;
    font-size: 12.5px;
    padding: 0 25x;
    background: #1d5982;
           }
           .logo {
                 position: absolute;
                 top: -14px;
                left: 214px;
           }

           .menu {
          position: absolute;
         left: 240px;
           }
           .kolonka {
         position: absolute;
        top: 60px;
         right: 230px;
         background: #fff;
         width: 150px;
         height: 215px;
        border-radius: 4px;
           }


           .durov23 {

         background: #fff;
        width: 540px;
        height: 50px;
        margin: 10px auto;
        border-radius: 4px;
        padding-left: 9px;

           }
              .durov24 {
         background: #fff;
        width: 540px;
        height: 200px;
        margin: 10px auto;
         padding-left: 9px;
           }
                .durov25 {
         background: #fff;
        width: 540px;
        height: 200px;
        margin: 0 auto;
       padding-left: 9px;
           }


           .durov_text {
               position: absolute;
               left: 500px;
               top: 362px;
           }
           .data2 {
                position: absolute;
               left: 498px;
               top:380px;
                opacity: 0.6;
           }
           .durov_text1 {
                position: absolute;
               left: 430px;
           }
           .durov_text1 hr {
               width: 495px;
           }
           .like1 {
               position: absolute;
             left: 430px;
              top: 460px;

           }
           .repost1 {
                position: absolute;
               left: 575px;
               top: 460px;
           }
           .text{
               position: absolute;
               left: 500px;
               top: 150px;

           }
           .text1 {
                 position: absolute;
               left: 430px;
           }
           .text1 hr {
               width: 495px;
           }
           .data {
               position: absolute;
               left: 498px;
               top:167px;
                opacity: 0.6;
           }
                .repost {
               position: absolute;
               left: 575px;
               top: 250px;
           }

           .like {
            position: absolute;
             left: 430px;
              top: 250px;

           }`


           .li1 {
               padding-top:10px;
           }
           .li1:hover {
               background: #dedfe0;

           }


           .li2{
               padding-top: 10px;
           }
           .li2:hover {
               background: #dedfe0;

           }
           .li3 {
               padding-top: 10px;
           }
           .li3:hover {
               background: #dedfe0;

           }
           .li4 {
               padding-top: 10px;
           }
           .li4:hover {
               background: #dedfe0;

           }
           .li5 {
               padding-top: 10px;
           }
           .li5:hover {
               background: #c5c8cc;

           }

               .li6 {
               padding-top:10px;
           }
           .li6:hover {
               background: #c5c8cc;

           }


           .li7{
               padding-top: 10px;
           }
           .li7:hover {
               background: #c5c8cc;

           }
           .li8 {
               padding-top: 10px;
           }
           .li8:hover {
               background: #c5c8cc;

           }
           .li9 {
               padding-top: 10px;
           }
           .li9:hover {
               background: #c5c8cc;

           }
           .li10 {
               padding-top: 10px;
           }
           .li10:hover {
               background: #c5c8cc;

           }
              .li11 {
               padding-top: 10px;
           }
           .li11:hover {
               background: #c5c8cc;

           }

              .li12 {
               padding-top: 10px;
           }
           .li12:hover {
               background: #c5c8cc;

           }
              .li13 {
               padding-top: 10px;
           }
           .li13:hover {
               background: #c5c8cc;

           }
              .li14 {
               padding-top: 10px;
           }
           .li14:hover {
               background: #c5c8cc;

           }

              .li15 {
               padding-top: 10px;
           }
           .li15:hover {
               background: #c5c8cc;

           }

                      .round3 {
     margin-left: 15px;
     margin-top: 10px;
    width: 50px;
    height: 50px;
   }

           .round {
     margin-left: 15px;
     margin-top: 10px;
    border-radius: 100px; /* Радиус скругления */
    border: 3px solid #fff; /* Параметры рамки */
    width: 50px;
    height: 50px;
   }

           }

        </style>
    </head>
    <body>
        <div class = "header">

            <input type = "text" class = "ts_input"  placeholder="Поиск">
            <div class = "logo">
            <img src = "http://www.softrew.ru/uploads/posts/2016-12/1482060535_kak-pomenyat-fon-v-vk.png" class = "round3">
            </div>
        </div>
       <div class = "menu">
           <li class = "li5"><a href = "#"><i class="fa fa-home" aria-hidden="true"></i> Моя страница</a> </li>
                <li class = "li6"><a href = "index_music.html"> <i class="fa fa-newspaper-o" aria-hidden="true"></i> Новости</a> </li>
                <li class = "li7"><a href = "#"><i class="fa fa-comments-o" aria-hidden="true"></i> Сообщения</a>   </li>
                <li class = "li8"><a href = "#"><i class="fa fa-user" aria-hidden="true"></i> Друзья</a></li>
                <li class = "li9"><a href = "index_group.html"><i class="fa fa-users" aria-hidden="true"></i> Группы</a></li>
                  <li class = "li10"><a href = "#"><i class="fa fa-camera" aria-hidden="true"></i> Фотографии</a></li>
                   <li class = "li11"><a href = "#"><i class="fa fa-music" aria-hidden="true"></i> Музыка</a></li>
             <li class = "li12"><a href = "#"> <i class="fa fa-file-video-o" aria-hidden="true"></i> Видео</a></li>
              <li class = "li13"><a href = "#"><i class="fa fa-gamepad" aria-hidden="true"></i> Игры</a></li>
            <hr />
             <li class = "li14"><a href = "#"><i class="fa fa-briefcase" aria-hidden="true"></i> Товары</a></li>
               <li class = "li15"><a href = "#"><i class="fa fa-file" aria-hidden="true"></i> Документы</a></li>
        </div>
        <div class = "kolonka">
            <ul>
                <li class = "li1"><a href = "#">Новости</a> </li>
                <li class = "li2"><a href = "#"> Рекомендации</a> </li>
                <li class = "li3"><a href = "#">Трансляции</a>   </li>
                <li class = "li4"><a href = "#">Поиск</a></li>
             <hr />
          <li class = "li4"><a href = "#">Обновления</a></li>
          <li class = "li4"><a href = "#">Комменатрии</a></li>
            </ul>

        </div>

    <div class = "durov23">
        <input type = "text" placeholder="Что у вас нового?" style='border: 0px;' >
        </div>
        <div class = "durov24">
            <img src="https://pp.userapi.com/c623616/v623616034/1c17b/tD6H1FghVUo.jpg" alt="" class="round"> <div class = "text"><a href = "#">Команда ВКонтакте </a> </div>
            <div class = "data">
            10 минут назад
            </div>
            <div class = "text1">
                <p>Эта лента создана Димой Дуровым. </p> <hr />
            </div>
            <div class = "like"> <font style: color = "#285473"> <i class="fa fa-heart" aria-hidden="true"></i> Нравится 5676 </font></div> <div class = "repost"><font style: color = "#285473"> <i class="fa fa-bullhorn" aria-hidden="true"></i> 1211 </font></div>

            </div>


           <div class = "durov25">
                   <img src="https://pp.userapi.com/c636416/v636416613/3eaee/4BRTWbijoWE.jpg" alt="" class="round"> <div class = "durov_text"><a href = "#">ВКонтакте для бизнеса</a> </div>
                <div class = "data2">
            35 минут назад
            </div>
        <div class = "durov_text1">
                <p>Эта лента создана Димой Дуровым</p> <hr />
            </div>
                <div class = "like1"> <font style: color = "#285473"> <i class="fa fa-heart" aria-hidden="true"></i> Нравится 2676 </font></div> <div class = "repost1"><font style: color = "#285473"> <i class="fa fa-bullhorn" aria-hidden="true"></i> 574 </font></div>

        </div>


    </body>