forked from sweetfreak/media-generator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (96 loc) · 9.93 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
<!-- Home Page and Hero Search -->
<!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">
<!-- api related thing? May not need. -->
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
<!-- CSS UI Framework: https://purecss.io/ - needs both of these -->
<link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css" integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Cursor for Thanos Gauntlet Cursor -->
<style type="text/css">body { cursor: url('data:image/x-icon;base64,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'), auto; }</style>
<link rel="stylesheet" href="./assets/css/style.css">
<title>Movie Generator</title>
</head>
<header>
<!--menu bar section -->
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="./index.html" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item pure-menu-selected pure-menu-link"><a href="./aboutus.html">About Us</a></li>
<li class="pure-menu-item pure-menu-selected pure-menu-link"><a href="./favorites.html">Favorites</a></li>
<!-- <li class="pure-menu-item pure-menu-selected pure-menu-link"><a href="./movie-info.html">About Our Generator</a></li> -->
</ul>
</div>
</header>
<body>
<!--Title Banner at the front page-->
<div class="banner">
<h1 class="banner-head">
Movie Generator<br>
Find Out More About Your Favorite Movie!
</h1>
</div>
<main>
<!-- Search Form Section Here -->
<div class="my-container">
<div class="pure-g">
<!--search box-->
<div id="search-form">
<h2>Type In The Name of The Movie:</h2>
<form id="superhero-search-box">
<label class="form-label" for="superhero">Movie:</label>
<input name="movieTitle" id="movie-title" type="text" placeholder ="Star Wars, Thor etc" autofocus="true" class="form-input" aria-label="movie"/>
<button type="submit" class="btn" id="submit-button">Search</button>
</form>
<!-- image and caption -->
<div id="image-box">
<!-- <img id="movie-image" src="" alt="movie photo appears here"></img> -->
<p id="image-caption"></p>
</div>
</div>
</div>
</div>
<!-- End Of Search Form Section -->
<!-- Info card here -->
<div id="movie-info-card">
</div>
</main>
<!-- End Of Info Card Section -->
<!--Back To Top Button-->
<a id="top-button"></a>
<!--Footer Section-->
<div class="footer l-box">
<p>
<h4>Thank you so much for the support 💪</h4>
<span class="column-header">Meet Our Team </span>
<div id="names-format">
<ul>
<li>
<a href="https://github.com/sweetfreak">
<i class="fa fa-github" style="font-size:24px;color:green;"></i>Jesse</a>
</li>
<li>
<a href="https://github.com/kattheswagger1122">
<i class="fa fa-github" style="font-size:24px;color:pink;"></i>Katrina</a>
</li>
<li>
<a href="https://github.com/Muzan67">
<i class="fa fa-github" style="font-size:24px;color:blue;"></i>Alejandro</a>
</li>
<li>
<a href="https://github.com/jmvega316">
<i class="fa fa-github" style="font-size:24px;color:rgb(153, 0, 0);"></i>Jeremiah</a>
</li>
</ul>
</div>
<!-- Back to top button -->
<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-chevron-up"></i></button>
<!-- End Of Footer -->
</body>
<script src="./assets/js/script.js"></script>
</html>