Beispiel:WAI-ARIA-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!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;

}

  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>

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>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:WAI-ARIA-1.html&oldid=99644“