The web application is a photo storage service and you can browse photos. It is already working but it does not look very good. I have had a graphic designer create a design for me and your job is to implement it in HTML and CSS so it looks like it is supposed to.
The current design and the new design is in the attached screenshots.
Here is what you get from me:
- An already running web application
- 5 small HTML files used like templates, a little like handlebars
- 1 CSS file
- 1 JS file
- Access to upload HTML, CSS and JS directly to production and see the result. This is done with Azure Storage Explorer and cannot be done with FTP or equivalent. It is easy though.
There are certain non functional requirements for this design:
1. It must be fast! Not only to load, but also to render for slow browsers and clients. So it is essential to limit the amount of frameworks.
2. No bootstrap and no jquery. No script based layouts. You must use "minicss" (already installed)
3. Use the icons from "minicss". If they are not enough, the use small images that you can also upload.
4. It should be responsive (already supported by minicss, it works like bootstrap) and should be possible to display on the phone. But the emphasis is on desktop size screen, so you will not get a lot of review and requirements on the phone view.
5. Currently CSS is inline and in the HTML and also in "[login to view URL]". By the end of the project, all your css that is possible to move, must be moved to the single "[login to view URL]" file and it must be structured and named nicely.
6. Do not use fontawesome and do not use custom font.
The goal is visible from the attached mockup but for your convenience, here are the main tasks involved in this project:
1. Reformat the folders list.
2. Create indentation on sub folders
3. Change how it looks when dragging a folder
4. Make a nice inner dialog when pressing "edit" or "delete" next to a folder (not on mockup)
5. Make a nice inner dialog when creating a folder (not on mockup)
6. Change the look of the rectangle dragged to select images
7. Change how it looks when an image is selected
8. Change layout (spacing) between images
9. Make the adjusted view where thumbnails are smaller
10. Make the inner dialogs that show progress
11. Layout is full screen, so the left bar will be shown in the very left side of the screen
This is not a complete list, but it comes close. There can be other subtle things. Like if you put edit button on top of the title text or the layout jumps when text becomes bold. Any such things will be regarded as errors and must be corrected.
If it looks good, you won't have to do revisions.
But if a long title etc. breaks the design, then it will be regarded as an error and there will have to be some iterations of revisions.
Background about me:
I am a web developer with 20 years experience, but not specialized in frontend design. I have made and implemented many websites and web applications, but more backend than frontend.
Hi there, I will make your CSS in correct form, I know i have to remove all the inline CSS, and i can accomplish your all mentioned tasks in the points, Please come on the chat. Thanks
Hi, I am a front-end and back-end developer and I can do your job as specified above you may grant me this opportunity to prove my professional skills to you and to the community of freelancer. Thanks Abdullah
Will try to fixed all your site issue as i need to make you fully satisfied not because it my first project as freelance with my professional job but really appreciate that you gave a chance to me.