Skip to content

Commit 993c705

Browse files
author
Chris Owen
authored
Create README.md
1 parent 1eb91d7 commit 993c705

File tree

1 file changed

+70
-0
lines changed

1 file changed

+70
-0
lines changed

zoo-css-challenge/README.md

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# Zoo Exercise Instructions
2+
3+
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.
4+
5+
## 1) Introduction
6+
7+
The first section has a class name of ‘introduction’.
8+
9+
Give this section a white background.
10+
11+
Add a paragraph to this section with the following text:
12+
13+
‘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.’
14+
15+
## 2) Bears:
16+
17+
Most of the paragraphs are too close to the content below it. Give every paragraph some margin at the bottom so that they have a bit more space.
18+
19+
All the images of bears have the same border colour, can all these images be given a different border colour?
20+
21+
The images of the bears are also misaligned. Can all these images be vertically aligned to the top of the container.
22+
23+
## 3) Tigers
24+
25+
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/
26+
27+
Change the heading of this section to ‘Tiger Facts’, remove the subheading, and change the ordered list to an unordered list.
28+
29+
## 4) Giraffes
30+
31+
Change the background colour to #483C46, the section titles to #F4743B, and the paragraph color to #BEEE62.
32+
33+
Make the first paragraph have a larger font size.
34+
35+
Again, the purple headings are hard to read on dark backgrounds, change them to a lighter colour.
36+
37+
## 5) News
38+
39+
Can the title of this section be centred in the middle of this page?
40+
41+
Add another news item with the title with today's date, and the title of ‘Which big cat are you?’
42+
43+
## 6) Membership
44+
45+
Give the paragraph a maximum width of 700 pixels, and keep in the middle by adjusting the margin.
46+
47+
## 7) Learning
48+
49+
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 over them.
50+
51+
We don’t like the hard corners here. Can you give the container in the section some rounded corners?
52+
53+
## 8) Programs
54+
55+
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.
56+
57+
Change each of the ‘Find out more’ links to a button, each one should have a different colour.
58+
59+
Make sure all the links open in a new tab.
60+
61+
## 9) Badge
62+
63+
The badge that says ‘Opening 2021’ we’d like to be on the top right instead of the bottom right.
64+
65+
When a user hovers over the badge, add a transition so the change in colour is smoother.
66+
67+
## 10) New section
68+
69+
If you have time, add a new section for your favorite animal.
70+

0 commit comments

Comments
 (0)