एक लैंडिंग पेज प्रॉम्प्ट करें
अपना पहला हीरो सेक्शन बनाएं
हीरो सेक्शन पोर्टफोलियो लैंडिंग पेज का सबसे महत्वपूर्ण हिस्सा है — यह वह पहली चीज़ है जो विज़िटर देखते हैं। इस पाठ में आप एक प्रोफ़ेशनल हीरो सेक्शन बनाएंगे जो ध्यान खींचता है और विज़िटर्स को आपके बारे में और जानने के लिए प्रेरित करता है।
आप बेसिक HTML से शुरुआत करेंगे और Tailwind CSS की मदद से स्टाइलिंग जोड़ेंगे, ताकि एक आधुनिक, ग्रेडिएंट बैकग्राउंड वाला हीरो बने — जिसमें एक आकर्षक हेडलाइन, सबटाइटल और call-to-action बटन हो। यही हर शानदार पोर्टफोलियो वेबसाइट की नींव है।
निर्देश
min-h-screen, ग्रेडिएंट बैकग्राउंड (from-purple-900 से gray-900) और flex सेंटरिंग वाला एक हीरो कंटेनर div जोड़ें
संकेत: उपयोग करें: `<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">` — इससे आपके ग्रेडिएंट के साथ पूरी ऊंचाई वाला सेक्शन बनता है
हीरो के अंदर, अपने नाम के साथ एक h1 हेडलाइन और अपनी भूमिका/टाइटल के साथ एक p सबटाइटल जोड़ें
अपने काम के बारे में एक टैगलाइन वाला विवरण पैराग्राफ (p टैग) जोड़ें (अधिकतम 300 अक्षर)
ग्रेडिएंट स्टाइलिंग और hover इफ़ेक्ट वाला एक CTA बटन जोड़ें
आपका कोड
इस स्टेप के लिए आप जो बनाना चाहते हैं उसे बताएं और मैं कोड लिख दूंगा — फिर इसे अपने एडिटर में डालने के लिए Apply पर क्लिक करें। यह स्टेप: min-h-screen, ग्रेडिएंट बैकग्राउंड (from-purple-900 से gray-900) और flex सेंटरिंग वाला एक हीरो कंटेनर div जोड़ें