Skip to content

Commit 5f5a76d

Browse files
codee-wizardcodee-wizard
committed
theme
1 parent abf81ea commit 5f5a76d

File tree

2 files changed

+47
-46
lines changed

2 files changed

+47
-46
lines changed

‎src/pages/Home.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ function App() {
136136
</div>
137137
</div>
138138
<div className="hero-image">
139-
<img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Students coding together" />
139+
<img src="https://i.pinimg.com/736x/de/c2/bc/dec2bc50a4ae85e3a931623879ae6adf.jpg" alt="Students coding together" />
140140
</div>
141141
</div>
142142
</section>
@@ -218,7 +218,7 @@ function App() {
218218
))}
219219
</div>
220220
<div className="steps-image">
221-
<img src="https://images.unsplash.com/photo-1544256718-3bcf237f3974?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Students working on coding projects" />
221+
<img src="https://i.pinimg.com/736x/4a/93/a6/4a93a6b8e9515b7c6f616ce4808f6bc6.jpg" alt="Student-coding" />
222222
</div>
223223
</div>
224224
</div>

‎src/styles/Home.css‎

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@
77

88
body {
99
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
10-
color: #333;
10+
color: #c77aee;
1111
line-height: 1.6;
12+
background-color: black;
1213
}
1314

1415
.container {
@@ -42,12 +43,12 @@
4243
font-size: 2rem;
4344
font-weight: 700;
4445
margin-bottom: 0.5rem;
45-
color: #333;
46+
color: #969494;
4647
}
4748

4849
.section-header p {
4950
font-size: 1.1rem;
50-
color: #666;
51+
color: #817f7f;
5152
max-width: 600px;
5253
margin: 0 auto;
5354
}
@@ -58,21 +59,21 @@
5859
}
5960

6061
.link-arrow {
61-
color: #2563eb;
62+
color: #8f25eb;
6263
font-weight: 500;
6364
display: inline-flex;
6465
align-items: center;
6566
transition: color 0.2s;
6667
}
6768

6869
.link-arrow:hover {
69-
color: #1e40af;
70+
color: #a24ede;
7071
}
7172

7273
/* Buttons */
7374
.btn-primary {
74-
background-color: #2563eb;
75-
color: white;
75+
background-color: #843ed4;
76+
color: rgb(242, 238, 238);
7677
border: none;
7778
padding: 0.75rem 1.5rem;
7879
border-radius: 0.375rem;
@@ -81,12 +82,12 @@
8182
}
8283

8384
.btn-primary:hover {
84-
background-color: #1d4ed8;
85+
background-color: #9d4fe6;
8586
}
8687

8788
.btn-secondary {
88-
background-color: white;
89-
color: #2563eb;
89+
background-color: rgb(59, 57, 57);
90+
color: #974cc9;
9091
border: none;
9192
padding: 0.75rem 1.5rem;
9293
border-radius: 0.375rem;
@@ -95,25 +96,25 @@
9596
}
9697

9798
.btn-secondary:hover {
98-
background-color: #f8fafc;
99+
background-color: #d5d3d8;
99100
}
100101

101102
.btn-outline {
102103
background-color: transparent;
103-
color: #2563eb;
104-
border: 2px solid #2563eb;
104+
color: #222123;
105+
border: 2px solid #202021;
105106
padding: 0.75rem 1.5rem;
106107
border-radius: 0.375rem;
107108
font-weight: 500;
108109
transition: all 0.2s;
109110
}
110111

111112
.btn-outline:hover {
112-
background-color: rgba(37, 99, 235, 0.1);
113+
background-color: rgba(196, 165, 237, 0.1);
113114
}
114115

115116
.btn-outline.light {
116-
color: white;
117+
color: rgb(252, 250, 250);
117118
border-color: white;
118119
}
119120

@@ -124,14 +125,14 @@
124125
.btn-link {
125126
background: none;
126127
border: none;
127-
color: #2563eb;
128+
color: #a167e4;
128129
font-weight: 500;
129130
padding: 0.5rem;
130131
transition: color 0.2s;
131132
}
132133

133134
.btn-link:hover {
134-
color: #1e40af;
135+
color: #854ddf;
135136
}
136137

137138
.full-width {
@@ -140,8 +141,8 @@
140141

141142
/* Navbar */
142143
.navbar {
143-
background-color: white;
144-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
144+
background-color: rgb(22, 22, 22);
145+
box-shadow: 0 1px 3px rgba(246, 244, 244, 0.1);
145146
position: sticky;
146147
top: 0;
147148
z-index: 100;
@@ -164,7 +165,7 @@
164165
height: 40px;
165166
width: 40px;
166167
border-radius: 8px;
167-
background-color: #2563eb;
168+
background-color: #792aa6;
168169
color: white;
169170
display: flex;
170171
align-items: center;
@@ -176,13 +177,13 @@
176177

177178
.logo-icon.light {
178179
background-color: white;
179-
color: #2563eb;
180+
color: #813aed;
180181
}
181182

182183
.logo-text {
183184
font-size: 1.5rem;
184185
font-weight: 700;
185-
color: #333;
186+
color: #fefafa;
186187
}
187188

188189
.nav-links {
@@ -197,12 +198,12 @@
197198
background: none;
198199
border: none;
199200
font-size: 1.5rem;
200-
color: #666;
201+
color: #fcf8f8;
201202
}
202203

203204
/* Hero Section */
204205
.hero {
205-
background: linear-gradient(90deg, #2563eb 0%, #1e40af 100%);
206+
background: linear-gradient(90deg, #c187e2 0%,#a541de 50%, #731cd7 100%);
206207
color: white;
207208
padding: 4rem 0;
208209
}
@@ -251,7 +252,7 @@
251252
/* Roadmaps Section */
252253
.roadmaps {
253254
padding: 4rem 0;
254-
background-color: white;
255+
background-color: rgb(31, 30, 30);
255256
}
256257

257258
.roadmap-cards {
@@ -261,7 +262,7 @@
261262
}
262263

263264
.roadmap-card {
264-
background-color: #f8fafc;
265+
background-color: #171818;
265266
border-radius: 0.75rem;
266267
overflow: hidden;
267268
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
@@ -277,15 +278,15 @@
277278
content: '';
278279
display: block;
279280
height: 0.75rem;
280-
background-color: #ddd;
281+
background-color: #393737;
281282
}
282283

283284
.roadmap-card.beginner::before {
284-
background-color: #10B981; /* green */
285+
background-color: #60ccf0; /* green */
285286
}
286287

287288
.roadmap-card.intermediate::before {
288-
background-color: #F59E0B; /* amber */
289+
background-color: #33a4f4; /* amber */
289290
}
290291

291292
.roadmap-card.advanced::before {
@@ -309,13 +310,13 @@
309310
}
310311

311312
.beginner .grade-badge {
312-
background-color: #d1fae5;
313-
color: #047857;
313+
background-color: #d1f2fa;
314+
color: #047780;
314315
}
315316

316317
.intermediate .grade-badge {
317-
background-color: #fef3c7;
318-
color: #b45309;
318+
background-color: #caecfc;
319+
color: #047f91;
319320
}
320321

321322
.advanced .grade-badge {
@@ -364,15 +365,15 @@
364365
}
365366

366367
.check.completed {
367-
background-color: #10B981;
368+
background-color: #10b9b3;
368369
}
369370

370371
.beginner .check.completed {
371-
background-color: #10B981;
372+
background-color: #12c7d4;
372373
}
373374

374375
.intermediate .check.completed {
375-
background-color: #F59E0B;
376+
background-color: #0bb3f5;
376377
}
377378

378379
.advanced .check.completed {
@@ -390,7 +391,7 @@
390391
/* Benefits Section */
391392
.benefits {
392393
padding: 4rem 0;
393-
background-color: #f8fafc;
394+
background-color: rgb(31, 30, 30);
394395
}
395396

396397
.benefit-cards {
@@ -400,7 +401,7 @@
400401
}
401402

402403
.benefit-card {
403-
background-color: white;
404+
background-color: rgb(14, 13, 13);
404405
padding: 1.5rem;
405406
border-radius: 0.5rem;
406407
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -438,7 +439,7 @@
438439
/* How It Works Section */
439440
.how-it-works {
440441
padding: 4rem 0;
441-
background-color: white;
442+
background-color: rgb(31, 30, 30);
442443
}
443444

444445
.steps-container {
@@ -459,7 +460,7 @@
459460
width: 2rem;
460461
height: 2rem;
461462
border-radius: 50%;
462-
background-color: #2563eb;
463+
background-color: #a449e1;
463464
color: white;
464465
display: flex;
465466
align-items: center;
@@ -488,7 +489,7 @@
488489
/* Testimonials Section */
489490
.testimonials {
490491
padding: 4rem 0;
491-
background-color: #f8fafc;
492+
background-color: rgb(31, 30, 30);
492493
}
493494

494495
.testimonial-cards {
@@ -498,7 +499,7 @@
498499
}
499500

500501
.testimonial-card {
501-
background-color: white;
502+
background-color: rgb(0, 0, 0);
502503
padding: 1.5rem;
503504
border-radius: 0.5rem;
504505
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -514,7 +515,7 @@
514515
width: 3rem;
515516
height: 3rem;
516517
border-radius: 50%;
517-
background-color: #2563eb;
518+
background-color: #b325eb;
518519
color: white;
519520
display: flex;
520521
align-items: center;
@@ -548,7 +549,7 @@
548549
/* CTA Section */
549550
.cta {
550551
padding: 4rem 0;
551-
background: linear-gradient(90deg, #2563eb 0%, #1e40af 100%);
552+
background: linear-gradient(90deg, #8d09f2 0%,#a84bee 50%, #ca93f1 100%);
552553
color: white;
553554
text-align: center;
554555
}

0 commit comments

Comments
 (0)