Coding proficiency, Coding proficiency, DRY (don't repeat

Coding proficiency

Assignment Help Web Project

Reference no: EM13997026

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: https://traitstudio.com/Contact.aspx but use Google's API instead.

Reference no: EM13997026

Questions Cloud

What types of changes are impacting our political culture : Chapter One's discussion of American Political Culture identified important core values that have served as important elements of American History. Which of these core values is the most important in today's society? Do you think any of them have dec..

Should you take the cash over the health insurance : Suppose your employer offered you $4,000 in cash instead of health insurance coverage. Health insurance is excluded from state and federal income taxes (let's ignore Social Security and Medicare wage taxes for now). The cash would be subject to state..

What type of disciplinary actions would you take : Do you consider Newton a problem employee or would you consider this a problem situation? Explain your response. What type of disciplinary actions, if any, would you take against Newton

Higher than the canadian inflation rate : If the inflation rate in the United States rises to a point that it is higher than the Canadian inflation rate, all else equal, predict the impact on: 1. the U.S. demand for Canadian dollars? 2. the supply of Canadian dollars? 3. the equilibrium valu..

Coding proficiency : Coding proficiency, DRY (don't repeat yourself) methodology, commenting, knowledgeCross Browser CompatibilityMulti-device (desktop/phone) Compatibility & Accuracy

Draw the extensive form of this game : There are three players, labeled 1,2 and 3. At the start of the game, players 1 and 2 simultaneously choose between playing “A” and “B”. If they both choose “A” then the game ends and the payoffs are (1, 0, 0) If player 3 guesses correctly, then he a..

Have law enforcement capabilities been hindered or improved : Have law enforcement capabilities been hindered or improved because of the implementation of U.S. fusion centers? Explain. From the law enforcement perspective, how do you think policing has changed over the past decade because of the terrorist thre..

Why it was important to the decision process : Identify a capital budgeting decision that you are familiar with - how was the final decision made? What relevant factors were considered during the decision process? Were any important factors omitted from the decision process?

User Account

All Pages