Die Aufgabe war es, das nachfolgende Design möglichst originalgetreu mit HTML und CSS zu rekonstruieren. Dafür sollte semantisches HTML benutzt werden.
- Font:
Quicksand
<link
href="https://fonts.bunny.net/css?family=Quicksand:300,regular,500,600,700"
rel="stylesheet" />- Background Body:
#f5f5f5 - Background Product Card:
#fff - Background Button:
#485fb9 - Text Heading:
black - Text Regular:
#7e7e7e
- Schriftgröße:
1rem - Standard Abstand:
1rem - Radius außen:
1.5rem - Radius innen:
0.5rem
-
https://images.unsplash.com/photo-1560072810-1cffb09faf0f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80
-
https://images.unsplash.com/flagged/photo-1556637640-2c80d3201be8?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
-
https://images.unsplash.com/photo-1539185441755-769473a23570?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1471&q=80
