Skip to content
Ride For Life Marketing (A)
CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
design files

Ride for Life marketing page

Website live at:

Background and purpose

SAFE serves mothers in Uganda to improve maternal and child survival. One of the biggest obstacles women face while pregnant is getting to a health facility to safely deliver. Most people do not own a car or a motorcycle, and a majority live greater than 5 km from a health center (an hour by foot). SAFE provides motorcycle ambulances to improve this problem, but mothers have a hard time contacting them in time.

My Lambda School Build Week team built an app to solve this problem by identifying and sending a text to the nearest motorcycle ambulance driver. My role was to build out a marketing page that raised awareness for the app. You can read our full Project Brief here.

Feel free to use this code to make your own marketing sites!

Tools used

I styled this site using HTML, CSS including a LESS compiler, and vanilla JavaScript for my components.

Primary audiences

This app contains two user types. A ride requester (pregnant mom, or their caregiver) and a trained motorcycle ambulance drive. I'll assume that these are the two same users who might be visiting the website to learn more about the app.

Secondary audiences

Other visitors to the website could include: SAFE donors, and people with an interest in non-profits focused on Africa or healthcare.

Metrics and impact

  • Clicks to the 'Login' button that links over to the React app the team is building.
  • Clicks to other tabs on the website.

Key deliverable

A multi-page marketing website that explains Ride for Life to prospective riders and drivers and is responsive on both mobile and desktop.

Must have features

  • Mobile, desktop, and tablet responsivity (using media queries)
  • Home page
  • About us page
  • Links to Ride for Life team app

Nice to have features

  • [] A display that calculates the number of rides that are taken (clicks or another data metric?) in realtime.

Project milestones and timeline

  • Sunday, 4/14: Draft design files ready; Ideas for what parts can become components clear
  • Monday, 4/15: Marketing landing page scaffolded with common layout structure implemented. Mobile screen width features starting to come into play.
  • Marketing site including all pages fully responsive to Mobile and Desktop screen widths. Marketing "Login" call to action links user to the Deployed React app login screen.
  • Wednesday, 4/17: Marketing site replace placeholder copy with description of product. Be creative here. Really try and describe your project, your project's features and of course have a cool "About Us" page with relevant copy that describes your team members and their roles. All marketing site pages fully responsive and built out, may still need to polish up styling and layout.
  • Thursday, 4/18: Project freeze after 11am PST. Clean up!
  • [] Friday, 4/19: Demo Day.

Project partners

  • Jacob Brennan, Team Lead
  • Max Trestman, developer
  • Jacob Brennan, backend developer
  • Yi Lun Weng, frontend developer
  • Terrell Tullis, backend developer
  • Daisy Mesa, web design developer
  • Kimberlee Johnson, web design developer
You can’t perform that action at this time.