RentMeBike READ ME:

Seed: This project is built as a responsive site for a fictional bike rental platform called RentMeBike. The site demonstrates HTML5 semantic structure, CSS3 layout (Grid + Flexbox), accessibility compliance, and CSS-only interactive components.
It is designed to fulfill the requirements of an HTML + CSS assignment.

Design Rationale:

• Layout:

  • Header: Logo + navigation aligned with Flexbox for responsiveness.
  • Services Section: Grid layout for service cards, responsive for mobile, tablet, and desktop.
  • About & Contact Sections: Centered text for readability.

  interactivity:

  1. Hover effects on service cards for user engagement.
  2. Custom checkboxes and radio buttons in forms.
  3. component for FAQ or expandable sections.

• Form:

  • Includes text inputs, checkboxes, radio buttons, dropdowns, a textarea, and a submit button.
  • Fully labeled and keyboard-accessible.
  • Visual focus indicators and hover states for better accessibility.

• Colors & Typography:

  • Green accent color (#4CAF50) for branding and interactive elements.
  • Light gray backgrounds and white cards for readability.
  • Poppins font for a modern, clean look.

Screenshots:

Desktop view: RentMeBike READ ME:

Seed: This project is built as a responsive site for a fictional bike rental platform called RentMeBike. The site demonstrates HTML5 semantic structure, CSS3 layout (Grid + Flexbox), accessibility compliance, and CSS-only interactive components.
It is designed to fulfill the requirements of an HTML + CSS assignment.

Design Rationale:

• Layout:

  • Header: Logo + navigation aligned with Flexbox for responsiveness.
  • Services Section: Grid layout for service cards, responsive for mobile, tablet, and desktop.
  • About & Contact Sections: Centered text for readability.

  interactivity:

  1. Hover effects on service cards for user engagement.
  2. Custom checkboxes and radio buttons in forms.
  3. component for FAQ or expandable sections.

• Form:

  • Includes text inputs, checkboxes, radio buttons, dropdowns, a textarea, and a submit button.
  • Fully labeled and keyboard-accessible.
  • Visual focus indicators and hover states for better accessibility.

• Colors & Typography:

  • Green accent color (#4CAF50) for branding and interactive elements.
  • Light gray backgrounds and white cards for readability.
  • Poppins font for a modern, clean look.

Screenshots:

Desktop view: