Hero Section એ કોઈ પણ વેબસાઇટનું પ્રથમ દ્રશ્ય...

Hero Section એ કોઈ પણ વેબસાઇટનું પ્રથમ દ્રશ્ય (First Impression) છે. જ્યારે વપરાશકર્તા વેબસાઇટ ખોલે છે ત્યારે સૌથી પહેલા આ વિભાગ દેખાય છે. હેતુ: અહીં તમારું નામ, પ્રોફાઇલ ફોટો, સુંદર હેડલાઇન અને મુખ્ય 'Call-to-Action' બટન (જેમ કે સંપર્ક કરો) દર્શાવવામાં આવે છે, જે મુલાકાતીનું ધ્યાન આકર્ષિત કરે છે. Navigation Bar: આ વિભાગ વપરાશકર્તાને વેબસાઇટના અન્ય ભાગો (જેમ કે About, Skills, Projects, Contact) પર સરળતાથી લઈ જવામાં મદદ કરે છે. 1. HTML કોડ (index.html) HTML <!-- Navigation Bar --> <nav class="navbar"> <div class="logo">મારું નામ</div> <ul class="nav-links"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#skills">Skills</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <!-- Hero Section --> <section id="home" class="hero"> <img src="profile.jpg" alt="મારો ફોટો" class="profile-img"> <h1>નમસ્તે! હું [તમારું નામ] છું</h1> <p>Web Developer | Designer | Creator</p> <a href="#contact" class="btn">સંપર્ક કરો</a> </section> 2. CSS કોડ (style.css) CSS /* General Styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } body { background-color: #f4f4f4; color: #333; } /* Navigation Bar */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 50px; background-color: #041938; } .navbar .logo { font-size: 24px; font-weight: bold; color: #609DFF; } .nav-links { list-style: none; display: flex; } .nav-links li { margin: 0 15px; } .nav-links a { text-decoration: none; color: white; font-weight: 500; } .nav-links a:hover { color: #609DFF; } /* Hero Section */ .hero { text-align: center; padding: 100px 20px; background: linear-gradient(135deg, #041938, #013180); color: white; } .profile-img { width: 150px; height: 150px; border-radius: 50%; border: 4px solid #609DFF; margin-bottom: 20px; } .hero h1 { font-size: 40px; margin-bottom: 10px; } .btn { display: inline-block; padding: 12px 30px; background-color: #609DFF; color: white; text-decoration: none; border-radius: 5px; margin-top: 20px; } .btn:hover { background-color: #013180; }