-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
111 lines (111 loc) · 4.35 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My Facebook</title>
<script src="https://kit.fontawesome.com/74ce30745f.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="app">
<div class="header">
<div class="left-info">
<div class="thumbnail"><img src="https://i.ibb.co/PTCjNgV/man1.jpg" alt=""></div>
<div class="name-info">
<div class="name"><a>周節輪</a></div>
<div class="time">5月17日下午6:12 · <i class="global-icon"></i></div>
</div>
</div>
<div class="right-info"></div>
</div>
<div class="content">雨下整夜</div>
<a class="video-link" href="https://www.youtube.com/watch?v=RLBybxpwfNA" target="_blank">
<div class="video-wrapper">
<div class="video-thumbnail"><img src="https://i.ibb.co/swYLHGm/grass.jpg" alt=""></div>
<div class="video-description">
<div class="youtube-title">YOUTUBE.COM</div>
<div class="video-title">Jay Zou 周節輪【七里香 Qi-Li-Weeed】- Official Music Video</div>
<div class="video-desc">你不要逼我解除封印！我個人覺得他不做作、笑得又自然，每個人都可以發大財，不要問為什麼！施主這個問題應該問問你自己，骨感的現實無法讓經濟好轉起步，好想訪問他啊！</div>
</div>
</div>
</a>
<div class="feedback-info">
<div class="feedback-emojis">
<i class="icons like-icon"></i> 劉德華、東尼大木和其他<span class="likes-count">3</span>人
</div>
<div class="threads-and-share">
<div class="threads"><span class="comment-number">1</span>則留言</div>
</div>
</div>
<div class="feedback-action">
<div class="fb-wrapper">
<i class="fb-icon thumb-up fa fa-thumbs-o-up"></i> 讚
</div>
<div class="fb-wrapper">
<i class="fb-icon response"></i> 回應
</div>
<div class="fb-wrapper">
<i class="fb-icon share"></i> 分享
</div>
</div>
<div class="comments">
<div class="my-comment-wrapper">
<div class="my-avatar">
<img src="https://i.ibb.co/TkPjPPM/man2.jpg" alt="">
</div>
<div class="my-comment">
<div class="my-comment-placeholder">
<input type="text" placeholder="留言……" id="new-comment-input">
</div>
</div>
</div>
<div class="wrapper">
<div class="people-comment-wrapper">
<div class="people-avatar">
<img src="https://i.ibb.co/fkRxx9P/rice.jpg" alt="">
</div>
<div class="people-comment">
<div class="people-comment-container">
<div class="people-name">
<a>玄米律師</a>
<i class="blue-check"></i>
</div>
<div class="people-saying">我的愛溢出就像雨水</div>
</div>
<div class="comment-reactions">
<i class="icons like-icon"></i>
<span class="number">8</span>
</div>
</div>
</div>
<div class="like-and-response-wrapper">
<div class="like-comment">
<a><i class="fb-icon thumb-up fa fa-thumbs-o-up"></i> 讚</a>
<span class="tiny-dot">·</span>
</div>
<div class="days-comment">4天</div>
</div>
<!-- 胡瓜 -->
<div class="people-comment-wrapper">
<div class="people-avatar"><img src="https://i.ibb.co/d6KRP7g/cucumber.jpg" alt=""></div>
<div class="people-comment">
<div class="people-comment-container comment-contains-html">
<div class="people-name"><a>胡瓜</a><i class="blue-check"></i></div>
<div class="people-saying">
<p>院子落葉</p> <img class="inner-image" src="https://i.ibb.co/x8XJYfL/grass2.jpg" alt=""></div>
</div>
<div class="comment-reactions comment-too-short"><i class="icons like-icon"></i><span class="number">6</span></div>
<div class=""></div>
</div>
</div>
<div class="like-and-response-wrapper">
<div class="like-comment"><a class="isCommentThumbUp"><i class="fb-icon thumb-up fa fa-thumbs-o-up"></i> 讚</a><span class="tiny-dot">·</span></div>
<div class="response-comment"></div>
<div class="days-comment">4天</div>
</div>
</div>
</div>
</div>
</body>
</html>