Einsendeaufgabe MMDE02K

TEIL A:

Erstellen Sie mit einem Editor Ihrer Wahl eine HTML-Datei mit einem Markup, das der Struktur in der folgenden Abbildung entspricht:

Das heißt, im Dokument gibt es auf oberster Ebene einen header, ein main-Element und einen footer.
Die weiteren Inhalte der Elemente entnehmen Sie bitte der oben gezeigten Struktur. Tiefer „verschachtelte“ Strukturen sind mit dem > Zeichen angegeben. Wie das gemeint ist, sollte Ihnen deutlich werden, wenn Sie sich in der folgenden Abbildung ansehen, wie die zugehörige Seite im Browser dargestellt wird:
Formatieren Sie nun diese HTML-Seite mithilfe von CSS. Sie finden im heftbezogenen Download-Bereich auf Ihrer Online-Lernplattform bereits eine CSS-Datei mit grundlegenden Formatierungen. Binden Sie diese Datei bitte in Ihr HTML5-Dokument ein.
Fügen Sie zusätzlich noch folgende Formatierungen durch:
•   Webfonts:
–    Definieren Sie einen Webfont für die Überschrift h1. Setzen Sie dabei auf Google Fonts.
Für die Aufgabe genügt es, wenn Sie Google Fonts direkt einbinden, auch wenn für den echten Einsatz es besser ist, die heruntergeladene Version zu nutzen.

•   Abgerundete Ecken, Schatten und Übergang:
–    Definieren Sie abgerundete Ecken und einen Schatten für body.
–    Runden Sie die Ecken des figure-Elements innerhalb von article ebenfalls ab. Sie können dafür den Selektor article figure einsetzen.
–    Definieren Sie einen Übergang, damit der Farbwechsel in der Navigation nicht so plötzlich verläuft. Überlegen Sie bitte, wo Sie die Angabe schreiben.

•   Layout über Flexbox:
–    Das main-Element machen Sie zum Flexcontainer, sodass das Layout zweispaltig wird (section mit Artikel links, aside rechts).
–    Damit die Hauptnavigationen horizontal angeordnet werden, machen Sie auch die ul innerhalb von nav zum Flexcontainer. Sie können hierfür auf den Selektor nav ul zurückgreifen.
Es genügt, wenn Sie die Standard-Flexbox-Angaben schreiben. Wenn Sie möchten, können Sie aber auch den Code für ältere Browser mit Autoprefixer erzeugen lassen.

Das Endergebnis sollte dann im Browser der folgenden Abbildung entsprechen – Sie dürfen aber natürlich eine andere Schrift wählen und andere Werte für Abrundungen und Schatten!


TEIL B:

Was müssen Sie angeben, damit ein details/summary-Element direkt geöffnet ist?

Welche Aussage trifft zu?

Welche der folgenden Angaben definiert einen Farbverlauf, der von oben Grün nach unten Schwarz läuft?

Wie definieren Sie, dass ein Element um 30 Grad nach rechts gedreht wird?

Was macht Autoprefixer?