We have been commissioned to build a website and CMS for a client of ours. A designer has made exact mockups of each page as PSD files so we need you to convert these to HTML and CSS. The designs need to be responsive and CSS should be in a separate file.
The mockups are attached along with a couple of examples of how the mobile version is expected to look (the file names for these start with MOB). I have uploaded jpg files as the PSDs were too big for Freelancer, but I will send the original PSD files to the person who does this job.
The designer also sent us the following instructions which you will need:
• The logo changes it’s colour/texture on each separate page.
• There is a line under the chosen menu item to indicate the page your are on.
• This approach should still work ok on tablets, but please use a ‘burger’ for mobile.
• The banner images should work as a slideshow – images change every 3 seconds, on a constant loop.
• The slideshow can be manually interrupted by clicking on the shapes directly underneath the banner image.
• Please use the following banner images to correspond to the shapes: Square = Home page banner image, Circle = Co-Working banner image, Triangle = History banner image and Segment shape = News banner image.
• All banner images on all pages other than the Home page will use static images.
• There are rollover states on the large shapes/photos on the homepage.
• Please show all photos first with the rollover state being the flat colour and titles, a click would take the visitor to the corresponding page.
• Please see my mobile version of this page – each landscape image fills the width of the screen, each portrait image shouldn’t fill the width (so they don’t appear too large).
• You’ll notice all of the images are different sizes, we’ll be responsible for resizing them as and when we add/edit them. If you could just make sure that whatever image we add the page is coded so that there is a regular rule for the distances between the end of copy and the image underneath it, and again the distance between the bottom of the image to the next paragraph.
• Same needed as the above History page.