Basic CSS/HTML Landing Page (Implementing the Landing-page wireframe)
Budget: €8 – €30 EUR
General
• The default font size is 14px.
• The default font colour is #333333.
• The default font family is Times, "Times New Roman", Georgia, serif.
• The width of the page is 1024px.
Header
• The header area uses a background colour of #333333.
• The header area uses a font colour of #fefefe.
• The header background covers the full width of the design.
• The header links use a font size of 120%.
• The current header link has a bottom border that has
◦ a width of 3px,
◦ a style of solid,
◦ a colour of #ff0000.
• Hovering the mouse over a header link or placing the keyboard focus on a header link shows
that link with a bottom border that has
◦ a width of 3px,
◦ a style of solid,
◦ a colour of #ff0000.
Main Area
• There is no margin or padding between the title and location text.
• The six sample item links
◦ use the default font colour,
◦ do not have an underline.
• Hovering the mouse over a sample item or placing the keyboard focus on a sample item
shows that link with an underline.
News
• There must be no margin or padding between the title and date text.
• There must be at least 15px space between news items
****
Header: The landing page header consists of four links to the four sections of the completed website. The texts to display for each link are given in the wireframe and must be used as provided. The first link (Museum of Odds & Ends) must link back to the index.html file. This link must be treated as the current link within the header, indicating that the user is currently on this page. The other three links must link to the placeholder.html file.
Main content: The main content area of the landing page consists of the museum name, museum location, and the sample of 6 items taken from the WH-Moe's collection. The museum name and location must be used as given in the wireframe. For the 6 items, the WH-Moe has provided you with 12 samples, from which you should select 6 for your solution. For each sample item the WH-Moe has provided some metadata in the file imgs/metadata.csv. Where the wireframe indicates the ‘Image title’, you may include whatever metadata you wish to use from the metadata provided. Each image and its title must link to the URL provided in the metadata file for that image.
News sidebar: The news sidebar shows two recent news entries on the right side of the design. The WH-Moe has not provided any sample data, so you should include your own sample text for the two news items. Each item consists of a title, date, and the text of the news item.
****
You must include comments in both the index.html and styles.css files documenting how your HTML and CSS work.
Your code must validate as HTML5 (for the index.html file) and as CSS Level 3 (for the styles.css file).
Add comments, use the following syntax for HTML and CSS respectively:
<!--This is a HTML comment. --> & /*This is a CSS comment*/
Your code must be cleanly and consistently structured. You can find tools to clean and structure your HTML and CSS online. One such tool is the HTML/ CSS Cleaner.
Where the wireframe contains pre-defined text (header links, museum name, museum location), you must use the text as provided in the wireframe.
Your implementation must follow the layout provided in the wireframe. Remember that a wireframe is not a high-fidelity design and the wireframe only defines the layout and rough position and size of the elements. Your solution will not be a pixel-exact implementation of the wireframe.
*****
In short, we require this very basic script to make our landing page work. The budget is set at a maximum of €20 and cannot be increased.
The estimated time for a professional with CSS/HTML knowledge is 1 to 2 hours, I have provided longer than this.
*****
There will be additional, higher paid, tasks to follow this one.
• The default font size is 14px.
• The default font colour is #333333.
• The default font family is Times, "Times New Roman", Georgia, serif.
• The width of the page is 1024px.
Header
• The header area uses a background colour of #333333.
• The header area uses a font colour of #fefefe.
• The header background covers the full width of the design.
• The header links use a font size of 120%.
• The current header link has a bottom border that has
◦ a width of 3px,
◦ a style of solid,
◦ a colour of #ff0000.
• Hovering the mouse over a header link or placing the keyboard focus on a header link shows
that link with a bottom border that has
◦ a width of 3px,
◦ a style of solid,
◦ a colour of #ff0000.
Main Area
• There is no margin or padding between the title and location text.
• The six sample item links
◦ use the default font colour,
◦ do not have an underline.
• Hovering the mouse over a sample item or placing the keyboard focus on a sample item
shows that link with an underline.
News
• There must be no margin or padding between the title and date text.
• There must be at least 15px space between news items
****
Header: The landing page header consists of four links to the four sections of the completed website. The texts to display for each link are given in the wireframe and must be used as provided. The first link (Museum of Odds & Ends) must link back to the index.html file. This link must be treated as the current link within the header, indicating that the user is currently on this page. The other three links must link to the placeholder.html file.
Main content: The main content area of the landing page consists of the museum name, museum location, and the sample of 6 items taken from the WH-Moe's collection. The museum name and location must be used as given in the wireframe. For the 6 items, the WH-Moe has provided you with 12 samples, from which you should select 6 for your solution. For each sample item the WH-Moe has provided some metadata in the file imgs/metadata.csv. Where the wireframe indicates the ‘Image title’, you may include whatever metadata you wish to use from the metadata provided. Each image and its title must link to the URL provided in the metadata file for that image.
News sidebar: The news sidebar shows two recent news entries on the right side of the design. The WH-Moe has not provided any sample data, so you should include your own sample text for the two news items. Each item consists of a title, date, and the text of the news item.
****
You must include comments in both the index.html and styles.css files documenting how your HTML and CSS work.
Your code must validate as HTML5 (for the index.html file) and as CSS Level 3 (for the styles.css file).
Add comments, use the following syntax for HTML and CSS respectively:
<!--This is a HTML comment. --> & /*This is a CSS comment*/
Your code must be cleanly and consistently structured. You can find tools to clean and structure your HTML and CSS online. One such tool is the HTML/ CSS Cleaner.
Where the wireframe contains pre-defined text (header links, museum name, museum location), you must use the text as provided in the wireframe.
Your implementation must follow the layout provided in the wireframe. Remember that a wireframe is not a high-fidelity design and the wireframe only defines the layout and rough position and size of the elements. Your solution will not be a pixel-exact implementation of the wireframe.
*****
In short, we require this very basic script to make our landing page work. The budget is set at a maximum of €20 and cannot be increased.
The estimated time for a professional with CSS/HTML knowledge is 1 to 2 hours, I have provided longer than this.
*****
There will be additional, higher paid, tasks to follow this one.