Parallax Mock-Up

The purpose of this mock-up was to create a site with similar features to the ones used in Michael Hyatt's website. Features such as the parallax background image effect, side navigation menu, etc.

Table of Contents

1. Demo
2. Languages Used
3. Features
   • MVP Features
   • Weeds & Flowers
4. Author
5. Acknowledgments
6. Notes

Demo

Languages Used

HTML5
CSS
JavaScript

Features

The following is a list of features used to create a more responsive design. Weeds & Flowers are a list of features deemed as extra. All unchecked items are features yet to be added.

MVP Features

• A fixed top navigation bar with a place for a logo, logo text, navigation links, and side menu button
• Side navigation bar, mainly for smaller screens without space for a top navigation bar
• Parallax background images
• Sections with : Header, text, and buttons (Optional Logo Header based on MichaelHyatt.com)
• Pre-footer section for links
• Mobile first responsive

Weeds & Flowers

• Top navigation bar background color change on scroll
• Opacity when using side navigation bar
• Buttons that zoom and shadow on hover
• Need to fix banner text for larger screens without changing mobile display
• Color scheme and font
• Search bar feature
• Banner subtext flip marquee feature
• Menu button animation
• Scroll to top button
• Social media icons

Author

Marjorie Etienne
@schmarj3
MarjorieEtienne.com

Acknowledgments

• WhollyCoders - This is a project that was created for WMI. Inc's Wholly Coder internship
• MichaelHyatt.com
• W3Schools

Notes

The menu button was created using Adobe XD