As discussed ...
Our current homepage looks like this:
[url removed, login to view]
We have created a new design for our homepage, using Photoshop.
The new design can be seen here:
[url removed, login to view]
The project is simple -- we would like for you to modify our homepage,
using CSS and other tools to create a result that looks exactly like our
"new homepage design" example.
So, there is no graphic art design or programming work required,
just precise and accurate HTML/CSS/web layout skills. Any new
"links" created in the new design can be left with blank URLs.
Here are three image files for reference -- please view them
by visiting these URLs:
[url removed, login to view] is our current
[url removed, login to view] is our new page
[url removed, login to view] is our new
page design with numbers added to show you the project steps below.
Please refer to this one to better understand the steps of the project.
These are the seven steps of the project:
1. On our current page, the overall width is set to stretch to 100% of
the browser window. We would like to change this to a standard page
width. Please refer to the home page of this web site: [url removed, login to view]
We would like our homepage to have the exact same width as that
page, and we would like drop shadows added just like the ones on
the edges of the page at anamera.com. In other words, we'd like
to borrow both the width and the drop shadows of that page. The
drop shadow image files should be transparent and should look exactly
like those at anamera.com. It is important that these shadows be able
to "stretch" to accomodate a varying page height as necessary.
2. Using CSS, change the style of the seach bar (the one that says
"what are you looking for?") as shown in the example. Please follow
the new homepage design precisely.
3. Please replace the "yellow stripe" background below with a plain
4. Remove the rounded rectangle with two vertical "featured ads" and
replace that area with the two rounded rectangle boxes as shown in the
new homepage design image, with the precise text, images, and placement
as shown. The "Find it", "quick searches" and "in your area" text should
be done as image files that exactly match the sample. Note that the
letters are shades of gray, not black. The images for the keys and
magazine/map will be provided. The "quick search" box links can be
left with blank URLs.
5. Create the new "recent listings" table below, with eight vehicles featured
in two rows of four. This table should look just like our new design example.
It is not necessary to write any code for this, just to lay out the sample
images and text precisely as specified. Please make sure that there is a
"dotted line" border between the rows and columns just as shown. This
table should also be able to "stretch" as necessary to accomodate
listings with more text, etc. The text "Recent Listings" on the left should
be an image file.
6. On the button bar to the left, remove the buttons "place your ad" and
"distribution". It should end up looking just like the example.
7. Below the "recent listings", add the image and text as shown (New
Listings every day ..." etc. The image will be provided.
IMPORTANT: Because this page is our web site's home page, it cannot
be edited live. We will provide a copy of the page with a different filename
which you will be able to edit. It will be in the same directory, so all image
and css references will be the same.
1.) We would like the result page to be XHTML/CSS based,
2.) We would like it to look exactly, precisely like our "[url removed, login to view]" file
attached to the project,
3.) Any special form inputs or link URLs on the original
homepage ([url removed, login to view]) should be retained,
as should the mouseover behavior of the menu on the left.
4.) We would need the page to be ready by Thursday, August
Thank you very much for looking at our project, we look forward to working
with you. Here's to a page that will look great both on our site and in your portfolio.