HTML и CSS: Джедай вёрстки #7. Часть 5: Решаем проблемы с Mmenu. Продолжаем верстать

Джедай вёрстки #7. Часть 5.

Всем привет, друзья! Это пятый урок из серии по адаптивной HTML вёрстке макета на реальном примере "Джедай вёрстки #7". В данном уроке мы решим некоторые проблемы Mmenu из прошлого выпуска и продолжим вёрстку шапки сайта.

Все дополнительные материалы, изображения, результат вёрстки, исходник Adobe XD, а также E-mail для связи с автором для решения возникших проблем по ссылке:
http://webdesign-master.ru/_ref/dj7/

Дополнительные ссылки урока:

Гист кнопки: Button Sass Styles (Universal Starter).

Универсальный Sass код кнопки на каждый день:

.button
	display: inline-block
	border: none
	color: #fff
	text-decoration: none
	background-color: $accent
	padding: 15px 45px
	font-size: 13px
	text-transform: uppercase
	font-weight: 600
	letter-spacing: 3px
	border-radius: 2px
	text-align: center
	position: relative
	outline: none
	transition: background-color .1s ease
	&::after
		transition: background-color .2s ease
		position: absolute
		content: ''
		height: 4px
		bottom: 0
		width: 100%
		background-color: darken($accent, 50%)
		opacity: .18
		border-bottom-left-radius: 2px
		border-bottom-right-radius: 2px
		left: 0
	&:focus, &:hover
		text-decoration: none
		color: #fff
	&:hover
		background-color: lighten($accent, 5%)
		&::after
			opacity: .22
	&:active
		background-color: darken($accent, 5%)
		&::after
			opacity: .32