← All projects

SJ_Architects

View on GitHub →View live →

README

SJ Architects Website

An exact replica of the SJ Architects preview website, recreated from the PDF design with all pages, links, and content.

Project Structure

SheetalAssignments/
├── index.html          # Homepage
├── projects.html        # Projects page
├── services.html        # Services page
├── about.html          # About page
├── contact.html        # Contact page
├── css/
│   └── styles.css      # Main stylesheet
├── js/
│   └── main.js         # JavaScript for interactivity
└── docs/
    └── SJ Architects — Preview.pdf (1).pdf  # Original PDF reference

Features

  • Complete Navigation: All pages are linked and clickable
  • Professional Design: Matching fonts, colors, and layout from the PDF
  • Responsive Layout: Works on desktop and mobile devices
  • Interactive Elements: Smooth scrolling, form handling, and animations
  • Augmented Content: Missing data filled with harmonious, professional content

Pages

  1. Home (index.html): Hero section, project previews, services overview
  2. Projects (projects.html): Detailed project pages for Apollo Medical Center, Urban Grand Hotel, and Orion Mall Complex
  3. Services (services.html): Architecture, Urban Design, and Interiors & Landscape services
  4. About (about.html): Company story, team members, specialties, and values
  5. Contact (contact.html): Contact form, news & insights, and careers section

Design Elements

  • Color Palette: Professional navy blue (#1a365d), charcoal, white
  • Typography: Modern system fonts (SF Pro Display, Segoe UI, Roboto)
  • Layout: Clean, spacious, professional architecture firm aesthetic
  • Icons: Emoji-based icons for visual interest

Usage

Simply open index.html in a web browser to view the website. All pages are linked and fully functional.

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

Notes

  • All links are functional and navigate between pages
  • Contact form includes client-side validation
  • Content has been augmented where needed to match the professional tone
  • Design matches the PDF layout and structure