-
Notifications
You must be signed in to change notification settings - Fork 2
/
movies.html
195 lines (182 loc) · 11.6 KB
/
movies.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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!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>Grid Page</title>
<link rel="preload" href="/fonts/open-sans-v20-latin-300.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/open-sans-v20-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/open-sans-v20-latin-600.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/open-sans-v20-latin-700.woff2" as="font" type="font/woff2" crossorigin>
<meta name="description" content="Showcases all the anime movies we have to offer on animestudio+">
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon_package_v0.16/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon_package_v0.16/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon_package_v0.16/favicon-16x16.png">
<link rel="manifest" href="/images/favicon_package_v0.16/site.webmanifest">
<link rel="mask-icon" href="/images/favicon_package_v0.16/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/style.css" />
<script defer src="movies.js"></script>
</head>
<body>
<header class="secondary-header">
<div class="container">
<nav class="secondary-nav">
<a href="home.html" class="logo"><span class="bold">anime</span>studio<span class="text-accent">+</span></a>
<div class="side-nav">
<form class="search">
<label for="search"><img src="images/Search.svg" height="24" width="24" alt="magnifying glass" /></label>
<input class="hidden" type="search" name="search" id="search" placeholder="Search..." autocomplete="off" />
</form>
<div class="profile">
<img src="images/avatar.svg" height="27" width="27" alt="a person's profile picture avatar" />
</div>
<button aria-label="hamburger-menu-toggle" class="nav-toggle">
<img src="images/Hamburger.svg" height="21" width="20" alt="hamburger-menu-toggle" />
</button>
</div>
<div class="overlay hidden"></div>
<div class="nav hidden">
<ul class="nav-list">
<li class="nav-item open-accordian">
<a class="dropdown-heading" href="#">Shows<span><svg width="16" height="10" viewBox="0 0 16 10"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8.69461 9.2928L15.7126 1.8176C16.0958 1.3824 16.0958 0.7168 15.7126 0.3072C15.3293 -0.1024 14.6826 -0.1024 14.2994 0.3072L8 7.04L1.7006 0.3072C1.29341 -0.1024 0.670659 -0.1024 0.287425 0.3072C-0.0958084 0.7168 -0.0958084 1.3824 0.287425 1.8176L7.28144 9.2928C7.68862 9.7024 8.31138 9.7024 8.69461 9.2928Z"
fill="#5928E5" />
</svg></span></a>
<div class="dropdown-menu hidden">
<ul class="dropdown">
<li><a href="grid.html">Popular Shows</a></li>
</ul>
</div>
</li>
<li class="nav-item"><a class="dropdown-heading" href="movies.html">Movies</a></li>
<li class="nav-item open-accordian">
<a class="dropdown-heading" href="#">Genres<span><svg width="16" height="10" viewBox="0 0 16 10"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8.69461 9.2928L15.7126 1.8176C16.0958 1.3824 16.0958 0.7168 15.7126 0.3072C15.3293 -0.1024 14.6826 -0.1024 14.2994 0.3072L8 7.04L1.7006 0.3072C1.29341 -0.1024 0.670659 -0.1024 0.287425 0.3072C-0.0958084 0.7168 -0.0958084 1.3824 0.287425 1.8176L7.28144 9.2928C7.68862 9.7024 8.31138 9.7024 8.69461 9.2928Z"
fill="#5928E5" />
</svg></span></a>
<div class="dropdown-menu hidden" data-genre>
<ul class="dropdown">
<li><a href="genre.html" data-genre-id="36">Slice of life</a></li>
<li><a href="genre.html" data-genre-id="7">Mystery</a></li>
<li><a href="genre.html" data-genre-id="22">Romance</a></li>
<li><a href="genre.html" data-genre-id="2">Adventure</a></li>
</ul>
<ul class="dropdown">
<li><a href="genre.html" data-genre-id="1">Action</a></li>
<li><a href="genre.html" data-genre-id="8">Drama</a></li>
<li><a href="genre.html" data-genre-id="10">Fantasy</a></li>
<li><a href="genre.html" data-genre-id="14">Horror</a></li>
</ul>
<ul class="dropdown">
<li><a href="genre.html" data-genre-id="19">Music</a></li>
<li><a href="genre.html" data-genre-id="21">Samurai</a></li>
<li><a href="genre.html" data-genre-id="18">Mecha</a></li>
<li><a href="genre.html" data-genre-id="2">Adventure</a></li>
</ul>
<ul class="dropdown">
<li><a href="genre.html" data-genre-id="4">Comedy</a></li>
<li><a href="genre.html" data-genre-id="24">Sci-fi</a></li>
<li><a href="genre.html" data-genre-id="41">Thriller</a></li>
<li><a href="genre.html" data-genre-id="30">Sports</a></li>
</ul>
<ul class="dropdown">
<li><a href="genre.html" data-genre-id="37">Supernatural</a></li>
<li><a href="genre.html" data-genre-id="32">Vampire</a></li>
<li><a href="genre.html" data-genre-id="25">Shoujo</a></li>
<li><a href="genre.html" data-genre-id="27">Shounen</a></li>
</ul>
<ul class="dropdown">
<li><a href="genre.html" data-genre-id="42">Seinen</a></li>
<li><a href="genre.html" data-genre-id="38">Military</a></li>
<li><a href="genre.html" data-genre-id="29">Space</a></li>
<li><a href="genre.html" data-genre-id="39">Police</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!-- close of container -->
</header>
<main>
<section class="bg-dark margin-top-nav">
<div class="container">
<h1 class="h3">Popular Movies</h1>
<div class="grid prevent-jumping spacer" data-popular-anime>
</div>
</div> <!-- close of container -->
</section>
</main>
<footer class="main-footer">
<div class="container flow-content">
<div class="split">
<a href="#home.html" class="logo"><span class="bold">anime</span>studio<span class="text-accent">+</span></a>
<div class="footer-nav split">
<!-- list 1 -->
<div class="list flow-content">
<span class="h5">Company</span>
<ul class="flow-content">
<li><a href="home.html">Contact Us</a></li>
<li><a href="home.html">Help Centre</a></li>
<li><a href="home.html">Privacy</a></li>
</ul>
</div>
<!-- list 2 -->
<div class="list flow-content">
<span class="h5">Socials</span>
<ul class="flow-content">
<li class="socials">
<a href="home.html">
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.80529 0.244141C2.60817 0.244141 0 2.85231 0 6.04943V14.4389C0 17.636 2.60817 20.2441 5.80529 20.2441H14.1947C17.3918 20.2441 20 17.636 20 14.4389V6.04943C20 2.85231 17.3918 0.244141 14.1947 0.244141H5.80529ZM5.80529 1.7826H14.1947C16.5595 1.7826 18.4615 3.68164 18.4615 6.04943V14.4389C18.4615 16.8036 16.5625 18.7057 14.1947 18.7057H5.80529C3.4405 18.7057 1.53846 16.8066 1.53846 14.4389V6.04943C1.53846 3.68465 3.4375 1.7826 5.80529 1.7826ZM15.7692 3.32106C15.1322 3.32106 14.6154 3.83789 14.6154 4.47491C14.6154 5.11193 15.1322 5.62876 15.7692 5.62876C16.4062 5.62876 16.9231 5.11193 16.9231 4.47491C16.9231 3.83789 16.4062 3.32106 15.7692 3.32106ZM10 4.85953C7.03425 4.85953 4.61538 7.2784 4.61538 10.2441C4.61538 13.2099 7.03425 15.6288 10 15.6288C12.9657 15.6288 15.3846 13.2099 15.3846 10.2441C15.3846 7.2784 12.9657 4.85953 10 4.85953ZM10 6.39799C12.1334 6.39799 13.8462 8.11073 13.8462 10.2441C13.8462 12.3776 12.1334 14.0903 10 14.0903C7.86659 14.0903 6.15385 12.3776 6.15385 10.2441C6.15385 8.11073 7.86659 6.39799 10 6.39799Z"
fill="white" />
</svg><span>Instagram</span>
</a>
</li>
<li class="socials">
<a href="home.html"><svg width="20" height="21" viewBox="0 0 20 21" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10 0.244141C4.4775 0.244141 0 4.74471 0 10.2957C0 15.3348 3.69333 19.4961 8.505 20.2232V12.9593H6.03083V10.3174H8.505V8.55926C8.505 5.6485 9.91583 4.37112 12.3225 4.37112C13.475 4.37112 14.085 4.4574 14.3733 4.49593V6.80192H12.7317C11.71 6.80192 11.3533 7.77608 11.3533 8.87337V10.3174H14.3475L13.9417 12.9593H11.3533V20.2441C16.2342 19.5791 20 15.3842 20 10.2957C20 4.74471 15.5225 0.244141 10 0.244141Z"
fill="white" />
</svg><span>Facebook</span></a>
</li>
<li class="socials">
<a href="home.html"><svg width="20" height="21" viewBox="0 0 20 21" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M20 2.60392C19.2513 3.01257 18.4993 3.32106 17.666 3.42523C18.4993 2.80824 19.1667 1.7826 19.4987 0.652795C18.6654 1.26978 17.832 1.67844 16.9173 1.88677C16.084 0.861128 15 0.244141 13.8346 0.244141C11.582 0.244141 9.74935 2.49975 9.74935 5.26818C9.74935 5.68084 9.74935 6.08949 9.83398 6.39799C6.41602 6.19366 3.41797 4.24254 1.41602 1.16562C0.999349 1.88677 0.833333 2.80824 0.833333 3.72972C0.833333 5.47651 1.58203 7.01497 2.66602 7.93645C1.9987 7.83228 1.33464 7.62796 0.833333 7.31946C0.833333 7.31946 0.833333 7.31946 0.833333 7.42363C0.833333 9.88356 2.24935 11.9348 4.08203 12.3475C3.75 12.4477 3.41797 12.5518 3.0013 12.5518C2.75065 12.5518 2.5 12.5518 2.24935 12.4477C2.75065 14.499 4.2513 15.9373 6.08398 15.9373C4.66797 17.2714 2.91667 18.0887 0.999349 18.0887C0.667317 18.0887 0.332032 18.0887 0 17.9885C1.83268 19.4228 4.00065 20.2441 6.25 20.2441C13.8346 20.2441 17.9167 12.5518 17.9167 5.88517C17.9167 5.68084 17.9167 5.47651 17.9167 5.26818C18.75 4.55103 19.4173 3.62956 20 2.60392Z"
fill="white" />
</svg><span>Twitter</span></a>
</li>
</ul>
</div>
<!-- list 3 -->
<div class="list">
<span class="h5">More</span>
<ul class="flow-content">
<li><a href="home.html">Gift Cards</a></li>
<li><a href="home.html">Audio and Subtitles</a></li>
<li><a href="home.html">Jobs</a></li>
</ul>
</div>
</div>
</div>
<p class="copyright">
<img src="images/copyright.svg" alt="copyright logo" height="15" width="15" loading="lazy" /><span>Animestudio+
2021</span>
</p>
</div>
<!-- close of container -->
</footer>
</body>
</html>