125 lines
3.2 KiB
HTML
125 lines
3.2 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="/bricks/css/bricks.css" />
|
|
<style>
|
|
.page {
|
|
background-color: #ddd;
|
|
width: 300px;
|
|
height: 500px;
|
|
}
|
|
|
|
.messages-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 50%;
|
|
height: 100%;
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.header {
|
|
background: #bbb;
|
|
padding: 5px;
|
|
}
|
|
|
|
.message {
|
|
height: 50px;
|
|
margin: 10px;
|
|
padding: 10px;
|
|
background: #1dc497;
|
|
}
|
|
.vbox {
|
|
display: flex;
|
|
flex-direction:column;
|
|
overflow:auto;
|
|
}
|
|
|
|
.hbox {
|
|
display:flex;
|
|
flex-direction:row;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.filler {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.fl{
|
|
overflow-x:scroll;
|
|
}
|
|
.flc{
|
|
flex-direction:column;
|
|
}
|
|
.mint {
|
|
flex:0 1 auto;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<div class="messages-section">
|
|
<div class="header">Your messages</div>
|
|
<div class="vbox filler">
|
|
<div >Title</div>
|
|
<div class="vbox filler fl" >
|
|
<div class="hbox" >
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
</div>
|
|
<div class="vbox filler flc">
|
|
<div class="hbox">
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
</div>
|
|
<div class="hbox">
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
</div>
|
|
<div class="hbox">
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
</div>
|
|
<div class="hbox">
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
</div>
|
|
<div class="hbox">
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
</div>
|
|
<div class="hbox">
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
</div>
|
|
<div class="hbox">
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
</div>
|
|
<div class="hbox">
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
</div>
|
|
<div class="hbox">
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
<img src="https://http.cat/100" width="70" height="50" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|