Create splash page-responsive website

WHAT WE ARE TESTING

• Coding proficiency, DRY (don't repeat yourself) methodology, commenting, knowledge
• Cross Browser Compatibility
• Multi-device (desktop/phone) Compatibility & Accuracy
• Photoshop to Web Browser visual translation (we are expecting the web layout to look as close to the PSD file as possible).
• We are interested in Seeing how you implement a foundation or framework as a baseline and work from there. IE Bootrstap, Foundation from Zurb.

REQUIREMENTS (DOs + DONTs)

• Use HTML5, SASS (CSS) programming languages
• Write efficient, reusable HTML, CSS styles and code (CSS, JavaScript/jQuery) that can easily be replicated on the page if needed.
• Use Google Fonts (download and install from Web)
• Use appropriate font icons (i.e. Font Awesome, Typicons)--download and install from Web
• Do not use inline styles
• Do not grab a pre-built theme (WordPress, Bootstrap). We want this site built from scratch to test your proficiency.

VISUAL & INTERACTIVE INSTRUCTIONS

Please open the attached Photoshop file. The Photoshop design contains numerous rows. Each row has a Group Layer assigned to it. Please refer to the names of the Group Layers when reading the below instructions. Do not hesitate to ask any questions if any of these instructions are unclear.

(LAYERS)

MAIN BANNER

• Main navigation items (INTRO, MONITORING, SYSTEM DESIGN, CONTACT) are treated as bookmarks-when clicked, they'll guide the user to the appropriate sections below.
  • INTRO: starts at "What We Do" row
  • MONITORING: starts at "RF Monitoring" row
  • SYSTEM DESIGN" starts at "RF System Design" row
  • CONTACT: starts at "Newsletter" row
• Visual design shows what the hover/down state of a selected navigation item appears like (green text with green line). 
• Main navigation items including trait logo is a sticky nav item. The nav will always need to be present as the user scrolls the page. You can see a similar treatment on our website: traitstudio.com
• WE ARE TRAIT with down arrow: this is a clickable element, when pressed, moves the page downwards to the INTRO (What We Do) section.

INTRODUCTION

• Just copy

TECHNOLOGIES & LANGUAGES

• Technologies and Language verbiage are buttons that toggle different types of information.
• When either TECHNOLOGIES or LANGUAGES are clicked, the image and text below will fade in.
• Feel free to change the verbiage for each section so that we can visually see a difference when the two sections are toggled.
• With that said, you can keep the image of the devices for both sections.

MONITORING & SYSTEM DESIGN SECTIONS (THESE TWO SECTIONS ARE IDENTICAL, JUST VISUALLY STACKED ONTO ONE ANOTHER)

• Introduction Rows: just text and images
• Example Rows
  • These rows will be a series of images that when clicked, a modal window will be presented to the user that enlarges each photoand allows for additional text next to the image. 
    • It is up to you how you want the modal to appear and animate
    • The close out the modal, the user should be presented with a "X" or click outside the window area.
  • The user can see more images by clicking on the right and left arrows
    • Right and left arrows should appear at appropriate times.
  • You can place 8-10 placeholder black boxes in this row so that we can test the efficiency of the scrolling feature and modal you implement.
  • The green box with plus sign is the hover state

NEWSLETTER

• Just visuals and text for now.
• Make sure the subscribe element is a button
• We have an account with Campaign Monitor: https://www.campaignmonitor.com/?utm_source=google&utm_medium=cpc&utm_campaign=2014-USA-Branded-Exact&utm_content=campaign-monitor&utm_term=campaign%20monitor-e-60748452486&gclid=CjwKEAjwxYGuBRCtoqjkrIPDqDwSJAAnd-rCGbQM4f3VKWff50xzVgrTqkMy9Ci47UD4UUKjZaLwrRoCJFHw_wcB where this field will eventually be tied to our newsletter.

LEADERSHIP

• Just visuals and text
• Social media icons:
  • Hover states are the colored block versions.

CONTACT

• Lets Talk Form Field
  • Have forms sent to: [email protected]
• Map
  • Try and replicate the map we have on our site: http://traitstudio.com/Contact.aspx but use Google's API instead.