Moodle – Pikakirjasto
1) Pääotsikko / Banneri
<div style="background:rgba(255,80,0,0.10);border:1px solid rgba(255,80,0,0.15);border-left:8px solid #ff5000;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.06);padding:18px 16px;margin:0 0 18px 0;">
<h1 style="margin:0 0 6px 0;font-size:28px;font-weight:800;color:#ff5000;">Kurssin nimi</h1>
<p style="margin:0;color:#6b6e73;">Lyhyt kuvaus tai ohje.</p>
</div>Kurssin nimi
Lyhyt kuvaus tai ohje.
2) Huomiolaatikko (suorat kulmat)
<div style="border:1px solid rgba(83,86,90,0.15);border-left:8px solid #ff5000;background:#ffffff;padding:12px 14px;margin:14px 0;box-shadow:0 2px 6px rgba(0,0,0,0.06);border-radius:0;">
<h3 style="margin:0 0 6px 0;font-size:18px;font-weight:800;color:#53565a;">Huomio – työn palautus</h3>
<p style="margin:0 0 6px 0;color:#2e2f32;">Palautus sulkeutuu perjantaina klo 23.55.</p>
<p style="margin:0;color:#6b6e73;">Vinkki: nimeä tiedosto ohjeen mukaan.</p>
</div>Huomio – työn palautus
Palautus sulkeutuu perjantaina klo 23.55.
Vinkki: nimeä tiedosto ohjeen mukaan.
3) Korostuslaatikot (info / note / success / warning / danger)
<!-- INFO -->
<div style="background:rgba(255,80,0,0.10);border-left:8px solid #ff5000;border:1px solid rgba(255,80,0,0.15);border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.06);padding:14px 16px;margin:14px 0;">
<strong>📌 Info</strong> Lyhyt ohje tai nosto.
</div>
<!-- NOTE -->
<div style="background:rgba(83,86,90,0.10);border-left:8px solid #53565a;border:1px solid rgba(83,86,90,0.15);border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.06);padding:14px 16px;margin:14px 0;">
<strong>📝 Huomio</strong> Taustatieto tai lisähuomautus.
</div>
<!-- SUCCESS / WARNING / DANGER -->
<div style="background:#e8f6ee;border-left:8px solid #249f6a;border:1px solid #d2ecdf;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.06);padding:14px 16px;margin:14px 0;">
<strong>✅ Vinkki</strong> “Tehtävä ratkaistu” tai vihreä nosto.
</div>
<div style="background:#fff4e8;border-left:8px solid #ff5000;border:1px solid #ffd9bf;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.06);padding:14px 16px;margin:14px 0;">
<strong>⚠️ Varoitus</strong> Deadline tai arviointiehto.
</div>
<div style="background:#fdecee;border-left:8px solid #c03545;border:1px solid #f3c7cc;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.06);padding:14px 16px;margin:14px 0;">
<strong>⛔ Este</strong> Palautus suljettu tai virhe.
</div>4) Haitari (natiivi nuoli, saavutettava)
Pidä summary yksinkertaisena (ei display:flex, ei list-style:none), jotta natiivinuoli näkyy.
<details style="border:1px solid rgba(83,86,90,0.15);border-radius:0;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.06);margin:14px 0;">
<summary style="cursor:pointer;padding:12px 14px;font-weight:800;color:#53565a;background:rgba(83,86,90,0.08);border-left:8px solid #ff5000;outline:none;">
Kurssin aikataulu
</summary>
<div style="padding:12px 14px;border-top:1px dashed rgba(255,80,0,0.25);background:#ffffff;">
<p style="margin:0 0 6px 0;color:#2e2f32;">Viikkokohtaiset deadlinet ja linkit.</p>
<ul style="margin:6px 0 0 18px;padding:0;">
<li>Viikko 1: Orientaatio</li>
<li>Viikko 2: Harjoitus 1</li>
<li>Viikko 3: Vertaispalautteet</li>
</ul>
</div>
</details>Kurssin aikataulu
Viikkokohtaiset deadlinet ja linkit.
- Viikko 1: Orientaatio
- Viikko 2: Harjoitus 1
- Viikko 3: Vertaispalautteet
5) Tagit ja nappi
<p>
<span style="display:inline-block;font-size:14px;padding:3px 8px;background:rgba(83,86,90,0.10);border:1px solid rgba(83,86,90,0.15);border-radius:999px;margin-right:6px;">Moodle</span>
<span style="display:inline-block;font-size:14px;padding:3px 8px;background:rgba(255,80,0,0.10);border:1px solid rgba(255,80,0,0.20);border-radius:999px;margin-right:6px;">Metropolia</span>
<span style="display:inline-block;font-size:14px;padding:3px 8px;background:rgba(83,86,90,0.10);border:1px solid rgba(83,86,90,0.15);border-radius:999px;">H5P</span>
</p>
<p><a href="#" style="display:inline-block;padding:10px 14px;border-radius:8px;text-decoration:none;background:#ff5000;color:#fff;font-weight:800;border:0;box-shadow:0 2px 6px rgba(0,0,0,0.06);">Toimintolinkki</a></p>6) Pieni taulukko
<table style="width:100%;border-collapse:collapse;font-size:15px;">
<thead>
<tr>
<th style="text-align:left;color:#53565a;background:rgba(83,86,90,0.10);padding:10px;border-bottom:1px solid rgba(83,86,90,0.15);">Elementti</th>
<th style="text-align:left;color:#53565a;background:rgba(83,86,90,0.10);padding:10px;border-bottom:1px solid rgba(83,86,90,0.15);">Käyttö</th>
<th style="text-align:left;color:#53565a;background:rgba(83,86,90,0.10);padding:10px;border-bottom:1px solid rgba(83,86,90,0.15);">Huomio</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:10px;border-bottom:1px solid rgba(83,86,90,0.15);">Info-laatikko</td>
<td style="padding:10px;border-bottom:1px solid rgba(83,86,90,0.15);">Lyhyet ohjeet</td>
<td style="padding:10px;border-bottom:1px solid rgba(83,86,90,0.15);">Pidä ytimekkäänä</td>
</tr>
</tbody>
</table>7) Tiivis haitariversio
<details style="border:1px solid rgba(83,86,90,0.15);border-radius:0;background:#fff;margin:10px 0;">
<summary style="cursor:pointer;padding:8px 10px;font-weight:800;color:#53565a;background:rgba(83,86,90,0.08);border-left:6px solid #ff5000;outline:none;">
Lyhyt otsikko
</summary>
<div style="padding:8px 10px;border-top:1px dashed rgba(255,80,0,0.25);background:#ffffff;">
Tiivis sisältö.
</div>
</details>