You have been hired by a zoo to build a website.
I’ve done the first part but it is full of mistakes. It’s your job to fix them. The client has sent over a list of alterations and recommendations that they want to fix the site with.
You are encouraged to use Google to help you find the answers to these problems.
First of all, we don’t want the logo to have a purple border. The logo has an ID of logo, make sure this has no border.
The first section has a class name of ‘introduction’. Give this section a white background. Add a paragraph to this section with the following text:
‘The zoo is open every day of the year and features three major biomes: the Tropic Zone, Temperate Territory, and the Polar Circle. From tropical birds, to snow leopards, grizzly bears, and one of the nation’s largest colonies of Antarctic penguins, there are animals to enjoy in every season.’
Most of the text on the page is very close together. Increase the amount of space of the text so that there's more breathing space.
All the images of bears have the same border colour, can all these images be given a different border colour? Answer:I use the peudo class first and last child type
The images of the bears are also misaligned. Can all these images be vertically aligned to the top of the container. Answer:I changed the height and width with the display property
The purple headings are hard to read on dark backgrounds, change them to a lighter colour. Make sure it passes the WCAG AA standards for contrast. You can use this tool to help: https://webaim.org/resources/contrastchecker/ Answer:Changed the color in line 42;
Change the heading of this section to ‘Tiger Facts’, remove the subheading, and change the ordered list to an unordered list. Answer:Changed H3 tag in line num 57 and orderd list to unorderd list in 58 to 64
Change the background colour to #483C46, the section titles to #F4743B, and the paragraph color to #BEEE62. Answer:changed the bckground color in line 129 Answer:section title color in line 133 to 134 Answer:Paragraph color to 136 to 138
Make the first paragraph have a larger font size. created the first type of child in 139 to 141
Can the title of this section be centred in the middle of this page? Answer: Added news class With h2 in line 142 to 144 Add another news item with the title with today's date, and the title of ‘Which big cat are you?’ Answer:95 to 99lines in html file
The buttons are a little hard to read. We’d like the buttons to have larger text, and also to change colour when you hover and focus on them. Answer:changed font-size in line 67 Change the hover effect in 69 to 71 We don’t like the hard corners here. Can you give the container in the section some rounded corners? Answer:add line border radius in 200
Give the paragraph a maximum width of 700 pixels, and keep in the middle by adjusting the margin. Answer:add line "204"
The cards are stacked on top of each other which looks like a poor use of space. Change these so that they display horizontally across the screen. Answer:
Make sure all the links open in a new tab. Answer:Added target =blank with anchor tag
The badge that says ‘Opening 2021’ we’d like to be on the top right instead of the bottom right. Answer:changed the line to bottom to top in line 94
When a user hovers over the badge, add a transition so the change in colour is smoother. Answer: I try to add transition property in line 104 to 108
If you have time, add a new section for your favorite animal.