forked from Mini-Sylar/Anime-Info-Platform
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
108 lines (104 loc) · 3.86 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About | Anime Info Platform</title>
<link rel="stylesheet" href="../styles/style-contact.css" />
<link rel="icon" type="image/x-icon" href="./images/page-icon.png" />
<script src="https://kit.fontawesome.com/df3ec59988.js" crossorigin="anonymous"></script>
<script async src="https://cdn.splitbee.io/sb.js"></script>
</head>
<body>
<!-- Mobile Nav -->
<button type="button" class="hamburger"><i class="fa-solid fa-bars"></i></button>
<div class="links-mobile">
<a href="/" class="links">Home</a>
<a href="./about.html" class="links">About</a>
<a href="./contact.html" class="links">Contact</a>
<!-- <a href="#" class="links">Subscription</a> -->
</div>
<!-- Nav Here -->
<nav class="navigation-desktop">
<div class="logo">LOGO</div>
<div class="links-desktop">
<a href="./" class="links">Home</a>
<a href="./about.html" class="links">About</a>
<a href="./contact.html" class="links">Contact</a>
<!-- <a href="#" class="links">Subscription</a> -->
</div>
</nav>
<!-- Main Body -->
<div class="mainpage">
<div class="contact-heading-container">
<h1 class="about">About the website</h1>
<p class="about-body">
Hi,<a href="https://github.com/Mini-Sylar">Terence Quashie</a> here. This site was created as a way to easily
search for all anime as well
as receive recommendations. The primary goal of this project was to
learn how to hit APIs and return some data, fortunately or
unfortunately the source that was used had their API written using
GraphQl <a href="" class="anilist">AniList</a> great site btw, so this
was another great learning opportunity since most people use GraphQl
anyway. I've written some websites using only vanilla javacript which
you can check out <a href="" class="link-to-github">here</a> but this
looks like the biggest one i've written...welp to more vanilla
javacript projects 🥂
<strike>Help me</strike>
</p>
<h2>Features</h2>
<ul>
<li>
Search - Search for any anime, if it exists on anilist, you'll find
it
</li>
<li>
Descriptions - Get full synoposis on any show that you search as
well as the number of episodes, rating as well as the year the show
aired
</li>
<li>
Recommendations - Based on what you search for, you'll find 5 more
shows just like it!
</li>
<li>
Surprise Me - Undecided on the show to start watching? just hit the
surpise button and you'll find 5 random shows you can check out
</li>
<li>
More Info - Redirect to anilist where you can find more information
such as voice actors, directors etc
</li>
</ul>
<h2 class="supported">Supported Browsers</h2>
<p>
<strike>If you can see this page, your browser is supported</strike>
stolen! <br />
Every modern browser is supported
</p>
<h2 class="about">Thrid Party Sites</h2>
<p class="third">
Data was retrieved from Anilist check them out!<br> <a href="#">AniList</a>
</p>
</div>
</div>
</div>
<script>
const mobile_nav = document.querySelector(".links-mobile");
const ham = document.querySelector(".hamburger");
ham.addEventListener("click", () => {
mobile_nav.classList.toggle("show-links");
if (mobile_nav.classList.contains("show-links")) {
document.body.style = `
overflow:hidden;
`;
} else {
document.body.style = `
overflow:scroll;
`;
}
});
</script>
</body>
</html>