Photoshop PSD to HTML5
- or -
Post a project like this1897
£50(approx. $63)
- Posted:
- Proposals: 14
- Remote
- #2269970
- Awarded
Angular, Typescript, Angular Material, NgRx state management, RxJS, HTML, SCSS/LESS, WordPress
Cebu City
Top rated PHP Web Development | WordPress | Magento | Drupal | OpenCart | PrestaShop | Joomla
Leicester
Website Designing, Website Development, Mobile Application, Graphic Designing, Digital Marketing (SEO, SMO, PPC),
Bay Minette
2072635706041050754131443614797191740745176144417859642070028231486123854362457602
Description
Experience Level: Intermediate
Estimated project duration: less than 1 week
We require the conversation of a single webpage from Photoshop PSD format to HTML5. Please note, this is for a home hobby project, and not a commercial organisation. The finished page will form the template for a regular newsletter.
The layered PSD file requires converting to the latest HTML5/CSS3 standards, and the page requires the freely available Jssor image slider (jssor.com/slideshow) to be included. Other options for the image slider can be suggested by the developer. Ideally the page should be compatible with the largest range of current day browsers as possible.
Conversion should be undertaken pixel perfect (ie the finished HTML file should look identical to the PSD), and please note that TWO CSS files are required, one for Desktop and one for mobile devices. For the desktop, the screen should adapt to a minimum screen width of 1024, adapting for 1200px and 1500px.Anything over 1500px 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. In essence, we want to ensure a minimum width on desktops, to avoid Windows and Mac computers displaying the phone style, and will (through PHP scripting) load the most appropriate CSS file for the page.
There is no PHP or backend programming required as part of this project. All page assets should be linked with relative file paths from the domain root directory. The jQuery.lazy plug-in (http://jquery.eisbehr.de/lazy/) should be use to be display images in a lazy load. We welcome input from the developer on the best way to display both a slideshow within the space allocated on the page, but also giving the viewer the ability to run the slideshow full screen.
While we fully accept it is not possible to stop those in the know from downloading images, we are required as part of this work to implement a process to reduce the chances of images being stolen. As a result - ALL JPG/PNG images will require a 1px by 1px transparent png being stretched and 'overlaid' on the image space.
The page design is comprised of a series of blocks (which can translate to content area DIVs) which can be placed in any order. The code should clearly mark where one block finishes and the next starts. The CSS should also be designed in such a way as to ensure that the positioning of one block is not dependent on the previous block.
There is a requirement to embed a YouTube or Vimeo video player in the blocks. As specified in the script, this should automatically adapt to the width of the block.
All javascript, css and third party resources should be locally hosted and not remote hosted in anyway. We are happy for the winning developer to use Bootstrap, or similar framework. The latest versions of all third-party scripts should be used, specifically 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 full and complete documentation on the SASS files.
It should be noted that any responses to this posting 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. Within any bids, you should demonstrate that you have read and understood these proposals, and give an estimation of the delivery time.
Successful completion of this project is likely to lead to conversation of further pages as the project develops. Please feel free to ask questions. We can provide a PNG preview of the PSD to serious developers.
The layered PSD file requires converting to the latest HTML5/CSS3 standards, and the page requires the freely available Jssor image slider (jssor.com/slideshow) to be included. Other options for the image slider can be suggested by the developer. Ideally the page should be compatible with the largest range of current day browsers as possible.
Conversion should be undertaken pixel perfect (ie the finished HTML file should look identical to the PSD), and please note that TWO CSS files are required, one for Desktop and one for mobile devices. For the desktop, the screen should adapt to a minimum screen width of 1024, adapting for 1200px and 1500px.Anything over 1500px 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. In essence, we want to ensure a minimum width on desktops, to avoid Windows and Mac computers displaying the phone style, and will (through PHP scripting) load the most appropriate CSS file for the page.
There is no PHP or backend programming required as part of this project. All page assets should be linked with relative file paths from the domain root directory. The jQuery.lazy plug-in (http://jquery.eisbehr.de/lazy/) should be use to be display images in a lazy load. We welcome input from the developer on the best way to display both a slideshow within the space allocated on the page, but also giving the viewer the ability to run the slideshow full screen.
While we fully accept it is not possible to stop those in the know from downloading images, we are required as part of this work to implement a process to reduce the chances of images being stolen. As a result - ALL JPG/PNG images will require a 1px by 1px transparent png being stretched and 'overlaid' on the image space.
The page design is comprised of a series of blocks (which can translate to content area DIVs) which can be placed in any order. The code should clearly mark where one block finishes and the next starts. The CSS should also be designed in such a way as to ensure that the positioning of one block is not dependent on the previous block.
There is a requirement to embed a YouTube or Vimeo video player in the blocks. As specified in the script, this should automatically adapt to the width of the block.
All javascript, css and third party resources should be locally hosted and not remote hosted in anyway. We are happy for the winning developer to use Bootstrap, or similar framework. The latest versions of all third-party scripts should be used, specifically 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 full and complete documentation on the SASS files.
It should be noted that any responses to this posting 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. Within any bids, you should demonstrate that you have read and understood these proposals, and give an estimation of the delivery time.
Successful completion of this project is likely to lead to conversation of further pages as the project develops. Please feel free to ask questions. We can provide a PNG preview of the PSD to serious developers.
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
-
Richard, Could you please provide me with the PNG of the design please so I can provide you with an accurate quote ?
-
Hi Richard,
Could you provide me with the PNG of the design please so I can provide you with an accurate quote!
Are you aware that while the finished page may be used for a template for a regular newsletter, many of those "features" will not be available, as email HTML is still quite limited in functionality.
Cheers,
Lewis
757256757041
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