<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wrapper">
<div class="left">
<div class="card header d-flex flex-row justify-content-between ">
<div class="profile align-self-center">
<img src="https://picsum.photos/200/200" class="rounded-circle avatar" alt="">
</div>
<div class="options align-self-center" >
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-three-dots-vertical" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</div>
</div>
<div class="body">
<div class="message-system d-flex flex-row">
<div class="align-self-center p-3 icon">
<svg clas width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-exclamation-octagon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146zM5.1 1L1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1z"/>
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
</svg>
</div>
<div class="align-self-center pl-3 text">
<span>
<b>No tienes conexion a internet</b>
</span>
</div>
</div>
<div class="searcher card">
<div class="input-group p-1">
<input type="search" class="form-control" placeholder="Buscar..." aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="conversation">
<div class="card-conversation">
<div class="body d-flex flex-row justify-content-between ">
<div class="data d-flex flex-row">
<div class="icon align-self-center p-2">
<img src="https://picsum.photos/200/200" class="rounded-circle avatar" alt="">
</div>
<div class="data-conversation d-flex flex-column">
<div class="title">
<b>Familia</b>
</div>
<div class="last-message d-flex flex-row">
<div class="no-visto align-self-cente">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
</svg>
</div>
<!-- UNO A UNO -->
<div class="text-last-message align-self-center ">
nico: Te espero ene a ....
</div>
</div>
</div>
</div>
<div class="date">
09/09/2020
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="card header d-flex flex-row justify-content-between ">
<div class="d-flex flex-row data">
<div class="avatar align-self-center">
<img src="https://picsum.photos/200/200" class="rounded-circle avatar" alt="">
</div>
<div class="d-flex flex-column info ">
<div class="label">
Familia
</div>
<div class="status">
Online
</div>
</div>
</div>
<div class="options align-self-center" >
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-three-dots-vertical" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
</div>
</div>
<div class="body ">
<!-- BREAK DE CHAT POR DIA -->
<div class=" break d-flex flex-column align-items-center">
<div class="date-break d-flex justify-content-center align-items-center">
<div>
YESTERDAY
</div>
</div>
</div>
<!-- MENSAJE MIO -->
<div class="message break d-flex flex-column align-items-end">
<div class=" body-card my d-flex flex-column ">
<div class="header-message">
</div>
<div class="body-message">
<div class="img">
<img src="https://picsum.photos/100/400" alt="">
</div>
<div class="msg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque architecto illum similique voluptate iste, magni ipsam odio commodi perferendis, pariatur eos vitae sapiente molestias quos repudiandae cum atque dicta officia?
</div>
</div>
<div class="footer-message">
<div>
23:12
</div>
</div>
</div>
</div>
<!-- MENSAJE MIO -->
<div class="message break d-flex flex-column align-items-end">
<div class=" body-card my my d-flex flex-column ">
<div class="header-message">
</div>
<div class="body-message">
<div class="msg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque architecto illum similique voluptate iste, magni ipsam odio commodi perferendis, pariatur eos vitae sapiente molestias quos repudiandae cum atque dicta officia?
</div>
</div>
<div class="footer-message">
<div>
23:12
</div>
</div>
</div>
</div>
<!-- MENSAJE DE OTRO -->
<div class="message break d-flex flex-column align-items-start">
<div class=" body-card other d-flex flex-column ">
<div class="header-message">
Gero
</div>
<div class="body-message">
<div class="msg">
me entendes?
</div>
</div>
<div class="footer-message">
<div>
23:12
</div>
</div>
</div>
</div>
<!-- MENSAJE OTRO -->
<div class="message break d-flex flex-column align-items-start">
<div class=" body-card other d-flex flex-column ">
<div class="header-message">
Gero
</div>
<div class="body-message">
<div class="img">
<img src="https://picsum.photos/100/400" alt="">
</div>
<div class="msg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque architecto illum similique voluptate iste, magni ipsam odio commodi perferendis, pariatur eos vitae sapiente molestias quos repudiandae cum atque dicta officia?
</div>
</div>
<div class="footer-message">
<div>
23:12
</div>
</div>
</div>
</div>
<!-- MENSAJE MIO -->
<div class="message break d-flex flex-column align-items-end">
<div class=" body-card my d-flex flex-column ">
<div class="header-message">
</div>
<div class="body-message">
<div class="msg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque architecto illum similique voluptate iste, magni ipsam odio commodi perferendis, pariatur eos vitae sapiente molestias quos repudiandae cum atque dicta officia?
</div>
</div>
<div class="footer-message">
<div>
23:12
</div>
</div>
</div>
</div>
<!-- MENSAJE MIO -->
<div class="message break d-flex flex-column align-items-end">
<div class=" body-card my d-flex flex-column ">
<div class="header-message">
</div>
<div class="body-message">
<div class="msg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque architecto illum similique voluptate iste, magni ipsam odio commodi perferendis, pariatur eos vitae sapiente molestias quos repudiandae cum atque dicta officia?
</div>
</div>
<div class="footer-message">
<div>
23:12
</div>
</div>
</div>
</div>
<!-- MENSAJE MIO -->
<div class="message break d-flex flex-column align-items-end">
<div class=" body-card my d-flex flex-column ">
<div class="header-message">
</div>
<div class="body-message">
<div class="msg">
me entendes?
</div>
</div>
<div class="footer-message">
<div>
23:12
</div>
</div>
</div>
</div>
<!-- MENSAJE DE OTRO -->
</div>
<div class="footer d-flex flex-row justify-content-between row ">
<div class="icons col-1 align-self-center">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-emoji-sunglasses" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM6.5 6.497V6.5h-1c0-.568.447-.947.862-1.154C6.807 5.123 7.387 5 8 5s1.193.123 1.638.346c.415.207.862.586.862 1.154h-1v-.003l-.003-.01a.213.213 0 0 0-.036-.053.86.86 0 0 0-.27-.194C8.91 6.1 8.49 6 8 6c-.491 0-.912.1-1.19.24a.86.86 0 0 0-.271.194.213.213 0 0 0-.036.054l-.003.01z"/>
<path d="M2.31 5.243A1 1 0 0 1 3.28 4H6a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2h-.438a2 2 0 0 1-1.94-1.515L2.31 5.243zM9 5a1 1 0 0 1 1-1h2.72a1 1 0 0 1 .97 1.243l-.311 1.242A2 2 0 0 1 11.439 8H11a2 2 0 0 1-2-2V5z"/>
</svg>
</div>
<div class="input col-10 align-self-center">
<textarea rows="1"></textarea>
</div>
<div class="icons col-1 align-self-center">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-mic" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
<path fill-rule="evenodd" d="M10 8V3a2 2 0 1 0-4 0v5a2 2 0 1 0 4 0zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"/>
</svg>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-caret-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6 12.796L11.481 8 6 3.204v9.592zm.659.753l5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z"/>
</svg>
</div>
</div>
</div>
</div>
.wrapper {
display: flex;
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 20pt 90pt;
background-color: rgba(128, 128, 128, .3);
overflow: hidden;
}
.left {
width: 25%;
}
.left .header {
height: 50pt;
margin: 0;
padding: 0;
display: inline-block;
}
.left .header .profile {
padding: 5pt 10pt;
}
.left .header .profile img {
width: 30pt;
}
.left .header .options {
margin-right: 10pt;
}
.left .body .message-system {
height: 70pt;
background-color: rgba(255, 0, 0, .3);
}
.left .body .message-system .icon {
font-size: 20pt;
}
.left .body .message-system .text {
font-size: 10pt;
}
.left .body .conversation {
height: calc(87vh - 100pt);
overflow-y: auto;
padding-bottom: 10pt;
background-color: white;
}
.left .body .conversation .card-conversation {
padding: 0pt 5pt;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.left .body .conversation .card-conversation:hover {
background-color: rgba(0, 0, 0, .04);
}
.left .body .conversation .card-conversation .data .data-conversation .last-message {
margin-top: 2pt;
font-size: 10pt;
}
.left .body .conversation .card-conversation .date {
font-size: 8pt;
padding: 5pt;
}
.right {
width: 75%;
}
.right .header {
margin: 0;
padding: 0;
display: inline-block;
height: 50pt;
}
.right .header .data {
padding: 5pt 10pt;
}
.right .header .data .info {
margin-left: 7pt;
}
.right .header .data .info .status {
font-size: 10pt;
}
.right .header .options {
margin-right: 10pt;
}
.right .body {
background-color: white;
height: 85.6%;
overflow-y: auto;
padding: 0pt 50pt;
padding-bottom: 20pt;
border: 1px solid rgba(0, 0, 0, .1);
}
.right .body .break {
margin-top: 4pt;
}
.right .body .break .date-break {
border-radius: 2pt;
background-color: rgba(0, 0, 255, .3);
color: white;
font-size: 10pt;
padding: 1pt;
width: 100pt;
}
.right .body .message {
margin-top: 20pt;
}
.right .body .message .body-card {
position: relative;
max-height: 500pt;
min-height: 30pt;
min-width: 250pt;
max-width: 45%;
border-radius: 3pt;
}
.right .body .message .body-card.my {
background-color: rgba(255, 255, 0, .2);
}
.right .body .message .body-card.other {
background-color: rgba(0, 0, 0, .2);
}
.right .body .message .body-card .header-message {
padding: 1pt 0pt 0pt 3pt;
font-size: 11pt;
color: green;
}
.right .body .message .body-card .body-message {
height: auto;
}
.right .body .message .body-card .body-message .img img {
height: 230pt;
width: 100%;
object-fit: cover;
padding: 2pt;
}
.right .body .message .body-card .body-message .msg {
padding: 4pt;
font-size: 9.7pt;
width: 85%;
}
.right .body .message .body-card .footer-message {
position: absolute;
right: 0;
bottom: 0;
font-size: 8pt;
padding: 0 5pt 2pt 0;
}
.right .footer textarea {
margin: 3pt;
width: 100%;
height: 30pt;
font-size: 9pt;
max-height: 40pt;
border-radius: 14pt;
border: none;
padding: 8pt 10pt;
}
img {
width: 30pt;
}
.icons {
font-size: 20pt;
display: flex;
justify-content: center;
align-items: center;
}
