solution (https://232567.github.io/layout_creativeBakery/).

[232567]

DEMO LINK.

[DanielCamposDevX]

What we bake section is on the far left instead of centralized, proportions are a bit odd on bigger screens

[232567]

Hello! Thank you very much for your detailed review and feedback.

I have addressed all the points you mentioned:

Added the favicon.
Pushed the missing index.html file.
Added the mobile navigation menu.
Added hover effects and pointer cursor to all interactive elements.
Added hover animations to the logos, icons, and the footer arrow.
Updated the "See more about us" link animation.
Fixed the form submission so it no longer returns a 405 error, clears after submission, and scrolls back to the top.
Fixed the mobile layout issue in the Questions section.
Ran npm run deploy after pushing the changes.

I also reviewed the project again to make sure everything matches the checklist as closely as possible.

Thank you again for your time and feedback. I look forward to your new review. DEMO LINK

[raulriato]

You are almost there.

I'm requesting just a few changes in order to use the Sass maximum powers and fix the only great problem in your code.

The recommendations about the mixins and the nesting should be fixed in every place you have them.

Also, it seems you coded your page to be desktop first, it means your standard styles work in the desktop viewport. In that case, you will not need the mixin on-desktop, because it is already your standard styles. You will use on-tablet (for max-width: 1199px;) and on-mobile (for max-width: 767px;)

[raulriato]

You are pointing the href to a favicon.png, but there is no such file in the images folder. Use cookie.png instead.

[raulriato]

This is causing the cells to be smaller than it should be and not centered. You should have a grid with more columns to rearrange each product. You could also, in this case, just use flex

[raulriato]

You should not have your @media hardcoded in each file. The mixins are meant for this. You should have, for example:

@mixin on-desktop {
  @media (min-width: 1279) {
    @content;
  }
}

And here you would use just:

@include on-desktop {
  /*the styles that will change on desktop*/
}

[raulriato]

You are using scss now. One of the greatest features of scss is the possibility to nest different styles. You should use it:

.about {
  /*the styles for the class "about" go here*/

  &__content {
    /*the styles for class "about__content" go here*/
  }

  &__text {
    /*the styles for class "about__text" go here*/
  }

  /*...*/
}