You a bidding on a simple project to take a pixel-perfect PSD Photoshop file of a basic website layout (with no content) and create the single page layout/structure exactly as you see it in HTML5/CSS3. The PSD has been created on top of the 960 grid template, and is very well laid out and is detailed with a comments layer that can be hidden/shown to make it easy for the developer. The comments include all of the measurements required and all of the color codes so the developer doesn’t have to take the time to measure everything and check each color code. The 960 grid layer and guides can also be hidden/displayed to make it very easy to understand the layout. In the PSD I have also included empty transparent pink squares that should be converted to images and inserted where I would like div’s to be created for the layout. These empty square images will collapse on top of one another as the browser resolution is decreased, all the way down to the mobile level.
The boxed layout consists of:
- Top bar
- Header area
- jQuery dropdown menu
- Content area with resizable slideshow
- The layout must use the 960 Grid System ( [url removed, login to view] ) and be 100% responsive so it will resize in the browser and work perfectly on mobile devices as well as different resolution computers and laptops. An example of how I would like the responsive layout to work is: [url removed, login to view]
- The gradients and horizontal rules are to be created 100% in CSS3 with NO IMAGES. If there is a problem with this and an image has to be used for some reason, please let me know as soon as possible.
- The CSS files must be split into 2 separate files. Anything that requires the blue color in the PSD design (only the header and menu bar) must be separated from the main CSS ([url removed, login to view]) into a separate file called blue.css.
- The code must all be W3C validated HTML5 and CSS3.
- The code must be completely semantic with proper hierarchy, beautiful, and fully commented. Please see this image for an example of what the code should look like: [url removed, login to view]
- In addition to the layout, there is a jQuery dropdown menu that will be incorporated and will slide out. It is included in the PSD file so you know how it should look. There also needs to be a resizable slideshow with empty numbered or colored images that shrinks based on smaller resolutions and works with swipe gestures. I am open to the various options that are available for this, as long as they are 100% open source / free to use under GPL license. The bidder is encouraged to decide what he/she thinks would be best-suited for this application and incorporate into the layout. An example of a resizing slideshow can be seen here: [url removed, login to view]
The winning bidder may be asked to sign an NDA, so please do not bid if you are not comfortable doing so. Funds are ready and available to pay the bidder, and everything is ready for the bidder to start work as soon as awarded. If we are happy with your completion of this project there will be opportunities for lots of future work!
It should go without saying, but just so there is no confusion: The code must not be copied from any other sources, it is to be coded by you the bidder, and may not be based on any other items, websites, or designs. You relinquish all rights to us upon competition of the project and may not use this work in any other projects or other.