Multi-Page Website

A simple, responsive multi-page static website built with HTML and CSS. It includes a consistent navbar and footer, a hero-driven home page, an about page, and a contact page with a styled form.

Project Structure

Multi-Page-Website/
  ├─ index.html      # Home: hero section + global navbar/footer
  ├─ about.html      # About page content
  ├─ contact.html    # Contact info + form UI
  └─ style.css       # Global styles (navbar, hero, sections, contact, footer, responsive)

Pages

• Home (index.html):

  • Sticky dark navbar with logo and links
  • Full-width hero section with background image, heading, paragraph, and CTA button
  • Footer with About, Quick Links, and Contact Info

• About (about.html):

  • Reuses navbar and footer
  • Centered section with an About heading and paragraph block

• Contact (contact.html):

  • Reuses navbar and footer
  • Intro header and two-column layout:
    • Contact info list (address, phone, email, hours)
    • Styled contact form (name, email, phone, subject, message)

Styles (style.css)

• Base: Reset box model, default font, body color/line-height
• Navbar: Sticky, dark theme, horizontal links with hover state
• Hero: Background image overlay, centered text, CTA .btn
• Sections: Dark background, centered content; .about-info helpers
• Footer: Three-column responsive layout, hoverable links, copyright bar
• Contact: .contact-header, .contact-container, .contact-info, .contact-form, form controls, submit button
• Responsive: Breakpoint at 768px collapses navbar/columns/hero text sizes

Getting Started

Run Locally

• Open index.html directly in your browser, or
• Serve the folder with any static server to get clean navigation:

# Node (if installed)
npx serve . --listen 3000
# Visit http://localhost:3000/

Navigation Notes

• Navbar and footer links currently point to /, /about, /contact.
  • If you are opening files directly from the filesystem (no server), update links to index.html, about.html, and contact.html.
  • If you deploy to a static host with clean URLs and rewrite rules, keep them as-is.

Example (filesystem-friendly) links:

<nav class="navbar">
  <a href="index.html" class="logo">Site01</a>
  <ul class="nav-links">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Customization

• Branding: Change the .logo text and page titles
• Hero Image: Update the background URL in .hero within style.css
• Colors: Adjust navbar/footer backgrounds and link hover colors in style.css
• Content: Replace placeholder text in index.html, about.html, and contact.html
• Form Action: Point the contact form action to your backend endpoint or service

Accessibility & SEO

• Uses semantic HTML sections and headings
• Ensure link text is descriptive; add aria-labels if needed
• Add unique <title> and meta descriptions per page
• Provide form aria-invalid/error messaging if you add validation

Known Limitations

• Icons: contact.html uses Font Awesome class names (fas ...) but no icon stylesheet is included. Add one if desired:

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
  integrity="sha512-..."
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

• Form Handling: There is no JavaScript or backend; the form is presentational. Hook up your backend or a form handling service to receive submissions.

License

This project is provided for learning/demo purposes.

---

Made with ❤️ Sumit Tomar