-
Notifications
You must be signed in to change notification settings - Fork 1
/
plot.html
162 lines (155 loc) · 7.13 KB
/
plot.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="src/image/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet" />
<script src="https://kit.fontawesome.com/1e7060f51f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="src/css/bootstrap.css" />
<link rel="stylesheet" href="src/css/aos.css" />
<script src="src/js/aos.js"></script>
<link rel="stylesheet"
href="https://raw.githubusercontent.com/username11384/multimediaHTML/main/Multi%20Assessment/src/css/bootstrap.css" />
<link rel="stylesheet" href="src/css/dark-mode.css" />
<link rel="stylesheet"
href="https://raw.githubusercontent.com/username11384/multimediaHTML/main/Multi%20Assessment/src/css/dark-mode.css" />
<title>Multimedia Assessment - Immanuel Lam</title>
</head>
<style>
.jbmono {
font-family: "JetBrains Mono";
}
</style>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="darktxt navbar-brand" href="index.html">
<img src="src/image/icon.jpg" width="30" height="30" class="d-inline-block align-top"
alt="Marin as Shizuku-tan" />
My Dress-Up Darling
</a>
<form class="container-fluid justify-content-start">
<a href="index.html" style="text-decoration: none;">
<button class="btn btn-outline-primary" type="button"><i class="fa-solid fa-house"></i></button></a>
</form>
<div class="darktxt navbar-text d-flex form-check form-switch">
<input type="checkbox" class="form-check-input" id="darkSwitch" />
<label class="custom-control-label" for="darkSwitch">Dark</label>
</div>
<script src="src/js/dark-mode-switch.min.js"></script>
<script
src="https://raw.githubusercontent.com/username11384/multimediaHTML/main/Multi%20Assessment/src/js/dark-mode-switch.min.js"></script>
</div>
</div>
</nav>
<script src="src/js/bootstrap.js"></script>
<script src="https://raw.githubusercontent.com/username11384/multimediaHTML/main/Multi%20Assessment/src/js/bootstrap.js"></script>
</body>
<script>
AOS.init();
</script>
<div class="px-4 py-5 my-5 text-center">
<img class="d-block mx-auto mb-4" src="src/image/shizuku.jpg" alt="">
<h1 class="display-5 fw-bold">Plot</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Be aware that this page about the plot contains major spoilers about the anime and some manga content. Click the button to reveal spoilers</p>
<div data-aos="fade-up" data-aos-delay="300">
<button class="btn btn-danger btn-lg px-4 gap-3" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Spoilers
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="darkmode card card-body">
<p class="darktxt lead text-left ">My Dress-Up Darling is about an unusual relationship between two people who basically live in opposite worlds.
Gojo Wakana, who is an antisocial and insecure doll maker, meets Marin Kitagawa, the popular classmate who is known by everyone. They meet
after class, when Gojo is cleaning up, and Marin talks to him how he has to speak up for himself. Gojo then thinks about what Marin had told him
His sewing machine stopped working so he used the school one after class. Marin enters the room and sees him there, but instead of her laughing, she
admired what he was doing. She is into anime and cosplaying, and asked Gojo to make her a cosplay. He reluctantly agrees, but he isn't sure if
he can do a good job. <br/><br/>
Their relationship escalates very quickly from here. They get closer and both of them slowly develop romantic feelings for each other. After Gojo finishes
her first cosplay of Shizuku-tan, she tries it and it's just perfect for her. This leads to them being together more often, and Gojo helping make her more
cosplays.
<br/><br/>
After the story progresses some more, they are on a phone call, and right after Gojo went to sleep, Marin finally confesses her love to him, which
he doesn't realize for now. So far, the manga has covered enough material for a season 2 of the anime.
</p>
<div data-aos="fade-left" data-aos-delay="300" class="d-flex h-100 text-align align-items-center">
<div class="w-100"><br />
<h3 class="text-center sixty">You've reached the end!</h1><br />
<div class="text-center">
<a href="info.html">
<button type="button" class="align-items-center btn btn-primary btn-lg px-4 me-md-2"><i
class="fa-solid fa-arrow-left"></i> Go Back?</button>
</a>
</div>
<br />
<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="text-center text-lg-start bg-light text-muted">
<section
class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom"
>
<div class="me-5 d-none d-lg-block">
<span>Check me out on GitHub:</span>
</div>
<div>
<a
href="https://github.com/username11384"
target="_blank"
class="me-4 text-reset"
>
<i class="fab fa-github"></i>
</a>
</div>
</section>
<section class="">
<div class="container text-center text-md-start mt-5">
<div class="row mt-3">
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<h6 class="text-uppercase fw-bold mb-4 jbmono">
<i class="fa-solid fa-code"></i> Multimedia Assessment
</h6>
<p>
This website was written in HTML with Bootstrap 5.0 and animate-on-scroll by Immanuel Lam.
</p>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<h6 class="text-uppercase fw-bold mb-4 jbmono"><i class="fa-solid fa-link"></i> Useful links</h6>
<p>
<a href="index.html" class="text-reset">Home</a><br />
</p>
</div>
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<h6 class="text-uppercase fw-bold mb-4 jbmono"><i class="fa-solid fa-at"></i> Contact</h6>
<p>
<i class="fas fa-envelope me-3"></i>
</p>
</div>
</div>
</div>
</section>
<div
class="text-center p-4 jbmono"
style="background-color: rgba(0, 0, 0, 0.05)"
>
© 2022 Copyright:
<a
class="text-reset fw-bold jbmono"
target="_blank"
href="https://github.com/username11384"
>Immanuel Lam</a
>
<a> | </a>
<a href="https://github.com/username11384/multimediaHTML" target="_blank" class="text-reset jbmono">Edit this page on GitHub <i class="fa-solid fa-arrow-up-right-from-square"></i> </a>
</div>
</footer>
</html>