Skip to content

Commit ae65df4

Browse files
neoapps-devneoapps-dev
committed
feat: better looking website
1 parent 7c50aed commit ae65df4

1 file changed

Lines changed: 190 additions & 90 deletions

File tree

‎styles.css‎

Lines changed: 190 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,191 @@
11
@import url('https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&display=swap');
2-
body {
3-
font-family: "Cascadia Code", sans-serif;
4-
margin: 0;
5-
background-color: #0d1117;
6-
color: white;
7-
display: flex;
8-
flex-direction: column;
9-
align-items: center;
10-
text-align: center;
11-
}
12-
nav {
13-
background-color: #000000;
14-
width: 100%;
15-
padding: 0.8rem 1rem;
16-
display: flex;
17-
align-items: center;
18-
justify-content: space-between;
19-
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
20-
gap: 2rem;
21-
}
22-
.nav-left {
23-
display: flex;
24-
align-items: center;
25-
gap: 1rem;
26-
}
27-
.nav-logo {
28-
max-height: 40px;
29-
filter: drop-shadow(0 0 2px #ffffff);
30-
margin-left: 1.5rem;
31-
}
32-
.nav-links {
33-
display: flex;
34-
gap: 2rem;
35-
}
36-
.nav-links a {
37-
color: white;
38-
text-decoration: none;
39-
font-weight: bold;
40-
transition: color 0.2s;
41-
}
42-
.nav-links a:hover {
43-
color: #9b59b6;
44-
}
45-
header {
46-
background: linear-gradient(to left, #1f6feb 0%,#400080 100%);
47-
width: 100%;
48-
padding: 2rem 1rem;
49-
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
50-
}
51-
.logo {
52-
max-width: 120px;
53-
margin-bottom: 1rem;
54-
filter: drop-shadow(0 0 2px #9b59b6);
55-
}
56-
header h1 {
57-
margin: 0;
58-
font-size: 2.5rem;
59-
}
60-
header p {
61-
font-size: 1.2rem;
62-
margin-top: 0.5rem;
63-
}
64-
main {
65-
max-width: 800px;
66-
padding: 2rem 1rem;
67-
}
68-
.download-btn {
69-
display: inline-block;
70-
padding: 1rem 2rem;
71-
font-size: 1.5rem;
72-
font-weight: bold;
73-
color: white;
74-
background: linear-gradient(90deg, #1f6feb, #9b59b6);
75-
border: none;
76-
border-radius: 8px;
77-
text-decoration: none;
78-
margin-top: 2rem;
79-
transition: transform 0.2s, box-shadow 0.2s;
80-
}
81-
.download-btn:hover {
82-
transform: scale(1.05);
83-
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
84-
}
85-
footer {
86-
margin-top: auto;
87-
padding: 1rem;
88-
background-color: #161b22;
89-
font-size: 0.9rem;
90-
color: #aaa;
91-
}
2+
3+
:root {
4+
--primary-bg: #0a0a0f;
5+
--accent-blue: #1f6feb;
6+
--accent-purple: #9b59b6;
7+
--text-primary: #e6e8eb;
8+
--text-secondary: #8b949e;
9+
--shadow-dark: rgba(0,0,0,0.4);
10+
}
11+
12+
* {
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
font-family: "Cascadia Code", ui-monospace, monospace;
18+
margin: 0;
19+
background: var(--primary-bg);
20+
background-image:
21+
radial-gradient(circle at 20% 80%, rgba(31, 111, 235, 0.08) 0%, transparent 50%),
22+
radial-gradient(circle at 80% 20%, rgba(155, 89, 182, 0.08) 0%, transparent 50%),
23+
radial-gradient(circle at 40% 40%, rgba(139, 69, 19, 0.05) 0%, transparent 50%);
24+
color: var(--text-primary);
25+
display: flex;
26+
flex-direction: column;
27+
align-items: center;
28+
text-align: center;
29+
min-height: 100dvh;
30+
line-height: 1.6;
31+
-webkit-font-smoothing: antialiased;
32+
}
33+
34+
nav {
35+
background: linear-gradient(135deg, #000000 0%, #0f0f23 100%);
36+
width: 100%;
37+
padding: 1rem 2rem;
38+
display: flex;
39+
align-items: center;
40+
justify-content: space-between;
41+
box-shadow:
42+
0 4px 16px rgba(0,0,0,0.4),
43+
0 2px 4px rgba(31, 111, 235, 0.1);
44+
gap: 2rem;
45+
border-bottom: 1px solid rgba(31, 111, 235, 0.2);
46+
}
47+
48+
.nav-left {
49+
display: flex;
50+
align-items: center;
51+
gap: 1.5rem;
52+
}
53+
54+
.nav-logo {
55+
max-height: 44px;
56+
filter:
57+
drop-shadow(0 0 8px rgba(255, 255, 255, 0.3))
58+
drop-shadow(0 0 16px rgba(31, 111, 235, 0.2));
59+
margin-left: 1.5rem;
60+
}
61+
62+
.nav-links {
63+
display: flex;
64+
gap: 2.5rem;
65+
}
66+
67+
.nav-links a {
68+
color: #f0f2f5;
69+
text-decoration: none;
70+
font-weight: 600;
71+
font-size: 1.05rem;
72+
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
73+
border-bottom: 2px solid transparent;
74+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
75+
}
76+
77+
.nav-links a:hover {
78+
color: var(--accent-blue);
79+
border-bottom-color: var(--accent-blue);
80+
}
81+
82+
header {
83+
background: linear-gradient(135deg, #1a237e 0%, #4a148c 35%, #6a1b9a 70%, #1f6feb 100%);
84+
background-size: 200% 200%;
85+
width: 100%;
86+
padding: 3rem 2rem;
87+
box-shadow:
88+
0 8px 32px rgba(0,0,0,0.3),
89+
inset 0 1px 0 rgba(255,255,255,0.1);
90+
position: relative;
91+
animation: gradientShift 3s ease-in-out infinite;
92+
}
93+
94+
@keyframes gradientShift {
95+
0%, 100% { background-position: 0% 50%; }
96+
50% { background-position: 100% 50%; }
97+
}
98+
99+
header::before {
100+
content: '';
101+
position: absolute;
102+
top: 0;
103+
left: 0;
104+
right: 0;
105+
bottom: 0;
106+
background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
107+
pointer-events: none;
108+
}
109+
110+
.logo {
111+
max-width: 140px;
112+
margin-bottom: 1.5rem;
113+
filter:
114+
drop-shadow(0 0 12px rgba(155, 89, 182, 0.4))
115+
drop-shadow(0 4px 8px rgba(0,0,0,0.3));
116+
}
117+
118+
header h1 {
119+
margin: 0;
120+
font-size: 3rem;
121+
font-weight: 700;
122+
text-shadow:
123+
0 2px 4px rgba(0,0,0,0.5),
124+
0 0 20px rgba(255,255,255,0.1);
125+
letter-spacing: -0.02em;
126+
}
127+
128+
header p {
129+
font-size: 1.3rem;
130+
margin-top: 1rem;
131+
font-weight: 400;
132+
opacity: 0.9;
133+
text-shadow: 0 1px 3px rgba(0,0,0,0.4);
134+
}
135+
136+
main {
137+
max-width: 900px;
138+
padding: 3rem 2rem;
139+
width: 100%;
140+
box-sizing: border-box;
141+
}
142+
143+
.download-btn {
144+
display: inline-block;
145+
padding: 1.2rem 2.5rem;
146+
font-size: 1.4rem;
147+
font-weight: 700;
148+
color: #ffffff;
149+
background: linear-gradient(135deg, #1f6feb 0%, #8b5cf6 50%, #9b59b6 100%);
150+
border: none;
151+
border-radius: 12px;
152+
text-decoration: none;
153+
margin-top: 2.5rem;
154+
box-shadow:
155+
0 8px 25px rgba(31, 111, 235, 0.25),
156+
0 4px 12px rgba(0,0,0,0.2),
157+
inset 0 1px 0 rgba(255,255,255,0.2);
158+
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
159+
position: relative;
160+
overflow: hidden;
161+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
162+
cursor: pointer;
163+
}
164+
165+
.download-btn:hover {
166+
box-shadow:
167+
0 12px 35px rgba(31, 111, 235, 0.35),
168+
0 6px 16px rgba(0,0,0,0.3),
169+
inset 0 1px 0 rgba(255,255,255,0.3);
170+
}
171+
172+
footer {
173+
margin-top: auto;
174+
padding: 2rem;
175+
background: linear-gradient(135deg, #0f1419 0%, #161b22 100%);
176+
font-size: 0.95rem;
177+
color: var(--text-secondary);
178+
width: 100%;
179+
border-top: 1px solid rgba(48, 54, 61, 0.5);
180+
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
181+
}
182+
183+
@media (prefers-reduced-motion: reduce) {
184+
*,
185+
*::before,
186+
*::after {
187+
animation-duration: 0.01ms !important;
188+
animation-iteration-count: 1 !important;
189+
transition-duration: 0.01ms !important;
190+
}
191+
}

0 commit comments

Comments
 (0)