Team Profile Cards

A responsive, accessibility‑first mini‑project showcasing sleek profile cards for a fictional team.
Built with semantic HTML and modern CSS, this project demonstrates responsive layouts, smooth navigation, and polished UI/UX design.

✨ Features

• Responsive Design: Adapts seamlessly across mobile, tablet, and desktop breakpoints.
• Accessibility‑First:
  • Semantic HTML elements (<article>, <figure>, <figcaption>, <q>).
  • Offscreen headings for screen readers.
  • Smooth scroll behavior and logical focus states.
• Modern CSS:
  • Custom properties (CSS variables) for fonts, colors, spacing, and shadows.
  • Radial gradients and hover transitions for interactive polish.
  • Flexbox and media queries for adaptive layouts.
• Dark Mode Support: Uses prefers-color-scheme to adjust colors automatically.
• Recruiter‑Friendly Branding: Clear repo description, structured documentation, and original styling.

📂 Project Structure

profile-cards/
│
├── index.html
├── css/
│   └── styles.css
└── img/
    ├── profile1-500x500.png
    ├── profile2-500x500.png
    └── profile3-500x500.png

🖼️ Demo Content

• Alex Johnson – Coder
  “I build accessible, efficient code that solves real problems.”

• Joe Bloggs – Designer
  “I craft intuitive designs that elevate user experience.”

• Jane Doe-Smith – Teacher
  “I teach technology with clarity, purpose, and passion.”

📱 Responsive Behavior

• Small screens (mobile): Cards stack vertically, navigation visible.
• Medium screens (tablet): Navigation hidden, cards rearrange with reversed figure flow.
• Large screens (desktop): Cards align in rows with reordered layout for balance.
• Extra large screens: Increased spacing and proportional card sizing.
• Landscape mobile: Compact card widths, adjusted font sizes.

🚀 Inspiration

This project is inspired by Dave Gray’s CSS Responsive Card Design Tutorial.
It has been adapted into a team profile card showcase with responsive layouts and custom styling.

🛠️ Technologies

• HTML5
• CSS3 (Flexbox, Media Queries, CSS Variables)
• Google Fonts (Inconsolata)