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

Completed Posted 7 years ago Paid on delivery
Completed Paid on delivery

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.

Bootstrap CSS HTML5

Project ID: #11678367

About the project

11 proposals Remote project Active 7 years ago

Awarded to:

Pan1k

Hello, I'll be glad to help you. I have 5 years experience in websites development. I have practical experience in use different technologies, such as HTML4/5, CSS3, Twitter Bootsrap, SASS/SCSS, javascript, jquery, res More

€100 EUR in 3 days
(10 Reviews)
4.4

11 freelancers are bidding on average €89 for this job

sflogics

Hi, We’ve had a good look at your project description and we’re very interested in providing serivces. Here are few technologies which are dealing at the moment. But we are open new technologies. Platform: TFS, More

€80 EUR in 1 day
(12 Reviews)
4.8
digimuflon1

WEB Developers Digi Muflon is a leading software development company providing the highest quality information technology services and solutions at low cost to a broad spectrum of clients. We provide value-added info More

€88 EUR in 1 day
(9 Reviews)
3.2
alpha2alpha

Hi sir, i have read your description and i am interested in your project. Spare me some time that we can speak about project. Waiting for your positive response

€200 EUR in 3 days
(4 Reviews)
3.1
dolevmnsn

I'm an experienced web developer, and I would be very happy to be awarded to do your project. I can assure you will be happy with the final result. Feel free to write me if you have any questions :)

€50 EUR in 3 days
(1 Review)
1.7
shiekhfaysalalom

Dear Sir, i am working with website design in your required platform so long and its like a kiddo work for me now so u can trust me with your project and i will provide your project in time for sure --thanks

€34 EUR in 3 days
(1 Review)
0.0
engrhumna

can you please provide me with this project? i am microsoft certified in html and css and want to start my career in freelancing. if i am unable to provide u the desire work, you are permitted to pay no fees.

€55 EUR in 10 days
(0 Reviews)
0.0