https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/grid (Grid-Layout)
https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/Grafiken#responsives_Design_.28RWD.29 (responsive Design beim Einbetten von Abbildungen)

Erstelle eine responsive Webseite (die eine Folie darstellt) mittels Grid, bei der die Seite in drei Bereiche geteilt ist:
a) Bereich für Titel der Folie,
b) Bereich für eine Abbildung,
c) Bereich für die Beschriftung der Abbildung.

Wie die Handy- bzw. Desktop-Version aussehen soll, ist auf den folgenden beiden Abbildungen zu sehen.

Abbildung: Geiger-Müller-Zähler

Hinweis1: Nimm bei der Platzaufteilung ein Spaltenverhältnis von 1:2 an.
Hinweis2: Wähle für das Umschalten der beiden Darstellungen eine geeignete Breite von 40-60em.
Hinweis3: Die Abbildung soll möglichst groß sein wobei aber immer möglicsht Abbildung und Text zu sehen sein soll.

slide.html

<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Grid-Layout</title>
    <style>
        body {
            font-family: sans-serif;
            font-size: x-large;
            background: white;
            margin: 0px;
            min-height: 100vh;
            display: grid;
            grid: "titel" 
                  "bild" 
                  "beschreibung"
                  / 1fr;
        }
 
        img {
            text-align: center;
            width: 100%;
        }
 
        beschreibung {
            font-family: Calibri;
            padding-left: 3%;
            padding-right: 3%;
            padding-top: 0%;
            padding-bottom: 1%;
            grid-area: beschreibung;
        }
 
        @media (min-width: 50em) {
            body {
                grid: "titel bild" 1fr
                      "titel beschreibung" min-content
                      / 1fr 3fr;
            }
            img { height: 60vh;
                  width: auto;
 
            }
            beschreibung {
                font-size: 4vh;
                grid-area: beschreibung;
            }
        }
 
        bild {
            padding-top: 3%;
            text-align: center;
            grid-area: bild;
        }
 
        titel {
            background-color: #2E2E2E;
            color: azure;
            text-align: center;
            font-size: 5vh;
            grid-area: titel;
        }
 
    </style>
</head>
 
<body>
    <titel>
        <p>Radioaktivität</p>
    </titel>
    <bild>
        <img src="GeigerMuellerZaehler.jpg">
    </bild>
    <beschreibung>
        <p><b>Das Geiger-Müller-Zählrohr.</b> Die einfallende Strahlung ionisiert die Atome des Füllgases. 
        Die entstehenden Elektronen werden durch den geladenen Draht beschleunigt und erzeugen durch Stoßionisation
        weiter Elektronen wodurch eine elektrische Entladung stattfindet. Diese wird über einen Verstärker gemessen.</p>
    </beschreibung>
</body>
 
</html>