-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
130 lines (122 loc) · 5.5 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
<!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>
AOS.init();
</script>
<body>
<div class="container col-xxl-8 px-4 py-5">
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
<div class="col-10 col-sm-8 col-lg-6">
<img src="src/image/hero.jpg" class="d-block mx-lg-auto img-fluid" alt="hero" width="700"
height="500" loading="lazy">
</div>
<div class="col-lg-6">
<h1 class="display-5 fw-bold lh-1 mb-3">My Dress-Up Darling</h1>
<p class="lead">What is <b>My Dress-Up Darling? </b>It is a top rated romance anime which just came out at the
start of 2022. It was animated by <a href="https://en.cloverworks.co.jp/" target="_blank">CloverWorks<i
class="fa-solid fa-arrow-up-right-from-square"></i></a>who have made other top selling animes such as Spy
x Family, Horimiya, SHADOWS HOUSE and many more. The manga was drawn by Shinichi Fukuda.</p>
<div data-aos="fade-right" data-aos-delay="300" class="d-grid gap-2 d-md-flex justify-content-md-start">
<a href="info.html">
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Learn More <i
class="fa-solid fa-arrow-right"></i></button>
</a>
</div>
</div>
</div>
</div>
<script src="src/js/bootstrap.js"></script>
<script
src="https://raw.githubusercontent.com/username11384/multimediaHTML/main/Multi%20Assessment/src/js/bootstrap.js"></script>
</body>
<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>