Der Website-Layout sollte basierend auf Screenshots und Videos nachgebaut werden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Photo Card</title>
<link
rel="stylesheet"
href="https://unpkg.com/modern-normalize@latest/modern-normalize.css"
/>
</head>
<body>
<header>
<h1>Photo<br />Card</h1>
<p>
On this website you can find a card with a random image from
<a href="https://www.unsplash.com">unsplash</a>. Try to focus on
creating the main structure of the HTML and CSS first. Then add the
details bit by bit. If you make good progress, try to add an animated
hover effect for the little icon in the image. Oh, and this paragraph
must only be 65 characters wide.
</p>
</header>
<main></main>
</body>
</html>https://source.unsplash.com/600x600/?nature
Beim Hovern über die Karte soll sich das Bild etwas vergrößern, das Bild aber innerhalb der Karte bleiben. Der Schatten der Karte soll die Farbe des Seiten-Textes bekommen. Der Stern sollte anfangs ausgegraut sein und erst beim hovern gelb werden.
Fügt über einen prefers-color-scheme: dark Media Query einen Dark Mode hinzu. Nutzt hierfür Custom Properties.Photocard project
Fügt der Website einen dreispaltigen Footer hinzu. Das Footer Design soll Font Awesome Icons enthalten und von der Struktur so aussehen wie der Beispiel Screenshot:
Erstelle ein zweites Stylesheet das du ergänzend zum ersten in die index.html Seite einfügst. Update deinen CSS Code im neuen Stylesheet so, dass die Karte als "List View" dargestellt wird:
Das List-View Stylesheet soll im Sinne von responsive design via media query eingebettet werden.