Код:
<!--HTML--> <div class="tweet-main"> <div class="tweet-name-1"> <img src="https://i.imgur.com/kJf016a.png" style="width: 30px; height: 25px; margin-top: 8px; margin-left: 10px;"> <p class="tweet-name-2">Вуди Вудпекер</p> <br><p class="tweet-tweets">43545 Твит</p></div> <!-- ЗДЕСЬ ШАПКА --> <div class="tweet-pic" style="background-image: url(http://s3.uploads.ru/hBgUt.png);"></div> <!-- ЗДЕСЬ АВА (любого размера с одинаковой шириной и высотой) --> <div class="tweet-ava" style="background-image: url(http://sa.uploads.ru/X2w9Q.png);"></div> <div class="tweet-table"> <p class="tweet-name-3">Вуди Вудпекер</p> <br><p class="tweet-nick">@woody</p> <br><p class="tweet-status">туктук</p> <br><p class="tweet-info"> <img src="https://i.imgur.com/ijJWybC.png" style="width: 18px; height: 18px; padding: 0px 5px">Локация <img src="https://i.imgur.com/9LE6tM8.png" style="width: 18px; height: 18px; padding: 0px 5px;">Регистрация: месяц, 2000 г. <img src="https://i.imgur.com/ZcGcjYd.png" style="width: 18px; height: 18px; padding: 0px 5px">Дата рождения: 00, месяц </p> <br><p class="tweet-follow"><span class="follow">19</span> читаемых <span class="follow">35</span> читателей</p></div> <button class="tweet-button"><a href="#" style="color: #1da1f2;">Изменить профиль</a></button> <div class="tweet-gallery"> <!-- ЗДЕСЬ СВОИ КАРТИНКИ (любого размера с одинаковой шириной и высотой) --> <img src="http://s3.uploads.ru/Gc4nu.png"> <img src="http://s3.uploads.ru/Gc4nu.png"> <img src="http://s3.uploads.ru/Gc4nu.png"> <br><img src="http://s3.uploads.ru/Gc4nu.png"> <img src="http://s3.uploads.ru/Gc4nu.png"> <img src="http://s3.uploads.ru/Gc4nu.png"> <!-- --> </div> </div> <style> .tweet-main { background-color: #fff; width: 570px; height: auto; border-width: 1px; border-style: solid; border-color: #e6ecf0; margin-left: 55px; } .tweet-pic { width: 569.5px; height: 157px; margin-left: 0.5px; } .tweet-name-1 { width: 569.5px; height: 44.5px; background-color: #fff; margin-left: 0.5px; margin-top: 0.5px; } .tweet-name-2 { font-size: 15px; font-family: "Segoe UI"; color: #000; font-weight: bold; line-height: 0.6; text-align: center; left: -195px; top: -28px; position: relative; } .tweet-tweets { left: 55px; top: -59px; position: relative; font-size: 11px; font-family: "Segoe UI"; color: #b3b3b3; line-height: 0.9; text-align: left; } .tweet-ava { background-color: #b3b3b3; border: 3px solid #fff; border-radius: 80px; width: 140px; height: 140px; margin-top: -90px; margin-left: 15px; background-size: 100%; } .tweet-button { width: 180px; height: 40px; border: 1px solid #1da1f2; color: #1da1f2; border-radius: 60px; top: -302px; left: 370px; position: relative; outline: none; background-color: #fff; } .tweet-table { width: 250px; height: auto; } .tweet-gallery { width: 260px; height: 170px; top: -295px; left: 293px; position: relative; margin-bottom: -250px; } .tweet-gallery img { width: 80px; height: 80px; border: 2px solid #fff; background-size: 100%; } .tweet-name-3 { font-size: 15px; font-family: "Segoe UI"; color: #000; font-weight: bold; line-height: 0.6; left: 25px; position: relative; text-align: left; } .tweet-nick { font-size: 12px; font-family: 'Ubuntu', sans-serif; color: #9b9b9b; line-height: 0.75; font-weight: lighter; left: 25px; top: -30px; position: relative; } .tweet-status { font-size: 12px; font-family: 'Roboto', sans-serif; color: #000; line-height: 0.75; left: 25px; top: -50px; position: relative; } .tweet-info { font-size: 13px; font-family: "Segoe UI"; color: #b3b3b3;; line-height: 0.75; left: 20px; top: -50px; position: relative; } .tweet-follow { font-size: 12px; font-family: "Segoe UI"; color: #b3b3b3;; line-height: 0.75; left: 25px; top: -50px; position: relative; } .follow { color: #000; font-weight: bold; } @font-face { font-family: "Ubuntu"; src: url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap") format("truetype"); font-style: normal; font-weight: normal; } @font-face { font-family: "Roboto"; src: url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap") format("truetype"); font-style: normal; font-weight: normal; } </style>
- Подпись автора