Profile Card Component

Dies ist eine Lösung für die Profile card component Challenge auf Frontend Mentor.

Anforderungen

Benutzer*innen sollten in der Lage sein:

• Das Projekt gemäß den bereitgestellten Designs umzusetzen

Gebaut mit

• Semantisches HTML5-Markup
• Flexbox
• Mobile-first Workflow
• React - JS-Bibliothek
• Remix - React-Framework
• Tailwindcss - Für Styles

Was ich gelernt habe

Hintergründe in Tailwind mehrfach anzuwenden und diese responsiv zu gestalten:

bg-[url('/images/bg-pattern-top.svg'),_url('/images/bg-pattern-bottom.svg')]
bg-contain
bg-[position:_right_50vw_bottom_70vh,_left_50vw_top_50vh]
bg-no-repeat
lg:bg-[position:_right_50vw_bottom_60vh,_left_40vw_top_50vh]