Build a Webpage with Material Design Light

Welcome Freelancers! 1) This project is to create for us a set of template html/js/css files. We will use your files to build the front end of our web app (I am a developer, and so is my team). 2) We want to build a relationship with an individual front end dev, not a firm. 3) We are viewing this as a "trial" for devs. We are looking to build a long term relationship and are open to eventually hiring someone full time. 4) We expect this task to take approximately 3 days of development to finish, so we would like you to finish the project 5 working days after we select you. 5) Our target rate is $25/hr and our target budget is $600. Detailed requirements: 1) Use Google's Material Design Light style framework ([login to view URL]) 2) Deliver a single html file, js file, css file, and any images. The page should look like the attached mock-ups. 3) All dynamic data must be set with a mock-API call to show how your template handles the animations required for loading data (please use google apps to reference your decisions). The real API calls will be developed in later projects, so the functionality you develop for this project just needs to act like it loading data so we can see how your template structures its javascript callbacks and animations. 4) You only need to implement one page in the pop-open menu at the left, accessible via the “hamburger button” at the top left. 5) Make all reused colors easily changeable at the top of the CSS file. This includes all button states, link states, and so on. 6) The column-row “grid” in the center of our example screenshots is the main way our app organizes data. We display details of grid rows on the darker bar at the right of each page; we call that bar the “info bar.” The grid we are working on for this front end streams large amounts of data (hundreds of thousands of rows) to the front end. As this grid scrolls, it loads new data. Bonus points if you make some callbacks and loading animations for this scroll loading. 7) The info bar is closed by default. Clicking a grid row opens the info bar. Additionally, the (i) icon at the top center toggles the info bar. 8) At screen width of 1440px and smaller the info bar “pops over” the grid view. At larger resolutions, the info bar attaches to the side of the grid. 9) The info bar scrolls independently of the grid. Reference Google Drive for similar functionality. 10) The minimum width of the page is 1000px. Ensure that on smaller screen devices, zooming out does not effect formatting (eg, the viewport scale is appropriate and the page does not have hanging whitespace). If you have any questions about the project details or otherwise need clarification to create your proposal, ask away. I will be available GMT timezone business hours. We are looking to working with you!