-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfriends.html
121 lines (113 loc) ยท 9.02 KB
/
friends.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Friends - KOKOA TALK</title>
<link rel="icon" href="https://m.gelatofactory.co.kr/web/upload/img/m/ico-kakao.png">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="status-bar">
<div class="status-bar__column">
<span>No Service</span>
<i class="fas fa-wifi"></i>
</div>
<div class="status-bar__column">
<span>18:43</span>
</div>
<div class="status-bar__column">
<span>78%</span>
<i class="fas fa-battery-three-quarters fa-lg"></i>
<i class="fas fa-bolt"></i>
</div>
</div>
<main>
<header class="screen-header">
<h1 class="screen-header__title">Friends</h1>
<div class="screen-header__icons">
<span><i class="fas fa-search fa-lg"></i></span>
<span><i class="fas fa-music fa-lg"></i></span>
<a href="settings.html">
<span><i class="fas fa-cog fa-lg"></i></span>
</a>
<!-- span์ผ๋ก i ๊ฐ์ธ๋ ์ด์ ๋ span์ ์์ ๋ฌด์ธ๊ฐ๊ฐ ์ฌ ์ ์๋ inline์ด๊ธฐ ๋๋ฌธ! -->
<!-- inline ๋ํ์ ์์) span, a, link, img. ๋๋จธ์ง๋ ๊ฑฐ์ ๋ค block. (=> ์์ ์ด๋ ํ ๊ฒ๋ ์ค์ง ์๋ ๊ฒ) -->
</div>
</header>
<a class="friends-display-link">
<i class="fas fa-info-circle"></i>
<span>Friends' Names Display</span>
<i class="fas fa-chevron-right fa-xs"></i>
</a>
<!-- ๋์ค์ ์ฌ๊ธฐ์ href๋ก ๋งํฌ ์ฐ๊ฒฐ -->
<div class="user-component">
<div class="user-component__column">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQe8PhpC2QZMnQ82YU7LmoK_VOqPAwWs3R1tg&usqp=CAU"
class="user-component__picture user-component__picture--bg" />
<div class="user-component__text">
<div class="user-component__title">Name</div>
<div class="user-component__subtitle">message</div>
</div>
</div>
<div class="user-component__column"></div>
</div>
<div class="friends-screen__channel">
<div class="friends-screen__channel--header">
<span>Channel</span>
<i class="fas fa-chevron-up"></i>
</div>
<div class="user-component">
<div class="user-component__column">
<img src="data:image/png;base64,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"
class="user-component__picture user-component__picture--sm"/>
<div class="user-component__title user-component__title--sm">Channel</div>
</div>
<div class="user-component__column">
<div class="user-component__channel">
<span>2</span>
<i class="fas fa-chevron-right"></i>
</div>
</div>
</div>
</main>
<nav class="nav-bar">
<ul class="nav-bar__list">
<li class="nav-bar__btn">
<a href="friends.html">
<i class="fas fa-user fa-2x"></i>
</a>
</li>
<li class="nav-bar__btn">
<a href="chats.html">
<i class="far fa-comment fa-2x"></i>
<span class="nav-bar__notification">3</span>
</a>
</li>
<li class="nav-bar__btn">
<a href="find.html">
<i class="fas fa-search fa-2x"></i>
</a>
</li>
<li class="nav-bar__btn">
<a href="more.html">
<i class="fas fa-ellipsis-h fa-2x"></i>
<div class="notification-sm"></div>
</a>
</li>
<!-- ๋๋ฅด๋ฉด ํด๋น page(=>href)๋ก ์ด๋ํด์ผํ๋๊น a tag ์ด์ฉ -->
</ul>
</nav>
<div id="no-mobile">
<span>Your screen is too big ๐
</span>
</div>
<div id="splash-screen">
<i class="fas fa-comment"></i>
</div>
<script
src="https://kit.fontawesome.com/6478f529f2.js"
crossorigin="anonymous"
></script>
</body>
</html>