Meet Landing Page

Community feedback

• 

  P

  yinnie•280

  @wcyin9Posted 7 months ago

  Hello there, great job on finishing the challenge! It looks incredible, keep up the great work!

  There are two areas I would like to comment on:

  1. There's a lack of :hover state on the buttons. This may be due to lacking access to the figma design, so it's absolutely not an issue, and is easily fixable.

  2. The footer overlay looks different from the design given. This is due to the fact that the footer image lacks opacity changes, and you used an overlay for the blue color. There are multiple approaches that are valid for the footer. The approach I'll give you below is one of many, and it can just serve as an example/reference point:

  I used picture tag with source tag in html for responsive purposes, as it works with media query to automatically change images upon different screen sizes. It eliminates the need to add extra code in CSS.

  <picture>
  	for laptop dimensions:
  	<source srcset="assets/desktop/image-footer.jpg" media="(min-width: 850px)">
  	for tablet dimensions:
  	<source srcset="assets/tablet/image-footer.jpg" media="(min-width: 635px)">
  	for mobile dimensions using mobile first approach:
  	<img class="footerbg" src="assets/mobile/image-footer.jpg" alt="chanel perfume">
  </picture>
  

  Next, in CSS I targeted the .footerbg class that I gave to the image to give it an opacity of 0.1045, which was given in the Figma file, and position: absolute;. Last, I targeted the footer selector in CSS to give it a background-color: ##4D96A9 ;. This will make the result look exactly like the one given in the design. The reason this works is because the image itself is on top of the footer. By giving it an opacity of 0.1045, it will let the blue color below it seep through.

  Hope this helped!

  Marked as helpful

  0