Landing page for 2018 Honda Accord.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
README.md
index.html

README.md

2018 Honda Accord

https://toddcf.github.io/fzha/

2018 Honda Accord landing page

Sample landing page I built for the 2018 Honda Accord as part of the job interview process for fusionZONE Automotive, LLC. (And yes, I got the job!)

Notable Features

  • The "Art of Evolution" cards change order inside their flexbox depending on screen width. This way, the image is always on top when stacked vertically, but on the right when side-by-side.
  • Header height is adjusted to include nav at the bottom of the page no matter what viewport size.
  • If the background video in the header doesn't load, there is a fallback image.

Things I Would Do Better Today:

  • Use text instead of a PNG logo for the word "Accord" in the H1, for SEO reasons.
  • fadeInRight each button ONE AT A TIME, after a delay. (DO NOT use Waypoints, as there is no need to trigger something on scroll that is at the top of the page.)
  • Contain navbar contents inside a custom 1920px-wide, centered container.
  • Have contact form cover only half of the image on large screens. Also, take another pass at the contact form in general to ensure best practices are being used for UX and accessibility.
  • Use Honda's preferred Avenir font for everything. (I didn't know about brand compliance before taking this job.)