Design two page quizz web app !

- Design two pages for an online quiz web app - Pages need to be designed with Flat-UI [login to view URL] - Pages need to be responsive (should work on phones, tablets and desktops). Can and should have different layouts for all of these such that all the information below is accurately and pleasantly displayed. - First page - Login Page should show: = A header and footer - header should contain brand - header should contain nav - one flat color background with a login form centered on screen - login form should have email, password, action button and "forgot password" link - if "forgot password" link is pressed the form should change to show only email field and action button to "reset password" - Second page - Quiz page should show: = A header and footer - header should contain brand - header should contain nav - nav should show the name of the user logged in - nav should have dropdown that allows user to change profile ( first name, last name, email, username, password, checkbox to confirm if quiz results should be emailed ) in the dropdown ! - nav should have option to log out = A Question & Answers section - a quiz question (each question can be up to four sentences ie. small paragraph) - clearly emphasize that this is the question - four (4) quiz answers Note: answers are single choice ( you can only pick one answer out of the four), (each answer can be up to four sentences ie. small paragraph), clearly emphasize that this is the answer section - action button to go to the next random question (please pick a funny tag line for the call to action something like "Give me another one!") - if the incorrect answer has been chosen highlight the correct answer (with something green) and the answer that was chosen (with something red) - an explanation section - this is a small paragraph of text that will appear only after the question has been answered and only if an explanation is attached to the question = A Settings section (can be part of nav or footer) - switch to selet language (English or French) - switch to select level (Basic or Advanced) - switch to toggle ON/OFF if the app should show the correct answer once the question has been answered wrong = A status section (can be part of nav or footer) - a running tally of correct / incorrect answers ( ex. a label or image with the number 30 for incorrect answers highlighted by the color red and the number of correct answers highlighted by the color green) - a small area for a one-liner (ex. "You need to focus on your studies!" if you have more wrong answers or "You are going to ace the exam !" if you have more correct answers please use color to emphasize a positive vs negative ) - section should be easily visible for the user such that the user always knows how many questions he's answered correct and how many incorrect. Deliverable - two HTML files (one for login page and another for the quiz page) - any custom CSS/JS files ( that are NOT part of Flat-UI or Bootstrap 3 ... see details in Testing and Review Process) Testing and Review Process - the files you provide will be copied into the folder generated by [login to view URL] (the same place where the package's [login to view URL] resides) - since Flat-UI already contains bootstrap and the flat-ui css please tailor your development around this and do not include any css/js/html from bootstrap or flat-ui in your deliverable