[Feature] Business Owner "Business Claim Badge" Static HTML/CSS Mockup Page Example for Owners Portal

[elchris]

User Story

Once a Business Owner has claimed and verified their ownership of a given business, we would like to make a public-facing URL on the Owners' Portal which will showcase the following:

• "Business Name" has been verified by RebuildBlackBusiness.com to be owned by "Owner First/Last Name"
  • "Business Name" would be a link to their "Business Profile Page".
• Some area showing the Selfie they used to claim the business
  • I have attached a sample Selfie. Please try to find some client-side trickery to wedge just about any image size into a finite-sized area of the page. Scaling it down to a fixed width and a proportional height may be okay. To avoid the risk of losing EXIF data, I basically want to avoid doing any post-processing of the original image file which was uploaded by the user, and to try to reference that original image everywhere.
  • It may actually be worth making two mockups:
    • One Mockup for "a Horizontal Selfie"
    • One Mockup for "a Vertical Selfie"
    • I can detect the orientation of the image server-side and serve-up the corresponding mockup!
• Some area showing a QR code which would take someone to the Business Profile Page
• Some area showing the Business's full address:
  • 1234 Main Str., Austin, TX 78759
• Feel free to add any other information you deem pertinent while keeping the design appealing.

Once that's built, I will integrate this Mockup into the Owners' Portal application.

Challenges

• We do not have any official design for this. Feel free to just do your best, we can always improve things later.
• We need this Mockup as soon as possible.

Acceptance Criteria

• There are actually two mockups: One for a "horizontal selfie" and one for "a vertical selfie"
• The Page is purely HTML and CSS. If there is some embedded JavaScript to help format some things, it's fine.
• The Page has what I described above.
• The Page should be compatible with the look and feel of the https://www.rebuildblackbusiness.com/ site
• The Page should look good when printed
• The Page should fit on "a Single Page" when printing directly from the web browser

Sample Selfie: Big Image, must be handled gracefully on badge page