-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
116 lines (110 loc) · 5.35 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dr. Fantastic's Fortunes</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body id="body-one">
<div id="content" class="container">
<div class="row">
<div class="col s12">
<img src="assets/images/logo_transparent.png" alt="Dr. Magnificent's Fortunes" id="logo">
</div>
</div>
<div class="row">
<div id="header" class="col s12">
<p class="description-text">For thousands of years, humanity has gazed at the stars. Ancient civilizations began
charting the stars to gain understanding of the forces that guide us in our daily lives.</p>
<p class="description-text">They found that the progression of the stars in the sky is cyclical, and as humanity
progressed, we have discovered that our individual lives and our collective history are also cyclical.</p>
<p class="description-text">Like our forefathers, we can use this timeless knowledge to look to the cosmos to
explain our personalities, interpret our past, and even predict future events.</p>
<p class="description-text">Unfortunately, the complications of modern life have muddled our perceptions of
cosmic forces and turned us away from the timeless wisdom of the stars.</p>
<br>
<p class="description-text">Fate has brought you here to reconnect with the greater forces that guide us. Enter
your Astrological Zodiac sign below to continue...</p>
</div>
</div>
<div class="row">
<div class="col s12 l3">
</div>
<form id="dob-form" class="col s12 l6">
<div class="row">
<div class="input-field">
<p>Select your Astrological sign:</p>
<p id="invalid"></p>
<select name="birth-date" id="dob-input">
<option value="" disabled selected>Choose Your Option</option>
<option value="aquarius">Aquarius</option>
<option value="aries">Aries</option>
<option value="cancer">Cancer</option>
<option value="capricorn">Capricorn</option>
<option value="gemini">Gemini</option>
<option value="leo">Leo</option>
<option value="libra">Libra</option>
<option value="pisces">Pisces</option>
<option value="sagittarius">Sagittarius</option>
<option value="scorpio">Scorpio</option>
<option value="taurus">Taurus</option>
<option value="virgo">Virgo</option>
</select>
<button id="submit-btn" class="purple darken-3 waves-effect waves-light btn">See your fate</button>
</div>
</div>
</form>
<div class="col s12 l3">
</div>
</div>
<div class="row">
<div class="col s12 m4 l4">
<div class="card">
<div class="card-image card-image-page-one">
<img src="assets/images/astrology.jpg" alt="The signs of the zodiac">
<span class="card-title">Signs of the Zodiac</span>
</div>
<div class="card-content">
<p>The ancient Babylonians were among the first to associate the position of the earth relative to the
constellations with personality, fortune, and destiny.In our modern age, this timeless knowledge is
accessible to all.</p>
</div>
</div>
</div>
<div class="col s12 m4 l4">
<div class="card">
<div class="card-image card-image-page-one">
<img id="nasa-apod" src="assets/images/moon.jpg" alt="Nebula">
<span class="card-title">Phases of the Moon</span>
</div>
<div class="card-content">
<p>Similar to how it affects stages of the planting cycle, the moon affects the events and growth that
define who we are throughout our lives. Reflecting on the moon cycles helps us reflect upon ourselves.</p>
</div>
</div>
</div>
<div class="col s12 m4 l4">
<div id="nasa-card" class="card">
<div class="card-image card-image-page-one">
<img id="nasaPic" src="assets/images/yosemite.jpg" alt="Nature">
<span class="card-title">Power of the Cosmos</span>
</div>
<div class="card-content">
<p>Throughout human history, events have been guided by massive currents of cosmic energy. With technology
and this timeless knowledge, can read the energy to seek personal fulfillment and avoid chaos in our
lives.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>