Hello Freelancers,
We are looking to revamp our services page. I have provided an example of what I want with this post along with some sample code. We require BOTH a MOBILE FRIENDLY and a WEB version to match our normal and mobile sites. We will provide the winner of this project both templates so all they need to do is implement their HTML/Javascript
Here is a basic guideline of what the page should look like and how it should function:
- We will have a list of all of our services along with images to correspond with those services, we will give you this list after we select you along with an uncensored version of the example.
- These images will show three at a time like in the example, even though there are more then 3 services. The user will be able to "Scroll" through these services/images using a scrollbar and arrows on the side of the images (like in the example)
- The middle most image will be a little larger then the others, as to show that it is the active one.
- Once the page is loaded I want the page to automatically scroll through all of the services making is visible to the user that they are able to scroll through the services (If you have a better idea for how to let the user know they can do this, we are open to it)
- Once an image is clicked on you have to display the corresponding "Details" box, where there are more images of that services along with some text to describe what we do. We want this "Details" box to appear in a nice way, maybe a fade or dissolving effect, or maybe a page turning effect, something visually appealing.
- The images in the Details box will automatically go through like a slideshow
Please keep in mind that we want this page to be as SEO friendly as possible. Make sure that if Google or another search engine were to crawl the page, they would be able to see all the data.
Also note, that the example we provide you is just that, an example. It is your job to make it look better and function better, it shouldnt be a slow process and it shouldnt look bad. We are open to any suggestions you have.
Also all your HTML and JAVASCRIPT should for formatted correctly and include comments, we do not want a FLASH solution. Only HTML, PHP and Javascript. Also be sure to include tags with a non-javascript version so people can still see the page even if JS is not enabled (The page should still look nice if they do not have JS).
Finally, Please make sure you document how we can edit these images and text in the future. We want a nice visual document which will guide us through the process.
Along with this Services page revamp we need the same person to create a graphic for us that will suit our site, it is going to replace the image I have attached. It is a simple "Step 1, Step 2, Step 3" graphic that changes colors as the user moves from one page to the other.
Thank you and good luck.