diff --git a/index.html b/index.html index 2c243788..fd69410f 100644 --- a/index.html +++ b/index.html @@ -28,115 +28,116 @@ > - -
-
- - - -
-
- - - -
-
-
-
-

🚀 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 +
+ +
+
+ + +
-
-
-
- - - +
+ + + +
+
+
+
+

🚀 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!';
-
}
+
+
+
+ + + +
+
+
// Welcome to CodeClip
+
function solveProblem() {
+
 return 'Success!';
+
}
+
+
-
-
- -
-
- -
security
-

Challenge Vault

-

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

- -
-
-
- - - - - + + + + + + diff --git a/styles/main.css b/styles/main.css index fa6bc787..f550cdac 100644 --- a/styles/main.css +++ b/styles/main.css @@ -2,6 +2,7 @@ display: flex; flex-direction: row; } + @media (max-width:1025px){ .hero__content{ flex-direction: column; @@ -33,4 +34,58 @@ .hero__visual{ flex: 1; padding: 0px 5%; -} \ No newline at end of file +} +.footer .container{ + background-color: rgb(24, 23, 23); + display: flex; + flex-direction: column; + gap: 1rem; + width: 90%; + border-radius: 20px 20px 0 0; + padding: 3% 3% 0 3%; +} +.footer{ + box-sizing: border-box; + width: 100%; + display: flex; + align-items: center; + flex-direction: column; + color: white; +} + +.footer__content{ + font-size: 1rem; + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 1rem; + flex: 1; +} +@media (max-width:478px){ + .footer__content{ + flex-direction: column; + align-items: center; + } +} +.footer__section{ + flex:1; +} +.footer__bottom{ + display: flex; + flex-direction: row; + justify-content: center; + background-color: transparent; + font-family: 'Oooh Baby'; + flex: 1; +} +.footer .container .footer__content .footer__section ul li a{ + text-decoration: none; + color: whitesmoke; +} +.footer h4{ + font-family: 'Oooh Baby'; + font-size: 1.6rem; +} +.footer .container .footer__content .footer__section p{ + color: whitesmoke; +} diff --git a/submit-challenge/styles.css b/submit-challenge/styles.css index 70b7b58c..4f9e5382 100644 --- a/submit-challenge/styles.css +++ b/submit-challenge/styles.css @@ -8,9 +8,15 @@ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(135deg, black 0%, #090938 100%); min-height: 100vh; - padding: 20px; + height: 100%; color: #333; } +.page-wrapper { + display: flex; + flex-direction: column; + min-height: 100vh; + height: 100%; +} .container { max-width: 900px;