Skip to content
This repository was archived by the owner on Oct 2, 2024. It is now read-only.

New Commit#46

Open
Declanhs wants to merge 3 commits into
CodeYourFuture:mainfrom
Declanhs:main
Open

New Commit#46
Declanhs wants to merge 3 commits into
CodeYourFuture:mainfrom
Declanhs:main

Conversation

@Declanhs
Copy link
Copy Markdown

@Declanhs Declanhs commented Jun 6, 2021

No description provided.

Copy link
Copy Markdown

@nax2uk nax2uk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall great job, @Declanhs 🎉 ! Please have a look at my feedback below. You do not need to correct the code as long as you understand my feedback.

Let me know if you have any questions.

  1. Introduction
    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.

Great Job, you did this!

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.’

Fab work!

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.

you could add this to your css file to increase the letter space:

.introduction p {
  letter-spacing: 2px
}
  1. Bears:
    All the images of bears have the same border colour, can all these images be given a different border colour?

Great work! You made each bear photo to have a different border.

The images of the bears are also misaligned. Can all these images be vertically aligned to the top of the container.

The images of your bears are not horizontally aligned. You could add this code to fix this:

.image-container {
  display: flex;
  flex-direction: row;
}

Remember to delete this original code from the css file (as you want the image to be aligned at the top:

.image-container img:first-of-type {  
   vertical-align: bottom;
}
  1. Tigers
    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/

Change the heading of this section to ‘Tiger Facts’, remove the subheading, and change the ordered list to an unordered list.

👍🏽👍🏽

  1. Giraffes
    Change the background colour to #483C46, the section titles to #F4743B, and the paragraph color to #BEEE62.

I think you left out changing the section title to #F47473B but otherwise all good.

Make the first paragraph have a larger font size.

Fab , you did this 🙂

  1. News
    Can the title of this section be centred in the middle of this page?

👍🏽

Add another news item with the title with today's date, and the title of ‘Which big cat are you?’

Perfect! All done really well.

  1. Learning
    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.

We don’t like the hard corners here. Can you give the container in the section some rounded corners?

It seems you did not attempt 6). Do you know how to correct it?

  1. Membership
    Give the paragraph a maximum width of 700 pixels, and keep in the middle by adjusting the margin.

Almost there!! To centre the paragraph margin: auto

.membership p {
  max-width: 700px;
  margin: auto;
}
  1. Programs
    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.

Amazing work!

Make sure all the links open in a new tab.

  1. Badge
    The badge that says ‘Opening 2021’ we’d like to be on the top right instead of the bottom right.

When a user hovers over the badge, add a transition so the change in colour is smoother.

Perfect!

  1. New section
    If you have time, add a new section for your favorite animal.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants