-
Notifications
You must be signed in to change notification settings - Fork 1
/
affirmations.html
161 lines (139 loc) · 5.29 KB
/
affirmations.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
<!doctype html>
<html lang="en">
<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="description" content="Choose the astronaut you most identify with for a boost of positivity.">
<!-- CSS -->
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="css/affirm.css"> -->
<title>Affirmations</title>
<style>
/* Background image styling */
body, html {
height: 100%;
margin: 0;
background-image: url('assets/affirmations_background.jpg');
background-size: cover;
background-repeat: repeat;
}
/* Styling for the overlay text */
#overlay-text {
text-align: center;
font-size: 40px;
color: white;
margin-top: 20px;
}
.btn-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 40px;
align-items: center;
background-color: transparent;
outline: none;
}
.image {
width: 400px;
height: 200px;
margin: 40px;
position: relative;
cursor: pointer;
align-items: center;
background-color: transparent;
outline: none;
}
.button {
width: 400px;
height: 200px;
margin: 40px;
position: relative;
cursor: pointer;
align-items: center;
background-color: transparent;
background-repeat: no-repeat;
border: none;
overflow: hidden;
outline: none;
}
.btn {
width: 400px;
height: 200px;
margin: 40px;
position: relative;
cursor: pointer;
align-items: center;
background-color: transparent;
background-repeat: no-repeat;
border: none;
overflow: hidden;
outline: none;
}
.fact-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: rgba(0, 0, 0, 0.5); Semi-transparent background for facts */
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s;
}
.image:hover .fact-overlay {
opacity: 1; /* Show the overlay on hover */
}
/* Positioning for back link to take you to home page */
.back-link {
position: absolute;
top: 2px;
right: 10px;
font-size: 17px;
}
/* Styling for back link to take you to home page */
.back-link a {
color: white; /* Change the text color to white */
text-decoration: none; /* Remove underline from the link */
}
</style>
</style>
</head>
<body>
<div id="overlay-text"> 👨🚀 encouraging astronauts 👩🚀 </div>
<!--Back link to take you to home page-->
<div class="back-link">
<p><a href="https://guptajanavi.github.io/cosmos-cares/"> Go back to the International Space Station</a></p>
</div>
<!--Creating a container to store the buttons together-->
<div class="btn-group">
<!-- Image 1 -->
<!-- Initialising each button with its unique phrase and clipart -->
<button type="button" onclick="alert('Just as the stars shine brightly in the vast cosmos, your unique qualities and talents make you shine in this world ★')">
<img src="assets/PLSWORK.png"/>
</button>
<!-- Image 2 -->
<button type="button" onclick="alert('Like a planet in orbit, your life has a purpose and a path. Trust that you are exactly where you need to be.')">
<img src="assets/a2.png"/>
</button>
<!-- Image 3 -->
<button type="button" onclick="alert('Just as the moon has phases, your life has its ups and downs. Each phase is a part of your journey, and you are capable of navigating them all.')">
<img src="assets/a3.png"/>
</button>
<!-- Image 4 -->
<button type="button" onclick="alert('Like a comet blazing its trail through the cosmos, you have the power to leave a lasting impact on the world with your unique presence.')">
<img src="assets/a4.png"/>
</button>
<!-- Image 5 -->
<button type="button" onclick="alert('The beauty of space lies in its mystery. Embrace the mysteries of your life, knowing that they hold the potential for incredible discoveries.')">
<img src="assets/a5.png"/>
</button>
<!-- Image 6 -->
<button type="button" onclick="alert('In the vastness of space, every star has its own brilliance. You too possess a radiant light that makes you extraordinary.')">
<img src="assets/a6.png"/>
</button>
</div>
</body>
</html>