diff --git a/web-app/css/styles.css b/web-app/css/styles.css index 97de1fb..e497935 100644 --- a/web-app/css/styles.css +++ b/web-app/css/styles.css @@ -1417,6 +1417,179 @@ body { ═══════════════════════════════════════ */ .projects-section { padding: 4rem 0; } +.faq-section { + padding: 4rem 0; +} + +.section-header { + max-width: 820px; + margin: 0 auto; + text-align: center; +} + +.section-kicker { + color: var(--accent-color); + font-size: 0.9rem; + letter-spacing: 0.17em; + text-transform: uppercase; + margin-bottom: 0.8rem; +} + +.section-title { + font-size: clamp(2rem, 2.5vw, 2.8rem); + color: var(--text-color); + margin-bottom: 0.8rem; + line-height: 1.05; +} + +.section-subtitle { + color: var(--text-secondary); + max-width: 640px; + margin: 0 auto; + font-size: 1rem; + line-height: 1.75; +} + +.faq-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem; + margin-top: 2rem; + align-items: start; +} + +.faq-card { + display: flex; + flex-direction: column; + justify-content: flex-start; + background: var(--surface-color); + border: 1px solid var(--border-color); + border-radius: 1.5rem; + overflow: hidden; + box-shadow: var(--shadow); + transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; +} + +.faq-card:hover { + transform: translateY(-3px); + border-color: var(--accent-border); +} + +.faq-trigger { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1.25rem 1.5rem; + background: transparent; + border: none; + color: var(--text-color); + text-align: left; + font-size: 1rem; + cursor: pointer; + transition: background 0.2s ease, color 0.2s ease; +} + +.faq-trigger:hover, +.faq-trigger:focus-visible { + background: rgba(99, 102, 241, 0.08); + outline: none; +} + +.faq-trigger:focus-visible { + box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); +} + +.faq-label { + display: inline-flex; + align-items: center; + gap: 0.85rem; +} + +.faq-label i { + color: var(--primary-color); + min-width: 1.25rem; + font-size: 1.05rem; +} + +.faq-icon { + display: inline-flex; + align-items: center; + justify-content: center; + transition: transform 0.25s ease; +} + +.faq-card.open .faq-icon { + transform: rotate(180deg); +} + +.faq-panel { + max-height: 0; + overflow: hidden; + padding: 0 1.5rem; + transition: max-height 0.32s ease, padding 0.32s ease; +} + +.faq-card.open .faq-panel { + max-height: 1000px; + padding-bottom: 1.25rem; +} + +.faq-panel p { + margin: 0; + color: var(--text-secondary); + line-height: 1.8; + font-size: 0.98rem; +} + +.faq-panel ul { + margin: 0.75rem 0 0 1.1rem; + color: var(--text-secondary); + line-height: 1.8; +} + +.faq-panel ul li { + margin-bottom: 0.55rem; +} + +.faq-panel pre { + margin: 0.75rem 0 0; + padding: 1rem; + background: rgba(99, 102, 241, 0.08); + border: 1px solid var(--border-color); + border-radius: 0.85rem; + overflow-x: auto; + color: var(--text-color); + font-family: 'Courier New', monospace; + font-size: 0.92rem; + line-height: 1.6; +} + +.faq-panel code { + white-space: pre-wrap; +} + +@media (max-width: 860px) { + .faq-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 640px) { + .faq-section { + padding: 3rem 0; + } + + .faq-trigger { + padding: 1rem 1.25rem; + } + + .faq-panel { + padding: 0 1.25rem; + } +} + .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); diff --git a/web-app/index.html b/web-app/index.html index def5f9a..57805b3 100644 --- a/web-app/index.html +++ b/web-app/index.html @@ -1028,6 +1028,113 @@

Word Scramble

Unscramble words before attempts run out!

+
+

Python Mini Projects is a GSSoC-approved open-source project designed to make learning Python fun, practical, and beginner-friendly through interactive mini projects.

+

Perfect for students, beginners, and anyone who wants to build fun projects while learning Python.

+
+ +
+ +
+

Currently, contributions are open only to officially approved GSSoC participants.

+
+
+
+ +
+

You can:

+ +

A project admin will review and assign the issue.

+
+
+
+ +
+ +
+
+
+ +
+

Yes. This project is beginner-friendly and a great place to start contributing to open source.

+
+
+
+ +
+

No. Only Python standard libraries are allowed in this project.

+
+
+
+ +
+

After your PR is reviewed and merged, your contribution points will be updated on your GSSoC profile within approximately 20–24 hours.

+
+
+
+ +
+

Clone the repository:

+ 
git clone https://github.com/YOUR_USERNAME/python-mini-project.git
+

Then:

+ 
cd web-app
+python -m http.server 5500
+

Open the local link in your browser.

+

For live-server do this:

+

If Node.js installed:

+ 
npm install -g live-server
+

Then:

+ 
cd web-app
+live-server
+
+
+ + + +
@@ -1106,8 +1213,7 @@

Resources

@@ -1220,6 +1326,50 @@

Stay Updated

searchInput.value = ''; }); }); + +(function() { + function closeAllFaqItems() { + document.querySelectorAll('.faq-trigger').forEach(function(button) { + button.setAttribute('aria-expanded', 'false'); + button.closest('.faq-card')?.classList.remove('open'); + }); + } + + function toggleFaqItem(button) { + var isExpanded = button.getAttribute('aria-expanded') === 'true'; + closeAllFaqItems(); + if (!isExpanded) { + button.setAttribute('aria-expanded', 'true'); + button.closest('.faq-card')?.classList.add('open'); + } + } + + document.querySelectorAll('.faq-trigger').forEach(function(button) { + button.addEventListener('click', function() { + toggleFaqItem(button); + }); + button.addEventListener('keydown', function(event) { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + toggleFaqItem(button); + } + }); + }); + + document.querySelectorAll('a[href="#faqSection"]').forEach(function(anchor) { + anchor.addEventListener('click', function(event) { + event.preventDefault(); + var target = document.getElementById('faqSection'); + if (target) { + target.scrollIntoView({ behavior: 'smooth', block: 'start' }); + var firstTrigger = target.querySelector('.faq-trigger'); + if (firstTrigger) { + firstTrigger.focus({ preventScroll: true }); + } + } + }); + }); +})();