Description
Using only HTML and CSS construct the following web page as accurately as possible. Do NOT make
this page responsive. The page must be 800 pixels in width:
McGill COMP 307 Mini #4
Vybihal School of Computer Science 2 of 2
Create only this single web page.
Notice that there a many links: underlined text, bold green text, menu on the right, and links at the end
of the web page. These must be functional links. They should point to random internet web pages but
attempt to point to pages that are vaguely under the same theme.
Notice that the writing is not in English, other than the titles. Keep the titles and provide your own
random text or use Lorem Ipsum. You can Google for sample Lorem Ipsum text that can be copied and
pasted into your web page.
Your web page MUST look “identical” to the page above: same colours, fonts, and styles. Try to get it
as close as you can to what is presented here. See the marking scheme for more details on how close
your web page should be.
Make sure the above web page displays on your browser. Remember, you do not need to install the
web page on the Internet. Using your browser’s File Open menu command (or drag to window), you
can load an HTML document stored on your disk into the browser to see your handy work.
FOR THE GLORY
The following GLORY challenge if for those of you brave souls who like doing extra work for no
grades. BUT! you can brag to your friends about your programming skills!!
Get the above web page working on a XAMP web server installed on your computer. We will do web
servers later in the course.
WHAT TO HAND IN
The index.html page, and a README stating which browser you used.
Your solution only needs to work on a single browser, so please tell us which one you used.
Your solution must NOT be responsive.
HOW IT WILL BE GRADED
Total points 20.
– +7: Same arrangement of elements on the page (positioning, indenting, header, footer, etc.)
– +5: Menu (highlights when mouse goes over, click does not send you anywhere but hyper link)
– +2: Hyper links function (send to random place)
(green words, login, sign up, categories, recent posts, archives, RSS, etc.)
– +2: Colours are the same (same defined as very close to the original but not identical)
– +1: Font is the same (same defined as very close to the original but not identical)
– +2: Indented paragraph vertical line
– +1: Bullets