-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
137 lines (137 loc) · 7.3 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
131
132
133
134
135
136
137
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<title>Star Wars</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<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=Jura:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/style.css" />
<link rel="stylesheet" href="./assets/css/reset.css" />
</head>
<body>
<!-- NAVIGATION BAR -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #EDC531;">
<a class="navbar-brand" href= "./index.html">
<img src="./assets/images/star-wars-icon.jpg" width="30" height="30" alt="">
</a>
<div class="collapse" id="navbarToggleExternalContent">
<div class="p-4">
<a class="navhome" href="index.html">Home</a>
<a class="navcyclo" href="encyclopedia.html">Encyclopedia</a>
</div>
</div>
<nav class="navbar navbar-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="./index.html">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="./encyclopedia.html">Encyclopedia</a>
</div>
</div>
</nav>
<!-- FORM CONTAINER -->
<main id="main-bg" class="d-flex min-vh-100">
<div class="container-fluid my-auto">
<h1 id="quiz-title"class="display-2 text-center text-light">Tell us about you</h1>
<div id = "quiz-flex" class="row justify-content-center">
<!-- SIDEBAR PICTURE LEFT -->
<img id="kiloren" src="assets/images/kiloren.gif">
<div id = "quiz-body" class="col-12 col-md-10 col-lg-6 mb-3 p-4">
<!-- GARY AND GAGE BUTTON SECTION -->
<div class="button-container">
<a href="./gary.html">
<button id = "instructor1" type="button" class="btn btn-danger">Press if Gary</button>
</a>
<a href="./gage.html">
<button id = "instructor2" type="button" class="btn btn-success">Press if Gage</button>
</a>
</div>
<!-- WHERE QUIZ STARTS -->
<form id = "form">
<div class="form-group">
<label class="questions" for="exampleFormControlSelect2">When you are in a crowd, do you?
</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>a. Immediately plan exit strategy!
</option>
<option>b. Socialize! More friends!</option>
</select>
</div>
<div class="form-group">
<label class= "questions" for="exampleFormControlSelect2">When confronted with a bear, do you?
</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>a. Aww, whip out your phone.</option>
<option>b. Run faster than the guy next to you.</option>
</select>
</div>
<div class="form-group">
<label class= "questions" for="exampleFormControlSelect2">When you see a puzzle, do you?</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>a. Solve it, duh.</option>
<option>b. Ain't nobody got time for that.</option>
</select>
</div>
<div class="form-group">
<label class= "questions" for="exampleFormControlSelect2">When somebody you don't know waves at you and starts walking in your direction, do you?
</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>a. Awkwardly wave back and internally panic
</option>
<option>b. Relish the opportunity to show you Pokémon cards to an unsuspecting victim</option>
</select>
</div>
<div class="form-group">
<label class= "questions" for="exampleFormControlSelect2">You wake up, and suddenly turn into a wild Gary Talmes, do you?</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>a. Instantly contact Gage and relentlessly pick on him.</option>
<option>b. Come up with something to make your cohort cry and feed on their pain.</option>
</select>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="newsletter-input">
<label class="form-check-label" for="newsletter0input">I have filled this to the best of my knowledge</label>
</div>
<button type="button" id ="blastoff" class="btn btn-danger btn-lg btn-block character">GENERATE CHARACTER</button>
</form>
</div>
<!-- SIDEBAR PICTURE RIGHT -->
<img id="kiloren2" src="assets/images/kiloren.gif">
<!-- RANDOM CHARACTER GENERATOR -->
<div class = "char-container"></div>
<div>
<div class="card text-center text-white bg-transparent mb-3">
<h5 class="card-title name"></h5>
<img src="" class="card-img-top">
</div>
</div>
</div>
</div>
</div>
</main>
<div class="pasttitle">Past Characters</div>
<div class="pastCharacters"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./assets/js/character.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<footer>
<div>Copyright: 2021 Group 3 Bootcamp</div>
<a href="./aboutus.html" class="btn btn-primary">About Us</a>
<img scr = "https://static.wikia.nocookie.net/starwars/images/9/98/Palpatine-TROS-infobox.jpg/revision/latest/scale-to-width-down/1000?cb=20200401080828">
</footer>
</body>
</html>
</html>