Skip to content

Commit dbd1ba4

Browse files
solygambassolygambas
committed
add chat interface
1 parent 15444e9 commit dbd1ba4

File tree

3 files changed

+177
-0
lines changed

3 files changed

+177
-0
lines changed

‎91-chat interface/index.html

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!-- Based on Chat Interface by Florin Pop (2019)
2+
see: https://www.florin-pop.com/blog/2019/04/chat-interface/ -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link rel="stylesheet" href="style.css" />
10+
<title>Chat Interface</title>
11+
</head>
12+
<body>
13+
<h2>Sarah</h2>
14+
<div class="chat-container">
15+
<ul class="chat">
16+
<li class="message left">
17+
<img
18+
class="avatar"
19+
src="https://randomuser.me/api/portraits/women/17.jpg"
20+
alt=""
21+
/>
22+
<p>Hello, I've found your friend's phone.</p>
23+
</li>
24+
<li class="message right">
25+
<img
26+
class="avatar"
27+
src="https://randomuser.me/api/portraits/men/67.jpg"
28+
alt=""
29+
/>
30+
<p>Which of my friends are you talking about? :-)</p>
31+
</li>
32+
<li class="message left">
33+
<img
34+
class="avatar"
35+
src="https://randomuser.me/api/portraits/women/17.jpg"
36+
alt=""
37+
/>
38+
<p>The one whose name is at the top of your screen right now.</p>
39+
</li>
40+
<li class="message right">
41+
<img
42+
class="avatar"
43+
src="https://randomuser.me/api/portraits/men/67.jpg"
44+
alt=""
45+
/>
46+
<p>Yes, right, of course :-)</p>
47+
</li>
48+
<li class="message left">
49+
<img
50+
class="avatar"
51+
src="https://randomuser.me/api/portraits/women/17.jpg"
52+
alt=""
53+
/>
54+
<p>Can you tell her that I've found her phone?</p>
55+
</li>
56+
<li class="message right">
57+
<img
58+
class="avatar"
59+
src="https://randomuser.me/api/portraits/men/67.jpg"
60+
alt=""
61+
/>
62+
<p>Sure</p>
63+
</li>
64+
<li class="message right">
65+
<img
66+
class="avatar"
67+
src="https://randomuser.me/api/portraits/men/67.jpg"
68+
alt=""
69+
/>
70+
<p>Some girl says she's got your phone.</p>
71+
</li>
72+
</ul>
73+
<input type="text" class="text_input" placeholder="Message..." />
74+
</div>
75+
</body>
76+
</html>

‎91-chat interface/style.css

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Lato", sans-serif;
9+
display: flex;
10+
flex-direction: column;
11+
align-items: center;
12+
justify-content: center;
13+
min-height: 100vh;
14+
margin: 2rem 0;
15+
background: url("https://images.unsplash.com/photo-1533134486753-c833f0ed4866?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80")
16+
center center / cover;
17+
text-align: center;
18+
}
19+
20+
h2 {
21+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
22+
color: #fff;
23+
letter-spacing: 1px;
24+
text-transform: uppercase;
25+
text-align: center;
26+
}
27+
28+
.chat-container {
29+
background: #ece9e6;
30+
background: linear-gradient(to right, #ece9e6, #ffffff);
31+
width: 320px;
32+
max-width: 100%;
33+
border-radius: 25px;
34+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
35+
overflow: hidden;
36+
padding: 15px;
37+
position: relative;
38+
}
39+
40+
.chat {
41+
display: flex;
42+
flex-direction: column;
43+
justify-content: center;
44+
align-items: flex-start;
45+
list-style-type: none;
46+
padding: 0;
47+
margin: 0;
48+
}
49+
50+
.message {
51+
border-radius: 50px;
52+
position: relative;
53+
margin-bottom: 30px;
54+
}
55+
56+
.message.left {
57+
padding: 15px 20px 15px 70px;
58+
background-color: #fff;
59+
border: 2px solid #cccccc;
60+
text-align: left;
61+
}
62+
63+
.message.right {
64+
align-self: flex-end;
65+
padding: 15px 70px 15px 20px;
66+
background-color: #4b802f;
67+
color: #fff;
68+
text-align: right;
69+
}
70+
71+
.avatar {
72+
border-radius: 50%;
73+
object-fit: cover;
74+
position: absolute;
75+
left: 10px;
76+
top: -10px;
77+
width: 50px;
78+
height: 50px;
79+
border: 2px solid #b8c4cc;
80+
}
81+
82+
.message.right .avatar {
83+
left: auto;
84+
right: 10px;
85+
border-color: #5c8049;
86+
}
87+
88+
.message p {
89+
margin: 0;
90+
}
91+
92+
.text_input {
93+
font-size: 1rem;
94+
position: absolute;
95+
bottom: 0;
96+
left: 0;
97+
right: 0;
98+
padding: 10px 15px;
99+
width: 100%;
100+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@
9696
| 88 | [Promo Code](https://github.com/solygambas/html-css-fifty-projects/tree/master/88-promo%20code) | [Live Demo](https://codepen.io/solygambas/full/wvggBXe) |
9797
| 89 | [One Color UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/89-one%20color%20UI) | [Live Demo](https://codepen.io/solygambas/full/NWdpPqx) |
9898
| 90 | [Tooltip](https://github.com/solygambas/html-css-fifty-projects/tree/master/90-tooltip) | [Live Demo](https://codepen.io/solygambas/full/YzNgzMb) |
99+
| 91 | [Chat Interface](https://github.com/solygambas/html-css-fifty-projects/tree/master/91-chat%20interface) | [Live Demo](https://codepen.io/solygambas/full/MWJxaOJ) |
99100

100101
This repository is mostly based on 2 courses by Brad Traversy (2020):
101102

0 commit comments

Comments
 (0)