Skip to content

Commit 7abe6d0

Browse files
authored
Add files via upload
1 parent 08ee484 commit 7abe6d0

File tree

1 file changed

+119
-0
lines changed

1 file changed

+119
-0
lines changed

styles.css

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
/* Global Reset */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: 'Arial', sans-serif;
10+
background: linear-gradient(135deg, #6e7c89, #354b5b); /* Background gradient */
11+
color: #f5f5f5;
12+
}
13+
14+
.container {
15+
width: 80%;
16+
margin: 0 auto;
17+
}
18+
19+
header {
20+
text-align: center;
21+
padding: 40px 0;
22+
background: rgba(0, 0, 0, 0.7);
23+
border-radius: 15px;
24+
margin-top: 30px;
25+
}
26+
27+
h1 {
28+
font-size: 2.5rem;
29+
color: #ffcc00;
30+
}
31+
32+
p {
33+
font-size: 1.1rem;
34+
color: #f5f5f5;
35+
}
36+
37+
section {
38+
padding: 40px 0;
39+
}
40+
41+
h2 {
42+
font-size: 2rem;
43+
margin-bottom: 20px;
44+
text-align: center;
45+
}
46+
47+
.about ul {
48+
list-style: none;
49+
padding: 0;
50+
margin: 20px auto;
51+
max-width: 600px;
52+
}
53+
54+
.about ul li {
55+
font-size: 1.2rem;
56+
margin-bottom: 10px;
57+
}
58+
59+
.cta {
60+
background: rgba(0, 0, 0, 0.5);
61+
border-radius: 15px;
62+
padding: 30px;
63+
text-align: center;
64+
}
65+
66+
.install-btn {
67+
display: inline-block;
68+
background-color: #ffcc00;
69+
color: #354b5b;
70+
padding: 15px 30px;
71+
font-size: 1.2rem;
72+
text-decoration: none;
73+
border-radius: 25px;
74+
transition: all 0.3s ease;
75+
}
76+
77+
.install-btn:hover {
78+
background-color: #ffb800;
79+
transform: translateY(-3px);
80+
}
81+
82+
.install-btn:active {
83+
transform: translateY(1px);
84+
}
85+
86+
footer {
87+
text-align: center;
88+
padding: 40px 20px; /* Increased padding for more breathing space */
89+
background: linear-gradient(135deg, #354b5b, #6e7c89); /* Gradient background for depth */
90+
color: #f5f5f5;
91+
border-top: 3px solid #ffcc00; /* Thicker border for more emphasis */
92+
margin-top: 40px;
93+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
94+
}
95+
96+
footer p {
97+
font-size: 1.1rem;
98+
margin: 10px 0;
99+
color: #f5f5f5;
100+
line-height: 1.5;
101+
}
102+
103+
footer p a {
104+
color: #ffcc00;
105+
text-decoration: none;
106+
font-weight: bold;
107+
transition: color 0.3s ease, transform 0.3s ease;
108+
}
109+
110+
footer p a:hover {
111+
color: #ffb800;
112+
transform: translateY(-2px); /* Slight hover animation */
113+
}
114+
115+
@media (max-width: 768px) {
116+
footer p {
117+
font-size: 1rem; /* Slightly smaller text on smaller screens */
118+
}
119+
}

0 commit comments

Comments
 (0)