HTML5 CSS Simple Website Navigation Bar

  • Status Closed
  • Budget $30 - $250 USD
  • Total Bids 17

Project Description

I'm soliciting help with the creation of my website's navigation bar. I've attached a PNG of the template.

The most difficult part of this project will be constructing the navigation bar. You can see by looking at the attached PNG that the only graphics on the page are the five ink-blots and a 1pt horizontal bar. These are considered part of the navigation bar. The navigation bar will function as follows:

1. When a user mouses-over the link text (home, data, community, etc.), that text will become bold-faced. The text must be wrapped and within an ample buffer so that any bold-faced resizing of the text causes absolutely no other movement on the page. The text must also be text at all times -- no images of text.

2. When a user mouses-over the ink blot directly above any link text, the link text also becomes bold-faced and the mouse changes from the arrow to the hand (and back when mouse-off occurs).

3. The user can pursue the link by clicking on either the link text or on its corresponding ink blot.

4. The click area for each link will be appropriately "snug" so that only the area in or directly around the ink blot and text functions as a link.

Other details:

-The website title "MyWebsite" will use the font Monotype Corsiva and appear as (or near) font-size 28 by default (use of percentages or other adaptable font settings rather than a strict 28-point font would be appreciated).

-The website title will also use (or appear to use) the same center-line as the navigation text "home".

-The navigation bar text will be Courier New font-size 14 (half-as large as the header) and all lowercase;

-The paragraph text will also be Courier New fons-size 14 (half-as large as the header).

-The website content will be whithin a wrapper that is center justified on a user's screen and features sizeable margins of white-space.

Your job will be to transform this template into a website. The website will feature 5 identical pages, each featuring the header/navigation bar and 1 paragraph of Lorem Ipsum text:

1. [url removed, login to view];

2. [url removed, login to view];

3. [url removed, login to view];

4. [url removed, login to view];

5. and about.html.

CSS will be used to limit total coding as much as possible.

The website will use the HTML5 Doctype and pass validation at [url removed, login to view] with no errors and ideally no warnings.

I will provide the 5 images (PNG files) of the ink blots and an MS PowerPoint slide similar to the PNG attached to this posting.

Thank you very much for your interest and please contact me for any clarifications.

Get free quotes for a project like this
Awarded to:
Skills Required

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online