-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
230 lines (220 loc) · 13.2 KB
/
index.html
File metadata and controls
230 lines (220 loc) · 13.2 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[MV] BOL4(볼빨간사춘기) _ Stars over me(별 보러 갈래?) - Youtube</title>
<script src="https://kit.fontawesome.com/f43f0ce23f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./youtubeCSS.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">
</head>
<body>
<main>
<!-- header -->
<header class="header">
<div><i style="color: #CC0000;"class="fab fa-youtube"></i> <span>Youtube</span></div>
<div><i class="fas fa-search"></i> <i class="fas fa-ellipsis-v"></i></div>
</header>
<!-- video -->
<div class="videoPlayer">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/8n9wklIG9qU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- content -->
<div class="content">
<div class="information">
<div class="tag"><a href="">#BOL4</a> <a href="">#볼빨간사춘기</a> <a href="">#Stars_over_me</a></div>
<div class="title">
<div class="name">[MV] BOL4(볼빨간사춘기) _ Stars over me(별 보러 갈래?)</div>
<div class="titleBtn"><i class="fas fa-caret-down"></i></div>
</div>
<div class="viewCount">조회수 8,285,213회 • 2019. 4. 2.</div>
<ul class="buttonList">
<li><i class="fas fa-thumbs-up"></i><div>1K</div></li>
<li><i class="fas fa-thumbs-down"></i><div>0</div></li>
<li><i class="fas fa-share"></i><div>공유</div></li>
<li><i class="fas fa-plus"></i><div>저장</div></li>
<li><i class="fab fa-font-awesome-flag"></i><div>신고</div></li>
</ul>
<!-- 이 부분 hr 쓰지말고 border로 바꿔서 해보기 -->
<hr>
<div class="userInfo">
<div class="userContent">
<div class="userImg"><img style="border-radius: 50%;" src="https://yt3.ggpht.com/ytc/AAUvwngJDe4vjTMYsFMOPBx-n6wOAdObBnPvlDl_M4C6yBU=s48-c-k-c0x00ffffff-no-rj" alt=""></div>
<div class="user">
<div class="userName">1theK (원더케이)</div>
<div class="subCount">구독자 2300만명</div>
</div>
</div>
<div><button class="subBtn">구독</button></div>
</div>
<div class="contentsInfo">
[MV] BOL4(볼빨간사춘기) _ Stars over me(별 보러 갈래?)
<br/><br/>
[공지] 1theK YouTube는 MV를 유통하는 공식 채널로, 1theK에 업로드된 MV 조회수 또한 음악방송 순위에 반영됩니다.
<br/><br/>
사춘기 소녀들의 성장통 [사춘기집Ⅰ 꽃기운]
<br/><br/>
사랑스럽지만 위태롭고, 불안해서 더 찬란한 사춘기를 노래하는 소녀들의 첫 번째 계절, 봄
봄의 시작을 알리는 사춘기 소녀들의 동화 같은 이야기의 첫 장을 열어본다.
볼빨간사춘기 지음.
<br/><br/>
[꽃기운] 사춘기에 솟아나는 기운을 비유적으로 이르는 말
<br/><br/>
<br/>
<a href="">#BOL4#볼빨간사춘기#Stars_over_me#별보러갈래#NEWRELEASE#MV#1theK#원더케이</a>
<br/>
▶1theK FB : <a href="http://www.facebook.com/1theK">http://www.facebook.com/1theK</a><br/>
▶1theK TW : <a href="https://twitter.com/1theK">https://twitter.com/1theK</a> <br/>
▶1theK Kakao : <a href="https://goo.gl/otRpZc">https://goo.gl/otRpZc</a><br/>
</div>
<div class="infoAdd"><span>더보기</span></div>
<hr>
</div>
<div class="otherContent">
<div class="upNext">Up next</div>
<div class="playList">
<div class="playlistItem">
<div class="playlistImg">
<img src="https://i.ytimg.com/vi/y5MAgMVwfFs/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLCQK11cTrXl_m0fbKjaN0zETL55Hw"/>
</div>
<div class="playlistInfo">
<div class="infoTitle">[M/V] 좋다고 말해 - 볼빨간사춘기</div>
<div class="info">SUPER SOUND Bugs!</div>
<div class="info">조회수 7450만회</div>
</div>
<div class="listSaveBtn"><i class="fas fa-ellipsis-v"></i></div>
</div>
<div class="playlistItem">
<div class="playlistImg">
<img src="https://i.ytimg.com/vi/xRbPAVnqtcs/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBS55q66l8RAuYSE_r1nJm7MTGOYg"/>
</div>
<div class="playlistInfo">
<div class="infoTitle">[MV] BOL4(볼빨간사춘기) _ Travel(여행)</div>
<div class="info">1theK (원더케이)</div>
<div class="info">조회수 7693만회</div>
</div>
<div class="listSaveBtn"><i class="fas fa-ellipsis-v"></i></div>
</div>
<div class="playlistItem">
<div class="playlistImg">
<img src="https://i.ytimg.com/vi/AsXxuIdpkWM/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLDtCz1hZY88cktwH3YwEjULrjiclw"/>
</div>
<div class="playlistInfo">
<div class="infoTitle">[MV] BOL4(볼빨간사춘기) _ Bom(나만, 봄)</div>
<div class="info">1theK (원더케이)</div>
<div class="info">조회수 2848만회</div>
</div>
<div class="listSaveBtn"><i class="fas fa-ellipsis-v"></i></div>
</div>
<div class="playlistItem">
<div class="playlistImg">
<img src="https://i.ytimg.com/vi/hZmoMyFXDoI/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLArmEyfX3kqPDrwwAaQy2BmDmykzQ"/>
</div>
<div class="playlistInfo">
<div class="infoTitle">[MV] BOL4(볼빨간사춘기) _ Some(썸 탈꺼야)</div>
<div class="info">1theK (원더케이)</div>
<div class="info">조회수 8201만회</div>
</div>
<div class="listSaveBtn"><i class="fas fa-ellipsis-v"></i></div>
</div>
<div class="playlistItem">
<div class="playlistImg">
<img src="https://i.ytimg.com/vi/mrAIqeULUL0/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLB-jWNMiN9KSor0pN31MeqJIQn1SQ"/>
</div>
<div class="playlistInfo">
<div class="infoTitle">[MV] BOL4(볼빨간사춘기) _ Workaholic(워커홀릭)</div>
<div class="info">1theK (원더케이)</div>
<div class="info">조회수 8201만회</div>
</div>
<div class="listSaveBtn"><i class="fas fa-ellipsis-v"></i></div>
</div>
<div class="playlistItem">
<div class="playlistImg">
<img src="https://i.ytimg.com/vi/iLlLLBuuvVU/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLA_s6GtuaeX248jL-HRXTkhLIw23g"/>
</div>
<div class="playlistInfo">
<div class="infoTitle">[M/V] 나만 안되는 연애(Hard To Love) - 볼빨간사춘기(Bolbbalgan4)</div>
<div class="info">SUPER SOUND Bugs!</div>
<div class="info">조회수 2172만회</div>
</div>
<div class="listSaveBtn"><i class="fas fa-ellipsis-v"></i></div>
</div>
<div class="playlistItem">
<div class="playlistImg">
<img src="https://i.ytimg.com/vi/Z1pGxkXyDvc/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLD3p4Mmtx8UjjwFBd3mmcUs_UV3VA"/>
</div>
<div class="playlistInfo">
<div class="infoTitle">[MV] BOL4, 20 Years Of Age(볼빨간사춘기, 스무살) _ We Loved(남이 될 수 있을까)</div>
<div class="info">1theK (원더케이)</div>
<div class="info">조회수 1931만회</div>
</div>
<div class="listSaveBtn"><i class="fas fa-ellipsis-v"></i></div>
</div>
<div class="playlistItem">
<div class="playlistImg">
<img src="https://i.ytimg.com/vi/L8UUYfe6-UA/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLAr0UlvsFYiM8JbLX81wpnYIeGXtw"/>
</div>
<div class="playlistInfo">
<div class="infoTitle">[MV] BOL4(볼빨간사춘기) _ Leo(나비와 고양이) (feat. BAEKHYUN(백현))</div>
<div class="info">1theK (원더케이)</div>
<div class="info">조회수 1081만회</div>
</div>
<div class="listSaveBtn"><i class="fas fa-ellipsis-v"></i></div>
</div>
<div class="playlistItem">
<div class="playlistImg">
<img src="https://i.ytimg.com/vi/klcTTuM5pb0/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLCv_RM6ApDuCk9A18LsKgUhdqia-w"/>
</div>
<div class="playlistInfo">
<div class="infoTitle">[STATION] BOL4 볼빨간사춘기 '아틀란티스 소녀 (Atlantis Princess)' Live Video - Our Beloved BoA #2</div>
<div class="info">1theK (원더케이)</div>
<div class="info">조회수 7693만회</div>
</div>
<div class="listSaveBtn"><i class="fas fa-ellipsis-v"></i></div>
</div>
<div class="playlistItem">
<div class="playlistImg">
<img src="https://i.ytimg.com/vi/1ri7I32Auhg/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLCg14pJzRU1q-SQrw3tmH8LCShMDw"/>
</div>
<div class="playlistInfo">
<div class="infoTitle">[M/V] 싸운날 - 볼빨간 사춘기</div>
<div class="info">SUPER SOUND Bugs!</div>
<div class="info">조회수 204만회</div>
</div>
<div class="listSaveBtn"><i class="fas fa-ellipsis-v"></i></div>
</div>
</div>
</div>
</div>
</main>
</body>
<script>
let titleBtnIcon = document.querySelector('.fa-caret-down')
let name = document.querySelector('.information>.title>.name')
titleBtnIcon.addEventListener('click', (event)=>{
name.classList.toggle('active')
titleBtnIcon.classList.toggle('rotate180')
console.log(name.classList)
});
let infoAddBtn = false
let contentsInfo = document.querySelector('.information>.contentsInfo')
let infoAdd = document.querySelector('.information>.infoAdd>span')
infoAdd.addEventListener('click', (event)=>{
contentsInfo.classList.toggle('active')
if(infoAddBtn==false){
console.log('infoAddBtn==false')
infoAddBtn = true
infoAdd.innerHTML = '간략히'
}else{
console.log('infoAddBtn==true')
infoAddBtn = false
infoAdd.innerHTML = '더보기'
}
console.log(contentsInfo.classList)
console.log(infoAdd)
});
</script>
</html>