-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
248 lines (248 loc) · 15.6 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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<html lang="en">
<head>
<title>YouTube Like Web Page</title>
<link href="style.css" type="text/css" rel="stylesheet">
<meta charset="UTF-8">
</head>
<body>
<!--Top part of the web page Start -->
<div class="main-navbar">
<img src="images/ic_menu.svg" alt="Display the whole YouTube menu" class="menu-icon" width="22" height="22">
<img src="images/img_youtube_logo.svg" alt="YouTube logo" class="youtube-logo" width="80">
<form action="#" method="POST">
<input class="search-bar" type="text" name="search-bar" placeholder="Search">
<div class="search-container">
<button class="search-button"></button>
<img src="images/ic_search.svg" alt="Search button" class="m-glass">
</div>
</form>
<div class="navbar-right-icons">
<img src="images/ic_add_video.svg" alt="Create a video or post" class="right-icons">
<img src="images/ic_apps.svg" alt="YouTube apps" class="right-icons">
<img src="images/ic_share_video.svg" alt="Messages" class="right-icons">
<img src="images/ic_notification.svg" alt="Notifications" class="right-icons">
<img src="images/ic_user.svg" alt="User's profile picture" width="24" class="right-icons user-pic">
</div>
</div>
<!-- Top part of the web page End -->
<!-- Main content of the page Start -->
<main class="main-content">
<!-- Left column section Start -->
<div class="left-section">
<!--Video section Start -->
<div class="video-container">
<iframe width="838" height="460" src="https://www.youtube.com/embed/QFxN2oDKk0E" allow="accelerometer;
autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<h1 class="text-video-elements headers">Godzilla: King of the Monsters - Final Trailer - Now Playing In Theaters</h1>
<p class="text-video-elements visualization-number">20,924,847 views</p>
<!-- Statistics Start -->
<div class="statistics-container">
<img src="images/ic_like.svg" alt="Like button" class="statistics-icons">
<span class="statistics-text">262K</span>
<img src="images/ic_dislike.svg" alt="Dislike button" class="statistics-icons">
<span class="statistics-text">8K</span>
<img src="images/ic_share.svg" alt="Share button" class="statistics-icons">
<span class="statistics-text">SHARE</span>
<img src="images/ic_add.svg" alt="Save button" class="statistics-icons">
<span class="statistics-text">SAVE</span>
<img src="images/ic_three_dots.svg" alt="Options" class="statistics-icons">
<!-- Square used to put a thicker line on the divider of the section-->
<div class="square"></div>
</div>
<!-- Statistics End -->
</div>
<!--Video section End -->
<!--Info about the publisher and video Start -->
<section class="description-container">
<img src="https://yt3.ggpht.com/a/AGF-l7-kPuxES9-qEATZ-4UvbMJnHPnGYg5EMq8_mw=s48-mo-c-c0xffffffff-rj-k-no" alt="Warner logo"
class="publisher-logo">
<div class="text-description-container">
<h2 class="publisher-title">Warner Bros. Pictures</h2>
<small class="publish-date">Published on Apr 23, 2019 </small>
<button class="subscribe-button">Subscribe 7.3M</button>
<br><br><br>
<p>Godzilla: King of the Monsters - Final Trailer - In Theaters Thursday</p>
<br><br>
<p>Following the global success of “Godzilla” and “Kong: Skull Island” comes the next chapter in Warner Bros. Pictures’ and Legendary Pictures’ cinematic MonsterVerse,
an epic action adventure that pits Godzilla against some of the most popular monsters in pop culture history. The new story follows the heroic efforts of the crypto-zoological
agency Monarch as its members face off against a battery of god-sized monsters, including the mighty Godzilla, who collides with Mothra, Rodan, and his ultimate nemesis, the three-headed
King Ghidorah. When these ancient super-species—thought to be mere myths—rise again, they all vie for supremacy, leaving humanity’s very existence hanging in the balance.</p>
<br>
<span class="category-label">Category</span>
<span><a href="#">Entertainement</a></span>
<br>
<br>
<br>
<span class="show-less">Show Less</span>
</div>
</section>
<!--Info about the publisher and video End -->
<!-- Comments Section Start -->
<section>
<div class="comments-statistics">
<h2 class="comments-total">37,240 Comments</h2>
<img src="images/ic_sort.svg" alt="Sort comments">
<span class="sort-options">SORT BY</span>
</div>
<br>
<br>
<img class="user-picture" src="images/ic_user.svg" width="40" alt="User's profile picture">
<form action="#" method="POST">
<input class="user-comment" placeholder="Add a public comment..." type="text">
</form>
<br>
<br>
<br>
<!-- An user's comment Start -->
<div>
<img src="images/ic_user_woman.svg" alt="A picture of the user who made the comment" width="40">
<div class="user-comments-info-container">
<span class="user-name-comments">Elizabeth Doe</span>
<span class="comment-date">7 months ago</span>
<p class="comment-paragraph">This is a comment. A very good one. Give me a like please!!!</p>
<div class="comments-options-container">
<img class="comments-options" src="images/ic_like.svg" alt="Like button">
<span class="comments-options">16K</span>
<img class="comments-options dislike-button" src="images/ic_dislike.svg" alt="Dislike button">
<span class="comments-options">182</span>
<span class="comments-options reply-option">REPLY</span>
</div>
<br>
<span class="view-replies">View 3 replies</span>
<img class="down-arrow" src="images/ic_down_arrow.svg" alt="An arrow pointing down">
</div>
</div>
<!-- An user's comment End -->
<!-- An user's comment Start -->
<div class="comment">
<img src="images/ic_user_woman.svg" alt="A picture of the user who made the comment" width="40">
<div class="user-comments-info-container">
<span class="user-name-comments">Elizabeth Doe</span>
<span class="comment-date">7 months ago</span>
<p class="comment-paragraph">This is a comment. A very good one. Give me a like please!!!</p>
<div class="comments-options-container">
<img class="comments-options" src="images/ic_like.svg" alt="Like button">
<span class="comments-options">16K</span>
<img class="comments-options dislike-button" src="images/ic_dislike.svg" alt="Dislike button">
<span class="comments-options">182</span>
<span class="comments-options reply-option">REPLY</span>
</div>
<br>
<span class="view-replies">View 3 replies</span>
<img class="down-arrow" src="images/ic_down_arrow.svg" alt="An arrow pointing down">
</div>
</div>
<!-- An user's comment End -->
<!-- An user's comment Start -->
<div class="comment">
<img src="images/ic_user_woman.svg" alt="A picture of the user who made the comment" width="40">
<div class="user-comments-info-container">
<span class="user-name-comments">Elizabeth Doe</span>
<span class="comment-date">7 months ago</span>
<p class="comment-paragraph">This is a comment. A very good one. Give me a like please!!!</p>
<div class="comments-options-container">
<img class="comments-options" src="images/ic_like.svg" alt="Like button">
<span class="comments-options">16K</span>
<img class="comments-options dislike-button" src="images/ic_dislike.svg" alt="Dislike button">
<span class="comments-options">182</span>
<span class="comments-options reply-option">REPLY</span>
</div>
<br>
<span class="view-replies">View 3 replies</span>
<img class="down-arrow" src="images/ic_down_arrow.svg" alt="An arrow pointing down">
</div>
</div>
<!-- An user's comment End -->
</section>
<!-- Comments Section End -->
<!-- Left column section End-->
</div>
<!-- Right column section Start -->
<div class="right-column">
<!-- Text above thumbnails Start -->
<div class="text-above-thumbnails-container">
<span class="text-above-thumbnails-container">Up next</span>
<span class="auto-play-text">Autoplay</span>
<img class="switch-button" src="images/ic_switch.svg" alt="Turn on or off Autoplay" width="40">
</div>
<!-- Text above thumbnails End-->
<!-- First Thumbnail Start -->
<div class="next-videos-container">
<iframe width="160" height="85" src="https://www.youtube.com/embed/yjyBTtKg9UQ" allow="accelerometer;
autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<div class="video-text-details-container">
<p class="titles-right-column">Cool Video</p>
<p class="right-channel-description">Great Channel</p>
<p class="right-channel-description">Recommended for you</p>
</div>
</div>
<!-- First Thumbnail End -->
<!-- Normal Thumbnail Start -->
<div class="normal-thumbnail">
<iframe width="160" height="85" src="https://www.youtube.com/embed/69k2Ejko6BE" allow="accelerometer;
autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<div class="video-text-details-container">
<p class="titles-right-column">Cool Video</p>
<p class="right-channel-description">Great Channel</p>
<p class="right-channel-description">Recommended for you</p>
</div>
</div>
<!-- Normal Thumbnail End -->
<!-- Normal Thumbnail Start -->
<div class="normal-thumbnail">
<iframe class="thumbnail-image" width="160" height="85" src="https://www.youtube.com/embed/eVTXPUF4Oz4"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<div class="video-text-details-container">
<p class="titles-right-column">Cool Video</p>
<p class="right-channel-description">Great Channel</p>
<p class="right-channel-description">Recommended for you</p>
</div>
</div>
<!-- Normal Thumbnail End -->
<!-- Normal Thumbnail Start -->
<div class="normal-thumbnail">
<iframe width="160" height="85" src="https://www.youtube.com/embed/sT0g16_LQaQ" allow="accelerometer;
autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<div class="video-text-details-container">
<p class="titles-right-column">Cool Video</p>
<p class="right-channel-description">Great Channel</p>
<p class="right-channel-description">Recommended for you</p>
</div>
</div>
<!-- Normal Thumbnail End -->
<!-- Normal Thumbnail Start -->
<div class="normal-thumbnail">
<iframe width="160" height="85" src="https://www.youtube.com/embed/ScNNfyq3d_w" allow="accelerometer;
autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<div class="video-text-details-container">
<p class="titles-right-column">Cool Video</p>
<p class="right-channel-description">Great Channel</p>
<p class="right-channel-description">Recommended for you</p>
</div>
</div>
<!-- Normal Thumbnail End -->
<!-- Normal Thumbnail Start -->
<div class="normal-thumbnail">
<iframe width="160" height="85" src="https://www.youtube.com/embed/uCUpvTMis-Y" allow="accelerometer;
autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<div class="video-text-details-container">
<p class="titles-right-column">Cool Video</p>
<p class="right-channel-description">Great Channel</p>
<p class="right-channel-description">Recommended for you</p>
</div>
</div>
<!-- Normal Thumbnail End -->
</div>
<!-- Right column section End -->
</main>
<!-- Main content of the page End -->
</body>
</html>