[html]<style>
/* ==================================================
ОБЩИЕ НАСТРОЙКИ
================================================== */
#instagram {
position: relative;
width: 561px;
max-width: 100%;
min-height: 228px;
margin: 20px auto;
overflow: hidden;
border-radius: 30px;
background-image: url(https://upforme.ru/uploads/001c/ac/b2/2/681363.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: #4c6264;
font-family: Inter, Helvetica, sans-serif;
}
#instagram,
#instagram * {
box-sizing: border-box;
}
/* ==================================================
ОСНОВНАЯ ЧАСТЬ
================================================== */
#instagram .insta_header {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 20px;
padding: 10px 20px;
padding-left: 40px;
}
/* ==================================================
АВАТАР
================================================== */
#instagram .insta_avatar {
position: relative;
flex: 0 0 156px;
border: 3px solid rgb(75 143 151 / 48%);
border-radius: 25px;
background: rgba(224, 224, 224, 0.7);
top: 20px;
}
#instagram .insta_avatar img {
display: block !important;
width: 156px !important;
max-width: none !important;
height: 156px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 21px;
object-fit: cover;
object-position: center;
}
/* ==================================================
ПРАВАЯ ЧАСТЬ
================================================== */
#instagram .insta_info {
flex: 1;
min-width: 0;
position: relative;
top: 18px;
}
/* Маленькая надпись над ником */
#instagram .insta_label {
display: block;
margin-bottom: 15px;
color: rgba(255, 255, 255, 0.72);
font-size: 9px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
}
/* Никнейм */
#instagram .insta_nickname {
display: block;
margin-bottom: 15px;
color: #42595b;
font-family: Inter, Arial, sans-serif;
font-size: 24px;
font-weight: 300;
line-height: 1;
letter-spacing: 1px;
text-transform: lowercase;
}
/* ==================================================
СТАТИСТИКА
================================================== */
#instagram .insta_stats {
display: flex;
gap: 23px;
margin-bottom: 27px;
}
#instagram .insta_stats span {
display: flex;
align-items: baseline;
gap: 10px;
color: #536769;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
white-space: nowrap;
}
#instagram .insta_stats strong {
color: #536769;
font-size: 13px;
font-weight: 400;
}
/* ==================================================
ИНФОРМАЦИЯ О ПОЛЬЗОВАТЕЛЕ
================================================== */
#instagram .insta_about {
color: #344e51;
font-family: Inter, Arial, sans-serif;
font-size: 12px;
font-style: italic;
font-weight: 300;
line-height: 1.35;
}
#instagram .insta_about strong {
display: inline-block;
margin-bottom: 5px;
color: #3f585b;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 1.2;
}
/* ==================================================
ССЫЛКИ В ОПИСАНИИ
================================================== */
#instagram .insta_about a {
color: #527477 !important;
font-weight: 500;
text-decoration: none !important;
}
#instagram .insta_about a:hover {
color: #2f5559 !important;
text-decoration: none !important;
}
</style>
<div id="instagram">
<div class="insta_header">
<!-- Аватар -->
<div class="insta_avatar">
<img
src="/files/001b/95/a1/33822.jpg"
>
</div>
<!-- Информация -->
<div class="insta_info">
<span class="insta_nickname">
nickname
</span>
<!-- Статистика -->
<div class="insta_stats">
<span>
<strong>0</strong>
публикаций
</span>
<span>
<strong>0</strong>
подписчиков
</span>
<span>
<strong>0</strong>
подписок
</span>
</div>
<!-- Описание -->
<div class="insta_about">
<strong>Имя Фамилия</strong><br>
Любой текст<br>
Можно с переносом строки<br>
Сколько угодно строк
</div>
</div>
</div>
</div>
<style>
/* ==================================================
ОБЩИЕ НАСТРОЙКИ
================================================== */
#instagram {
position: relative;
width: 561px;
max-width: 100%;
height: 236px;
margin: 20px auto;
overflow: hidden;
border-radius: 30px;
background-image: url(https://upforme.ru/uploads/001c/ac/b2/2/681363.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: #4c6264;
font-family: Inter, Helvetica, sans-serif;
}
#instagram,
#instagram * {
box-sizing: border-box;
}
/* ==================================================
ОСНОВНАЯ ЧАСТЬ
================================================== */
#instagram .insta_header {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 20px;
padding: 10px 20px;
padding-left: 40px;
}
/* ==================================================
АВАТАР
================================================== */
#instagram .insta_avatar {
position: relative;
flex: 0 0 156px;
border: 3px solid rgb(75 143 151 / 48%);
border-radius: 25px;
background: rgba(224, 224, 224, 0.7);
top: 20px;
}
#instagram .insta_avatar img {
display: block !important;
width: 156px !important;
max-width: none !important;
height: 156px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 21px;
object-fit: cover;
object-position: center;
}
/* ==================================================
ПРАВАЯ ЧАСТЬ
================================================== */
#instagram .insta_info {
flex: 1;
min-width: 0;
}
/* Маленькая надпись над ником */
#instagram .insta_label {
display: block;
margin-bottom: 15px;
color: rgba(255, 255, 255, 0.72);
font-size: 9px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
}
/* Никнейм */
#instagram .insta_nickname {
display: block;
margin-bottom: 15px;
color: #42595b;
font-family: Inter, Arial, sans-serif;
font-size: 24px;
font-weight: 300;
line-height: 1;
letter-spacing: 1px;
text-transform: lowercase;
}
/* ==================================================
СТАТИСТИКА
================================================== */
#instagram .insta_stats {
display: flex;
gap: 23px;
margin-bottom: 27px;
}
#instagram .insta_stats span {
display: flex;
align-items: baseline;
gap: 10px;
color: #536769;
font-size: 11px;
font-weight: 400;
line-height: 1.2;
white-space: nowrap;
}
#instagram .insta_stats strong {
color: #536769;
font-size: 13px;
font-weight: 400;
}
/* ==================================================
ИНФОРМАЦИЯ О ПОЛЬЗОВАТЕЛЕ
================================================== */
#instagram .insta_about {
color: #344e51;
font-family: Inter, Arial, sans-serif;
font-size: 12px;
font-style: italic;
font-weight: 300;
line-height: 1.35;
}
#instagram .insta_about strong {
display: inline-block;
margin-bottom: 5px;
color: #3f585b;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 1.2;
}
/* ==================================================
ССЫЛКИ В ОПИСАНИИ
================================================== */
#instagram .insta_about a {
color: #527477 !important;
font-weight: 500;
text-decoration: none !important;
}
#instagram .insta_about a:hover {
color: #2f5559 !important;
text-decoration: underline !important;
}
</style>[/html]