generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
134 lines (131 loc) · 9.31 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
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Liga Baikova">
<meta name="description" content="This website educates people about the similarities and differences of Astrology and Astronomy.
It's done by using 3D constellation models and daily horoscopes of zodiacs/">
<title>Astro</title>
<!-- Add favicon -->
<link rel="icon" href="./assets/images/icons/yellow-star-new.png">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Internal style sheet -->
<link rel="stylesheet" href="./assets/styles/main.css">
<!-- Font awesome cdn -->
<script src="https://kit.fontawesome.com/d6343cbdf9.js" crossorigin="anonymous"></script>
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-md py-0">
<a class="navbar-brand ml-5 uppercase" href="./index.html">Astro</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mr-lg-5 mr-md-3 lowercase">
<li class="nav-item active">
<a class="nav-link star-button" href="./index.html"> Home</a>
</li>
<li class="nav-item">
<a class="nav-link star-button" href="./constellations.html"> Constellations</a>
</li>
<li class="nav-item">
<a class="nav-link star-button" href="./zodiac.html"> Zodiac Signs</a>
</li>
<li class="nav-item">
<a class="nav-link star-button" href="./calculator.html"> Calculator</a>
</li>
</ul>
</div>
</nav>
<!-- Star button located on the left hand side -->
<a class="fixed-top" href="./index.html"><span id="header-star"></span></a>
</header>
<main class="flex-shrink-0" id="star-bkg">
<!-- Astrology and Astronomy top page containers -->
<section>
<div class="container astro-main-container">
<h1 class="astro-heading uppercase my-3 my-md-0">Astro</h1>
<div class="row">
<div class="col-12 col-md my-3 text-center astro-sub-container">
<h2 class="astro-sub-heading cursive mt-5 mt-md-2">nomy</h2>
<p class="astro-description">Learn more about the zodiac constellations by exploring their 3D models and find out what stars they're made out of.</p>
<a class="star-button page-button lowercase" href="./constellations.html"> Constellations</a>
</div>
<div class="col-12 col-md my-3 text-center astro-sub-container">
<h2 class="astro-sub-heading cursive mt-5 mt-md-2">logy</h2>
<p class="astro-description">Have fun with your daily horoscope and discover which number and color might bring you some additional luck. </p>
<a class="star-button page-button lowercase" href="./zodiac.html"> Zodiac signs</a>
</div>
</div>
</div>
</section>
<!-- About section -->
<section class="gradient-border" id="about">
<div class="container">
<div class="row my-3 m-lg-5">
<div class="col-12 col-lg my-2 my-md-auto">
<h3 class="astro-about-heading uppercase two-font-heading heading-active" id="astronomy-heading">Astronomy</h3>
<h3 class="astro-about-heading uppercase two-font-heading" id="astrology-heading">Astrology</h3>
<h3 class="astro-about-heading uppercase two-font-heading" id="connection-heading">Connection</h3>
</div>
<div class="col-12 col-lg my-0 my-md-auto px-2 px-md-5 px-lg-2 about-description-container">
<p class="astro-about-description description-active" id="astronomy-description">
Astronomy is widely recognized as one of the oldest natural sciences that
studies everything outside of the Earth's atmosphere.
Amongst many, this includes objects like comets, planets, moons, nebulae, galaxies
and stars which of course create the constellation patterns.
You can head over to the constellation page to explore 3D models of 12 constellations
associated with zodiac signs and learn what stars they are made out of.
</p>
<p class="astro-about-description" id="astrology-description">
Astrology is considered to be a pseudoscience that attempts to interpret how the movement
and placement of celestial objects (studied by astronomers)
affect people's lives. Even though there is no scientific evidence of Astrology being able to
predict aspects of our everyday lives many people still believe this to be true. Nevertheless,
daily horoscopes provide a great deal of entertainment as long as you take it with a grain of salt.
To read yours head over to the zodiac page.
</p>
<p class="astro-about-description" id="connection-description">
The connection between Astronomy and Astrology lies in the history that they both share.
Right up to the 17th century, many civilizations regarded both to be the same even though
Astrology was mostly used to 'predict' the future. As science evolved so did Astronomy and soon
Astrology was demoted to be nothing more than superstition. Due to deep historic roots, many people
still use it even nowadays. This website aims to connect these long lost cousins while highlighting
the differences that shouldn't be overlooked.
</p>
</div>
</div>
</div>
</section>
</main>
<footer class="footer mt-auto">
<div class="container-fluid text-lowercase">
<div class="row">
<a href="./index.html#about" class="col-12 col-md-6 py-2 mx-auto text-center opacity"> About </a>
<div class="col-12 col-md-6 py-2 mx-auto text-center">
<span class="mr-3">Contact me:</span>
<a href="https://github.com/liigalized" target="_blank"><i class="fab fa-github opacity mx-1"></i></a>
<a href="https://www.linkedin.com/in/ligabaikova" target="_blank"><i class="fab fa-linkedin-in opacity mx-1"></i></a>
<a href="https://www.instagram.com/liiga_moon/" target="_blank"><i class="fab fa-instagram opacity mx-1"></i></a>
</div>
</div>
<div class="row">
<p class="col px-0 py-2 pt-md-0 my-0 text-center text-muted small"> Graphics designed by Claire Schorman <a href="https://www.instagram.com/byclaireschorman/" target="_blank"><i class="fab fa-instagram opacity"></i></a></p>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- cdn for Bootstrap functionality -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- internal script files -->
<script src="./assets/scripts/main.js"></script>
<script src="./assets/scripts/index.js"></script>
</body>
</html>