Per Prompt zur Landing Page
Baue deine erste Hero-Section
Eine Hero-Section ist der wichtigste Teil einer Portfolio-Landing-Page — sie ist das Erste, was Besucher sehen. In dieser Lektion erstellst du eine professionelle Hero-Section, die Aufmerksamkeit weckt und Besucher neugierig darauf macht, mehr über dich zu erfahren.
Du startest mit einfachem HTML und fügst Styling mit Tailwind CSS hinzu, um eine moderne Hero-Section mit Gradient-Hintergrund, einer packenden Headline, einem Untertitel und einem Call-to-Action-Button zu bauen. Das ist das Fundament jeder großartigen Portfolio-Website.
Anweisungen
Füge einen Hero-Container-div mit min-h-screen, Gradient-Hintergrund (from-purple-900 bis gray-900) und Flex-Zentrierung hinzu
Tipp: Verwende: `<div class="min-h-screen bg-gradient-to-br from-purple-900 via-gray-900 to-gray-900 flex items-center justify-center px-4">` — das erzeugt eine Section in voller Bildschirmhöhe mit deinem Gradient
Füge innerhalb der Hero-Section eine h1-Headline mit deinem Namen und einen p-Untertitel mit deiner Rolle hinzu
Füge einen beschreibenden Absatz (p-Tag) mit einer Tagline darüber hinzu, was du machst (max. 300 Zeichen)
Füge einen CTA-Button mit Gradient-Styling und Hover-Effekten hinzu
Dein Code
Beschreibe, was du für diesen Schritt bauen willst, und ich schreibe den Code — klicke dann auf Übernehmen, um ihn in deinen Editor zu übertragen. Dieser Schritt: Füge einen Hero-Container-div mit min-h-screen, Gradient-Hintergrund (from-purple-900 bis gray-900) und Flex-Zentrierung hinzu