esd_study_guide / index.html
3v324v23's picture
Add visual diagrams to week pages & fix navbar
6e03616
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>ESD Study Guide β€” NPTEL IIT KGP</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin:30px 0}
.hcard{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px;text-decoration:none;color:var(--text);transition:all .25s;display:block;position:relative;overflow:hidden}
.hcard::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--green)}
.hcard.o::before{background:var(--orange)}.hcard.b::before{background:var(--blue)}.hcard.p::before{background:var(--purple)}.hcard.y::before{background:var(--yellow)}
.hcard:hover{box-shadow:0 8px 28px rgba(0,0,0,.1);transform:translateY(-3px)}
.hcard .wks{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:500}
.hcard h3{font-family:'Playfair Display',serif;font-size:18px;font-weight:900;margin-bottom:8px;color:var(--green)}
.hcard.o h3{color:var(--orange)}.hcard.b h3{color:var(--blue)}.hcard.p h3{color:var(--purple)}.hcard.y h3{color:#8B6000}
.hcard p{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:12px}
.hcard .topics{display:flex;flex-wrap:wrap;gap:4px}
.hcard .go{display:inline-flex;align-items:center;gap:5px;background:var(--green);color:#fff;border-radius:6px;padding:7px 14px;font-size:12px;font-weight:700;margin-top:14px}
.hcard.o .go{background:var(--orange)}.hcard.b .go{background:var(--blue)}.hcard.p .go{background:var(--purple)}.hcard.y .go{background:#B8860B}
.how-to{background:var(--yl);border:1px solid #FFD93D;border-left:4px solid var(--yellow);border-radius:8px;padding:18px 22px;margin:24px 0}
.how-to h3{font-weight:800;font-size:15px;margin-bottom:10px;color:#7A5500}
.how-to ol{padding-left:18px;font-size:13.5px;line-height:1.9}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}
.stat-box{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;text-align:center}
.stat-box .n{font-family:'Playfair Display',serif;font-size:30px;font-weight:900;color:var(--green);display:block}
.stat-box .l{font-size:11px;color:var(--muted);font-weight:600}
@media(max-width:600px){.stats-row{grid-template-columns:repeat(2,1fr)}}
</style>
</head>
<body>
<nav>
<a class="nav-logo" href="index.html">🌱 ESD Guide</a>
<a href="week1-2.html">W1-2</a><a href="week3-4.html">W3-4</a>
<a href="week5-6.html">W5-6</a><a href="week7-8.html">W7-8</a>
<a href="week9-10.html">W9-10</a><a href="week11-12.html">W11-12</a>
<a href="assignments.html">πŸ“ Assignments</a>
<a href="quickrev.html">⚑ Quick Rev</a>
<a href="extras.html">πŸ“š Extras</a>
</nav>
<div class="hero">
<div class="hero-badge">NPTEL Β· IIT Kharagpur Β· Prof. Atasi Mohanty Β· Jan 2026</div>
<h1>Education for Sustainable Development</h1>
<p>Your complete exam guide β€” all 12 weeks, every assignment answered, case studies, diagrams & 200+ Q&As</p>
<div class="hero-stats">
<div class="stat"><span class="n">12</span><span class="l">Weeks</span></div>
<div class="stat"><span class="n">61</span><span class="l">Lectures</span></div>
<div class="stat"><span class="n">200+</span><span class="l">Q&As</span></div>
<div class="stat"><span class="n">120</span><span class="l">Assignment Qs</span></div>
</div>
</div>
<div class="container">
<div class="how-to">
<h3>πŸ“– How to use this guide</h3>
<ol>
<li>Start with the week you're studying β€” each page covers 2 weeks deeply</li>
<li>Read the <strong>summary + analogy</strong> first to get the big picture</li>
<li>Click Q&As to test yourself β€” try answering before revealing</li>
<li>Check <strong>Assignments</strong> page β€” these are actual NPTEL exam questions</li>
<li>Use <strong>Quick Rev</strong> the night before exam for rapid revision</li>
</ol>
</div>
<div class="stats-row">
<div class="stat-box"><span class="n">17</span><span class="l">SDGs Explained</span></div>
<div class="stat-box"><span class="n">3</span><span class="l">Case Studies</span></div>
<div class="stat-box"><span class="n">12</span><span class="l">Assignment Sets</span></div>
<div class="stat-box"><span class="n">100%</span><span class="l">From Lectures</span></div>
</div>
<div class="home-grid">
<a href="week1-2.html" class="hcard">
<div class="wks">WEEK 1 & 2</div>
<h3>SDGs & ESD Foundations</h3>
<p>History of SDGs, all 17 goals, what is ESD, 3 pillars, origin conferences, SDG 4 targets.</p>
<div class="topics">
<span class="tag">17 SDGs</span><span class="tag">2030 Agenda</span><span class="tag">ESD Definition</span><span class="tag">3 Pillars</span>
</div>
<div class="go">Study Week 1–2 β†’</div>
</a>
<a href="week3-4.html" class="hcard o">
<div class="wks">WEEK 3 & 4</div>
<h3>Global Citizenship & Green Jobs</h3>
<p>SDG 4.7 six components, GCED, MGIEP, TVET, GIDO/GESO/GNEO, O*NET green occupations.</p>
<div class="topics">
<span class="tag o">SDG 4.7</span><span class="tag o">GCED</span><span class="tag o">TVET</span><span class="tag o">Green Jobs</span>
</div>
<div class="go">Study Week 3–4 β†’</div>
</a>
<a href="week5-6.html" class="hcard b">
<div class="wks">WEEK 5 & 6</div>
<h3>Health, Wellbeing & Food</h3>
<p>Sustainable health principles, 10 health practices, food systems, hunger in India, sustainable consumption.</p>
<div class="topics">
<span class="tag b">SDG 3</span><span class="tag b">SDG 2</span><span class="tag b">Health Practices</span><span class="tag b">Food</span>
</div>
<div class="go">Study Week 5–6 β†’</div>
</a>
<a href="week7-8.html" class="hcard p">
<div class="wks">WEEK 7 & 8</div>
<h3>Clean Energy & ESD in Action</h3>
<p>IPCC, Paris Agreement, NAPCC, Okayama commitment, ESD competencies, teacher education, GAP.</p>
<div class="topics">
<span class="tag">SDG 7</span><span class="tag">IPCC</span><span class="tag">Okayama</span><span class="tag">GAP</span>
</div>
<div class="go">Study Week 7–8 β†’</div>
</a>
<a href="week9-10.html" class="hcard y">
<div class="wks">WEEK 9 & 10</div>
<h3>Research & Sustainable Leadership</h3>
<p>NEP 2020, HEIs, participatory research, Triple Bottom Line, 3P's, leadership model, systems thinking.</p>
<div class="topics">
<span class="tag o">NEP 2020</span><span class="tag o">Triple Bottom Line</span><span class="tag o">Leadership</span>
</div>
<div class="go">Study Week 9–10 β†’</div>
</a>
<a href="week11-12.html" class="hcard">
<div class="wks">WEEK 11 & 12</div>
<h3>Leadership-II & Global Partnership</h3>
<p>Transformational leadership, LEAD India, sustainable happiness, SDG 17, partnership accelerator, Gandhian principles.</p>
<div class="topics">
<span class="tag">SDG 17</span><span class="tag">Happiness</span><span class="tag">Partnerships</span>
</div>
<div class="go">Study Week 11–12 β†’</div>
</a>
<a href="assignments.html" class="hcard b">
<div class="wks">ALL WEEKS Β· OFFICIAL MCQs</div>
<h3>πŸ“ All Assignment Q&As</h3>
<p>Every question from all 12 NPTEL assignments with correct answers and explanations. The most exam-relevant content!</p>
<div class="topics">
<span class="tag b">120 Questions</span><span class="tag b">All Answers</span><span class="tag b">Exam Ready</span>
</div>
<div class="go">View All Assignments β†’</div>
</a>
<a href="quickrev.html" class="hcard o">
<div class="wks">LAST-MINUTE REVISION</div>
<h3>⚑ Quick Revision Sheet</h3>
<p>Top 50 facts, all important numbers, key definitions, case study summaries β€” everything in one page.</p>
<div class="topics">
<span class="tag o">50 Key Facts</span><span class="tag o">All Numbers</span><span class="tag o">Flash Cards</span>
</div>
<div class="go">Quick Revision β†’</div>
</a>
</div>
<div style="background:var(--gl);border-radius:10px;padding:20px 24px;margin:16px 0;display:flex;align-items:flex-start;gap:12px">
<span style="font-size:24px">πŸ’‘</span>
<div>
<strong style="display:block;margin-bottom:5px;color:var(--dgreen)">Study Tip from the Course</strong>
<p style="font-size:13px;color:var(--dgreen)">ESD stands for "Learning to Act; Learning to Achieve." Don't just read β€” after each section, close the page and write down 3 things you remember. That IS the ESD method of learning.</p>
</div>
</div>
</div>
<footer>
<strong>ESD Study Guide</strong> β€” Based on NPTEL course by Prof. Atasi Mohanty, IIT Kharagpur<br>
<span style="font-size:12px;opacity:.7">Made for exam prep Β· Share with friends Β· All content from official lecture materials</span>
</footer>
<script src="app.js"></script>
</body>
</html>