MyBike landing page - Portfolio project

[folg-code]

[DEMO LINK] (https://folg-code.github.io/layout_miami)

[natalia-klonowska]

• burger menu icon changes size on hover which seems unintentional
• checklist: Page shouldn't be reloaded on form submit
• change background image position and size of icons to match design:

• menu links should be in uppercase, last two links are missing styles and close icon size is wrong

• close icon shifts on hover causing clicks to miss and menu not to close:
  https://www.loom.com/share/1d0fcd2267594d2195452954f5ca1ac4?sid=b40b0f26-c60e-43e4-853a-4e39a55dac32

[natalia-klonowska]

BEM : "Using a Modifier Instead of an Element"/"Using a Modifier Without the Belonging Class"

fix all other instances of this mistake

[natalia-klonowska]

you can use tag body for styling or create file for block body for consistency ;)

[natalia-klonowska]

BEM: "Using an Element Inside Another Block"

[folg-code]

Sorry for commits after request review.
There was some new issues beacause of reworks.
I fixed it all and page is ready to request

[natalia-klonowska]

• Use a full-size background image and apply styling (background-position, background-size) so the image adapts better between breakpoints

• layout is not responsive it's fixed with breakpoints which results in too large margins between them:

Here you can find a comparison between fixed and responsive layouts and here you can see example of responsive layout with breakpoints

• delete italic font style from contact links
• textarea should have different border-radius
• check and correct space between elements
• buttons send and explore shouldn't be in uppercase

• links should be in uppercase
• underline for the last link should be lower
• change number to match the design

[natalia-klonowska]

Suggested change

	&--phone {
	width: 24px;
	height: 16px;
	@include on-mobile {
	width: 18px;
	height: 12px;
	}
	}
	&--phone {
	width: 24px;
	height: 24px;
	@include on-mobile {
	width: 18px;
	height: 18px;
	}
	}

[natalia-klonowska]

change height to match width and add background-position to properly center burger menu icon with the other navigation icons

Suggested change

	.navigation__menu {
	width: 24px;
	height: 16px;
	@include on-mobile {
	width: 18px;
	height: 12px;
	}
	background-image: url('../images/menu.svg');
	background-repeat: no-repeat;
	background-size: contain;
	.navigation__menu {
	width: 24px;
	height: 24px;
	@include on-mobile {
	width: 18px;
	height: 18px;
	}
	background-position: center;
	background-image: url('../images/menu.svg');
	background-repeat: no-repeat;
	background-size: contain;

[natalia-klonowska]

Great work! 🚀 Just a few final things to fix:

• change italic font style and add line-height for address link

• add letter-spacing style, font-size change from 14px to 12px and reduce gap to phone icon to 20px

[natalia-klonowska]

404 error

Suggested change

	href="home"
	href="#home"

[natalia-klonowska]

Suggested change

	rel="favicon"
	rel="icon"

[vsmutok]

Looks Good!