forked from dream-ellie/youtube-site
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (136 loc) · 4.77 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Youtube Mobile</title>
<script
src="https://kit.fontawesome.com/2d323a629b.js"
crossorigin="anonymous"
></script>
<script src="main.js" defer></script>
</head>
<body>
<!-- Header -->
<header>
<div class="logo">
<i class="fab fa-youtube"></i>
<span class="title">Youtube</span>
</div>
<div class="icons">
<i class="fas fa-search"></i>
<i class="fas fa-ellipsis-v"></i>
</div>
</header>
<!-- Video Player -->
<section class="player">
<video controls src="video/video.mp4"></video>
</section>
<!-- Video info & Up next -->
<div class="infoAndUpNext">
<!-- Video Info -->
<section class="info">
<!-- Metadata -->
<div class="metadata">
<ul class="hashtags">
<li>#DreamCoding</li>
<li>#DreamCoders</li>
<li>#Ellie</li>
</ul>
<div class="titleAndButton">
<span class="title clamp"
>Clone Coding: Youtube Mobile Website 유튜브 모바일 웹사이트 따라
만들기 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
드림코딩과 함께하는 프론트엔드 실전 입문편
</span>
<button class="moreBtn">
<i class="fas fa-caret-down"></i>
</button>
</div>
<span class="views">1M views 1 month ago</span>
</div>
<!-- Actions buttons -->
<ul class="actions">
<li>
<button>
<i class="active fas fa-thumbs-up"></i><span>1K</span>
</button>
</li>
<li>
<button><i class="fas fa-thumbs-down"></i><span>0</span></button>
</li>
<li>
<button><i class="fas fa-share"></i><span>Share</span></button>
</li>
<li>
<button><i class="fas fa-plus"></i><span>Save</span></button>
</li>
<li>
<button>
<i class="fab fa-font-awesome-flag"></i><span>Report</span>
</button>
</li>
</ul>
<!-- Channel description -->
<div class="channel">
<div class="metadata">
<img src="image/avatar.png" alt="" />
<div class="info">
<span class="name">드림코딩 by 엘리</span>
<span class="subscribers">1M subcribers</span>
</div>
</div>
<button class="subscribe">subscribe</button>
</div>
</section>
<!-- Up next -->
<section class="upNext">
<span class="title">Up next</span>
<ul>
<li class="item">
<div class="img"><img src="image/1.png" alt="" /></div>
<div class="itemInfo">
<span class="title"
>프론트엔드 강의, 프론트엔드 개발자가 되고 싶다면? 웹개발
입문자편 강의를 시작합니다 ⭐️ (HTML, CSS, Javascript + 실전
프로젝트)</span
>
<span class="name">드림코딩 by 엘리</span>
<span class="views">82K views</span>
</div>
<button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
</li>
<li class="item">
<div class="img"><img src="image/2.png" alt="" /></div>
<div class="itemInfo">
<span class="title"
>HTML 기초, React 할때 꼭 필요한 팁! 쉽다고 무시하면 안돼요 |
프론트엔드 개발자 입문편: HTML, CSS, Javascript</span
>
<span class="name">드림코딩 by 엘리</span>
<span class="views">82K views</span>
</div>
<button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
</li>
<li class="item">
<div class="img"><img src="image/3.png" alt="" /></div>
<div class="itemInfo">
<span class="title"
>HTML 태그 완성, 웹 포트폴리오 만들기 전에 꼭 보세요 |
프론트엔드 개발자 입문편: HTML, CSS, Javascript</span
>
<span class="name">드림코딩 by 엘리</span>
<span class="views">82K views</span>
</div>
<button class="moreBtn"><i class="fas fa-ellipsis-v"></i></button>
</li>
</ul>
</section>
</div>
</body>
</html>