In this section, we are going to create a list of messages or chats, which will be a structure similar to the contact list built in the previous entry:
<div class="col-8" id="right">
<div class="d-flex chat">
<div class="w-25 d-flex align-items-end justify-content-end">
<img class="rounded-pill me-3 avatar" width="60"
src="https://randomuser.me/api/portraits/men/17.jpg">
</div>
<div class="w-75">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus reprehenderit
voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque?
Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?
</div>
</div>
<p class="small text-muted">8:45 PM</p>
</div>
</div>
<div class="d-flex chat">
<div class="w-75 ">
<div class="card bg-dark">
<div class="card-body text-light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus reprehenderit
voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque?
Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?
</div>
</div>
<p class="small text-muted float-end">9:17 AM</p>
</div>
<div class="w-25 d-flex align-items-end">
<img class="rounded-pill ms-3 avatar" src="https://randomuser.me/api/portraits/men/19.jpg">
</div>
</div>
</div>And we will use the following CSS:
css/style.css
#right {
background-color: #333;
***
}
.chat {
margin-top: 8px;
}
.chat img.avatar {
width: 50px;
height: 50px;
}With this, it will be as follows:
The next thing we are going to create is a list of chats.
Remember that the previous material is part of mi curso completo sobre Electron.js
- Andrés Cruz
En español
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter