This layout is not original, it was borrowed from a great place, but, we don't want you getting the code from that place, so we're going to keep the source a secret. DO NOT TAKE CREDIT FOR DESIGNING THIS!
Re-create this layout from jpg files. The site should be responsive, and interactive. Anything not explicitly shown in the screenshots is up to you to decide.
- create a clone of the example site
- make all of the clickable links, buttons etc have a hover state (so users know they are clickable)
- The menu button in the top right should have a full screen pop-up modal, show in the screen shot
- When you scroll, the nav bar should pin to the top (screenshot 2)
- when you hover over the callout panels, the semi-transparent color should fade out to reveal an image (screenshot 2)
- text is up to you, it doesn't have to follow the example exactly
- images are up to you
- colors don't have to be identical, but they should follow along the same pattern (use different colors in yours where there are different colors in the example)
- Icons can be found in IcoMoon, fontawesome, or, you can leave them as blank circles, as a designer would usually give you what you need
You can grab placehold.it content for the images. http://placehold.it/ or, you can get https://placekitten.com/.
Lorem ipsum text can be found here:
- http://www.lipsum.com/
- http://baconipsum.com/
- http://forcemipsum.com If you have questions, chat with your mentor or program manager!
