-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (159 loc) · 6.32 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mark Zuckerberg | Facebook</title>
<link rel="icon" type="image/png" href="./images/favicon.png" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="container">
<div class="post">
<!-- POST HEADER -->
<div class="post__header header">
<!-- Header left -->
<div class="header__left">
<a href="#"
><img src="./images/author-pic.jpg" class="post__author-pic"
/></a>
<div class="post__author author">
<span class="author__name"><a href="#">Mark Zuckerberg</a></span>
<i class="author__verified"></i>
</div>
<span class="post__date"><a href="#">October 13, 2020</a></span>
<span class="post__date-privacy-separator"> ·</span>
<i class="post__privacy"></i>
</div>
<!-- Header right -->
<div class="header__right">
<div class="post__options options">
<i class="options__icon"></i>
</div>
</div>
</div>
<!-- POST CONTENT -->
<div class="post__content content">
<p class="content__paragraph">
Facebook's Oculus Quest 2 starts shipping today! It's another big
step forward for VR. I've been using mine all summer and I'm looking
forward to more of you experiencing this.
</p>
<img src="images/post-pic.jpg" class="content__image" />
</div>
<!-- POST FOOTER -->
<div class="post__footer footer">
<!-- Reactions -->
<div class="footer__reactions reactions">
<div class="reactions__emojis emojis">
<img src="images/like.svg" class="emojis__like" />
<img src="images/haha.svg" class="emojis__haha" />
<img src="images/love.svg" class="emojis__love" />
<span class="emojis__count"><a href="#">193K</a></span>
</div>
<div class="reactions__comments-shares comment-shares">
<span class="comment-shares__comments"
><a href="#">50K Comments</a></span
>
<span class="comment-shares__shares"
><a href="#">5.4K Shares</a></span
>
</div>
</div>
<!-- Buttons -->
<div class="footer__buttons buttons">
<span class="buttons__like like"
><i class="like__icon"></i>Like</span
>
<span class="buttons__comment comment"
><i class="comment__icon"></i>Comment</span
>
<span class="buttons__share share"
><i class="share__icon"></i>Share</span
>
</div>
<!-- Comments -->
<div class="footer__comments comments">
<!-- Comments filter -->
<div class="comments__filter filter">
Most Relevant<i class="filter__icon"></i>
</div>
<!-- Comments box -->
<div class="comments__box box">
<div class="box__profile profile">
<img src="images/profile-pic.jpg" class="profile__pic" />
</div>
<div class="box__bar bar">
<input
type="text"
placeholder="Write a comment..."
class="bar__input"
/>
<div class="bar__emojis emojis">
<span class="emojis__insert insert">
<i class="insert__emoji"></i>
</span>
<span class="emojis__attach attach">
<i class="attach__emoji"></i>
</span>
<span class="emojis__gif gif">
<i class="gif__emoji"></i>
</span>
<span class="emojis__sticker">
<i class="sticker__emoji"></i>
</span>
</div>
</div>
</div>
<!-- Friend comment -->
<div class="comments__friend-comment friend-comment">
<img src="images/friend-pic.jpg" class="friend-comment__pic" />
<div class="friend-comment__comment comment">
<a href="#" class="comment__author">Justin Miller</a>
<span class="comment__content"
>It sure feels different to see you on a different color
T-shirt, but still, technology advances everytime and we are
glad that you're a part of it.</span
>
<div class="comment__reactions reactions">
<img
src="images/like.svg"
class="reactions__emojis reactions__like"
/>
<img
src="images/haha.svg"
class="reactions__emojis reactions__haha"
/>
<img
src="images/love.svg"
class="reactions__emojis reactions__love"
/>
<span class="reactions__count">70</span>
</div>
<div class="comment__links links">
<span><a href="#" class="links__like">Like</a> ·</span>
<span><a href="#" class="links__reply">Reply</a> ·</span>
<span><a href="#" class="links__date">16w</a></span>
</div>
<div class="comment__replies replies">
<i class="replies__emoji"></i>
<span class="replies__count">17 Replies</span>
</div>
</div>
<div class="friend-comment__options options">
<i class="options__icon options__comment"></i>
</div>
</div>
<!-- More comments -->
<div class="comments__more-comments more-comments">
<span class="more-comments__link"
><a href="#">View more comments</a></span
>
<span class="more-comments__count">1 of 42,098</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>