Skip to content

Commit 9bdf022

Browse files
SCodeGitSCodeGit
authored
Update style.css
1 parent 6f17668 commit 9bdf022

File tree

1 file changed

+293
-67
lines changed

1 file changed

+293
-67
lines changed

‎style.css‎

Lines changed: 293 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,308 @@
1-
--navy:#071235;
2-
--blue:#1e63d3;
3-
--silver:#f2f4f8;
4-
--accent:#f6b75e;
5-
--bg-dark:#061221;
6-
--bg-light:#f8fbff;
7-
--text-dark:#0b1c2e;
8-
--text-light:#e9f2ff;
9-
--radius:12px;
10-
}
11-
*{box-sizing:border-box;margin:0;padding:0}
12-
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg-dark);color:var(--text-light);-webkit-font-smoothing:antialiased}
13-
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
1+
/* Root theme colors */
2+
:root {
3+
--royal-blue: #1a73e8;
4+
--gold: #f7c948;
5+
--dark-navy: #0b132b;
6+
--white: #ffffff;
7+
--light-gray: #f5f6fa;
8+
--text-dark: #202124;
9+
--text-light: #f9fafc;
10+
--radius: 12px;
11+
}
1412

15-
/* THEME TOGGLE */
16-
.theme-toggle{position:fixed;right:18px;top:18px;background:rgba(255,255,255,0.06);color:var(--text-light);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:999;box-shadow:0 6px 20px rgba(0,0,0,0.3)}
13+
/* Reset and base */
14+
* {
15+
margin: 0;
16+
padding: 0;
17+
box-sizing: border-box;
18+
}
19+
body {
20+
font-family: 'Poppins', system-ui, -apple-system, sans-serif;
21+
background: var(--light-gray);
22+
color: var(--text-dark);
23+
transition: background 0.4s ease, color 0.4s ease;
24+
line-height: 1.6;
25+
}
1726

18-
/* HERO */
19-
.hero-outer{position:relative;padding:60px 0 40px;overflow:hidden}
20-
.hero-inner{display:flex;align-items:center;gap:24px}
21-
.logo-wrap{flex:0 0 140px}
22-
.hero-logo{width:140px;height:140px;object-fit:contain;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,0.4);background:linear-gradient(135deg,var(--blue),var(--navy))}
23-
.hero-text .name{font-size:2rem;margin-bottom:6px}
24-
.hero-text .tagline{color:rgba(255,255,255,0.9);margin-bottom:12px}
25-
.hero-cta{display:flex;gap:12px}
26-
.btn{padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
27-
.primary{background:var(--accent);color:#041027}
28-
.ghost{background:transparent;color:var(--silver);border:1px solid rgba(255,255,255,0.06)}
27+
/* Dark mode */
28+
body.dark {
29+
background: var(--dark-navy);
30+
color: var(--text-light);
31+
}
2932

30-
/* Watermark */
31-
.hero-watermark{position:absolute;right:-60px;top:10%;opacity:0.06;transform:rotate(-12deg);width:480px}
32-
.hero-watermark img{width:100%;display:block}
33+
/* Container */
34+
.container {
35+
max-width: 1100px;
36+
margin: 0 auto;
37+
padding: 0 1rem;
38+
}
3339

34-
/* Sections */
35-
.section{padding:48px 0}
36-
.section h2{color:var(--accent);margin-bottom:12px}
37-
.section p{color:rgba(255,255,255,0.9)}
40+
/* Theme toggle */
41+
.theme-toggle {
42+
position: fixed;
43+
right: 18px;
44+
top: 18px;
45+
width: 44px;
46+
height: 44px;
47+
border-radius: 50%;
48+
background: var(--royal-blue);
49+
color: var(--white);
50+
display: flex;
51+
align-items: center;
52+
justify-content: center;
53+
font-size: 1.3rem;
54+
cursor: pointer;
55+
z-index: 1000;
56+
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
57+
}
58+
.theme-toggle:hover {
59+
background: var(--gold);
60+
color: var(--dark-navy);
61+
}
3862

39-
/* About */
40-
.about p{max-width:820px}
63+
/* Hero */
64+
.hero-outer {
65+
background: linear-gradient(135deg, var(--royal-blue), var(--gold));
66+
color: var(--white);
67+
padding: 80px 0 50px;
68+
text-align: center;
69+
position: relative;
70+
overflow: hidden;
71+
}
72+
.hero-inner {
73+
display: flex;
74+
flex-direction: column;
75+
align-items: center;
76+
gap: 18px;
77+
}
78+
.hero-logo {
79+
width: 130px;
80+
height: 130px;
81+
border-radius: 50%;
82+
object-fit: cover;
83+
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
84+
}
85+
.name {
86+
font-size: 2.5rem;
87+
font-weight: 700;
88+
letter-spacing: 1px;
89+
}
90+
.tagline {
91+
font-size: 1rem;
92+
color: #fefefe;
93+
opacity: 0.9;
94+
margin-bottom: 1rem;
95+
}
96+
.hero-cta {
97+
display: flex;
98+
flex-wrap: wrap;
99+
justify-content: center;
100+
gap: 12px;
101+
}
102+
.btn {
103+
display: inline-flex;
104+
align-items: center;
105+
justify-content: center;
106+
padding: 10px 16px;
107+
border-radius: var(--radius);
108+
font-weight: 600;
109+
text-decoration: none;
110+
border: none;
111+
cursor: pointer;
112+
transition: all 0.3s ease;
113+
}
114+
.btn.primary {
115+
background: var(--gold);
116+
color: var(--dark-navy);
117+
}
118+
.btn.primary:hover {
119+
background: #ffe082;
120+
}
121+
.btn.ghost {
122+
background: transparent;
123+
border: 2px solid var(--white);
124+
color: var(--white);
125+
}
126+
.btn.ghost:hover {
127+
background: rgba(255,255,255,0.15);
128+
}
41129

42-
/* Projects grid */
43-
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
44-
.project-card{background:rgba(255,255,255,0.03);padding:0;border-radius:10px;overflow:hidden;display:block;border:1px solid rgba(255,255,255,0.03)}
45-
.project-card img{height:140px;width:100%;object-fit:cover}
46-
.project-body{padding:12px}
47-
.placeholder{display:flex;align-items:center;justify-content:center;min-height:140px}
130+
/* Section styling */
131+
.section {
132+
padding: 60px 0;
133+
}
134+
.section h2 {
135+
font-size: 1.8rem;
136+
color: var(--royal-blue);
137+
margin-bottom: 20px;
138+
text-align: center;
139+
}
140+
.section p {
141+
text-align: center;
142+
max-width: 800px;
143+
margin: 0 auto;
144+
color: var(--text-dark);
145+
}
146+
body.dark .section p {
147+
color: var(--text-light);
148+
}
48149

49-
/* Contact */
50-
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:18px}
51-
.contact-card{background:rgba(255,255,255,0.03);padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
150+
/* Projects */
151+
.projects-grid {
152+
margin-top: 30px;
153+
display: grid;
154+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
155+
gap: 20px;
156+
}
157+
.project-card {
158+
background: var(--white);
159+
border-radius: var(--radius);
160+
overflow: hidden;
161+
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
162+
transition: transform 0.3s ease, box-shadow 0.3s ease;
163+
text-decoration: none;
164+
color: var(--text-dark);
165+
}
166+
.project-card:hover {
167+
transform: translateY(-6px);
168+
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
169+
}
170+
.project-card img {
171+
width: 100%;
172+
height: 160px;
173+
object-fit: cover;
174+
}
175+
.project-body {
176+
padding: 15px;
177+
}
178+
.project-body h3 {
179+
margin-bottom: 8px;
180+
color: var(--royal-blue);
181+
}
182+
183+
/* Contact section */
184+
.contact-grid {
185+
display: grid;
186+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
187+
gap: 20px;
188+
margin-top: 20px;
189+
}
190+
.contact-card {
191+
background: var(--white);
192+
border-radius: var(--radius);
193+
padding: 20px;
194+
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
195+
}
196+
body.dark .contact-card {
197+
background: #1b2437;
198+
}
199+
.contact-card h3 {
200+
color: var(--royal-blue);
201+
margin-bottom: 12px;
202+
}
203+
.contact-card a {
204+
color: var(--royal-blue);
205+
text-decoration: none;
206+
}
207+
.contact-card a:hover {
208+
text-decoration: underline;
209+
}
210+
input, textarea {
211+
width: 100%;
212+
padding: 10px;
213+
margin-bottom: 10px;
214+
border: 1px solid #ccc;
215+
border-radius: var(--radius);
216+
font-family: inherit;
217+
}
218+
button.btn.primary {
219+
width: 100%;
220+
}
52221

53222
/* Footer */
54-
.footer{background:linear-gradient(90deg,var(--navy),var(--blue));padding:18px;margin-top:24px;color:var(--silver)}
55-
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
56-
.footer .dev-link{color:var(--silver);font-weight:700;text-decoration:none;position:relative}
57-
.dev-link::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--navy));transition:width .35s ease;border-radius:2px}
58-
.dev-link:hover::after{width:100%}
59-
.social-links a{color:var(--silver);margin-left:12px}
223+
.footer {
224+
background: linear-gradient(90deg, var(--royal-blue), var(--gold));
225+
color: var(--white);
226+
padding: 20px 0;
227+
margin-top: 40px;
228+
}
229+
.footer-inner {
230+
display: flex;
231+
flex-wrap: wrap;
232+
justify-content: space-between;
233+
align-items: center;
234+
gap: 12px;
235+
}
236+
.footer .dev-link {
237+
color: var(--white);
238+
font-weight: 700;
239+
text-decoration: none;
240+
position: relative;
241+
}
242+
.footer .dev-link::after {
243+
content: "";
244+
position: absolute;
245+
bottom: -3px;
246+
left: 0;
247+
width: 0;
248+
height: 2px;
249+
background: var(--white);
250+
transition: width 0.3s ease;
251+
}
252+
.footer .dev-link:hover::after {
253+
width: 100%;
254+
}
255+
.social-links a {
256+
color: var(--white);
257+
margin-left: 12px;
258+
text-decoration: none;
259+
transition: opacity 0.3s ease;
260+
}
261+
.social-links a:hover {
262+
opacity: 0.8;
263+
}
60264

61-
/* Top button */
62-
#topBtn{position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;border:none;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:999}
265+
/* Back to top */
266+
#topBtn {
267+
position: fixed;
268+
right: 18px;
269+
bottom: 18px;
270+
width: 46px;
271+
height: 46px;
272+
border-radius: 50%;
273+
background: var(--royal-blue);
274+
color: var(--white);
275+
border: none;
276+
cursor: pointer;
277+
display: none;
278+
align-items: center;
279+
justify-content: center;
280+
font-size: 1.3rem;
281+
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
282+
}
283+
#topBtn:hover {
284+
background: var(--gold);
285+
color: var(--dark-navy);
286+
}
63287

64288
/* Reveal animation */
65-
.reveal{opacity:0;transform:translateY(18px);transition:all .6s cubic-bezier(.2,.9,.3,1)}
66-
.reveal.visible{opacity:1;transform:none}
67-
.delay-1{transition-delay:.12s}
68-
.delay-2{transition-delay:.22s}
69-
70-
/* Light theme (switch) */
71-
body.light{background:var(--bg-light);color:var(--text-dark)}
72-
body.light .hero-logo{background:linear-gradient(135deg,var(--navy),var(--blue));box-shadow:0 6px 18px rgba(0,0,0,0.06)}
73-
body.light .footer{background:linear-gradient(90deg,#f0f4fb,#eaf2ff);color:var(--text-dark)}
74-
body.light .dev-link{color:var(--text-dark)}
289+
.reveal {
290+
opacity: 0;
291+
transform: translateY(18px);
292+
transition: all .6s cubic-bezier(.2,.9,.3,1);
293+
}
294+
.reveal.visible {
295+
opacity: 1;
296+
transform: none;
297+
}
75298

76299
/* Responsive */
77-
@media(max-width:900px){
78-
.hero-inner{flex-direction:column;align-items:center;text-align:center;padding:0 1rem}
79-
.hero-watermark{display:none}
80-
.contact-grid{grid-template-columns:1fr}
81-
.nav{display:none}
300+
@media (max-width: 768px) {
301+
.hero-inner {
302+
padding: 0 1rem;
303+
}
304+
.footer-inner {
305+
flex-direction: column;
306+
text-align: center;
307+
}
82308
}

0 commit comments

Comments
 (0)