96 hrs AppXpress Wordpress - Marketplace Responsive Update pt. 3

Welcome to "96 hrs AppXpress Wordpress - Marketplace Responsive Update pt. 3 ". In this challenge we need your help to update existing appxpress.com pages.

The goal of this challenge is to create new Video pages and also to update existing FAQ pages theme based on storyboard.
Page Requirements and Instructions :

Overall
- Setup instruction is provided in forum, please use also use attached wordpress zip file
- Since Storyboard PSD file too big, please download it on google drive and link is provided in forum
- Since source on github could not be accessed, please downloaded Latest wordpress theme source in forum
- Header, main navigation, and footer should be as existing theme. We will update them on next phase
- Premium (purchased) font on storyboard, (i.e : Myriad Pro) should replaced with existing web font
- All content should be editable in wp admin
- Responsive view should be handled on client side (css media queries) as existing page work
- All images should be treated as content and not a CSS image background
- Footer text and icon links should be editable in wp admin
- the solution will work responsively across devices and honor the existing framework installed with the theme
- the page requirements are relatively not hard, please note to pay attention to the submission deliverables below

01. Video Pages
current page : none
Storyboard :
- 09-JM_videos.psd (use recent modifed file)
- 09-JM_videos_tablet.psd
- 09-JM_videos_mobile.psd
Features :
- Carousel item should be managed easily
- Video will be hosted on youtube
- Video should be easily managed on wp-admin
- Video thumbnail should be displayed automatically
- Video description should be managed on wp-admin
- Video order should be easily to re-ordered on wp-admin
- Clicking on video thumbnail or will play it in a overlay, so please use Video Lightbox plugin which is also used on home page
- Clicking on button (contain 3 dot) will link to '#' for now, we will implement it later. Don't forget to create mouse hover state
- Please add a small mouse over effect (background changes, border changes, etc)
- Currently design only show 8 boxes, but we want this new page support more than 9 boxes. we may need pagination here

02. FAQ Pages
current page : https://appxpress.com/faq/
Storyboard :
- 05-JM_V2_FAQs-Desktop2.psd
- 05-JM_V2_FAQs-Desktop2Detail.psd
- 05-JM_V2_FAQs-Tablet2.psd
- 05-JM_V2_FAQs-Tablet2Detail.psd
- 05-JM_V2_FAQs-Mobile2.psd
- 05-JM_V2_FAQs-Mobile2Detail.psd
Features :
- Featured story should be managed easily from wp-admin, you may manage this as a category
- These pages has two template, one is for list and the another is for detail
- When visitors hover mouse on a box, background should be changed to blue and a read more text should be displayed smoothly (with a small animation/transition)
- Currently design only show 9 boxes, but we want this new page support more than 9 boxes. we may need pagination
- Clicking on box will open FAQ detail page
- FAQ items are grouped by  categories, and categories should be managed easily on wp-admin
- Clicking on blue arrow next to category name should show category list in a dropdown list. Storyboard does not have dropdown, so please create it with look and feel style
- FAQ items under same category will be listed on right sidebar, see detail page storyboard
- Storyboard for detail mobile view is not available. We've simplified the FAQ page to be all on one page. A user can jump to the different FAQ content categories w/ the category drop down. The FAQ questions will be expandable and collapsable

Required Wordpress environment and plugins:

- Wordpress 4.2.3 https://wordpress.org/download/
- WooDojo http://www.woothemes.com/woodojo/
- Woo Sidebars http://www.woothemes.com/woosidebars/
- Video Lightbox plugin https://www.tipsandtricks-hq.com/wordpress-video-lightbox-plugin-display-videos-in-a-fancy-lightbox-overlay-2700 

HTML/CSS Requirements

- Your HTML code must be HTML5 compliant
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors.
- The generated CSS file from LESS file should be validated for errors
- Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Label all CSS or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments. 

Browsers Requirements

- Tablet browsers
- Mobile Phone browsers
- Latest Safari Mac & PC
- Latest Chrome Mac & PC
- Latest FF Mac & PC
- IE9+