Created during my time @CodingBootcampsEurope. This repo was just for learning purposes and is not cleaned up.
In this task we were asked to recreate the following website based on a screenshot and a video using html and css.
<!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
Add a hover effect to the card: the image is supposed to get slightly bogger and the card shadow changes to colour. Make sure the image stays within the limits of the card.
Add a media query prefers-color-scheme dark. Use custom properties for the color scheme
Add a three-fold footer. The footer design should contain Font Awesome icons and be structured like the following example:
Create a second stylesheet. The second stylesheet should have the styles for a "list view" of the photocards. Use a media query to make your website more responsive with this "list view" stylesheet.
