
PSD to Bootstrap HTML5 CSS3 Standards
- or -
Post a project like this2631
£30(approx. $40)
- Posted:
- Proposals: 5
- Remote
- #2168674
- Awarded
Description
Experience Level: Entry
Estimated project duration: less than 1 week
To take two PSD files that share a common header and footer and chop/convert to the latest HTML5/CSS3 standards. Both styles requires the freely available Jssor image slider (jssor.com/slideshow) to be included. Navigator tabs within the header require a roll-over colour change, and on one PSD, requires the main image to be positioned beneath the tabs.
Conversion should be undertaken pixel perfect, and TWO CSS files are required, one for Desktop and one for mobile/tablets. Both final HTML files should use the same CSS files. For the desktop, the screen should adapt to a minimum screen width of 1024, improving or 1200px and 1600px.Anything over 1600px should result in the page being centred on the window, with a grey background outside the content area.
The mobile CSS can use the same settings as the desktop file for any width 1024px or above, but below that should adapt the layout to display best on tablets and phones. On phones, the display should only be one column wide, with the tabs replaced by a drop down navigation menu.
There is no PHP or backend programming required as part of this project. Click on the subscribe button within the 'Newsletter' part of the page will be required to fire off an AJAX request through jQuery. This will return a JSON response of true or false along a text string. A DIV overlay (centred on the page horizontally/vertically with a shaded full height/width background) will then be displayed with the content of the text string. This should work correctly on both desktops and mobiles. The code to activate and deal with this should be contained in an external javascript file so that it can be called by both pages. All page assets should be linked with relative file paths from the domain root directory.
One of the PSDs is quite image heavy, either with single images or with pictures that are part of a slideshow. The jQuery.lazy plug-in (http://jquery.eisbehr.de/lazy/) should be use to be display images in a lazy load.
All javascript, css and third party resources should be locally hosted and not remote hosted in anyway. The latest versions of all third-party scripts should be use:
jQuery 3.3.1
Bootstrap 4.1.3
Final HTML AND CSS files should be fully commented. All converted files and assets should following a specified file structure. The use of SASS is permitted, subject to extensive documentation on the SASS files.
It should be noted that any responses that are obvious copy and paste or contain a majority of links will not be accepted or reviewed. We are looking for a developer that has read and understood the requirements and demonstrated this in his/her response. While speed is not critical, a quick and accurate turnaround would be welcomed.
Successful completion of this project is likely to lead to conversation of further pages as the project develops. Please feel free to ask questions.
Conversion should be undertaken pixel perfect, and TWO CSS files are required, one for Desktop and one for mobile/tablets. Both final HTML files should use the same CSS files. For the desktop, the screen should adapt to a minimum screen width of 1024, improving or 1200px and 1600px.Anything over 1600px should result in the page being centred on the window, with a grey background outside the content area.
The mobile CSS can use the same settings as the desktop file for any width 1024px or above, but below that should adapt the layout to display best on tablets and phones. On phones, the display should only be one column wide, with the tabs replaced by a drop down navigation menu.
There is no PHP or backend programming required as part of this project. Click on the subscribe button within the 'Newsletter' part of the page will be required to fire off an AJAX request through jQuery. This will return a JSON response of true or false along a text string. A DIV overlay (centred on the page horizontally/vertically with a shaded full height/width background) will then be displayed with the content of the text string. This should work correctly on both desktops and mobiles. The code to activate and deal with this should be contained in an external javascript file so that it can be called by both pages. All page assets should be linked with relative file paths from the domain root directory.
One of the PSDs is quite image heavy, either with single images or with pictures that are part of a slideshow. The jQuery.lazy plug-in (http://jquery.eisbehr.de/lazy/) should be use to be display images in a lazy load.
All javascript, css and third party resources should be locally hosted and not remote hosted in anyway. The latest versions of all third-party scripts should be use:
jQuery 3.3.1
Bootstrap 4.1.3
Final HTML AND CSS files should be fully commented. All converted files and assets should following a specified file structure. The use of SASS is permitted, subject to extensive documentation on the SASS files.
It should be noted that any responses that are obvious copy and paste or contain a majority of links will not be accepted or reviewed. We are looking for a developer that has read and understood the requirements and demonstrated this in his/her response. While speed is not critical, a quick and accurate turnaround would be welcomed.
Successful completion of this project is likely to lead to conversation of further pages as the project develops. Please feel free to ask questions.
Richard T.
100% (2)Projects Completed
2
Freelancers worked with
2
Projects awarded
60%
Last project
26 Jan 2019
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-

Is that your max budget ?
721219
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies