-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
271 lines (261 loc) · 14.2 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
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MTBTheBand</title>
<link rel="shortcut icon" href="./assets/img/icon/sun.png" type="image/x-icon" />
<link rel="stylesheet" href="./assets/css/style.css" />
<link rel="stylesheet" href="./assets/css/reponsive.css" />
<link rel="stylesheet" href="./assets/fonts/themify/themify-icons.css" />
<script src="https://kit.fontawesome.com/008a52e9c4.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="main">
<div id="header" class="no_border">
<ul id="nav">
<li>
<a href="#" title="https://www.w3schools.com/w3css/tryw3css_templates_band.htm">Trang chủ</a>
</li>
<li><a href="#nav1">TIỂU SỬ</a></li>
<li><a href="#nav2">NHIỆM VỤ LIÊN KẾT </a></li>
<li><a href="#nav3">THÔNG TIN THÊM </a></li>
<li class="mobile-down_button">
<a href="#">Nhiều hơn<i class="nav_arrow ti-angle-down"></i> </a>
<ul id="subNav-id" class="subnav">
<li><a href="?">Ghi thêm cho đẹp</a></li>
<li><a href="?">Extras</a></li>
<li><a href="?">Media</a></li>
</ul>
</li>
</ul>
<div class="search_btn">
<i class="search_btn_mdf ti-search"></i>
</div>
<div id="mobile-menu-dropdown-id" class="mobile-menu_dropdown">
<i class="ti-menu"></i>
</div>
</div>
<div id="slider">
<div class="text_content">
<div class="text_header">Judy Alvarez</div>
<div class="text_description">Judy Alvarez là nhân vật ảo trong game Cyberpunk 2077.</div>
</div>
</div>
<div id="content">
<div id="nav1" class="content_container">
<h1 class="content_header">Tiểu sử</h1>
<p class="content_subheader">Judy Alvarez là một kỹ thuật viên braindance lành nghề</p>
<p class="content_about">
Judy Alvarez sinh ra ở Laguna Bend, một thị trấn nhỏ ở vùng nông thôn ngoại ô Thành phố Đêm, và được ông bà nội nuôi dưỡng.
Khi khu vực xung quanh Laguna Bend được mua lại bởi NC Dam Ltd. vào năm 2062 để nó có thể được chuyển đổi thành một hồ chứa,
người dân buộc phải di dời thị trấn vì nó sẽ bị nhấn chìm. Judy và ông bà của cô chuyển đến một căn hộ ở Thành phố Đêm, nhưng
ông bà của cô đã rời đi sau hai năm và di chuyển xa hơn về phía bắc, trong khi Judy ở lại và làm căn hộ của riêng mình. Cuối
cùng cô đã tìm được việc làm tại Lizzie's Bar với tư cách là một kỹ thuật viên và biên tập viên dũng cảm, và gia nhập Moxes.
</p>
<div class="rrow member_list">
<div class="ccol ccol_3 mobile-ccol pt-32">
<p class="member_name">Judy Alvarez</p>
<img src="./assets/img/About/Char_Profile_Judy_2077.jpg" alt="Judy Alvarez" class="member_img" />
</div>
<div class="ccol ccol_3 mobile-ccol pt-32">
<p class="member_name">Judy Alvarez</p>
<img src="./assets/img/About/de6enoq-313ec54b-405d-4509-b866-e972bb3839f8.jpg" alt="Judy Alvarez" class="member_img" />
</div>
<div class="ccol ccol_3 mobile-ccol pt-32">
<p class="member_name">Judy Alvarez</p>
<img src="./assets/img/About/Judy_Cosplay_Guide.jpg" alt="Judy Alvarez" class="member_img" />
</div>
</div>
</div>
<div id="nav2" class="tour_section">
<div class="content_container">
<h1 class="content_header white">Nhiệm vụ liên kết</h1>
<p class="content_subheader white">Làm nhiệm vụ để gặp Judy Alvarez</p>
<ul class="list_item">
<li>
The Information
<span class="completed white">Hoàn thành</span>
</li>
<li>
Automatic Love
<span class="completed white">Hoàn thành</span>
</li>
<li>
The Space in Between
<span class="completed white">Hoàn thành</span>
</li>
<li>
Disasterpiece
<span class="completed white">Hoàn thành</span>
</li>
<li>
Double Life
<span class="completed white">Hoàn thành</span>
</li>
<li>
Both Sides, Now
<span class="completed white">Hoàn thành</span>
</li>
<li>
Ex-Factor
<span class="completed white">Hoàn thành</span>
</li>
<li>
Talkin' 'Bout a Revolution
<span class="completed white">Hoàn thành</span>
</li>
<li>
Pisces
<span class="completed white">Hoàn thành</span>
</li>
<li class="no_border">
Pyramid Song
<span class="incompleted white">Chưa hoàn thành</span>
</li>
</ul>
<div class="rrow img_list">
<div class="ccol ccol_3 mobile-ccol mobile-pt-8 no_border">
<img
src="./assets/img/Lich/tro-choi-dien-tu-cyberpunk-2077-judy-alvarez-hinh-nen-2880x1620-63075_52.jpg"
alt=""
class="img_img"
/>
<div class="img_content">
<p class="img_name">Judy Alvarez</p>
<p class="img_date">Fri 27 Nov 2077</p>
<p class="img_detail">Đây là Judy Alvarez! Một nhân vật trong game Cyberpunk 2077.</p>
<a href="?" class="buy_btn ti-heart"></a>
</div>
</div>
<div class="ccol ccol_3 mobile-ccol mobile-pt-8">
<img src="./assets/img/Lich/wp8199666.jpg" alt="" class="img_img" />
<div class="img_content">
<p class="img_name">Judy Alvarez</p>
<p class="img_date">Fri 27 Nov 2077</p>
<p class="img_detail">Đây là Judy Alvarez! Một nhân vật trong game Cyberpunk 2077.</p>
<a href="?" class="buy_btn ti-heart"></a>
</div>
</div>
<div class="ccol ccol_3 mobile-ccol mobile-pt-8">
<img src="./assets/img/Lich/wallpapertip_girl-wallpaper-full-hd_1095220.jpg" alt="" class="img_img" />
<div class="img_content">
<p class="img_name">Judy Alvarez</p>
<p class="img_date">Fri 27 Nov 2077</p>
<p class="img_detail">Đây là 1 cô gái nào đó! Một nhân vật trong game Cyberpunk 2077.</p>
<a href="?" class="buy_btn ti-heart"></a>
</div>
</div>
</div>
</div>
</div>
<div id="nav3" class="content_container mobile-vh ">
<h1 class="content_header">Thông tin thêm</h1>
<p class="content_subheader">Judy Alvarez sexy no1</p>
<div class="rrow info_section">
<div class="ccol ccol_2 info_list mobile-ccol">
<p><i class="ti-location-pin"></i>Chicago, US</p>
<p>
<i class="ti-mobile"></i>Phone:
<a href="tel:+00 151515">+00 151515</a>
</p>
<p>
<i class="ti-email"></i>Email:
<a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<div class="ccol ccol_2 mb-20 mobile-ccol">
<form action="">
<div class="rrow">
<div class="ccol ccol_2 mobile-ccol">
<input type="text" name="" required placeholder="Name" id="" class="form-control" />
</div>
<div class="ccol ccol_2 mobile-ccol mobile-pt-8">
<input type="email" name="" placeholder="Email" required id="" class="form-control" />
</div>
</div>
<div class="rrow mt-8">
<div class="ccol ccol_1">
<!-- <input
type="text"
name=""
placeholder="Message"
required
id=""
class="form-control"
/> -->
<textarea name="" id="" cols="1" rows="1" class="form-control" placeholder="Message" required></textarea>
</div>
</div>
<input type="submit" value="Send" class="mt-16 form-btn no_border white mobile-ccol" />
</form>
</div>
</div>
</div>
<div class="content_map"></div>
</div>
<div id="footer">
<div class="footer-list">
<a href="?"><i class="ti-dropbox"></i></a>
<a href="?"><i class="ti-yahoo"></i></a>
<a href="?"><i class="ti-youtube"></i></a>
<a href="?"><i class="ti-facebook"></i></a>
<a href="?"><i class="ti-twitter"></i></a>
<a href="?"><i class="ti-reddit"></i></a>
</div>
<p class="footer-text mt-16">Powered by <a href="?">MT Bình</a></p>
</div>
</div>
<!-- -->
<script>
var header = document.getElementById("header");
var mobileMenuBtn = document.getElementById("mobile-menu-dropdown-id");
var headerHeight = header.clientHeight;
// Dong mo menu mobile
mobileMenuBtn.onclick = function () {
var isClosed = header.clientHeight === headerHeight;
if (isClosed) {
header.style.height = "auto";
} else {
header.style.height = null;
}
};
// Tu dong dong khi chon menu -----------------------
var subNav = document.getElementById("subNav-id");
var menuItem = document.querySelectorAll("#nav li a[href*='#']");
var subNavMain = menuItem[4];
for (var i = 0; i < menuItem.length; i++) {
var item = menuItem[i];
item.onclick = function (event) {
var isParentMenu = this.nextElementSibling && this.nextElementSibling.classList.contains("subnav");
if (!isParentMenu) {
subNav.style.display = null;
header.style.height = null;
} else {
event.preventDefault();
}
};
}
// Tu dong dong khi chon subNav
subNavMain.onclick = function (event) {
event.preventDefault();
var subNavHeight = subNav.clientHeight === 0;
if (subNavHeight) {
subNav.style.display = "block";
} else {
subNav.style.display = null;
}
};
// Bo qua cac the a co duong link = ?
var ignoreLink = document.querySelectorAll("a[href*='?']");
// console.log(ignoreLink);
for (var i = 0; i < ignoreLink.length; i++) {
var item = ignoreLink[i];
// console.log(item);
item.onclick = function (abc) {
abc.preventDefault();
};
}
</script>
</body>
</html>