diff --git a/index.html b/index.html index 2c243788..16a9669e 100644 --- a/index.html +++ b/index.html @@ -20,124 +20,43 @@ - - + - -
-
- - - -
+ +
+ + +
☰
- + +
+ Home + Challenges + Editor + Profile +
+
-
-
-
-

🚀 An Interactive Coding Platform

-

- -

-

- Discover CodeClip, an exhilarating, lightweight web app that - empowers developers to master coding challenges right in their - browser! Whether you're tackling algorithms, debugging scripts, - or showcasing your solutions to the open-source community, - CodeClip offers a seamless, interactive experience with a sleek - interface, real-time feedback, and effortless sharing via unique - URLs or GitHub Gists. -

-
- 🎯 Start Coding - 📚 View Challenges -
-
-
-
-
- - - -
-
-
// Welcome to CodeClip
-
function solveProblem() {
-
 return 'Success!';
-
}
-
-
-
-
-
- -
-
- -
security
-

Challenge Vault

-

All your challenges in one place — track, review, repeat.

- -
-
+ +
- - - - @@ -151,7 +70,7 @@

Community

+ - - \ No newline at end of file + diff --git a/script.js b/script.js new file mode 100644 index 00000000..a3f6868b --- /dev/null +++ b/script.js @@ -0,0 +1,6 @@ +const hamburger = document.querySelector('.hamburger'); +const mobileMenu = document.querySelector('.mobile-menu'); + +hamburger.addEventListener('click', () => { + mobileMenu.classList.toggle('show'); +}); diff --git a/style.css b/style.css new file mode 100644 index 00000000..57fa84d6 --- /dev/null +++ b/style.css @@ -0,0 +1,93 @@ +/* Base Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Header Styling */ +header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + background-color: #1e1e2f; + color: white; + position: relative; +} + +.logo { + font-size: 1.8rem; + font-weight: bold; + color: #00ffff; +} + +/* Nav Links */ +.nav-links { + display: flex; + gap: 2rem; +} + +.nav-links a { + text-decoration: none; + color: white; + font-weight: 500; + position: relative; +} + +.nav-links a:hover::after { + content: ''; + position: absolute; + width: 100%; + height: 2px; + background-color: #00ffff; + bottom: -4px; + left: 0; + transition: 0.3s; +} + +/* Hamburger */ +.hamburger { + display: none; + font-size: 2rem; + cursor: pointer; +} + +/* Mobile Menu */ +.mobile-menu { + display: none; + flex-direction: column; + background-color: #1e1e2f; + position: absolute; + top: 70px; + left: 0; + width: 100%; + padding: 1rem 2rem; + z-index: 10; +} + +.mobile-menu a { + padding: 0.5rem 0; + text-decoration: none; + color: white; + border-bottom: 1px solid #333; +} + +.mobile-menu a:last-child { + border-bottom: none; +} + +.mobile-menu.show { + display: flex; +} + +/* Responsive */ +@media (max-width: 768px) { + .nav-links { + display: none; + } + + .hamburger { + display: block; + } +} \ No newline at end of file