88 lines
1.9 KiB
HTML
Executable File
88 lines
1.9 KiB
HTML
Executable File
<html>
|
|
<head>
|
|
<style>
|
|
.page {
|
|
background-color: #ddd;
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
.page .messages-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 50%;
|
|
height: 100%;
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.page .messages-section .header {
|
|
background: #bbb;
|
|
padding: 5px;
|
|
}
|
|
|
|
.page .messages-section .content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 5px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.messages-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
}
|
|
.hcontainer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.page .messages-section .content .messages-list .message {
|
|
height: 50px;
|
|
margin: 10px;
|
|
padding: 10px;
|
|
background: #1dc497;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<div class="messages-section">
|
|
<div class="header">Your messages</div>
|
|
<div class="content">
|
|
<div>Title</div>
|
|
<div class="hcontainer">
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<div class="messages-list">
|
|
<div class="message">Hi.</div>
|
|
<div class="message">Hello.</div>
|
|
<div class="message">Hello.</div>
|
|
<div class="message">Hello.</div>
|
|
<div class="message">Hello.</div>
|
|
<div class="message">Hello.</div>
|
|
<div class="message">Hello.</div>
|
|
<div class="message">Hello.</div>
|
|
<div class="message">Good morning.</div>
|
|
<div class="message">Yo!</div>
|
|
</div>
|
|
<div class="messages-list">
|
|
<div class="message">Hi.</div>
|
|
<div class="message">Hello.</div>
|
|
<div class="message">Hello.</div>
|
|
<div class="message">Hello.</div>
|
|
<div class="message">Hello.</div>
|
|
<div class="message">Hello.</div>
|
|
<div class="message">Hello.</div>
|
|
<div class="message">Hello.</div>
|
|
<div class="message">Good morning.</div>
|
|
<div class="message">Yo!</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|