-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
263 lines (252 loc) · 10.2 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
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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bulma CSS link-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<!--Materialize CSS link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Google font-->
<link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet">
<!--Personal CSS link-->
<link rel="stylesheet" href="./assets/style.css">
<title>Yoda Me Astrology</title>
<!--favicon-->
<link rel="shortcut icon" href="https://img.icons8.com/flat_round/64/000000/warranty-card.png" />
</head>
<body>
<!-- horoscope choosing body // sign buttons -->
<section class="hero is-fullheight-with-navbar">
<div class="hero-body">
<div class="container">
<div class="center-align">
<img id="nav-img" src="./icons/YodaDigitalCutFile/Yoda Digital Cut File.png" alt="icons" width="200px"
height="200px">
<br>
<span class="nav-title">Yoda-Me-Astrology</span>
<p class="yoda">Where you can read the words of wisdom of Master Yoda. </p>
</div>
<p class="title">
Choose Your Horoscope Sign:
</p>
<!-- first 6 Horoscope signs: the button and the popups -->
<div class="columns">
<div class="column">
<div class="border">
<img src="./icons/aquarius 2.png" alt="icons">
<p>Jan 20 - Feb 18</p>
<a class="trigger_popup_fricc aquaTrig" id="aquarius">Aquarius</a>
</div>
</div>
<div class="hover_bkgr_fricc aquaHover">
<span class="helper"></span>
<div>
<div class="popupCloseButton">×</div>
<img src="./icons/YodaDigitalCutFile/Yoda Digital Cut File.png" alt="icons" width="200px" height="200px">
<h2>Aquarius</h2>
<h4></h4>
</div>
</div>
<div class="column">
<div class="border">
<img src="./icons/pisces 2.png" alt="icons">
<p>Feb 19 - Mar 20</p>
<a class="trigger_popup_fricc piscesTrig" id="pisces">Pisces</a>
</div>
</div>
<div class="hover_bkgr_fricc piscesHover">
<span class="helper"></span>
<div>
<div class="popupCloseButton">×</div>
<img src="./icons/YodaDigitalCutFile/Yoda Digital Cut File.png" alt="icons" width="200px" height="200px">
<h2>Pisces</h2>
<h4></h4>
</div>
</div>
<div class="column">
<div class="border">
<img src="./icons/aries 2.png" alt="icons">
<p>Mar 21 - Apr 19</p>
<a class="trigger_popup_fricc ariesTrig" id="aries">Aries </a>
</div>
</div>
<div class="hover_bkgr_fricc ariesHover">
<span class="helper"></span>
<div>
<div class="popupCloseButton">×</div>
<img src="./icons/YodaDigitalCutFile/Yoda Digital Cut File.png" alt="icons" width="200px" height="200px">
<h2>Aries </h2>
<h4></h4>
</div>
</div>
<div class="column">
<div class="border">
<img src="./icons/taurus 2.png" alt="icons">
<p>Apr 20 - May 20</p>
<a class="trigger_popup_fricc taurusTrig" id="taurus">Taurus </a>
</div>
</div>
<div class="hover_bkgr_fricc taurusHover">
<span class="helper"></span>
<div>
<div class="popupCloseButton">×</div>
<img src="./icons/YodaDigitalCutFile/Yoda Digital Cut File.png" alt="icons" width="200px" height="200px">
<h2>Taurus</h2>
<h4></h4>
</div>
</div>
<div class="column">
<div class="border">
<img src="./icons/gemini 2.png" alt="icons">
<p>May 21 - Jun 20</p>
<a class="trigger_popup_fricc geminiTrig" id="gemini">Gemini</a>
</div>
</div>
<div class="hover_bkgr_fricc geminiHover">
<span class="helper"></span>
<div>
<div class="popupCloseButton">×</div>
<img src="./icons/YodaDigitalCutFile/Yoda Digital Cut File.png" alt="icons" width="200px" height="200px">
<h2>Gemini</h2>
<h4></h4>
</div>
</div>
<div class="column">
<div class="border">
<img src="./icons/cancer 2.png" alt="icons">
<p>Jun 21 - Jul 22</p>
<a class="trigger_popup_fricc cancerTrig" id="cancer">Cancer</a>
</div>
</div>
<div class="hover_bkgr_fricc cancerHover">
<span class="helper"></span>
<div>
<div class="popupCloseButton">×</div>
<img src="./icons/YodaDigitalCutFile/Yoda Digital Cut File.png" alt="icons" width="200px" height="200px">
<h2>Cancer</h2>
<h4></h4>
</div>
</div>
</div>
<!-- second 6 Horoscope buttons on the landing page -->
<div class="columns">
<div class="column">
<div class="border">
<img src="./icons/leo 2.png" alt="icons">
<p>Jul 23 - Aug 22</p>
<a class="trigger_popup_fricc leoTrig" id="leo">Leo</a>
</div>
</div>
<div class="hover_bkgr_fricc leoHover">
<span class="helper"></span>
<div>
<div class="popupCloseButton">×</div>
<img src="./icons/YodaDigitalCutFile/Yoda Digital Cut File.png" alt="icons" width="200px" height="200px">
<h2>Leo</h2>
<h4></h4>
</div>
</div>
<div class="column">
<div class="border">
<img src="./icons/virgo 2.png" alt="icons">
<p>Aug 23 - Sep 22</p>
<a class="trigger_popup_fricc virgoTrig" id="virgo">Virgo</a>
</div>
</div>
<div class="hover_bkgr_fricc virgoHover">
<span class="helper"></span>
<div>
<div class="popupCloseButton">×</div>
<img src="./icons/YodaDigitalCutFile/Yoda Digital Cut File.png" alt="icons" width="200px" height="200px">
<h2>Virgo</h2>
<h4></h4>
</div>
</div>
<div class="column">
<div class="border">
<img src="./icons/libra 2.png" alt="icons">
<p>Sep 23 - Oct 22</p>
<a class="trigger_popup_fricc libraTrig" id="libra">Libra</a>
</div>
</div>
<div class="hover_bkgr_fricc libraHover">
<span class="helper"></span>
<div>
<div class="popupCloseButton">×</div>
<img src="./icons/YodaDigitalCutFile/Yoda Digital Cut File.png" alt="icons" width="200px" height="200px">
<h2>Libra</h2>
<h4></h4>
</div>
</div>
<div class="column">
<div class="border">
<img src="./icons/scorpio 2.png" alt="icons">
<p>Oct 23 - Nov 21</p>
<a class="trigger_popup_fricc scorpioTrig" id="scorpio">Scorpio</a>
</div>
</div>
<div class="hover_bkgr_fricc scorpioHover">
<span class="helper"></span>
<div>
<div class="popupCloseButton">×</div>
<img src="./icons/YodaDigitalCutFile/Yoda Digital Cut File.png" alt="icons" width="200px" height="200px">
<h2>Scorpio</h2>
<h4></h4>
</div>
</div>
<div class="column">
<div class="border">
<img src="./icons/sagittarius 2.png" alt="icons">
<p>Nov 22 - Dec 21</p>
<a class="trigger_popup_fricc sagittariusTrig" id="sagittarius">Sagittarius</a>
</div>
</div>
<div class="hover_bkgr_fricc sagittariusHover">
<span class="helper"></span>
<div>
<div class="popupCloseButton">×</div>
<img src="./icons/YodaDigitalCutFile/Yoda Digital Cut File.png" alt="icons" width="200px" height="200px">
<h2>Sagittarius</h2>
<h4></h4>
</div>
</div>
<div class="column">
<div class="border">
<img src="./icons/capricorn 2.png" alt="icons">
<p>Dec 22 - Jan 19</p>
<a class="trigger_popup_fricc capricornTrig" id="capricorn">Capricorn</a>
</div>
</div>
<div class="hover_bkgr_fricc capricornHover">
<span class="helper"></span>
<div>
<div class="popupCloseButton">×</div>
<img src="./icons/YodaDigitalCutFile/Yoda Digital Cut File.png" alt="icons" width="200px" height="200px">
<h2>Capricorn</h2>
<h4></h4>
</div>
</div>
</div>
</div>
</div>
<h6 id="last-select"></h6>
<footer class="footer">
<div class="content has-text-centered">
<p id="footer">
<strong>This website is for entertainment purposes only. Yoda Me Astrology</strong> Exceptional Handlers: <a
href="https://github.com/stephimarie" target="blank">Stephanie McCandless</a> || <a href="https://github.com/NhiDanis"
target="blank">Nhi Danis</a> || <a href="https://github.com/maxx-808" target="blank">Max Higa</a> || <a
href="https://github.com/cadeburkett" target="blank">Michael Burkett</a>
</p>
</div>
</footer>
</section>
<!--jquery script link-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- axios script link -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!--personal javascript link-->
<script src="./assets/app.js"></script>
</body>
</html>