-
Notifications
You must be signed in to change notification settings - Fork 0
/
friends.html
100 lines (93 loc) · 7.12 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>friends-screen</title>
</head>
<body>
<div class="status-bar">
<div class="status-bar__column">
<span>No Service</span>
<i class="fa-solid fa-wifi"></i>
</div>
<div class="status-bar__column">
<span>18:43</span></div>
<div class="status-bar__column">
<span>98%</span>
<i class="fa-solid fa-battery-full"></i>
<i class="fa-solid fa-bolt-lightning"></i>
</div>
</div>
<header class="screen-header">
<h1 class="screen-header__title">Friends</h1>
<div class="screen-header__icons">
<span>
<a class="find__link" href="find.html">
<i class="fa-solid fa-magnifying-glass fa-xl"></i>
</a>
</span>
<span><i class="fa-solid fa-music fa-xl"></i></span>
<span><i class="fa-solid fa-gear fa-xl"></i></span>
</div>
</header>
<a id="friends-display-link" href="#">
<i class="fa-solid fa-circle-info"></i> Friends' Names Display
<i class="fa-solid fa-chevron-right fa-sm"></i>
</a>
<main class="main-screen">
<div class="user-component">
<div class="user-component__column">
<img class="user-component__profileimg user-component__profileimg-xl" src="https://avatars.githubusercontent.com/u/105310191?v=4"/>
<div class="user-component__text">
<h4 class="user-component__name user-component__name-xl">Song Jongchan</h4>
<!-- <h6 class="user-component__status">jongc will be developer!</h6> -->
</div>
</div>
<div class="user-component__column"></div> <!--prevent modifying last child-->
</div>
<div class="friends-screen__channel">
<div class="friends-screen__channel-header">
<span>Channel</span>
<i class="fa-solid fa-chevron-up fa-xs"></i>
</div>
</div>
<div class="user-component">
<div class="user-component__column">
<img class="user-component__profileimg user-component__profileimg-sm" src="data:image/png;base64,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">
<div class="user-component__text">
<h4 class="user-component__name user-component__name-sm">Channel</h4>
</div>
</div>
<div class="user-component__column">
<div>
<span>2</span>
<i class="fa-solid fa-chevron-right fa-xs"></i>
</div>
</div>
</div>
</main>
<nav class="nav"> <!-- nav>ul>li*4>a -->
<ul class="nav__list">
<li class="nav__btn">
<a class="nav__link" href="friends.html">
<i class="fa-solid fa-user fa-2xl">
</i>
</a>
</li>
<li class="nav__btn">
<a class="nav__link" href="chats.html">
<span class="notific nav__notific">1</span>
<i class="fa-regular fa-comment fa-2xl"></i></a></li>
<li class="nav__btn"><a class="nav__link" href="search.html"><i class="fa-solid fa-magnifying-glass fa-2xl"></i></a></li>
<li class="nav__btn">
<a class="nav__link" href="more.html">
<i class="fa-solid fa-ellipsis fa-2xl"></i>
</a>
</li>
</ul>
</nav>
<script src="https://kit.fontawesome.com/892e90a15e.js" crossorigin="anonymous"></script>
</body>
</html>