search

NoorulainKhaliq / TeaCozy

0 stars 0 forks source link

Project Review #1

Open GitMazzone opened 7 years ago

GitMazzone commented 7 years ago

File path for your tea background should be ../images/background.jpg
If you just use the background attribute, you'll be able to give it the no-repeat and center values as well, like this: background: url("../images/background.jpg") no-repeat center center;
https://github.com/NoorulainKhaliq/TeaCozy/blob/master/resources/css/styles.css#L57

Same issue applies to your locations background image - same fix applies as above.

Giving the body a margin of 0 will remove that space at the top and left of your page - this is a common practice in Web development, so typically always do it:
https://github.com/NoorulainKhaliq/TeaCozy/blob/master/resources/css/styles.css#L1-L8

This next part (location boxes) is a bit tough. To achieve the height and width for each box as is in the spec, you should've used flex box styling. Here, if we apply the following to your .location, it'll fix it: 

.location {
  background-color: black;
  opacity: 1;
  flex-direction: column;
  justify-content: center;
  display: flex;
  margin-right: 20px;
  margin-left: 20px;
  flex-basis: 280px;
  margin-top: 15px; 
}

The above code effectively sets the width and height by creating a requirement for that much room inside of each element. Also, the margin you had was only applied to one side, making it off center - this applies half your total margin to each side.

NoorulainKhaliq commented 7 years ago

Very useful tips, thank you!