Shooping Layout

Aufgabe

Die Aufgabe war es, das nachfolgende Design möglichst originalgetreu mit HTML und CSS zu rekonstruieren. Dafür sollte semantisches HTML benutzt werden.

Assets

• 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

Bilder

• 

  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