-
Notifications
You must be signed in to change notification settings - Fork 0
/
chats.html
87 lines (82 loc) · 4.28 KB
/
chats.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
<!-- 첫번째 페이지로 index.html을 주로 사용한다. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Friends Screen -Kokoa Clone </title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- 화면 상단의 상태 Bar 넣는다. (와이파이 상태, 시간, 배터리, 가로모드 등등) -->
<div class = "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>11%</span>
<i class="fas fa-battery-quarter fa-lg"></i>
<i class="fas fa-bolt"></i>
</div><!-- 배터리 상태-->
</div>
<div class="screen-header">
<span class="screen-header__title">Chats</span>
<div class = "screen-header__icons">
<i class="fas fa-search fa-lg"></i>
<i class="far fa-comment-dots fa-lg"></i>
<i class="fas fa-music fa-lg"></i>
<i class="fas fa-cog fa-lg"></i>
</div>
</div>
<div class = "main-screen">
<a href="chat.html">
<div class = "user-component">
<div class="user-component__column">
<!-- <svg class = "user-component__avatar" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="walking" class="svg-inline--fa fa-walking fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M208 96c26.5 0 48-21.5 48-48S234.5 0 208 0s-48 21.5-48 48 21.5 48 48 48zm94.5 149.1l-23.3-11.8-9.7-29.4c-14.7-44.6-55.7-75.8-102.2-75.9-36-.1-55.9 10.1-93.3 25.2-21.6 8.7-39.3 25.2-49.7 46.2L17.6 213c-7.8 15.8-1.5 35 14.2 42.9 15.6 7.9 34.6 1.5 42.5-14.3L81 228c3.5-7 9.3-12.5 16.5-15.4l26.8-10.8-15.2 60.7c-5.2 20.8.4 42.9 14.9 58.8l59.9 65.4c7.2 7.9 12.3 17.4 14.9 27.7l18.3 73.3c4.3 17.1 21.7 27.6 38.8 23.3 17.1-4.3 27.6-21.7 23.3-38.8l-22.2-89c-2.6-10.3-7.7-19.9-14.9-27.7l-45.5-49.7 17.2-68.7 5.5 16.5c5.3 16.1 16.7 29.4 31.7 37l23.3 11.8c15.6 7.9 34.6 1.5 42.5-14.3 7.7-15.7 1.4-35.1-14.3-43zM73.6 385.8c-3.2 8.1-8 15.4-14.2 21.5l-50 50.1c-12.5 12.5-12.5 32.8 0 45.3s32.7 12.5 45.2 0l59.4-59.4c6.1-6.1 10.9-13.4 14.2-21.5l13.5-33.8c-55.3-60.3-38.7-41.8-47.4-53.7l-20.7 51.5z"></path></svg> -->
<img class = "user-component__avatar" src="res\yerin.png" alt="">
<div class="user-component__text">
<h4 class="user-component__title">Yerin</h4>
<h6 class="user-component__subtitle">사랑해</h6>
</div>
</div>
<div class="user-component__column">
<span class="user-component__time">21:22</span>
<span class ="badge chat__notification">1</span>
</div>
</div>
</a>
</div>
<!-- 이렇게 쓰면 한번에 끝! nav>ui>li*4>a -->
<nav class="nav">
<ul class = "nav__list">
<li class = "nav__btn"><a class = "nav__link" href="friends.html"><i class="far fa-user fa-2x"></i></a></li>
<li class = "nav__btn">
<a class = "nav__link" href="chats.html">
<span class ="badge nav__notification">1</span>
<i class="fas fa-comment fa-2x"></i>
</a>
</li>
<li class = "nav__btn"><a class = "nav__link" href="find.html"><i class="fas fa-search fa-2x"></i></a></li>
<li class = "nav__btn">
<a class = "nav__link" href="more.html">
<div class = "badge nav__notification nav_notification-small"></div>
<i class="fas fa-ellipsis-h fa-2x"></i>
</a>
</li>
</ul>
</nav>
<div id = "no-mobile">
<span>Your screen is too big ㅠㅠ</span>
</div>
<!-- font Awesome 사용 Key -->
<!-- Script는 항상 마지막에 있어야 한다. -->
<script
src="https://kit.fontawesome.com/b72d46d25f.js"
crossorigin="anonymous">
</script>
</body>
</html>