Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Use HTML and CSS to create a web page with a 2 - column layout and the following specifications: 1 . Organize your CSS and

Use HTML and CSS to create a web page with a 2-column layout and the following specifications:
1. Organize your CSS and images in different folders. (Hint: Always use small letters for folder/file names and avoid special characters including spaces. This will help you link your CSS and images quickly).(1 mark)
2. Create a web page called index.html and add your name and email in HTML comments at the top of the page. (1 mark)
3. Link the main style sheet as well as the normalize style sheet to the home page. (1 mark)
4. Adjust the font sizes for all of the headings so they are as shown in the design. Make sure the different headings are in different font sizes and colours of your choice. Browser default font size and colour of the headings/text will not be awarded marks. (1 mark)
5. Format the links in the right section so theyre displayed in a colour of your choice whether or not theyve been visited. If a link has the focus or the mouse hovering over it, display it in a different colour. Browser default colours of the links will not be awarded marks. (2 marks)
6. Format the links in the sidebar so theyre displayed in boldfaced colour of your choice whether or not theyve been visited. If a link has the focus or the mouse hovering over it, display it in a different colour. Browser default colours of the links will not be awarded marks. (2 marks)
7. In the header, float the logo image to the left and make sure there is white gap between the logo and the headings. In addition, change the colour of the headings to colours of your choice, change their styles to bold or italic and add a shadow to the Site Title. Browser default colours of the headings will not be awarded marks. (2 marks)
8. After the header section, add a full width image. (1 mark)
9. Format the list to increase the space between the list items, increase the line height to 1.5.(1 mark)
10. Reduce the font size for the footer and center it. Browser default font size of the text in footer will not be awarded marks. (1 mark)
11. Format the body of the page so its 900px wide, has a border of your choice, and is centered in the browser window. (1 mark)
12. Add a border of your choice below the header, add a background to the footer, and change the colour of the footer text to a contrasting colour. (2 marks)
13. Float the sidebar in the body so that it is displayed to the left of the main section. The width of the sidebar should be approximately one third of the body. Be sure to clear the footer so its not displayed below the list. (2 marks)
14. Adjust the margins and padding for the elements on the page so it looks as shown in the design. (Note: because the unordered list is given some left padding by default, you dont need to apply any additional margin or padding to it.)(1 mark)
15. Change the paragraph text colour to a colour of your choice. (1 mark)

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image_2

Step: 3

blur-text-image_3

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

OpenStack Trove

Authors: Amrith Kumar, Douglas Shelley

1st Edition

1484212215, 9781484212219

More Books

Students also viewed these Databases questions

Question

Briefly explain the assumptions of the population regression model.

Answered: 1 week ago