Beispiel:WAI-ARIA-1.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fantasy Football - Live Ticker</title> <style> body {
display: grid;
grid-template-columns: 2fr 1fr; gap: 1em; max-width: 55em; background: var(--blue); } body > * { border: thin solid; border-radius: 0 .5rem .5rem; padding: .5em; background: var(--sand); } main { grid-row: 2 / 4; }
h1 {
grid-column: 1 / -1;
}
- match {text-align: center;}
.event {
display: grid;
grid-template-columns: 1fr repeat(3,3em) 1fr; } .event >* {
border: thin solid pink;
text-align: center; } .event span:first-child { text-align: end; } .event span:last-child { text-align: start; } .event span:nth-of-type(3) { font-weight: bold; }
label, button { display: block; margin: 2em; } input { width: 3.5em; }
aside { background: var(--red); color: var(--sand); }
aside h2 { color: var(--gold); }
footer { grid-column: 1 / -1; background: transparent; border:none; } footer p,footer a { color: var(--gold); text-align: right; }
- root {
--sand: oklch(80% 0.07 100); --gold: gold; --red: oklch(40% 0.12 30); --lightred: oklch(75% 0.12 30); --blue: oklch(40% 0.0572 240); --lightblue: oklch(75% 0.0572 240); } </style> <script> {
"teams": { "Red Roosters": { "players": [ "Player 1", "Player 2", "Player 3", "Player 4", "Player 5", "Player 6", "Player 7", "Walter Frosch", "Player 9", "Player 10", "Player 11" ], "points": 0 }, "Backend Birds": { "players": [ "Paul PHP", "Player 2", "Player 3", "Player 4", "Player 5", "Player 6", "Player 7", "Player 8", "Player 9", "Player 10", "Player 11" ], "points": 0 }, "Golden Gunners": { "players": [ "Player 1", "Player 2", "Player 3", "Player 4", "Player 5", "Player 6", "Player 7", "Player 8", "Player 9", "Player 10", "Player 11" ], "points": 0 }, "Black Scorpions": { "players": [ "Dahlia Bloodcauldron", "Erendil Subris", "Jared Heartseeker", "Kelron Farstrider", "Eldrin Yundrin", "Arwen Moosleitner", "Harkon Septus", "Gandalf Gans", "Imrahil von Dol Amroth", "Rabid Runner", "Sleek Surfer" ], "points": 0 } }, "matches": [ { "match": "Red Roosters vs Blue Birds", "date": "2024-11-01", "result": null }, { "match": "Red Roosters vs Golden Gunners", "date": "2024-11-08", "result": null }, { "match": "Red Roosters vs Black Scorpions", "date": "2024-11-15", "result": null }, { "match": "Blue Birds vs Golden Gunners", "date": "2024-11-02", "result": null }, { "match": "Blue Birds vs Black Scorpions", "date": "2024-11-09", "result": null }, { "match": "Golden Gunners vs Black Scorpions", "date": "2024-11-16", "result": null } ], "ranking": [ { "team": "Red Roosters", "points": 0 }, { "team": "Blue Birds", "points": 0 }, { "team": "Golden Gunners", "points": 0 }, { "team": "Black Scorpions", "points": 0 } ]
}
</script> </head> <body>
Inhaltsverzeichnis
Fantasy Football - Alles auf einen Blick!
<main id="ticker">
Live Ticker
Red Roosters vs. Black Scorpions
Villa ⇅ Frosch12'
1:18'Jose Joo
⚽ Walter Frosch4'1:0
0'Anpfiff
</main>
<aside>
Tabelle
Platz | Team | Spiele | Tore | Punkte |
---|---|---|---|---|
1. | ||||
2. | ||||
3. | ||||
4. |
</aside> <aside id="timetable">
Spielplan
</aside>
<footer>
Nach einem Vorschlag von <a href="https://github.com/SELFHTML/Fertige-Layouts/tree/master/SteelJoker">SteelJoker, 2013</a>
</footer>
</body> </html>