Создание сайта с нуля. Урок #14: Верстка. Адаптивная шапка + адаптивное меню

Это 14-й урок по созданию сайта с нуля под ключ на заказ и сегодня мы адаптируем шапку сайта под все разрешения экрана (адаптивим).

Файлы для прохождения урока: Скачать

Что использовали в данном уроке:

Mouse Wheel Animation CSS Icon:

<style>
/* ---------------------------------------------- /*
	* Mouse animate icon
/* ---------------------------------------------- */
.mouse-icon {
	border: 2px solid #000;
	border-radius: 16px;
	height: 40px;
	width: 24px;
	display: block;
	z-index: 10;
	opacity: 0.7;
}
.mouse-icon .wheel {
	-webkit-animation-name: drop;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
	-webkit-animation-name: drop;
					animation-name: drop;
	-webkit-animation-duration: 1s;
					animation-duration: 1s;
	-webkit-animation-timing-function: linear;
					animation-timing-function: linear;
	-webkit-animation-delay: 0s;
					animation-delay: 0s;
	-webkit-animation-iteration-count: infinite;
					animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
					animation-play-state: running;
}
.mouse-icon .wheel {
	position: relative;
	border-radius: 10px;
	background: #000;
	width: 2px;
	height: 6px;
	top: 4px;
	margin-left: auto;
	margin-right: auto;
}
@-webkit-keyframes drop {
	0% {
		top: 5px;
		opacity: 0;
	}
	30% {
		top: 10px;
		opacity: 1;
	}
	100% {
		top: 25px;
		opacity: 0;
	}
}
@keyframes drop {
	0% {
		top: 5px;
		opacity: 0;
	}
	30% {
		top: 10px;
		opacity: 1;
	}
	100% {
		top: 25px;
		opacity: 0;
	}
}
</style>

<!-- HTML -->
<div class="mouse-icon"><div class="wheel"></div></div>

Mobile Menu Toggle Button:

<!-- HTML -->
<a href="#" class="toggle-mnu hidden-lg"><span></span></a>

<!-- SASS -->
.toggle-mnu 
	display: block
	width: 28px
	height: 28px
	margin-top: 14px

	span:after, span:before 
		content: ""
		position: absolute
		left: 0
		top: 9px

	span:after
		top: 18px

	span 
		position: relative
		display: block

	span, span:after, span:before
		width: 100%
		height: 2px
		background-color: #fff
		transition: all 0.3s
		backface-visibility: hidden
		border-radius: 2px


	&.on span 
		background-color: transparent

	&.on span:before 
		transform: rotate(45deg) translate(-1px, 0px)

	&.on span:after 
		transform: rotate(-45deg) translate(6px, -7px)

<!-- jQuery -->
$(".toggle-mnu").click(function() {
	$(this).toggleClass("on");
	$(".main-mnu").slideToggle();
	return false;
});