Changed the Readme by Adding the poster

README.md

@@ -1,5 +1,21 @@
 # 🪄 CodeClip  – Coding Challenge Vault
 
+<p align="center">
+   <a href="https://gssoc.in" target="_blank">
+     <img alt="GSSoC 2025" src="https://user-images.githubusercontent.com/92252895/257558544-590cfc18-b194-4940-8684-75d803fac85e.png" width="900" />
+   </a>
+</p>
+
+## 🚩 GSSoC 2025 — Participating Project
+
+We are proud to be participating in GirlScript Summer of Code (GSSoC) 2025. Want to contribute? Here's how to get started:
+
+- ⭐ Star the repo to show support: https://github.com/opensource-society/CodeClip
+- 🐛 Browse issues: https://github.com/opensource-society/CodeClip/issues
+- 📘 Read our contribution guide: `CONTRIBUTING.md`
+- 🚀 Create a branch and open a PR (use labels Level 1 / Level 2 / Level 3 for difficulty)
+
+
 **CodeClip** is a lightweight, fully client-side web app that lets developers **store, solve, run, and share coding challenges** directly in the browser. Built with vanilla **HTML, CSS, and JavaScript**, it is ideal for first-time open-source contributors and is being developed under **GirlScript Summer of Code (GSSoC)**.
 
 ## ✨ Key Features (Planned & Implemented)
@@ -53,6 +69,12 @@ codeclip/
 │  ├─ challenges.html
 │  ├─ editor.html
 │  └─ profile.html
+├─ styles/
+│  ├─ variables.css
+│  ├─ main.css
+│  ├─ components.css
+│  └─ themes.css
+
 ├─ styles/
 │  ├─ variables.css
 │  ├─ main.css

styles/main.css

@@ -999,11 +999,7 @@ html {
       gap: 0;
       row-gap: 2.5rem;
     }
-
-    row-gap: 2.5rem;
-  }
-
-  main .footer-logo-col,
+    main .footer-logo-col,
   .footer-links-col,
   .footer-contact-col-main {
     display: flex;
@@ -1375,6 +1371,23 @@ main .scroll_to_top {
   align-items: center;
   gap: 0.2rem;
 }
+
+/* Make the two contact columns sit side-by-side and keep internal buttons sized nicely */
+.footer-contact-row .footer-contact-col {
+  flex: 0 0 48%; /* two columns */
+  max-width: 48%;
+}
+.footer-contact-row .footer-contact-col.w-100 {
+  /* override bootstrap utility that was forcing full width */
+  width: auto;
+  max-width: 48%;
+}
+.footer-contact-row .footer-contact-btn {
+  width: 100%;
+  max-width: 260px; /* keep a comfortable max width */
+  margin-left: 0;
+  margin-right: 0;
+}
 @media (max-width: 768px) {
   text-decoration: none;
 }
@@ -1495,3 +1508,10 @@ main .contact-icons a {
 }
 
 /* ================== Footer Styles End Here ================== */
+
+/* Ensure contact buttons in the Contact Us footer keep a comfortable max width
+   (higher specificity so this rule wins over the generic .footer-contact-btn). */
+#contactFooter .footer-contact-row .footer-contact-btn {
+  max-width: 260px;
+  width: 100%;
+}