-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
137 lines (118 loc) · 5.62 KB
/
home.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/64d58efce2.js"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="CSS/style.css">
<!-- font awesome -->
<!-- <link rel="stylesheet" href="fontawesome-free-5.15.2-web/css/all.css"> -->
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="fav%20ico/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="fav%20ico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav%20ico/favicon-16x16.png">
<!-- <link rel="manifest" href="/site.webmanifest"> -->
<title>izfan - home</title>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<a href="home.html">IZFAN</a><br>
<span style="font-family: 'Acme'">IZ*ONE's Fan made site</span>
</div>
<nav>
<!-- responsive bars -->
<div class="open fas fa-bars"></div>
<!-- not responsive -->
<ul>
<li><a href="home.html" class="link-nav active">about</a></li>
<li><a href="members.html" class="link-nav">members</a></li>
<li><a href="songs.html" class="link-nav">songs</a></li>
</ul>
</nav>
<div class="cg-mode">
<div class="dark">
<i class="fas fa-moon"></i>
</div>
</div>
</header>
<main>
<div class="jumbotron">
<img src="images/Members/jumbotron/jumbotron1.jpg" alt="izone pic">
<!-- kosong tag 1 -->
<div class="hvr">
<h3>hover this!</h3>
</div>
<!-- end of kosong tag 1 -->
<!-- box face -->
<div class="face-container">
<div class="face-box one"></div>
<div class="face-box two"></div>
<div class="face-box three"></div>
<div class="face-box four"></div>
<div class="face-box five"></div>
<div class="face-box six"></div>
<div class="face-box seven"></div>
<div class="face-box eight"></div>
<div class="face-box nine"></div>
<div class="face-box ten"></div>
<div class="face-box eleven"></div>
<div class="face-box twelve"></div>
<!-- members -->
<div class="member hyewon">K. Hyewon</div>
<div class="member yena">Choi. Yena</div>
<div class="member yujin">Ahn. Yujin</div>
<div class="member wonyoung">J. Wonyoung</div>
<div class="member chaeyeon">Lee ChaeYeon</div>
<div class="member sakura">M. Sakura</div>
<div class="member chaewon">K. Chaewon</div>
<div class="member yuri">Jo Yuri</div>
<div class="member minju">Kim Minju</div>
<div class="member hitomi">Honda Hitomi</div>
<div class="member nako">Yabuki Nako</div>
<div class="member eunbi">Kwon Eunbi</div>
</div>
<!-- end of face container -->
</div>
<div class="content">
<h3>Who is IZ*ONE</h3>
<div class="wrapper-desc">
<p class="description box">IZ*ONE is a temporary Japanese-Korean girl group formed by MNET's survival show Produce48, the 3rd season of Produce 101. <span>the show was consisted 96 members which was 48 members from Japan from group of AKB48 and 48 members from Korea.</span></p>
<div class="social box">
<h3>Get in Touch</h3>
<div class="soci-link">
<a href="https://id-id.facebook.com/official.izone">
<i class="fab fa-facebook"></i> facebook
</a>
<a href="https://twitter.com/official_izone">
<i class="fab fa-twitter"></i> twitter
</a>
<a href="https://www.instagram.com/official_izone/?hl=id">
<i class="fab fa-instagram"></i> instagram
</a>
<a href="https://www.youtube.com/channel/UCe_oTYByLWQYCUmgmOMU_xw">
<i class="fab fa-youtube"></i> youtube
</a>
<a href="https://open.spotify.com/artist/5r1tUTxVSgvBHnoDuDODPH">
<i class="fab fa-spotify"></i> spotify
</a>
</div>
</div>
</div>
</div>
</main>
<ul class="responsive-menu">
<li><a href="home.html" class="link-nav active">about</a></li>
<li><a href="members.html" class="link-nav">members</a></li>
<li><a href="songs.html" class="link-nav">songs</a></li>
</ul>
</div>
<!-- <script src="../JS/app.js"></script> -->
<script src="JS/face-detection.js"></script>
<script src="JS/change-bg.js"></script>
<script src="JS/responsive.js"></script>
<script src="JS/blur.js"></script>
</body>
</html>