-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
215 lines (215 loc) · 6.63 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
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>The Church of Itsuki Nakano</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
body {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
}
table, td, th {
border: 1px solid black;
border-collapse: collapse;
}
td, th {
padding: 5px;
}
section, main {
padding-bottom: 32px;
}
.navbar {
padding: 10px;
background-color: #3d3d3d;
}
.nav-links {
display: flex;
justify-content: space-evenly;
align-items: center;
list-style: none;
}
.nav-links > li > a {
text-decoration: none;
color: hotpink;
}
.nav-links > li > a:hover {
text-decoration: underline;
}
.main-header {
text-align: center;
}
.section {
text-align: center;
}
.itsuki-images {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
overflow-x: scroll;
overflow-y: hidden;
}
.itsuki-image {
transition: all 0.2s;
}
.itsuki-image:hover {
transform: scale(1.02);
transition: all 0.2s;
}
.main {
padding: 0 20px;
}
.main > h2 {
text-align: center;
}
.section-sponsors {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.form-newsletter {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.input-group {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.input-field, .input-textarea {
width: 80vw;
padding: 8px;
outline: none;
font-family: 'Montserrat', sans-serif;
}
.btn-primary {
font-size: 1.2rem;
font-family: 'Montserrat', sans-serif;
padding: 10px 40px;
outline: none;
border: none;
border-radius: 5px;
background: hotpink;
color: white;
}
.btn-primary:hover {
cursor: pointer;
}
</style>
</head>
<body>
<nav class="navbar">
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Join Our Church</a></li>
</ul>
</nav>
<header class="main-header">
<h1>Get to know Itsuki Nakano</h1>
<p>Welcome and enjoy your stay!</p>
</header>
<section class="section">
<p>May I fancy you with pictures of Itsuki Nakano?</p>
<div class="itsuki-images">
<img class="itsuki-image" src="images/itsuki-1.jpg" alt="A picture of a gorgeous Itsuki Nakano" height="400">
<img class="itsuki-image" src="images/itsuki-2.png" alt="A picture of a gorgeous Itsuki Nakano" height="400">
<img class="itsuki-image" src="images/itsuki-3.jpg" alt="A picture of a gorgeous Itsuki Nakano" height="400">
<img class="itsuki-image" src="images/itsuki-4.jpeg" alt="A picture of a gorgeous Itsuki Nakano" height="400">
</div>
</section>
<section class="section">
<h2>Welcoming another appearance of Itsuki Nakano</h2>
<p>Itsuki Nakano will be appearing on the new specials <strong>五等分の花嫁～</strong></p>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/qROogTC60pI?si=4rIwhsk4KB5I4TWO" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</section>
<main class="main">
<h2>5 Reasons Why You Should Join The Church of Itsuki Nakano</h2>
<p>If the <em>pictures</em> haven't convinced you quite <strong>yet</strong>, here are some reasons why you should join us</p>
<ol>
<li>Itsuki Nakano is live</li>
<li>Itsuki Nakano is love</li>
<li>Itsuki Nakano is laugh</li>
<li>It's a freaking Itsuki Nakano</li>
<li>Enogh questioning me</li>
</ol>
</main>
<section class="section section-sponsors">
<h2>Lists of Our Sponsors</h2>
<table>
<tr>
<th>Company</th>
<th>Sponsored since</th>
</tr>
<tr>
<td>The Taufan Foundation</td>
<td>1300 B.C.</td>
</tr>
<tr>
<td>More to come</td>
<td>Soon!</td>
</tr>
</table>
</section>
<section class="section">
<h2>Headings of Itsuki Nakano</h2>
<p>I'll use this section as an excuse to write heading 1 through 6 (though probably it's a bad idea to use more than 1 <code>h1</code> but meh)</p>
<div>
<h1>Itsuki Nakano</h1>
<h2>Itsuki Nakano</h2>
<h3>Itsuki Nakano</h3>
<h4>Itsuki Nakano</h4>
<h5>Itsuki Nakano</h5>
<h6>Itsuki Nakano</h6>
</div>
</section>
<section class="section">
<h2>A code to remember</h2>
<p>And I'll use this section as en excuse to write code-related tags</p>
<pre style="text-align: left;">
<code>
while (alive) {
loveItsuki();
}
</code>
</pre>
</section>
<section class="section">
<h2>A quote</h2>
<blockquote>If you're not in The Church of Itsuki Nakano, I don't know what you're doing with your life</blockquote>
<cite>Benjamin Franklin, probably</cite>
</section>
<section class="section">
<h2>Call to Action</h2>
<p>So what are you waiting for?</p>
<div>
<button onclick="alert('Happy to have you here!')" class="btn-primary">Join Our Church</button>
</div>
</section>
<section class="section">
<h2>Sign Up to Our Newsletter</h2>
<form class="form-newsletter">
<div class="input-group">
<div class="input-text">Your name: </div>
<input class="input-field" type="text">
</div>
<div class="input-group">
<div class="input-text">Email: </div>
<input class="input-field" type="email">
</div>
<div class="input-group">
<div class="input-text">Suggestion: </div>
<textarea cols="150" rows="10" class="input-textarea"></textarea>
</div>
<button type="submit" class="btn-primary">Let's go!</button>
</form>
</section>
</body>
</html>