🐉 Dragon Heaven: Multi-Page Website

A fully responsive, accessible multi-page website showcasing dragons with semantic HTML and modern CSS techniques

View Demo • Features • Tech Stack

---

🌟 About This Project

I created Dragon Heaven, a multi-page website dedicated to the mythical world of dragons, using pure HTML and CSS. This project demonstrates my proficiency in modern web development practices, responsive design, and accessibility standards.

🚀 How to Run

Get the project running locally in three simple steps:

# 1. Install dependencies (first time only)
npm install

# 2. Start the development server
node server.js

# 3. Open your browser
# Navigate to: http://localhost:3000/

To stop the server: Press Ctrl-C in your terminal

---

📁 Site Structure

public/
├── index.html      # 🏠 Homepage with dragon content cards
├── about.html      # 📖 Detailed dragon lore and information
└── register.html   # 📝 User registration form

Each page features:

• ✅ Semantic HTML5 elements (<header>, <main>, <footer>)
• ✅ Consistent navigation and branding
• ✅ Fully accessible markup

---

✨ Key Features

🧭 Navigation System

• Responsive Menu: Adapts seamlessly across all screen sizes
• Internal Links: Home, About, Register pages
• External Links: Curated dragon-related resources
• Keyboard Accessible: Full navigation via Tab and Enter keys
• Interactive Design: Horizontal dropdown or vertical slide-in/slide-out menu

🏠 Homepage

• 7+ UI Cards: Organized into two distinct thematic categories
• 12-Column Grid Layout: Varied proportions for visual interest
• Card Components:
  • Descriptive headings
  • Call-to-action links
  • Unique visual styling per card

📖 About Page

• Rich Content: 3+ paragraphs of dragon lore
• Typography Hierarchy: Clear heading structure
• Readability Focus: Optimized line length and spacing

📝 Registration Form

• Comprehensive Fields:
  • Text inputs (name, email)
  • Checkbox options
  • Dropdown selections
• Vertical Layout: Clean 1-column design
• Accessibility:
  • Required field indicators
  • Proper label associations
  • Error prevention

---

🎨 Design Approach

📱 Responsive & Adaptive

• 12-Column Grid System: Professional layout structure
• Fluid Typography: Responsive text from 360px viewport width
• Breakpoints: Strategic adaptive breakpoints using rem units
• Mobile-First: Optimized for all device sizes

♿ Accessibility (WCAG Compliant)

Feature	Implementation
Font Sizing	All sizes in rem units
Keyboard Navigation	Full site navigable without mouse
Alt Text	Descriptive text for all images
Form Labels	Explicitly associated with inputs
Color Contrast	WCAG AA compliant ratios
Semantic HTML	Proper element usage throughout

---

💻 Technical Skills Demonstrated

🛠️ Technologies Used

Frontend Technologies ✅ Semantic HTML5 ✅ Modern CSS3 ✅ CSS Grid (12-column system) ✅ Flexbox layouts ✅ CSS Custom Properties ✅ Position Properties

Core Concepts ✅ Box Model mastery ✅ Responsive Design ✅ Adaptive Design ✅ Web Accessibility (A11y) ✅ Form Design & UX ✅ CSS Architecture

🛠️ Development Practices

• No Frameworks: Pure HTML/CSS implementation
• No JavaScript: Demonstrating CSS capabilities
• Semantic Class Naming: kebab-case convention
• Code Organization: Human-readable, maintainable structure
• Valid Markup: W3C compliant HTML/CSS

---

🖼️ Image Attribution

All images are ethically sourced and properly licensed:

• 📸 Unsplash: https://unsplash.com
• 🎨 Google Fonts Icons: https://fonts.google.com/icons
• 👤 Personal Collection: Original photography

📄 Complete attribution and license details available in licenses.txt

---

📊 Project Specifications

Specification	Implementation
Pages	3 (Home, About, Register)
UI Cards	7+ organized cards
Grid System	12-column responsive grid
Breakpoints	Minimum 1 adaptive breakpoint
Minimum Width	360px viewport support
Form Fields	Name, email, checkbox, dropdown

---

🎯 Learning Outcomes

This project represents my mastery of:

1. Foundational Web Development - Solid HTML/CSS skills
2. Responsive Design Principles - Mobile-first approach
3. Accessibility Standards - Inclusive web practices
4. Layout Techniques - Grid and Flexbox proficiency
5. User Experience - Intuitive navigation and forms
6. Code Quality - Clean, maintainable code architecture

---

📝 Development Notes

Built with best practices and modern standards:

• ⚡ Performance: Optimized assets and minimal HTTP requests
• 🎯 SEO Friendly: Semantic markup for better indexing
• 🔧 Maintainable: Organized CSS with clear naming conventions
• 🎨 Design System: Consistent spacing and typography
• 📦 No External Dependencies: Lightweight and fast

---

🚀 Future Enhancements

• Add JavaScript interactivity
• Implement dark mode toggle
• Add animation and transitions
• Include more dragon species
• Create a gallery page
• Add backend database integration

---

🌐 Connect With Me

---

Made with 🔥 and passion for web development

This project showcases my understanding of foundational web development concepts and my ability to create accessible, responsive websites from scratch.

⭐ Star this repo if you found it helpful! ⭐