Convert Vector model to responsive website in pure HTML5, CSS3, and Bootstrap -- 2

Hello,   We need someone to design a webpage reproducing the attached [login to view URL] (also in vector) into a responsive website in pure HTML5, CSS3, and Bootstrap.   Overall design:   1. We want the page look exactly like the design (respect spaces and alignments). Please look the picture [login to view URL]   2. Resolution and responsiveness: The page must be viewable on mobile devices 360x640 minimum. Desktop minimum resolution will be 1280*1024. We want it to behave exactly like the slack chat app. Please check the video [login to view URL] that shows how we want it to behave. I made a second design to show how the design behave when all bars are closed check chat-full.png.   3. Scrollbars: Please look at the scrollbars of the video scrollbars.mp4. We want it to behave and look exactly like this. If the content of the side-bar doesn’t go higher than the page the scrollbar disappears like in the video. Same if we zoom on the page, scrollbar should appear to make the content of app-menu and space-menu scrollable. Style of scroll bars should look exactly like in the [login to view URL]   Details of Red Areas: 4. Must be possible to add divs inside sections (Space-menu, App-menu, Top-bar, Content, Side-bar) and keeping it centered and well aligned. divs will be generated by code   5. Top-bar: Logo, title + All icons will be separated divs containing images and offer the abilities to add other divs inside those div   6. Icons: All icons must be in SVG and their colors assigned by css.   7. App-menu: The App-menu can be closed by clicking the top left icon in the Topbar. The Content Zone will fill the empty space. The icons in App-menu will be placed under the Yellow icon in the space-menu. Please check the [login to view URL] to understand what happen when we close the App-menu   8. Side-bar: Can be closed by clicking the top right cross (facing the #chatname). Inside the Side-bare there are modules. Modules can be moved to be reorganized. Please look [login to view URL] for green areas that can be moved and re-organized. Please give us a comment on which code is allowing to move those modules because we will need on our side to make an option to allow it or not depending on user permission.   9. Input-bar: This is an input field stacked to the bottom page. It means it should never move with the content and be full responsive as we close or not Appmenu or Sidebar. The content should not go under it. It should be responsive. The input message bar will become higher as we add backspaces or write paragraphs. Check for [login to view URL]   Requirements: - If you must add some empty divs or other, name those elements regarding their position. Do not use the names “empty” or “space” - The code of the website must be clean and easily understandable   Rules of work: · Be sure you understand all the point above, check all the videos before accept the job. · Open source code forbidden. Your code must be original and have no copyrights whatsoever. The copyrights will be fully transferred to me · The design [login to view URL] is made in vector in illustrator. We will give the file once the freelancer is chosen · We need you to give a clear deadline for this job. If the job takes more times than expected, I'll cancel the job. If it's just some little bugs i can give you 1 more day · We release the money only when all the points above are fixed and that we get the zip file with all files. No intermediary Milestones will be made. Full amount will be sent once the code is checked and page working. · We prefer to work with one freelancer instead of agencies. If you are a group of people, or make somebody else work on the project please tell us.