Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitdbd1ba4

Browse files
committed
add chat interface
1 parent15444e9 commitdbd1ba4

File tree

3 files changed

+177
-0
lines changed

3 files changed

+177
-0
lines changed

‎91-chat interface/index.html

Lines changed: 76 additions & 0 deletions
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+
<htmllang="en">
6+
<head>
7+
<metacharset="UTF-8"/>
8+
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
9+
<linkrel="stylesheet"href="style.css"/>
10+
<title>Chat Interface</title>
11+
</head>
12+
<body>
13+
<h2>Sarah</h2>
14+
<divclass="chat-container">
15+
<ulclass="chat">
16+
<liclass="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+
<liclass="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+
<liclass="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+
<liclass="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+
<liclass="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+
<liclass="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+
<liclass="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+
<inputtype="text"class="text_input"placeholder="Message..."/>
74+
</div>
75+
</body>
76+
</html>

‎91-chat interface/style.css

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@importurl("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:2rem0;
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:1px1px2pxrgba(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:02px8pxrgba(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:15px20px15px70px;
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:15px70px15px20px;
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+
.messagep {
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:10px15px;
99+
width:100%;
100+
}

‎README.md

Lines changed: 1 addition & 0 deletions
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)
[8]ページ先頭
©2009-2025 Movatter.jp