HTML template that looks like a passport
doqmeat.com/notebook/F2U/preview/yukika.html
html-template
web-template
uploading file to tangled
+1237
assets/bg.png
assets/bg.png
This is a binary file and will not be displayed.
assets/passport-cover.png
assets/passport-cover.png
This is a binary file and will not be displayed.
assets/passport-symbol.png
assets/passport-symbol.png
This is a binary file and will not be displayed.
assets/pic.jpg
assets/pic.jpg
This is a binary file and will not be displayed.
+379
body.css
+379
body.css
···
1
+
* {
2
+
box-sizing: border-box;
3
+
}
4
+
5
+
:root {
6
+
--white: #dbecff;
7
+
--yellow: #ffbd25;
8
+
--long: 560px;
9
+
--wide: 420px;
10
+
--wide2: 840px;
11
+
--left: 32.2%;
12
+
}
13
+
14
+
html {
15
+
scrollbar-color: #ffbd25 #dbecff;
16
+
}
17
+
18
+
body {
19
+
background: url(assets/bg.png);
20
+
background-attachment: fixed;
21
+
background-size: cover;
22
+
background-repeat: no-repeat;
23
+
padding: 0px;
24
+
margin: 0px;
25
+
font-family: arial;
26
+
font-size: 14px;
27
+
}
28
+
29
+
::selection {
30
+
background: var(--yellow);
31
+
color: black;
32
+
}
33
+
34
+
h1 {
35
+
color: var(--white);
36
+
text-transform: uppercase;
37
+
margin: 0px;
38
+
padding: 70px 0 20px 0;
39
+
font-size: 38px;
40
+
letter-spacing: 4px;
41
+
}
42
+
43
+
h2,
44
+
h3,
45
+
h4 {
46
+
color: var(--yellow);
47
+
}
48
+
49
+
a {
50
+
text-decoration: wavy underline;
51
+
color: #0086e4;
52
+
}
53
+
54
+
a:hover {
55
+
color: var(--yellow);
56
+
}
57
+
58
+
#cover {
59
+
left: var(--left);
60
+
margin-left: 70px;
61
+
margin-top: 60px;
62
+
border-radius: 2px 20px 20px 2px;
63
+
text-align: center;
64
+
position: absolute;
65
+
width: var(--wide);
66
+
height: var(--long);
67
+
background-color: #ebbb3f;
68
+
/* background-image: url(THE PATH TO YOUR IMG HERE if youd like to have your own bg); */
69
+
z-index: 2;
70
+
cursor: grab;
71
+
box-shadow: 2px 2px 1px white;
72
+
border: 1px grey solid;
73
+
}
74
+
75
+
#cover img {
76
+
width: 64%;
77
+
}
78
+
79
+
#passport-opened {
80
+
background: white;
81
+
display: none;
82
+
left: var(--left);
83
+
position: absolute;
84
+
z-index: 1;
85
+
margin-top: 0px;
86
+
width: var(--long);
87
+
height: var(--wide2);
88
+
border-radius: 20px;
89
+
overflow: hidden;
90
+
border: 2px solid var(--yellow);
91
+
}
92
+
93
+
#page-1 {
94
+
height: 100%;
95
+
}
96
+
97
+
#page-2 {
98
+
height: 100%;
99
+
}
100
+
101
+
.page {
102
+
background: white;
103
+
}
104
+
105
+
#page-1 .down p {
106
+
font-size: 13px;
107
+
font-weight: bold;
108
+
}
109
+
110
+
.up {
111
+
padding: 30px;
112
+
display: block;
113
+
height: var(--wide);
114
+
border-bottom: 2px dashed grey;
115
+
overflow: auto;
116
+
}
117
+
118
+
.down {
119
+
padding: 30px;
120
+
display: block;
121
+
height: var(--wide);
122
+
overflow: auto;
123
+
}
124
+
125
+
/*navigation buttons that pop up when you open (click) on the passport*/
126
+
127
+
#buttons {
128
+
text-align: center;
129
+
width: 250px;
130
+
margin: auto;
131
+
margin-top: 10px;
132
+
margin-bottom: 10px;
133
+
}
134
+
135
+
button.navBtns {
136
+
display: none;
137
+
margin: 4px;
138
+
background: var(--yellow);
139
+
font-family: inherit;
140
+
font-style: italic;
141
+
border-radius: 4px;
142
+
border: 2px inset var(--yellow);
143
+
}
144
+
145
+
button.navBtns:hover {
146
+
background: black;
147
+
color: var(--yellow);
148
+
border: 2px outset var(--yellow);
149
+
}
150
+
151
+
/*a spacer for the end of the page */
152
+
153
+
#spacer {
154
+
position: absolute;
155
+
height: 50px;
156
+
width: 10px;
157
+
top: 900px;
158
+
}
159
+
160
+
/*the look of the page 1 info table*/
161
+
162
+
#page-1 .down {
163
+
font-size: 14px;
164
+
text-transform: uppercase;
165
+
display: grid;
166
+
grid-template-areas:
167
+
"header header header"
168
+
"img info1 info2"
169
+
"footer footer footer";
170
+
grid-template-columns: 40% 35% 25%;
171
+
grid-template-rows: 10% 80% 10%;
172
+
overflow: hidden;
173
+
}
174
+
175
+
#page-1 .down h3 {
176
+
color: var(--yellow);
177
+
font-size: 12px;
178
+
}
179
+
180
+
.header {
181
+
grid-area: header;
182
+
}
183
+
184
+
.header h2 {
185
+
display: inline-block;
186
+
margin: 5px;
187
+
color: var(--yellow);
188
+
}
189
+
190
+
.portrait {
191
+
grid-area: img;
192
+
padding: 10px;
193
+
overflow: hidden;
194
+
}
195
+
196
+
.portrait img {
197
+
width: 100%;
198
+
}
199
+
200
+
.info1 {
201
+
padding: 10px;
202
+
grid-area: info1;
203
+
overflow: auto;
204
+
}
205
+
206
+
.info2 {
207
+
grid-area: info2;
208
+
padding: 10px;
209
+
overflow: auto;
210
+
}
211
+
212
+
.info1 h3,
213
+
.info2 h3 {
214
+
text-transform: none;
215
+
}
216
+
217
+
.footer {
218
+
grid-area: footer;
219
+
padding-top: 4px;
220
+
text-align: center;
221
+
overflow: hidden;
222
+
color: var(--yellow);
223
+
}
224
+
225
+
/*this is the tooltip aka the title pop up*/
226
+
#s-m-t-tooltip {
227
+
font-weight: normal;
228
+
max-width: 200px;
229
+
text-align: center;
230
+
z-index: 9999;
231
+
margin: 30px 15px 7px 12px;
232
+
padding: 5px;
233
+
border-radius: 10px;
234
+
border: 1px dashed black;
235
+
font-size: 16px;
236
+
font-style: italic;
237
+
letter-spacing: 3px;
238
+
text-shadow: 1px 1px 1px black;
239
+
color: var(--yellow);
240
+
background: white;
241
+
}
242
+
243
+
/*animations*/
244
+
245
+
.passportANI {
246
+
animation-name: passport;
247
+
animation-duration: 2s;
248
+
animation-fill-mode: forwards;
249
+
animation-timing-function: ease;
250
+
}
251
+
252
+
@keyframes passport {
253
+
0% {
254
+
transform: rotate(0deg);
255
+
margin-top: 60px;
256
+
opacity: 1;
257
+
}
258
+
259
+
50% {
260
+
transform: rotate(-90deg);
261
+
margin-top: -20px;
262
+
opacity: 1;
263
+
}
264
+
265
+
100% {
266
+
transform: rotate(-90deg);
267
+
margin-top: -65px;
268
+
opacity: 0;
269
+
z-index: -1;
270
+
}
271
+
}
272
+
273
+
.passportCloseANI {
274
+
animation-name: passportclose;
275
+
animation-duration: 1.7s;
276
+
animation-fill-mode: forwards;
277
+
animation-timing-function: ease;
278
+
}
279
+
280
+
@keyframes passportclose {
281
+
0% {
282
+
transform: rotate(-90deg);
283
+
margin-top: -65px;
284
+
opacity: 0.3;
285
+
}
286
+
287
+
50% {
288
+
transform: rotate(-90deg);
289
+
margin-top: -20px;
290
+
opacity: 1;
291
+
}
292
+
293
+
100% {
294
+
transform: rotate(0deg);
295
+
margin-top: 60px;
296
+
opacity: 1;
297
+
}
298
+
}
299
+
300
+
.pageANI {
301
+
animation-name: pageanimation;
302
+
animation-duration: 2s;
303
+
animation-fill-mode: forwards;
304
+
animation-timing-function: ease;
305
+
}
306
+
307
+
@keyframes pageanimation {
308
+
0% {
309
+
margin-top: 130px;
310
+
opacity: 0;
311
+
}
312
+
313
+
50% {
314
+
margin-top: 50px;
315
+
opacity: 0;
316
+
}
317
+
318
+
100% {
319
+
margin-top: 0px;
320
+
opacity: 1;
321
+
}
322
+
}
323
+
324
+
/* animation when turning page */
325
+
.pageTurnANI1 {
326
+
animation-name: pageturnanimation1;
327
+
animation-duration: 1.5s;
328
+
animation-fill-mode: forwards;
329
+
animation-timing-function: ease;
330
+
}
331
+
332
+
.pageTurnANI2 {
333
+
animation-name: pageturnanimation2;
334
+
animation-duration: 1.5s;
335
+
animation-fill-mode: forwards;
336
+
animation-timing-function: ease;
337
+
}
338
+
339
+
@keyframes pageturnanimation1 {
340
+
0% {
341
+
opacity: 0;
342
+
}
343
+
344
+
100% {
345
+
opacity: 1;
346
+
}
347
+
}
348
+
349
+
@keyframes pageturnanimation2 {
350
+
0% {
351
+
opacity: 0;
352
+
}
353
+
354
+
100% {
355
+
opacity: 1;
356
+
}
357
+
}
358
+
359
+
/*to make it somewhat mobile compatible...*/
360
+
361
+
#hide {
362
+
display: none;
363
+
padding: 10px;
364
+
background: white;
365
+
color: black;
366
+
width: 200px;
367
+
}
368
+
369
+
@media only screen and (max-width: 920px) {
370
+
:root {
371
+
--left: 170px;
372
+
}
373
+
}
374
+
375
+
@media only screen and (max-width: 600px) {
376
+
#hide {
377
+
display: block;
378
+
}
379
+
}
+556
index-v2.html
+556
index-v2.html
···
1
+
<!DOCTYPE html>
2
+
<html lang="en">
3
+
<!--
4
+
feel free to remove all of this!
5
+
---
6
+
v2: CSS and JS are all on the same HTML file. this version does not have the customizable tooltips!
7
+
---
8
+
more html and css resources @ https://www.w3schools.com/ + https://developer.mozilla.org/en-US/docs/Learn/HTML
9
+
---
10
+
more resources + graphics links can be found here if you need some pointers https://doqmeat.com/notebook
11
+
---
12
+
live preview @ https://doqmeat.github.io/HTML-templates/yukika/
13
+
-->
14
+
15
+
<head>
16
+
<meta charset="UTF-8">
17
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
18
+
<!-- favicon / tab img -->
19
+
<link rel="icon" type="image/x-icon" href="https://files.catbox.moe/15rq8w.gif">
20
+
<title>yukika template</title>
21
+
<!-- CSS link -->
22
+
<link href="body.css" rel="stylesheet">
23
+
<style>
24
+
* {
25
+
box-sizing: border-box;
26
+
}
27
+
28
+
:root {
29
+
--white: #dbecff;
30
+
--yellow: #ffbd25;
31
+
--long: 560px;
32
+
--wide: 420px;
33
+
--wide2: 840px;
34
+
--left: 32.2%;
35
+
}
36
+
37
+
html {
38
+
scrollbar-color: #ffbd25 #dbecff;
39
+
}
40
+
41
+
body {
42
+
background: url(https://doqmeat.github.io/HTML-templates/yukika/assets/bg.png);
43
+
background-attachment: fixed;
44
+
background-size: cover;
45
+
background-repeat: no-repeat;
46
+
padding: 0px;
47
+
margin: 0px;
48
+
font-family: arial;
49
+
font-size: 14px;
50
+
}
51
+
52
+
::selection {
53
+
background: var(--yellow);
54
+
color: black;
55
+
}
56
+
57
+
h1 {
58
+
color: var(--white);
59
+
text-transform: uppercase;
60
+
margin: 0px;
61
+
padding: 70px 0 20px 0;
62
+
font-size: 38px;
63
+
letter-spacing: 4px;
64
+
}
65
+
66
+
h2,
67
+
h3,
68
+
h4 {
69
+
color: var(--yellow);
70
+
}
71
+
72
+
a {
73
+
text-decoration: wavy underline;
74
+
color: #0086e4;
75
+
}
76
+
77
+
a:hover {
78
+
color: var(--yellow);
79
+
}
80
+
81
+
#cover {
82
+
left: var(--left);
83
+
margin-left: 70px;
84
+
margin-top: 60px;
85
+
border-radius: 2px 20px 20px 2px;
86
+
text-align: center;
87
+
position: absolute;
88
+
width: var(--wide);
89
+
height: var(--long);
90
+
background: #ebbb3f;
91
+
z-index: 2;
92
+
cursor: grab;
93
+
box-shadow: 2px 2px 1px white;
94
+
border: 1px grey solid;
95
+
}
96
+
97
+
#cover img {
98
+
width: 64%;
99
+
}
100
+
101
+
#passport-opened {
102
+
background: white;
103
+
display: none;
104
+
left: var(--left);
105
+
position: absolute;
106
+
z-index: 1;
107
+
margin-top: 0px;
108
+
width: var(--long);
109
+
height: var(--wide2);
110
+
border-radius: 20px;
111
+
overflow: hidden;
112
+
border: 2px solid var(--yellow);
113
+
}
114
+
115
+
#page-1 {
116
+
height: 100%;
117
+
}
118
+
119
+
#page-2 {
120
+
height: 100%;
121
+
}
122
+
123
+
.page {
124
+
background: white;
125
+
}
126
+
127
+
#page-1 .down p {
128
+
font-size: 13px;
129
+
font-weight: bold;
130
+
}
131
+
132
+
.up {
133
+
padding: 30px;
134
+
display: block;
135
+
height: var(--wide);
136
+
border-bottom: 2px dashed grey;
137
+
overflow: auto;
138
+
}
139
+
140
+
.down {
141
+
padding: 30px;
142
+
display: block;
143
+
height: var(--wide);
144
+
overflow: auto;
145
+
}
146
+
147
+
/*navigation buttons that pop up when you open (click) on the passport*/
148
+
149
+
#buttons {
150
+
text-align: center;
151
+
width: 250px;
152
+
margin: auto;
153
+
margin-top: 10px;
154
+
margin-bottom: 10px;
155
+
}
156
+
157
+
button.navBtns {
158
+
display: none;
159
+
margin: 4px;
160
+
background: var(--yellow);
161
+
font-family: inherit;
162
+
font-style: italic;
163
+
border-radius: 4px;
164
+
border: 2px inset var(--yellow);
165
+
}
166
+
167
+
button.navBtns:hover {
168
+
background: black;
169
+
color: var(--yellow);
170
+
border: 2px outset var(--yellow);
171
+
}
172
+
173
+
/*a spacer for the end of the page */
174
+
175
+
#spacer {
176
+
position: absolute;
177
+
height: 50px;
178
+
width: 10px;
179
+
top: 900px;
180
+
}
181
+
182
+
/*the look of the page 1 info table*/
183
+
184
+
#page-1 .down {
185
+
font-size: 14px;
186
+
text-transform: uppercase;
187
+
display: grid;
188
+
grid-template-areas:
189
+
"header header header"
190
+
"img info1 info2"
191
+
"footer footer footer";
192
+
grid-template-columns: 40% 35% 25%;
193
+
grid-template-rows: 10% 80% 10%;
194
+
overflow: hidden;
195
+
}
196
+
197
+
#page-1 .down h3 {
198
+
color: var(--yellow);
199
+
font-size: 12px;
200
+
}
201
+
202
+
.header {
203
+
grid-area: header;
204
+
}
205
+
206
+
.header h2 {
207
+
display: inline-block;
208
+
margin: 5px;
209
+
color: var(--yellow);
210
+
}
211
+
212
+
.portrait {
213
+
grid-area: img;
214
+
padding: 10px;
215
+
overflow: hidden;
216
+
}
217
+
218
+
.portrait img {
219
+
width: 100%
220
+
}
221
+
222
+
.info1 {
223
+
padding: 10px;
224
+
grid-area: info1;
225
+
overflow: auto;
226
+
}
227
+
228
+
.info2 {
229
+
grid-area: info2;
230
+
padding: 10px;
231
+
overflow: auto;
232
+
}
233
+
234
+
.info1 h3,
235
+
.info2 h3 {
236
+
text-transform: none;
237
+
}
238
+
239
+
.footer {
240
+
grid-area: footer;
241
+
padding-top: 4px;
242
+
text-align: center;
243
+
overflow: hidden;
244
+
color: var(--yellow);
245
+
}
246
+
247
+
/*animations*/
248
+
249
+
.passportANI {
250
+
animation-name: passport;
251
+
animation-duration: 2s;
252
+
animation-fill-mode: forwards;
253
+
animation-timing-function: ease;
254
+
}
255
+
256
+
@keyframes passport {
257
+
0% {
258
+
transform: rotate(0deg);
259
+
margin-top: 60px;
260
+
opacity: 1;
261
+
}
262
+
263
+
50% {
264
+
transform: rotate(-90deg);
265
+
margin-top: -20px;
266
+
opacity: 1;
267
+
}
268
+
269
+
100% {
270
+
transform: rotate(-90deg);
271
+
margin-top: -65px;
272
+
opacity: 0;
273
+
z-index: -1;
274
+
}
275
+
}
276
+
277
+
.passportCloseANI {
278
+
animation-name: passportclose;
279
+
animation-duration: 1.7s;
280
+
animation-fill-mode: forwards;
281
+
animation-timing-function: ease;
282
+
}
283
+
284
+
@keyframes passportclose {
285
+
0% {
286
+
transform: rotate(-90deg);
287
+
margin-top: -65px;
288
+
opacity: 0.3;
289
+
}
290
+
291
+
50% {
292
+
transform: rotate(-90deg);
293
+
margin-top: -20px;
294
+
opacity: 1;
295
+
}
296
+
297
+
100% {
298
+
transform: rotate(0deg);
299
+
margin-top: 60px;
300
+
opacity: 1;
301
+
302
+
}
303
+
}
304
+
305
+
.pageANI {
306
+
animation-name: pageanimation;
307
+
animation-duration: 2s;
308
+
animation-fill-mode: forwards;
309
+
animation-timing-function: ease;
310
+
}
311
+
312
+
@keyframes pageanimation {
313
+
0% {
314
+
margin-top: 130px;
315
+
opacity: 0;
316
+
}
317
+
318
+
50% {
319
+
margin-top: 50px;
320
+
opacity: 0;
321
+
}
322
+
323
+
100% {
324
+
margin-top: 0px;
325
+
opacity: 1;
326
+
}
327
+
}
328
+
329
+
/* animation when turning page */
330
+
.pageTurnANI1 {
331
+
animation-name: pageturnanimation1;
332
+
animation-duration: 1.5s;
333
+
animation-fill-mode: forwards;
334
+
animation-timing-function: ease;
335
+
}
336
+
337
+
.pageTurnANI2 {
338
+
animation-name: pageturnanimation2;
339
+
animation-duration: 1.5s;
340
+
animation-fill-mode: forwards;
341
+
animation-timing-function: ease;
342
+
}
343
+
344
+
@keyframes pageturnanimation1 {
345
+
0% {
346
+
opacity: 0;
347
+
}
348
+
349
+
100% {
350
+
opacity: 1;
351
+
}
352
+
}
353
+
354
+
@keyframes pageturnanimation2 {
355
+
0% {
356
+
opacity: 0;
357
+
}
358
+
359
+
100% {
360
+
opacity: 1;
361
+
}
362
+
}
363
+
364
+
/*to make it somewhat mobile compatible...*/
365
+
366
+
#hide {
367
+
display: none;
368
+
padding: 10px;
369
+
background: white;
370
+
color: black;
371
+
width: 200px;
372
+
}
373
+
374
+
@media only screen and (max-width:920px) {
375
+
:root {
376
+
--left: 170px;
377
+
}
378
+
}
379
+
380
+
@media only screen and (max-width:600px) {
381
+
#hide {
382
+
display: block;
383
+
}
384
+
}
385
+
</style>
386
+
</head>
387
+
388
+
<body>
389
+
390
+
<div id="hide">
391
+
<!-- this message will appear if someone tries to view it on a phone-->
392
+
best viewed on desktop. <br> rotate your phone !!!!!!!
393
+
</div>
394
+
395
+
<div id="buttons">
396
+
<!-- the navigation buttons -->
397
+
<button id="beforeBtn" class="navBtns">button 1</button>
398
+
399
+
<button id="afterBtn" class="navBtns">button 2</button>
400
+
</div>
401
+
402
+
<!-- passport cover -->
403
+
<div title="click to open!" id="cover" onclick="passportOpen()">
404
+
<h1>passport</h1>
405
+
<img src="https://doqmeat.github.io/HTML-templates/yukika/assets/passport-cover.png" alt="passport cover">
406
+
</div>
407
+
408
+
<!-- opened passport -->
409
+
<div id="passport-opened">
410
+
<!-- page one -->
411
+
<div id="page-1" class="page">
412
+
<!-- top half -->
413
+
<div class="up">
414
+
<h2>F2U yukika passport template</h2>
415
+
<p>coded by <a href="https://doqmeat.com">doqmeat.com</a>. source code can be found in its <a href="https://github.com/doqmeat/HTML-templates/tree/main/yukika" target="_blank">github folder</a> / .zip download through my <a title="VGen" href="https://vgen.co/doqmeat/product/yukika-passport-html-template/d9fe25c1-8873-4c03-b1f4-1f4319f03c8c" target="_blank">shop</a>!</p>
416
+
<p>tested on firefox and chrome.</p>
417
+
<p>readable on mobile if you rotate your phone.</p>
418
+
<p>you can use this for whatever you want, and edit it to your hearts content!</p>
419
+
<p><u>a link back to my site is very appreciated if you use this template!</u></p>
420
+
<h3>misc</h3>
421
+
<p>this template was just me trying to recreate an old <a href="https://web.archive.org/web/20230424014841/https://desteny.carrd.co/" target="_blank">carrd template</a> i did but instead with HTML, CSS, and JS. it was a very fun exercise!</p>
422
+
<p>it is inspired by the passport inclusion in yukika's <a title="discogs" href="https://www.discogs.com/release/15670864-%EC%9C%A0%ED%82%A4%EC%B9%B4-Yukika-%EC%84%9C%EC%9A%B8%EC%97%AC%EC%9E%90-Soul-Lady" target="_blank">soul lady album</a>.</p>
423
+
424
+
<!-- top half end div-->
425
+
</div>
426
+
427
+
<!-- bottom half -->
428
+
<div class="down">
429
+
<div class="header">
430
+
<h2>여권 passport </h2>
431
+
<img src="https://doqmeat.github.io/HTML-templates/yukika/assets/passport-symbol.png" width="35px" align="right" alt="passport image">
432
+
</div>
433
+
<div class="portrait">
434
+
<!-- below is where your img goes! -->
435
+
<img src="https://doqmeat.github.io/HTML-templates/yukika/assets/pic.jpg" alt="portrait">
436
+
</div>
437
+
<!-- 1st column -->
438
+
<div class="info1">
439
+
<h3>Name</h3>
440
+
<p>yukika</p>
441
+
<h3>Where</h3>
442
+
<p>south korea</p>
443
+
<h3>Age</h3>
444
+
<p>?</p>
445
+
<h3>Likes</h3>
446
+
<p>???</p>
447
+
</div>
448
+
449
+
<!-- 2nd column -->
450
+
<div class="info2">
451
+
<h3>Heading</h3>
452
+
<p>answer</p>
453
+
<h3>Heading</h3>
454
+
<p>answer</p>
455
+
<h3>Heading</h3>
456
+
<p>answer</p>
457
+
</div>
458
+
<div class="footer">‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ </div>
459
+
<!-- bottom half end div-->
460
+
</div>
461
+
<!-- page 1 end div-->
462
+
</div>
463
+
464
+
<!-- page 2 -->
465
+
<div id="page-2" class="page">
466
+
<!-- top half -->
467
+
<div class="up">
468
+
<h3>important notes:</h3>
469
+
<ul>
470
+
<li><b>i've provided 2 versions: one with the code separated into different files(v1), and another one with all the code on the same page (v2)</b></li>
471
+
<li><b>for v2:</b> while i have provided hyperlinks of my own, it is always best to save imgs and other things to your own server.</li>
472
+
<li><b>for those using neocities' dashboard using v1:</b> keep in mind that you can't just drag folders into the dashboard bc neocities fucks them up bad. create the folder first and drop the items instead.</li>
473
+
</ul>
474
+
475
+
<!-- top half end div-->
476
+
</div>
477
+
<!-- bottom half -->
478
+
<div class="down">
479
+
<p>pics of the real passport ↴
480
+
<center>
481
+
<img src="https://doqmeat.com/music/cds/pics/yukika-soullady-passport.jpg" alt="pic of cover of passport" width="49%">
482
+
<img src="https://doqmeat.com/music/cds/pics/yukika-soullady-passport-in.jpg" alt="pic" width="49%">
483
+
</center>
484
+
</p>
485
+
<!-- bottom half end div-->
486
+
</div>
487
+
<!-- page 2 end div-->
488
+
</div>
489
+
<!-- passport opened end div-->
490
+
</div>
491
+
492
+
<!-- nothing burger spacer at the bottom.-->
493
+
<div id="spacer">
494
+
</div>
495
+
496
+
<!-- javascript for this to even function -->
497
+
<script>
498
+
// the important thing here is that it works tbh
499
+
500
+
let passport = document.getElementById("cover");
501
+
let passportOpened = document.getElementById("passport-opened");
502
+
let page1 = document.getElementById("page-1");
503
+
let page2 = document.getElementById("page-2");
504
+
let btn1 = document.getElementById("beforeBtn");
505
+
let btn2 = document.getElementById("afterBtn");
506
+
let otherPages = document.getElementsByClassName("page");
507
+
508
+
function passportOpen() {
509
+
btn1.style.display = "inline-block";
510
+
btn2.style.display = "inline-block";
511
+
passportOpened.style.display = "block";
512
+
page1.style.display = "block";
513
+
page2.style.display = "none";
514
+
passport.className = "passportANI";
515
+
passportOpened.className = "pageANI";
516
+
btn1.onclick = passportClose;
517
+
btn1.innerText = "close passport";
518
+
btn2.onclick = passportPage2;
519
+
btn2.innerText = "next page";
520
+
}
521
+
522
+
function passportPage1() {
523
+
page1.className = "pageTurnANI1";
524
+
passportOpened.style.display = "block";
525
+
page1.style.display = "block";
526
+
page2.style.display = "none";
527
+
passportOpened.classList.remove("pageANI");
528
+
btn1.onclick = passportClose;
529
+
btn1.innerText = "close passport";
530
+
btn2.onclick = passportPage2;
531
+
btn2.innerText = "next page";
532
+
passport.style.display = "none";
533
+
}
534
+
535
+
function passportPage2() {
536
+
page2.className = "pageTurnANI2";
537
+
page1.style.display = "none";
538
+
page2.style.display = "block";
539
+
btn1.onclick = passportPage1;
540
+
btn1.innerText = "previous page";
541
+
btn2.onclick = passportClose;
542
+
btn2.innerText = "close passport";
543
+
passport.style.display = "none";
544
+
}
545
+
546
+
function passportClose() {
547
+
passport.style.display = "block";
548
+
passport.className = "passportCloseANI";
549
+
passportOpened.style.display = "none";
550
+
btn1.style.display = "none";
551
+
btn2.style.display = "none";
552
+
}
553
+
</script>
554
+
</body>
555
+
556
+
</html>
+140
index.html
+140
index.html
···
1
+
<!DOCTYPE html>
2
+
<html lang="en">
3
+
<!--
4
+
feel free to remove all of this!
5
+
---
6
+
v1: remember to keep everything on the same folders when installing somewhere else unless you know what you're doing! recommended to use a code editor like visual studio code or brackets when editing.
7
+
---
8
+
more html and css resources @ https://www.w3schools.com/ + https://developer.mozilla.org/en-US/docs/Learn/HTML
9
+
---
10
+
more resources + graphics links can be found here if you need some pointers https://doqmeat.com/notebook
11
+
---
12
+
live preview @ https://doqmeat.github.io/HTML-templates/yukika/
13
+
-->
14
+
15
+
<head>
16
+
<meta charset="UTF-8">
17
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
18
+
<!-- favicon / tab img -->
19
+
<link rel="icon" type="image/x-icon" href="https://files.catbox.moe/15rq8w.gif">
20
+
<title>yukika template</title>
21
+
<!-- CSS link -->
22
+
<link href="body.css" rel="stylesheet">
23
+
<!-- customizable tooltips -->
24
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
25
+
<script src="tooltip/tooltip-jquary.js"></script>
26
+
<script src="tooltip/tooltip.js"></script>
27
+
<!-- end of tooltips -->
28
+
</head>
29
+
30
+
<body>
31
+
32
+
<div id="hide">
33
+
<!-- this message will appear if someone tries to view it on a phone-->
34
+
best viewed on desktop. <br> rotate your phone !!!!!!!
35
+
</div>
36
+
37
+
<div id="buttons">
38
+
<!-- the navigation buttons -->
39
+
<button id="beforeBtn" class="navBtns">button 1</button>
40
+
41
+
<button id="afterBtn" class="navBtns">button 2</button>
42
+
</div>
43
+
44
+
<!-- passport cover -->
45
+
<div title="click to open!" id="cover" onclick="passportOpen()">
46
+
<h1>passport</h1>
47
+
<img src="assets/passport-cover.png" alt="passport cover">
48
+
</div>
49
+
50
+
<!-- opened passport -->
51
+
<div id="passport-opened">
52
+
<!-- page one -->
53
+
<div id="page-1" class="page">
54
+
<!-- top half -->
55
+
<div class="up">
56
+
<h2>F2U yukika passport template</h2>
57
+
<p>coded by <a href="https://doqmeat.com">doqmeat.com</a>. source code can be found in its <a href="https://github.com/doqmeat/HTML-templates/tree/main/yukika" target="_blank">github folder</a> / .zip download through my <a title="VGen product link" href="https://vgen.co/doqmeat/product/yukika-passport-html-template/d9fe25c1-8873-4c03-b1f4-1f4319f03c8c" target="_blank">shop</a>!</p>
58
+
<p>tested on firefox and chrome.</p>
59
+
<p>readable on mobile if you rotate your phone.</p>
60
+
<p>you can use this for whatever you want, and edit it to your hearts content!</p>
61
+
<p><u>a link back to my site is very appreciated if you use this template!</u></p>
62
+
<h3>misc</h3>
63
+
<p>this template was just me trying to recreate an old <a href="https://web.archive.org/web/20230424014841/https://desteny.carrd.co/" target="_blank">carrd template</a> i did but instead with HTML, CSS, and JS. it was a very fun exercise!</p>
64
+
<p>it is inspired by the passport inclusion in yukika's <a title="discogs" href="https://www.discogs.com/release/15670864-%EC%9C%A0%ED%82%A4%EC%B9%B4-Yukika-%EC%84%9C%EC%9A%B8%EC%97%AC%EC%9E%90-Soul-Lady" target="_blank">soul lady album</a>.</p>
65
+
66
+
<!-- top half end div-->
67
+
</div>
68
+
69
+
<!-- bottom half -->
70
+
<div class="down">
71
+
<div class="header">
72
+
<h2>여권 passport </h2>
73
+
<img src="assets/passport-symbol.png" width="35px" align="right" alt="passport image">
74
+
</div>
75
+
<div class="portrait">
76
+
<!-- below is where your img goes! -->
77
+
<img src="assets/pic.jpg" alt="portrait">
78
+
</div>
79
+
<!-- 1st column -->
80
+
<div class="info1">
81
+
<h3>Name</h3>
82
+
<p>yukika</p>
83
+
<h3>Where</h3>
84
+
<p>south korea</p>
85
+
<h3>Age</h3>
86
+
<p>?</p>
87
+
<h3>Likes</h3>
88
+
<p>???</p>
89
+
</div>
90
+
91
+
<!-- 2nd column -->
92
+
<div class="info2">
93
+
<h3>Heading</h3>
94
+
<p>answer</p>
95
+
<h3>Heading</h3>
96
+
<p>answer</p>
97
+
<h3>Heading</h3>
98
+
<p>answer</p>
99
+
</div>
100
+
<div class="footer">‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ ‹ </div>
101
+
<!-- bottom half end div-->
102
+
</div>
103
+
<!-- page 1 end div-->
104
+
</div>
105
+
106
+
<!-- page 2 -->
107
+
<div id="page-2" class="page">
108
+
<!-- top half -->
109
+
<div class="up">
110
+
<h3>important notes:</h3>
111
+
<ul>
112
+
<li><b>for those using neocities' dashboard:</b> if using on neocities, keep in mind that you can't just drag folders into the dashboard bc neocities fucks them up bad. create the folder first and drop the items instead.</li>
113
+
</ul>
114
+
115
+
<!-- top half end div-->
116
+
</div>
117
+
<!-- bottom half -->
118
+
<div class="down">
119
+
<p>pics of the real passport ↴
120
+
<center>
121
+
<img src="https://doqmeat.com/music/cds/pics/yukika-soullady-passport.jpg" alt="pic of cover of passport" width="49%">
122
+
<img src="https://doqmeat.com/music/cds/pics/yukika-soullady-passport-in.jpg" alt="pic" width="49%">
123
+
</center>
124
+
</p>
125
+
<!-- bottom half end div-->
126
+
</div>
127
+
<!-- page 2 end div-->
128
+
</div>
129
+
<!-- passport opened end div-->
130
+
</div>
131
+
132
+
<!-- nothing burger spacer at the bottom.-->
133
+
<div id="spacer">
134
+
</div>
135
+
136
+
<!-- javascript for this to even function -->
137
+
<script src="script.js"></script>
138
+
</body>
139
+
140
+
</html>
+55
script.js
+55
script.js
···
1
+
// the important thing here is that it works tbh
2
+
3
+
let passport = document.getElementById("cover");
4
+
let passportOpened = document.getElementById("passport-opened");
5
+
let page1 = document.getElementById("page-1");
6
+
let page2 = document.getElementById("page-2");
7
+
let btn1 = document.getElementById("beforeBtn");
8
+
let btn2 = document.getElementById("afterBtn");
9
+
let otherPages = document.getElementsByClassName("page");
10
+
11
+
function passportOpen() {
12
+
btn1.style.display = "inline-block";
13
+
btn2.style.display = "inline-block";
14
+
passportOpened.style.display = "block";
15
+
page1.style.display = "block";
16
+
page2.style.display = "none";
17
+
passport.className = "passportANI";
18
+
passportOpened.className = "pageANI";
19
+
btn1.onclick = passportClose;
20
+
btn1.innerText = "close passport";
21
+
btn2.onclick = passportPage2;
22
+
btn2.innerText = "next page";
23
+
}
24
+
25
+
function passportPage1() {
26
+
page1.className = "pageTurnANI1";
27
+
passportOpened.style.display = "block";
28
+
page1.style.display = "block";
29
+
page2.style.display = "none";
30
+
passportOpened.classList.remove("pageANI");
31
+
btn1.onclick = passportClose;
32
+
btn1.innerText = "close passport";
33
+
btn2.onclick = passportPage2;
34
+
btn2.innerText = "next page";
35
+
passport.style.display = "none";
36
+
}
37
+
38
+
function passportPage2() {
39
+
page2.className = "pageTurnANI2";
40
+
page1.style.display = "none";
41
+
page2.style.display = "block";
42
+
btn1.onclick = passportPage1;
43
+
btn1.innerText = "previous page";
44
+
btn2.onclick = passportClose;
45
+
btn2.innerText = "close passport";
46
+
passport.style.display = "none";
47
+
}
48
+
49
+
function passportClose() {
50
+
passport.style.display = "block";
51
+
passport.className = "passportCloseANI";
52
+
passportOpened.style.display = "none";
53
+
btn1.style.display = "none";
54
+
btn2.style.display = "none";
55
+
}
+97
tooltip/tooltip-jquary.js
+97
tooltip/tooltip-jquary.js
···
1
+
//style-my-tootltips by malihu (http://manos.malihu.gr)
2
+
//plugin home http://manos.malihu.gr/style-my-tooltips-jquery-plugin
3
+
! function (a) {
4
+
var b = {
5
+
init: function (b) {
6
+
function e(a) {
7
+
var b = a.pageX,
8
+
c = a.pageY;
9
+
d.style_my_tooltips("position", {
10
+
smtCursorCoordsX: b,
11
+
smtCursorCoordsY: c
12
+
})
13
+
}
14
+
var c = {
15
+
tip_follows_cursor: !1,
16
+
tip_delay_time: 700,
17
+
tip_fade_speed: 300,
18
+
attribute: "title"
19
+
},
20
+
b = a.extend(c, b);
21
+
0 === a("#s-m-t-tooltip").length && a("body").append("<div id='s-m-t-tooltip'><div></div></div>");
22
+
var d = a("#s-m-t-tooltip");
23
+
return d.css({
24
+
position: "absolute",
25
+
display: "none"
26
+
}).data("smt-z-index", d.css("z-index")).children("div").css({
27
+
width: "100%",
28
+
height: "100%"
29
+
}), a(document).on("mouseout mousedown click", ".smt-current-element", function () {
30
+
var c = a(this);
31
+
clearTimeout(smtTooltip_delay), d.style_my_tooltips("hide", {
32
+
speed: c.data("smt-fade-speed")
33
+
}), a(document).unbind("mousemove"), c.removeClass("smt-current-element"), "" === c.attr(b.attribute) && c.attr(b.attribute, c.data("smt-title"))
34
+
}), this.on("mouseover", function () {
35
+
var f = a(this),
36
+
g = f.attr(b.attribute);
37
+
f.addClass("smt-current-element").data({
38
+
"smt-title": g,
39
+
"smt-fade-speed": b.tip_fade_speed
40
+
}).attr(b.attribute, ""), d.style_my_tooltips("update", {
41
+
title: g,
42
+
speed: b.tip_fade_speed,
43
+
delay: b.tip_delay_time,
44
+
tip_follows_cursor: b.tip_follows_cursor
45
+
}), a(document).bind("mousemove", function (a) {
46
+
e(a)
47
+
})
48
+
})
49
+
},
50
+
update: function (b) {
51
+
var c = a(this);
52
+
c.stop().css({
53
+
display: "none",
54
+
"z-index": c.data("smt-z-index")
55
+
}).children("div").text(b.title), smtTooltip_delay = setTimeout(function () {
56
+
c.style_my_tooltips("show", {
57
+
speed: b.speed,
58
+
tip_follows_cursor: b.tip_follows_cursor
59
+
})
60
+
}, b.delay)
61
+
},
62
+
show: function (b) {
63
+
var c = a(this);
64
+
c.stop().fadeTo(b.speed, 1), b.tip_follows_cursor || a(document).unbind("mousemove")
65
+
},
66
+
hide: function (b) {
67
+
var c = a(this);
68
+
c.stop().fadeTo(b.speed, 0, function () {
69
+
c.css({
70
+
"z-index": "-1"
71
+
})
72
+
})
73
+
},
74
+
position: function (b) {
75
+
var c = a(this),
76
+
d = a(window).scrollLeft(),
77
+
e = a(window).scrollTop(),
78
+
f = c.outerWidth(!0),
79
+
g = c.outerHeight(!0),
80
+
h = b.smtCursorCoordsX + f - d,
81
+
i = b.smtCursorCoordsY + g - e;
82
+
if (h <= a(window).width() && h <= a(document).width()) c.css("left", b.smtCursorCoordsX);
83
+
else {
84
+
var j = b.smtCursorCoordsX - f;
85
+
j >= d ? c.css("left", j) : c.css("left", d)
86
+
}
87
+
if (i <= a(window).height() && i <= a(document).height()) c.css("top", b.smtCursorCoordsY);
88
+
else {
89
+
var k = b.smtCursorCoordsY - g;
90
+
k >= e ? c.css("top", k) : c.css("top", e)
91
+
}
92
+
}
93
+
};
94
+
a.fn.style_my_tooltips = function (c) {
95
+
return b[c] ? b[c].apply(this, Array.prototype.slice.call(arguments, 1)) : "object" !== typeof c && c ? void a.error("Method " + c + " does not exist") : b.init.apply(this, arguments)
96
+
}
97
+
}(jQuery);