From 3e55ff56d145d6f0d2aa7f390cbeb7ef546452d5 Mon Sep 17 00:00:00 2001 From: Akankshaj11 Date: Sat, 2 Aug 2025 12:10:43 +0530 Subject: [PATCH 1/3] improved responsiveness of navbar and removed overriding of navbars --- index.html | 970 ++++++++++++++++++++++++----------------------------- styles.css | 95 ++++-- 2 files changed, 511 insertions(+), 554 deletions(-) diff --git a/index.html b/index.html index 01c7dd08..c8a23977 100644 --- a/index.html +++ b/index.html @@ -1,47 +1,33 @@ - - - - CodeClip - - - - - - - - - - - - - - - - - - -
+ + + + + CodeClip + + + + + + + + + + + + + + + + + + +
@@ -51,589 +37,503 @@ - + - - - - + + + + - - - -
- - - - -
-
- + + + +
+ + + + +
+
-
-
- - - -
-
-
-
-
- -

GSSOC 2025

-
-

- Code Run
- Contribute -

-

- CodeClip is a lightweight, browser-based platform designed to make - coding practice simple, accessible, and collaborative. Whether - you're a beginner looking to sharpen your skills or an aspiring - contributor to open source, CodeClip offers a clean interface - where you can solve real-world coding challenges, run your code - live, and share your solutions — all without any setup, Built - entirely with HTML, CSS, and JavaScript, CodeClip is not just a - tool but a learning experience itself. It’s an open-source project - proudly developed as part of - GirlScript Summer of Code (GSSoC), aimed at - empowering developers through hands-on practice and meaningful - contributions. -

- - -
- - -
+
+ + + + +
+
+
+
+
+ +

GSSOC 2025

-
- hero section image +

+ Code, Run &
+ Contribute +

+

+ CodeClip is a lightweight, browser-based platform designed to make + coding practice simple, accessible, and collaborative. Whether + you're a beginner looking to sharpen your skills or an aspiring + contributor to open source, CodeClip offers a clean interface + where you can solve real-world coding challenges, run your code + live, and share your solutions — all without any setup, Built + entirely with HTML, CSS, and JavaScript, CodeClip is not just a + tool but a learning experience itself. It’s an open-source project + proudly developed as part of + GirlScript Summer of Code (GSSoC), aimed at + empowering developers through hands-on practice and meaningful + contributions. +

+ + +
+ +
+ +
+ hero section image +
-
- - - -
-
-
- -
-
-
-
-
Frontend Challenges
-

EASY

-
+
+
+ + + +
+
+
+ +
+
+
+
+
Frontend Challenges
+

EASY

+
-

- 135 coders joined -

-

- Build real UI components using HTML, CSS, and JavaScript. - These tasks help you improve your layout, styling, - responsiveness, and interactivity,no frameworks, just clean - frontend skills. -

- -
- - Join Now -
+

+ 135 coders joined +

+

+ Build real UI components using HTML, CSS, and JavaScript. + These tasks help you improve your layout, styling, + responsiveness, and interactivity,no frameworks, just clean + frontend skills. +

+ +
+ + Join Now
+
- -
-
-
-
-
JavaScript Logics
-

MEDIUM

-
+ +
+
+
+
+
JavaScript Logics
+

MEDIUM

+
-

- 189 coders joined -

-

- Master the core of JavaScript by solving logic-based problems - that boost your thinking and problem-solving skills. Perfect - for beginners and intermediates. -

- -
- - Join Now -
+

+ 189 coders joined +

+

+ Master the core of JavaScript by solving logic-based problems + that boost your thinking and problem-solving skills. Perfect + for beginners and intermediates. +

+ +
+ + Join Now
+
- -
-
-
-
-
Backend Basics
-

HARD

-
+ +
+
+
+
+
Backend Basics
+

HARD

+
-

- 150 coders joined -

-

- Learn the fundamentals of backend development through simple - tasks using APIs, data handling, and server-side logic. A - great start for aspiring full-stack developers. -

- -
- - Join Now -
+

+ 150 coders joined +

+

+ Learn the fundamentals of backend development through simple + tasks using APIs, data handling, and server-side logic. A + great start for aspiring full-stack developers. +

+ +
+ + Join Now
+
- -
-
-
-
-
UI Design Tasks
-

EASY

-
+ +
+
+
+
+
UI Design Tasks
+

EASY

+
-

- 120 coders joined -

-

- Practice building beautiful and functional UI components using - HTML and CSS. Perfect for improving your design sense and - layout skills. -

- -
- - Join Now -
+

+ 120 coders joined +

+

+ Practice building beautiful and functional UI components using + HTML and CSS. Perfect for improving your design sense and + layout skills. +

+ +
+ + Join Now
+
- -
-
-
-
-
Open Source Challenges
-

MEDIUM

-
+ +
+
+
+
+
Open Source Challenges
+

MEDIUM

+
-

- 200 coders joined -

-

- Practice real world contribution workflows using Git and - GitHub. You'll learn how to contribute to projects, manage - pull requests. -

- -
- - Join Now -
+

+ 200 coders joined +

+

+ Practice real world contribution workflows using Git and + GitHub. You'll learn how to contribute to projects, manage + pull requests. +

+ +
+ + Join Now
- - -
-
-
-
-
JavaScript Mini Projects
-

Easy

-
- -

- 300 coders joined -

-

- Created an interactive form/input area,Applied CSS styles for visual consistency .Added features like auto-focus, clear input after add, and animation. -

+
+ + +
+
+
+
+
JavaScript Mini Projects
+

Easy

+
-
- - Join Now -
+

+ 300 coders joined +

+

+ Created an interactive form/input area,Applied CSS styles for visual consistency .Added features like + auto-focus, clear input after add, and animation. +

+ +
+ + Join Now
-
- - - -
-
-

Top Coder of the Week

-

- Meet our top coders who accepted challenges, wrote great code, - contributed to open source, and stood out as the best performers of - the week. -

-
- -
- -
-
-
-
- user 1 -
- -
Rahul
- -
-

- 1st Rank -

-

- 1080 Points -

-
+
+
+ + + +
+
+

Top Coder of the Week

+

+ Meet our top coders who accepted challenges, wrote great code, + contributed to open source, and stood out as the best performers of + the week. +

+
+ +
+ +
+
+
+
+ user 1 +
+ +
Rahul
+ +
+

+ 1st Rank +

+

+ 1080 Points +

+
- -
-
-
-
- user 2 -
- -
Manisha
- -
-

- 2nd Rank -

-

- 1060 Points -

-
+ +
+
+
+
+ user 2 +
+ +
Manisha
+ +
+

+ 2nd Rank +

+

+ 1060 Points +

+
- -
-
-
-
- user 3 -
- -
Pankaj
- -
-

- 3rd Rank -

-

- 1055 Points -

-
+ +
+
+
+
+ user 3 +
+ +
Pankaj
+ +
+

+ 3rd Rank +

+

+ 1055 Points +

+
+ + +
+
+
+
+ user 4 +
+ +
Simarn
- -
-
-
-
- user 4 -
- -
Simarn
- -
-

- 4th Rank -

-

- 1030 Points -

-
+
+

+ 4th Rank +

+

+ 1030 Points +

+
- -
-
-
-
- user 5 -
- -
Rahul
- -
-

- 5th Rank -

-

- 1020 Points -

-
+ +
+
+
+
+ user 5 +
+ +
Rahul
+ +
+

+ 5th Rank +

+

+ 1020 Points +

-
- - - -
-
-

About CodeClip

-
-
-

- CodeClip is a lightweight, browser-based platform designed to make - coding practice simple, accessible, and collaborative. Whether - you're a beginner looking to sharpen your skills or an aspiring - contributor to open source, CodeClip offers a clean interface - where you can solve real-world coding challenges, run your code - live, and share your solutions — all without any setup, Built - entirely with HTML, CSS, and JavaScript, CodeClip is not just a - tool but a learning experience itself. It’s an open-source project - proudly developed as part of - GirlScript Summer of Code (GSSoC), aimed at - empowering developers through hands-on practice and meaningful - contributions. -

- -

- Contribute to CodeClip -

-
+
+
+ + + +
+
+

About CodeClip

+
+
+

+ CodeClip is a lightweight, browser-based platform designed to make + coding practice simple, accessible, and collaborative. Whether + you're a beginner looking to sharpen your skills or an aspiring + contributor to open source, CodeClip offers a clean interface + where you can solve real-world coding challenges, run your code + live, and share your solutions — all without any setup, Built + entirely with HTML, CSS, and JavaScript, CodeClip is not just a + tool but a learning experience itself. It’s an open-source project + proudly developed as part of + GirlScript Summer of Code (GSSoC), aimed at + empowering developers through hands-on practice and meaningful + contributions. +

+ +

+ Contribute to CodeClip +

-
- - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css index bcd370cb..f7db49bc 100644 --- a/styles.css +++ b/styles.css @@ -11,7 +11,8 @@ html { } body { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + sans-serif; color: #1e293b; background: #f8fafc; line-height: 1.6; @@ -163,7 +164,7 @@ body { } .nav__link::after { - content: ''; + content: ""; display: block; width: 0; height: 2px; @@ -180,6 +181,42 @@ body { width: 100%; } +/* Keep button styles */ +.navbar-nav a { + padding: 10px 20px; + background-color: #4c68ef; + color: #fff; + margin: 5px; + border-radius: 5px; + text-decoration: none; + display: inline-block; + text-align: center; + transition: background-color 0.3s; +} + +.navbar-nav a:fover { + background-color: #3a54c3; +} + +@media (max-width: 991px) { + .navbar-collapse { + display: flex !important; + flex-direction: row !important; + flex-wrap: wrap; + justify-content: center; + } + + .navbar-nav { + flex-direction: row !important; + flex-wrap: wrap; + justify-content: center; + } + + .navbar-nav .nav-item { + margin: 5px; + } +} + .header__toggle { display: none; flex-direction: column; @@ -245,8 +282,13 @@ body { } @keyframes float { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-20px); } + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-20px); + } } .hero__content { @@ -311,7 +353,6 @@ body { background: #64748b; } - .btn-primary:hover { background: #1e40af; } @@ -350,12 +391,18 @@ body { border-radius: 50%; } -.red { background: #ff5f56; } -.yellow { background: #ffbd2e; } -.green { background: #27c93f; } +.red { + background: #ff5f56; +} +.yellow { + background: #ffbd2e; +} +.green { + background: #27c93f; +} .code-content { - font-family: 'Fira Code', monospace; + font-family: "Fira Code", monospace; font-size: 0.9rem; line-height: 1.5; } @@ -364,9 +411,15 @@ body { margin-bottom: 0.5rem; } -.comment { color: #64748b; } -.keyword { color: #2563eb; } -.string { color: #16a34a; } +.comment { + color: #64748b; +} +.keyword { + color: #2563eb; +} +.string { + color: #16a34a; +} /* Filter Section */ .challenges-filter { @@ -375,7 +428,7 @@ body { border-radius: 10px; margin-top: 20px; margin-bottom: 4rem; - margin-left:2rem; + margin-left: 2rem; margin-right: 2rem; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); } @@ -567,7 +620,7 @@ body { } [data-theme="light"] .card { - --background-color: #C9D9F6; + --background-color: #c9d9f6; color: #212121; } @@ -581,7 +634,8 @@ body { .vault-card { background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%); border-radius: 18px; - box-shadow: 0 8px 32px rgba(37,99,235,0.07), 0 1.5px 7px rgba(37,99,235,0.09); + box-shadow: 0 8px 32px rgba(37, 99, 235, 0.07), + 0 1.5px 7px rgba(37, 99, 235, 0.09); display: flex; flex-direction: row; align-items: center; @@ -669,7 +723,12 @@ body { margin: 0 auto; width: 80px; height: 80px; - background: linear-gradient(90deg, #93C5FD 0%, #3B82F6 40%, rgba(0, 0, 0, 0.28) 60%); + background: linear-gradient( + 90deg, + #93c5fd 0%, + #3b82f6 40%, + rgba(0, 0, 0, 0.28) 60% + ); border-radius: 100%; display: flex; justify-content: center; @@ -717,7 +776,7 @@ body { } .card:hover .icon i { - background: linear-gradient(90deg, #93C5FD, #3B82F6); + background: linear-gradient(90deg, #93c5fd, #3b82f6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; @@ -863,5 +922,3 @@ body { width: 1px !important; white-space: nowrap !important; } - - From 63843377e68f92336334f4d56934eac0e70bbc00 Mon Sep 17 00:00:00 2001 From: Akankshaj11 Date: Sat, 2 Aug 2025 12:31:28 +0530 Subject: [PATCH 2/3] solved issues in html structure --- index.html | 18 ++++-------------- styles.css | 7 +++++++ 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index c8a23977..ab7edb9c 100644 --- a/index.html +++ b/index.html @@ -27,20 +27,10 @@ -
- - - - - - - - - - - - + + + @@ -49,7 +39,7 @@ -
+ diff --git a/styles.css b/styles.css index f7db49bc..67186a52 100644 --- a/styles.css +++ b/styles.css @@ -198,6 +198,13 @@ body { background-color: #3a54c3; } +.navbar-collapse { + background-color: white; + padding: 10px; + border-radius: 10px; +} + + @media (max-width: 991px) { .navbar-collapse { display: flex !important; From 9d52c44b4ad80d0841175c82073368f8b6810a68 Mon Sep 17 00:00:00 2001 From: Akankshaj11 Date: Sat, 2 Aug 2025 12:38:08 +0530 Subject: [PATCH 3/3] solved issues in css structure --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 67186a52..df6e1170 100644 --- a/styles.css +++ b/styles.css @@ -194,7 +194,7 @@ body { transition: background-color 0.3s; } -.navbar-nav a:fover { +.navbar-nav a:hover { background-color: #3a54c3; }