-
Notifications
You must be signed in to change notification settings - Fork 0
/
welcomeStyle.css
222 lines (191 loc) · 6.14 KB
/
welcomeStyle.css
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
body {
height: 100%;
background-color: black;
background-image: url('./Welcome_Imgs/Universe.jpg') !important;
background-size: contain; /* Ensures the background image covers the entire body */
background-position: center;
margin: 0; /* Remove default body margin */
overflow-x: hidden;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Protest Guerrilla", sans-serif;
}
header{
margin-left: 20px;
width: 40.0%;
background-color: black; /* Optional: Add a background color */
position: fixed;
/* text-align: center; */
z-index: 1;
}
h1{
color: white;
text-decoration: underline;
text-decoration-style: wavy;
text-shadow: 0 0 10px #FF69B4,0 0 20px #FF69B4, 0 0 30px #8A2BE2, 0 0 40px #8A2BE2;
text-align: center;
}
.banner2{
display: flex;
flex-direction: column;
/* margin-left: 10px;
padding-left: 20px; */
}
li {
font-family: 'Times New Roman', Times, serif;
font-size: 3vh;
opacity: 0.8;
color: rgb(140, 183, 221);
z-index: 0; /* Add this to ensure li is behind the h1 */
}
ol {
max-width: 2000px; /* Set a maximum width for the ordered list */
}
.list-heading ul {
list-style-type: disc;
padding-left: 20px;
max-width: 1250px; /* Ensure the inner list doesn't exceed a set width */
word-wrap: break-word; /* Break long words to prevent overflow */
}
.banner {
margin: 20px auto; /* Center the banner */
margin-left: 10px;
max-width: 100%; /* Use a percentage for responsiveness */
display: flex;
flex-direction: row; /* Stack items vertically */
/* border: 5px solid black; */
background-color: rgba(0, 0, 0, 0.7);
border-radius: 25px;
transition: 1s ease;
z-index: 1000;
}
.banner-img {
border-radius: 25px;
height: 400px; /* Fixed height for larger screens */
width: 100%; /* Use full width */
background-image: url(./Welcome_Imgs/welcomeRJTV.gif);
background-size: cover; /* Cover the entire div */
background-position: center;
box-shadow: 0 0 15px #8A2BE2, 0 0 30px #FF69B4;
animation: pulse-glow 2s infinite alternate;
}
.banner-text {
border-radius: 22px;
/* margin-top: 10px; */
height: 300px; /* Adjust height automatically */
width: 100%; /* Use full width */
overflow: auto; /* Ensure text is scrollable if needed */
/* padding: 20px; Add padding for better readability */
padding-top: 0px;
padding-left: 10px;
/* Slight background for contrast */
}
.list-heading {
color: white;
font-size: larger;
font-weight: 700;
}
.btn {
position: relative;
bottom: 20px;
padding: 10px 100px;
opacity: 0;
pointer-events: none;
transition: opacity 0.1s ease;
}
.form-check {
position: absolute;
margin-left: 10px;
}
#flexCheckDefault:checked + label .btn {
opacity: 1;
pointer-events: auto;
}
@keyframes pulse-glow {
0% {
box-shadow: 0 0 10px #FF69B4, 0 0 20px #8A2BE2;
}
100% {
box-shadow: 0 0 30px #8A2BE2, 0 0 40px #FF69B4;
}
}
@media (max-width: 768px) {
.banner {
flex-direction: column; /* Stack items vertically */
margin: 10px; /* Adjust margin for smaller screens */
}
h1{
margin-top: 30px;
}
.banner-img {
height: 300px; /* Adjust height for smaller screens */
width: 100%; /* Ensure full width */
}
.banner-text {
padding: 10px; /* Less padding for smaller screens */
width: 100%; /* Full width */
}
li {
font-size: 2.4vh; /* Adjust font size for readability */
}
.btn {
padding: 5px 50px; /* Smaller button for mobile */
left: 0;
}
}
/*Style for loader page*/
.loader-overlay {
position: fixed; /* Keeps the loader fixed on the screen, even when scrolling */
top: 0; /* Position at the top of the viewport */
left: 0; /* Position at the left edge of the viewport */
width: 100vw; /* Full viewport width to cover the entire screen */
height: 100vh; /* Full viewport height to cover the entire screen */
background-color: rgb(0, 0, 14); /* Dark background color for the loader */
display: flex; /* Use flexbox to center elements inside */
justify-content: center; /* Center items horizontally */
align-items: center; /* Center items vertically */
z-index: 9999; /* High z-index to make sure it appears above all other content */
}
.loader .text {
position: absolute; /* Positions the text element within the loader at a specific location */
font-family: 'Protest Guerrilla'; /* Sets the custom font for the text */
top: 50%; /* Vertically centers the text within the loader */
left: 50%; /* Horizontally centers the text within the loader */
transform: translate(-50%, -50%); /* Offsets the text by 50% of its own size to fully center it */
background-color: rgb(0, 0, 14); /* Dark background to match the loader overlay */
padding: 20px; /* Adds padding around the text for spacing */
font-size: 34px; /* Sets the font size of the text */
border-radius: 50%; /* Creates a circular background for the text */
color: white; /* Sets the text color to white for visibility */
line-height: 70px; /* Adds space between lines, giving the text breathing room */
text-align: center; /* Centers the text content within the element */
z-index: 1; /* Keeps this text above the overlay background but below other elements in the loader */
animation: glow-text 2s infinite alternate; /* Adds a glowing animation that alternates every 2 seconds */
}
@keyframes glow-text{
0%{
text-shadow: 0 0 20px #FF69B4, 0 0 30px #8A2BE2;
}
100%{
text-shadow: 0 0 30px #8A2BE2, 0 0 40px #FF69B4;
}
}
.loader img {
width: 800px;
height: 585px;
display: block;
}
.dots::after {
content: ''; /* Initially no dots */
animation: dotAnimation 1.5s infinite steps(1);
}
@keyframes dotAnimation {
0% { content: ''; } /* No dots */
25% { content: '.'; } /* One dot */
50% { content: '..'; } /* Two dots */
75% { content: '...'; } /* Three dots */
100% { content: ''; } /* Reset to no dots */
}