Responsive HTML Pages for Mobile : $30

General information for the business: Web Dev
Description of requirements/functionality: I need a Responsive Web Application prototype; primarily for mobile screen size: 4" to 9" on Android & IOS.
HTML5, CSS3, Bootstrap, JavaScript, Font Awesome for Icons. No other libraries.

Step 1:
(a) Create layout as indicated in Screen-1.
(b) Phone Icon in DIV - No action
(c) Chat Icon in DIV - No action
(d) Service Icon in DIV - Check Step-3
(e) Upload Icon in DIV - No action


Step 2:
(a) When Screen-1 is scrolled, do the following:
(1) Reduce the height of "Banner DIV" - as inidcated in Screen-2
(2) Reduce size of "Avatar Image" & move it up - as inidcated in Screen-2
(3) Reduce size of "4 Icons" & reposition them - as inidcated in Screen-2

When scrolled back to top, realign everything to Screen-1


Step-3:
(a) When "Service" icon is clicked, show Screen-3.
(b) For transitioning, use SLIDE LEFT / SLIDE RIGHT effect
(c) When any of the options are tapped, show Screen-4


Step-4:
(a) Layout is same as Screen-3
(b) When any of the options are tapped, show a confirmation modal window with buttons [Cancel] [Confirm Request]
(c) If [Cancel] button is clicked, Remove the modal window
(d) If [Confirm Request] button is clicked, Remove the buttons & Show the message "Request Registered Successfully"

Thats it!

Notes:
1. UI, Positioning & looks have to be fantastic.
2. Its a mockup hence no backend script for data submission is required
3. Use the following fontawesome icons:
--> Phone: http://fontawesome.io/icon/phone/
--> Chat: http://fontawesome.io/icon/comments-o/
--> Service: http://fontawesome.io/icon/file-text-o/
--> Upload: http://fontawesome.io/icon/upload/
4. Scrolling should be non-jerky
5. Essentially there are just 2 screens, its a small & simple project if you know HTML5, CSS, Responsive very well.
Extra notes: