forked from vansh-codes/ChaosWeb
-
Notifications
You must be signed in to change notification settings - Fork 0
/
style1.css
125 lines (106 loc) · 2.42 KB
/
style1.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
body {
padding: 0;
margin: 0;
background-color: darkslateblue;
font-family: Arial, Helvetica, sans-serif;
}
.moon1 {
display: flex;
justify-content: center;
cursor: pointer;
}
.moon1 img {
width: 650px;
transition: 0.3s ease;
}
.moon1 img:hover {
content: url(assets/moon2.png); /* This changes the image source on hover */
}
.text {
display: flex;
justify-content: center;
color: white;
font-size: 50px;
text-align: center;
animation: float 3s ease-in-out infinite; /* Apply floating animation */
}
/* Floating animation */
@keyframes float {
0%,
100% {
transform: translateY(0); /* Start and end position */
}
50% {
transform: translateY(-10px); /* Move up */
}
}
/* Add these styles to style1.css */
body {
font-family: Arial, sans-serif; /* Ensure a good font for mobile */
margin: 0; /* Remove default margin */
background-color: #f0f0f0; /* Set a light background color */
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh; /* Full viewport height */
}
.preloader {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap; /* Allow preloader items to wrap */
}
.preloader__wheel-wrapper {
margin: 10px; /* Add margin for spacing */
}
.moon1 {
text-align: center; /* Center the moon image */
}
.text {
font-size: 1.5rem; /* Base font size */
text-align: center; /* Center the text */
margin: 10px; /* Add margin around text */
}
/* Responsive Styles */
@media (max-width: 768px) {
.preloader__content {
font-size: 1.2rem; /* Smaller font for mobile */
}
.text {
font-size: 1.2rem; /* Smaller font for mobile */
}
.moon1 img {
width: 100%; /* Make moon image responsive */
max-width: 300px; /* Limit maximum width */
}
}
@media (max-width: 480px) {
.text {
font-size: 1rem; /* Even smaller font for very small devices */
}
.preloader__wheel {
width: 40px; /* Adjust wheel size for small devices */
height: 40px; /* Adjust wheel size for small devices */
}
}
/* Additional Styles to Fix Black Background Issue */
body,
html {
height: 100%; /* Ensure full height for body and html */
}
.moon1,
.text {
position: relative; /* Allow stacking without overflow */
z-index: 1; /* Ensure text is above any background */
}
.container {
background-color: rgba(
240,
240,
240,
0.9
); /* Light background for container */
}