[html]<script src="https://kit.fontawesome.com/1427d036f5.js" crossorigin="anonymous"></script>
<style>
.sns {
position: relative;
margin: 12% auto;
width: 380px;
height: 430px;
background: url(https://forumupload.ru/uploads/000c/73/14/2/669330.jpg);
border: 1px solid #dad9de;
border-radius: 22px;
}
.chatbox {
position: static;}
.top-bar {
width: 380px;
height: 60px;
background: #fdfcff;
box-shadow: inset #bda4de4f 1px 1px 20px 0px;
border-radius: 21px 21px 0 0;
border-bottom: 1px solid #dad9de;
}
.avatar {
position: absolute;
top: 10px;
right: 30px;
}
.avatar img {
border-radius: 100%;
border: 2px solid #f2d6ef;
max-width: 35px;
max-height: 35px;
}
.name {
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
width: 200px;
padding: 5px 20px;
text-align: center;
line-height: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 54px;
margin-left: 60px;
}
.name > span {
text-transform: lowercase;
font-size: 8px;
margin-top: 2px;
line-height: 100%;
font-weight: 500;
}
.middle {
position: absolute;
width: 100%;
opacity: 0.85;
top: 60px;
height: 80%;
}
.incoming {
position: absolute;
padding: 20px;
overflow-y: auto;
height: 300px;
}
.incoming .time {
font-size: 7px;
color: #777777;
padding: 0px 0px 4px 0px;
}
.mess {
position: relative;
display: inline-block;
margin-bottom: 5px;
background: #f4bef3;
color: black;
font-size: 10px;
padding: 10px 10px 10px 12px;
border-radius: 20px;
}
.mess img {
max-width: 150px;
max-height: 150px;
border-radius: 10px;
min-width: 15px;
min-height: 15px;
}
.messimg {float: right;
padding: 5px 0px 5px 0px;
position: relative;
width: 290px;
text-align: right;
}
.messimg img {max-width: 150px;
max-height: 150px;
border-radius: 10px;
min-width: 15px;
min-height: 15px;}
.vid img {
max-width: 100px;
max-height: 100px;
border-radius: 100%;
border: 4px solid #dad9de;
min-width: 100px;
min-height: 100px;
}
.bottom-bar {
position: absolute;
width: 380px;
height: 40px;
left: -1px;
bottom: -12px;
background: #fdfcff;
box-shadow: inset #bda4de4f 1px 1px 20px 0px;
border-radius: 0 0 22px 22px;
border: 1px solid #dad9de;
}
.text {
padding: 7px;
width: 68%;
left: 5%;
position: absolute;
border: 1px solid #dad9de;
top: 5px;
opacity: .8;
/* background: #f6c5f34d; */
color: #000;
border-radius: 22px;
}
.but {
position: absolute;
font-size: 14px;
color: #474747;
top: 12px;
opacity: 0.8;
right: 26px;
}
details {
display: inline-flex;
background: url(https://forumupload.ru/uploads/000c/73/14/2/779776.png) no-repeat;
flex-direction: column;
width: 218px;
}
summary {
width: 218px;
padding: 15px 0px 4px 0px;
display: flex;
cursor: pointer;
position: relative;
font-size: 8px;
font-weight: bold;
margin-top: 25px!important;
text-transform: uppercase;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
}
</style>
<div class="sns">
<div class="chatbox">
<div class="top-bar">
<div class="avatar"><img src="https://forumupload.ru/uploads/000c/73/14/2/160289.png"></div>
<div class="name">name
<span>online</span></div>
</div>
<div class="middle">
<div class="incoming">
<div class="mess">красиво, по асфальту бензин перламутром скользит, всё плавится, как резина, и становится прошлым, завтра утром пройдёт, а пока погорит <img src="https://i.imgur.com/b6enEGN.png"></div>
<div class="time">2:35</div>
<div class="messimg"><img src="https://forumupload.ru/uploads/000c/73/14/2/107993.jpg"></div>
<div class="mess">ты меня не любил</div>
<div class="mess">значит я тебя тоже</div>
<div class="time">2:37pm</div>
<div class="vid"><img src="https://forumupload.ru/uploads/000c/73/14/2/52829.gif"></div>
<div class="time">2:39pm</div>
<div class="mess"><details><summary>перевести в текст</summary>
до скорой встречи, мой друг, у меня для тебя есть сюрприз посмотри, как красиво вокруг, когда падаешь вниз
</details></div>
<div class="time">2:41pm</div>
</div> </div>
<div class="bottom-bar">
<div class="text">Type a message...</div>
<div class="but"><i class="fas fa-paper-plane"></i></div>
</div>
</div>
</div>
[/html]
