My Website

A responsive web project demonstrating HTML, CSS, and web design fundamentals with multiple pages and sections.

Project Overview

This project showcases a complete website with a professional layout including a header with navigation, banner section, and multiple pages. It includes demonstrations of HTML tables, forms, images, and responsive styling.

Features

• Responsive Navigation - Header with links to Home, About, and Contact pages
• Professional Styling - Custom CSS with a cohesive color scheme and layout
• Multiple Pages - Home (index.html), Gallery, and Contact pages
• Image Gallery - Organized image assets (img1, img2, img3, img4)
• Interactive Elements - Forms and tables for user interaction
• Clean Design - Well-structured HTML with semantic elements

Project Structure

.
├── index.html          # Main homepage
├── gallery.html        # Gallery/About page
├── contact.html        # Contact page
├── readme.md           # Project documentation
├── css/
│   └── style.css       # Main stylesheet (348 lines)
└── img/                # Image assets directory
    ├── img1
    ├── img2
    ├── img3
    └── img4

Pages

Home (index.html)

• Welcome banner with introductory message
• Site navigation and branding
• Demonstrates various HTML elements including tables and formatted text

Gallery (gallery.html)

• Image gallery showcase
• About section content

Contact (contact.html)

• Contact form for user inquiries
• Contact information

Styling

The project uses a professional color scheme:

• Primary Color: Navy Blue (#194d90) - Used in header
• Accent Color: Yellow - Used for banner text
• Background: Light Gray (#e6e9ef)
• Font: Arial, sans-serif

Key CSS features:

• Flexbox-based responsive header
• Centered content layout
• Styled tables with borders and padding
• Mobile-friendly meta viewport tag

Getting Started

1. Open index.html in your web browser
2. Navigate through the site using the menu links
3. Explore different pages and sections

Browser Compatibility

This project uses standard HTML5 and CSS3, compatible with all modern browsers.

Technologies Used

• HTML5 - Semantic markup and structure
• CSS3 - Styling and layout
• Responsive Design - Mobile viewport configuration

---

Created as part of HTML and Web Technology tutorials