HTML template that looks like a passport
doqmeat.com/notebook/F2U/preview/yukika.html
html-template
web-template
updating links
+37
-15
+36
-14
index-v2.html
+36
-14
index-v2.html
···
3
3
<!--
4
4
feel free to remove all of this!
5
5
---
6
-
v2: CSS and JS are all on the same HTML file. this version does not have the customizable tooltips!
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
7
---
8
8
more html and css resources @ https://www.w3schools.com/ + https://developer.mozilla.org/en-US/docs/Learn/HTML
9
9
---
···
20
20
<title>yukika template</title>
21
21
<!-- CSS link -->
22
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 -->
23
28
<style>
24
29
* {
25
30
box-sizing: border-box;
···
39
44
}
40
45
41
46
body {
42
-
background: url(https://doqmeat.github.io/HTML-templates/yukika/assets/bg.png);
47
+
background: url(assets/bg.png);
43
48
background-attachment: fixed;
44
49
background-size: cover;
45
50
background-repeat: no-repeat;
···
87
92
position: absolute;
88
93
width: var(--wide);
89
94
height: var(--long);
90
-
background: #ebbb3f;
95
+
background-color: #ebbb3f;
96
+
/* background-image: url(THE PATH TO YOUR IMG HERE if youd like to have your own bg); */
91
97
z-index: 2;
92
98
cursor: grab;
93
99
box-shadow: 2px 2px 1px white;
···
216
222
}
217
223
218
224
.portrait img {
219
-
width: 100%
225
+
width: 100%;
220
226
}
221
227
222
228
.info1 {
···
244
250
color: var(--yellow);
245
251
}
246
252
253
+
/*this is the tooltip aka the title pop up*/
254
+
#s-m-t-tooltip {
255
+
font-weight: normal;
256
+
max-width: 200px;
257
+
text-align: center;
258
+
z-index: 9999;
259
+
margin: 30px 15px 7px 12px;
260
+
padding: 5px;
261
+
border-radius: 10px;
262
+
border: 1px dashed black;
263
+
font-size: 16px;
264
+
font-style: italic;
265
+
letter-spacing: 3px;
266
+
text-shadow: 1px 1px 1px black;
267
+
color: var(--yellow);
268
+
background: white;
269
+
}
270
+
247
271
/*animations*/
248
272
249
273
.passportANI {
···
298
322
transform: rotate(0deg);
299
323
margin-top: 60px;
300
324
opacity: 1;
301
-
302
325
}
303
326
}
304
327
···
371
394
width: 200px;
372
395
}
373
396
374
-
@media only screen and (max-width:920px) {
397
+
@media only screen and (max-width: 920px) {
375
398
:root {
376
399
--left: 170px;
377
400
}
378
401
}
379
402
380
-
@media only screen and (max-width:600px) {
403
+
@media only screen and (max-width: 600px) {
381
404
#hide {
382
405
display: block;
383
406
}
···
402
425
<!-- passport cover -->
403
426
<div title="click to open!" id="cover" onclick="passportOpen()">
404
427
<h1>passport</h1>
405
-
<img src="https://doqmeat.github.io/HTML-templates/yukika/assets/passport-cover.png" alt="passport cover">
428
+
<img src="assets/passport-cover.png" alt="passport cover">
406
429
</div>
407
430
408
431
<!-- opened passport -->
···
412
435
<!-- top half -->
413
436
<div class="up">
414
437
<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>
438
+
<p>coded by <a href="https://doqmeat.com">doqmeat.com</a> / <a href="https://tangled.org/doqmeat.com/yukika-passport-template" target="_blank">source code</a> / <a title="VGen product link" href="https://vgen.co/doqmeat/product/yukika-passport-html-template/d9fe25c1-8873-4c03-b1f4-1f4319f03c8c" target="_blank">download</a></p>
416
439
<p>tested on firefox and chrome.</p>
417
440
<p>readable on mobile if you rotate your phone.</p>
418
441
<p>you can use this for whatever you want, and edit it to your hearts content!</p>
···
428
451
<div class="down">
429
452
<div class="header">
430
453
<h2>여권 passport </h2>
431
-
<img src="https://doqmeat.github.io/HTML-templates/yukika/assets/passport-symbol.png" width="35px" align="right" alt="passport image">
454
+
<img src="https://tangled.org/doqmeat.com/yukika-passport-template/raw/main/assets/passport-symbol.png" width="35px" align="right" alt="passport image">
432
455
</div>
433
456
<div class="portrait">
434
457
<!-- below is where your img goes! -->
435
-
<img src="https://doqmeat.github.io/HTML-templates/yukika/assets/pic.jpg" alt="portrait">
458
+
<img src="https://tangled.org/doqmeat.com/yukika-passport-template/raw/main/assets/pic.jpg" alt="portrait">
436
459
</div>
437
460
<!-- 1st column -->
438
461
<div class="info1">
···
467
490
<div class="up">
468
491
<h3>important notes:</h3>
469
492
<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>
493
+
<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>
473
494
</ul>
474
495
475
496
<!-- top half end div-->
···
550
571
btn1.style.display = "none";
551
572
btn2.style.display = "none";
552
573
}
574
+
553
575
</script>
554
576
</body>
555
577
+1
-1
index.html
+1
-1
index.html
···
54
54
<!-- top half -->
55
55
<div class="up">
56
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>
57
+
<p>coded by <a href="https://doqmeat.com">doqmeat.com</a> / <a href="https://tangled.org/doqmeat.com/yukika-passport-template" target="_blank">source code</a> / <a title="VGen product link" href="https://vgen.co/doqmeat/product/yukika-passport-html-template/d9fe25c1-8873-4c03-b1f4-1f4319f03c8c" target="_blank">download</a></p>
58
58
<p>tested on firefox and chrome.</p>
59
59
<p>readable on mobile if you rotate your phone.</p>
60
60
<p>you can use this for whatever you want, and edit it to your hearts content!</p>