Практика вёрстки макета страницы

Мы уже верстали секции сайта и вот мы подошли к вёрстке хедера или шапки сайта. Традиционно начнём с изменений, которые у нас появятся в стандартном CSS-файле. Теперь набор стилей по умолчанию будет таков.

* {
	box-sizing:border-box;
}
html, body {
	min-width:320px;
	font-size:16px;
	margin:0;
	padding:0;
	height:100%;
}
body {
	font-family:Roboto, Calibri, Arial, sans-serif;
	color:#252525;
}
h1, .h1 {
	display:block;
	font-size:36px;
	line-height:48px;
	font-weight:bold;
	margin-bottom:12px;
}

header, /* То же, что и div, но логически обозначает шапку */
.header,
footer, /* То же, что и div, но логически обозначает подвал */
.footer,
section,  /* То же, что и div, но логически является отдельным смысловым блоком. Должен содержать заголовок */
.section {
	width:100%;
	position:relative;
	margin:0 0 40px 0;
	position:relative;
}

footer:after,
.footer:after,
section:after,
.section:after {
	content:"";
	display:block;
	clear:both;
}

header .inner,
.header .inner,
footer .inner,
.footer .inner,
section .inner,
.section .inner {
	max-width: 1160px;
	padding:0 15px;
	margin:0 auto;
	position:relative;
}

Так как эта часть стилей будет вами копироваться из проекта в проект, то логично будет вытянуть правила в строки. Тем самым мы сэкономим в объёме как визуально, так и физически.

* {box-sizing:border-box;}
html, body {min-width:320px;font-size:16px;margin:0;padding:0;height:100%;}
body {font-family:Roboto, Calibri, Arial, sans-serif;color:#252525;}
h1, .h1 {display:block;font-size:36px;line-height:48px;font-weight:bold;margin-bottom:12px;}

header,
.header,
footer,
.footer,
section,
.section {width:100%;margin:0 0 40px 0;position:relative;}

footer:after,
.footer:after,
section:after,
.section:after {content:"";display:block;clear:both;}

header .inner,
.header .inner,
footer .inner,
.footer .inner,
section .inner,
.section .inner {max-width:1160px;padding:0 15px;margin:0 auto;position:relative;}

Вёрстка шапки сайта

Обратите внимание в стилях листинга выше отсутствует правило для header:after. Это не ошибка. Сложилась традиция наполнять шапки сайтов примерно одинаковым контентом: логотип, адрес, телефон, кнопка вызова формы обратной связи. Причём даже места расположения этих элементов устоялись.

Ниже даны картинки, которые потребуются нам для вёрстки.

Теперь напишем код для реализации шапки сайта. Этот HTML-код окончателен и мы не будем в него вносить какие-то изменения.

<header class="header">
	<div class="inner">
		<a href="/"><img class="logo" src="img/a-flowers-logo.png" alt=""/></a>
		<ul class="submenu submenu__positioning">
			<li><a href="#">Доставка</a></li>
			<li><a href="#">Оплата</a></li>
			<li><a href="#">Как заказать</a></li>
			<li><a href="#">Контакты</a></li>
		</ul>
		<div class="cart cart__positioning">
			<div class="cart__title">Мой заказ</div>
			<div class="cart__total-items">Всего товаров: <span class="cart__total-num">1022</span></div>
			<div class="cart__total-cost">На сумму: <span class="cart__total-num"><span class="cart__total-cost-value">1222230</span> <span class="rub">руб.</span></span></div>
			<div class="cart__next-step"><a class="button button_variant-01 button_size-01" href="#"><span>Оформить</span></a></div>
		</div>
		<div class="contact contact__positioning">
			<div class="contact__phone">+7 (495) 333-23-55</div>
			<div class="contact__button"><div class="button button_variant-02 button_size-02"><span>Заказать звонок</span></div></div>
		</div>
	</div>
</header>

Чтобы обеспечить некую адаптивность из коробки, в шапке позиционирование элементов делаем только абсолютное. Это позволит сжиматься хедеру некоторое расстояние без искажений за счёт пустого пространства, которое обычно встречается в середине шапки.

К тому что уже написано, добавляем пару строк стилей и смотрим промежуточный результат.

.header {
	height:188px;
	background:#42353c url(../img/bgrd-long.jpg) no-repeat 50% 0; /* Цвет #42353c взяли потому, что он максимально приближен к цвету по краям фона картинки */
}
.logo {
	position:absolute;
	top:15px;
	left:20px;
}

Текстура и фон легли нормально, логотип на своём месте. Приведу оставшийся код полностью, т.к. он объёмен и построчный разбор займёт слишком много места. По клику откроется листинг.

.header {
	height:188px;
	background:#42353c url(../img/bgrd-long.jpg) no-repeat 50% 0;
}
.logo {
	position:absolute;
	top:38px;
	left:20px;
}
.submenu {
	list-style-type:none;
	max-width:200px;
}
.submenu li {
	float:left;
	width:100%;
	font-size:14px;
	line-height:26px;
	color:#fff;
	/* А вот так делаем, чтобы строчка, если она не помещается, заканчивалась троеточием (к многострочному блоку такое нельзя применить) */
	white-space:nowrap; /* Запрещаем перенос строк */
	overflow:hidden;
	text-overflow:ellipsis; /* Собственно троеточие */
}
.submenu li a {
	color:#fff; /* Для ссылок цвет указываем отдельно */
}
.submenu__positioning {
	position:absolute;
	top:13px;
	left:330px;
}
.cart {
	width:240px;
	padding:0 0 0 70px;
	background:url(../img/icon-basket.png) no-repeat 2px 4px;
	line-height:26px;
	color:#fff;
}
.cart__positioning {
	position:absolute;
	top:29px;
	right:245px;
}
	.cart__title {
		line-height:26px;
		font-size:18px;
	}
	.cart__total-items,
	.cart__total-cost,
	.cart__next-step {
		font-size:14px;
		line-height:26px;
	}
.button {
	display:inline-block;
	padding:0 7px;
	border:1px solid #fd926d;
	cursor:pointer;
}

.button_variant-01 {
	color:#fd926d;
	border-radius:3px;
}
.button_size-01 {
	font-size:14px;
	line-height:26px;
	padding:0 7px;
}
.button_variant-01:hover {
	color:#3a373f;
	background:#fd926d;
	border:1px solid transparent;
	text-decoration:underline;
}

.button_variant-02 {
	color:#fff;
	text-transform:uppercase;
	letter-spacing:1px;
	background:#fd926d;
	border-top:1px solid #fd926d;
	border-right:1px solid #fd926d;
	border-left:1px solid #fd926d;
	border-bottom:solid 3px #df7450;
	font-family:"Open Sans", Arial, sans-serif;
}
.button_variant-02:hover {
	background:#ffb59b;
    color:#000;
}
.button_size-02 {
	line-height:30px;
	padding:14px 26px;
}

.contact {
	
}
.contact__positioning {
	position:absolute;
	top:20px;
	right:20px;
}
	.contact__phone {
		font-size:25px;
		margin:10px 0 13px 0;
		color:#fff;
	}
	.contact__button {
		text-align:right;
	}

А теперь про небольшой адаптив «из коробки»:

За счёт использования абсолютного позиционирования элементов мы получили адаптив в диапазоне от 950 до 1160 px. Можно немного увеличить диапазон естественного адаптива за счёт переведения значений свойств left и right из пикселей в проценты. Из-за величины кода ниже приведу только те значения, на которые можно распространить это нововведение.

.logo {
	left:20px; /* не имеет смысла менять, т.к. значение выдерживает минимальный отступ от левой границы */
}
.submenu__positioning {
	left:28.85%; /*  330 / 1160 = 28.85%  */
}
.cart__positioning {
	right:21.12%; /*  245 / 1160 = 21.12%  */
}
.contact__positioning {
	right:20px;  /* не имеет смысла менять */
}

Диапазон увеличился, но в районе 1000 пикселей мы видим наложение кнопки и телефона на корзину. Исправим это. Добавим в конеч CSS файла инструкцию.

@media (max-width: 1010px) { /* в диапазоне до 1010 пикселей применять правила: */
	.cart__positioning {
		right:25%;
	}
}

Мы добавили к естественному адаптиву ещё 50 пикселей, теперь он работает не от 950, а от 900 пикселей. Но рывок выглядит непрезентабельно для клиента. Надо сгладить этот момент. Добавим к .cart__positioning правило transition.

.cart__positioning {
	position:absolute;
	top:29px;
	right:245px;
	transition:.3s;
}

Теперь переход анимирован и такое уже не стыдно показать пользователю.

Конечный CSS-файл (по клику откроется листинг):

* {box-sizing:border-box;}
html, body {min-width:320px;font-size:16px;margin:0;padding:0;height:100%;}
body {font-family:Roboto, Calibri, Arial, sans-serif;color:#252525;}
h1, .h1 {display:block;font-size:36px;line-height:48px;font-weight:bold;margin-bottom:12px;}

header,
footer,
section,
.section {width:100%;margin:0 0 40px 0;}

footer:after,
section:after,
.section:after {content:"";display:block;clear:both;}

header .inner,
footer .inner,
section .inner,
.section .inner {max-width:1160px;padding:0 15px;margin:0 auto;position:relative;}

.header {
	height:188px;
	background:#42353c url(../img/bgrd-long.jpg) no-repeat 50% 0;
}
.logo {
	position:absolute;
	top:38px;
	left:20px;
}
.submenu {
	list-style-type:none;
	max-width:200px;
}
.submenu li {
	float:left;
	width:100%;
	font-size:14px;
	line-height:26px;
	color:#fff;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.submenu li a {
	color:#fff;
}
.submenu__positioning {
	position:absolute;
	top:13px;
	left:330px;
}
.cart {
	width:240px;
	padding:0 0 0 70px;
	background:url(../img/icon-basket.png) no-repeat 2px 4px;
	line-height:26px;
	color:#fff;
}
.cart__positioning {
	position:absolute;
	top:29px;
	right:245px;
	transition:.3s;
}
	.cart__title {
		line-height:26px;
		font-size:18px;
	}
	.cart__total-items,
	.cart__total-cost,
	.cart__next-step {
		font-size:14px;
		line-height:26px;
	}
.button {
	display:inline-block;
	padding:0 7px;
	border:1px solid #fd926d;
	cursor:pointer;
}

.button_variant-01 {
	color:#fd926d;
	border-radius:3px;
}
.button_size-01 {
	font-size:14px;
	line-height:26px;
	padding:0 7px;
}
.button_variant-01:hover {
	color:#3a373f;
	background:#fd926d;
	border:1px solid transparent;
	text-decoration:underline;
}

.button_variant-02 {
	color:#fff;
	text-transform:uppercase;
	letter-spacing:1px;
	background:#fd926d;
	border-top:1px solid #fd926d;
	border-right:1px solid #fd926d;
	border-left:1px solid #fd926d;
	border-bottom:solid 3px #df7450;
	font-family:"Open Sans", Arial, sans-serif;
}
.button_variant-02:hover {
	background:#ffb59b;
	color:#000;
}
.button_size-02 {
	line-height:30px;
	padding:14px 26px;
}

.contact {
	
}
.contact__positioning {
	position:absolute;
	top:20px;
	right:20px;
}
	.contact__phone {
		font-size:25px;
		margin:10px 0 13px 0;
		color:#fff;
	}
	.contact__button {
		text-align:right;
	}


.submenu__positioning {
	left:28.85%;
}
.cart__positioning {
	right:21.12%;
}

@media (max-width: 1010px) {
	.cart__positioning {
		right:25%;
	}
}

Вёрстка подвала

Теперь заверстаем подвал. Как правило в макетах его размер по высоте фиксирован. Это нам на руку, т.к. подвал с фиксированной высотой можно прибить к низу. Дело в том, что если верстать обычными секциями, то при недостатке контента или при уменьшении масштаба в браузере, подвал будет висеть «в воздухе». Для текущего макета высота подвала составляет 188 пикселей.

В качестве фона будет использован фон для шапки. Для скачивания лишь один файл — логотип студии.

Как же именно прибивают подвал к низу? Для этого всё содержимое, кроме самого́ подвала, оборачивается в блок, я обычно задаю ему класс .outer, другие чаще ему дают название .wrapper. Блок-обёртку растягивают на 100% по высоте. Внутри него, в самом конце, создают ещё один блок с высотой, равной высоте подвала. Ему я даю название .footer-place. А вот уже под блоком-обёрткой (под .outer) создают собственно подвал и за счёт отрицательного margin-top его подтягивают на место блока .footer-place.

Привожу код страницы с созданным, но не наполненным подвалом.

<html lang="ru">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="author" content="" />
	<title>Вёрстка - введение</title>
	<link rel="stylesheet" href="css/style.css" />

</head>

<body>

<div class="outer">	<!-- Это блок-обёртка. Включает в себя всё, кроме самого подвала -->

	<header class="header">
		<div class="inner">
			<a href="/"><img class="logo" src="img/a-flowers-logo.png" alt=""/></a>
			<ul class="submenu submenu__positioning">
				<li><a href="#">Доставка</a></li>
				<li><a href="#">Оплата</a></li>
				<li><a href="#">Как заказать</a></li>
				<li><a href="#">Контакты</a></li>
				<li><a href="#">Очень длинный элемент меню, чтобы проверить, как элементы обрезаются при переполнении</a></li>
			</ul>
			<div class="cart cart__positioning">
				<div class="cart__title">Мой заказ</div>
				<div class="cart__total-items">Всего товаров: <span class="cart__total-num">1022</span></div>
				<div class="cart__total-cost">На сумму: <span class="cart__total-num"><span class="cart__total-cost-value">1222230</span> <span class="rub">₽</span></span></div>
				<div class="cart__next-step"><a class="button button_variant-01 button_size-01" href="#"><span>Оформить</span></a></div>
			</div>
			<div class="contact contact__positioning">
				<div class="contact__phone">+7 (495) 333-23-55</div>
				<div class="contact__button"><div class="button button_variant-02 button_size-02"><span>Заказать звонок</span></div></div>
			</div>
		</div>
	</header>

	<div class="section">
		<div class="inner">
			<h1>Заголовок страницы</h1>
			<p>Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности представляет собой интересный эксперимент проверки форм развития. Не следует, однако забывать, что постоянное информационно-пропагандистское обеспечение нашей деятельности играет важную роль в формировании направлений прогрессивного развития. Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности представляет собой интересный эксперимент проверки систем массового участия. С другой стороны начало повседневной работы по формированию позиции требуют от нас анализа новых предложений.</p>
		</div>
	</div>

	<div class="footer-place"></div>	<!-- Это блок, который выделяет внутри .outer место под подвал -->

</div>

<footer>	<!-- Это подвал -->
	<div class="inner">
	
	</div>
</footer>

</body>

</html>

А теперь добавим только тот CSS-код, который реализует прибивание подвала к низу.

.outer {
	min-height:100%; /* .outer по высоте на 100% */
    overflow: hidden; /* если какие-то элементы содержимого вылезут за границы, мы обрезаем их */
}

.footer-place {
	height:188px; /* выделяем место под footer внутри блока .outer */
}

footer {
	height:188px;
	margin:-188px 0 0 0; /* подтягиваем блок вверх, на место .footer-place */
	background:#42353c url(../img/bgrd-long.jpg) no-repeat 50% 0;
}

А теперь проверим результат в браузере, для гарантии будем использовать уменьшение масштаба.

Дополним код подвала:

<footer class="footer">
	<div class="inner">

		<div class="footer__menu">
			<ul class="submenu submenu_footer-positioning submenu_footer-styling">
			<li><a href="#">Главная</a></li>
			<li><a href="#">Доставка</a></li>
			<li><a href="#">Оплата</a></li>
			<li><a href="#">Как заказать</a></li>
			<li><a href="#">Корзина</a></li>
			<li><a href="#">Контакты</a></li>
			</ul>
		</div>

		<div class="copyright">
			Все права защищены, копирование информации запрещено<br>
			© «A-Flower», 2005 — 2017.
		</div>
		<div class="creator">
			<span>Сделано в </span><br><a href="#"><img class="webestet" src="img/webestet.png" alt="Сделано в Webestet"></a>
		</div>

	</div>
</footer>

Стили подвала:

footer,
footer p {
	color:#fff;
	font-size:14px;
}
.footer__menu {
	height:74px;
	text-align:center;
}
	.submenu_footer-positioning {
		display:inline-block;
		max-width:960px;
		position:relative;
		height:32px;
		list-style-type:none;
		margin:24px auto 0 auto;
		text-align:center;
	}
	.submenu_footer-styling li { /* Обнуляем стили, которые относятся к позиционированию элементов меню в шапке */
		float:none;
		width:auto;
	}
	.footer__menu .submenu li {
		display:inline-block;
		height:32px;
		color:#fff;
		margin:0 5px;
		font-size:14px;
	}
		.footer__menu .submenu li a {
			display:block;
			height:29px;
			line-height:29px;
			padding:0 5px;
			color:#fff;
		}
		.footer__menu .submenu li a:hover { /* красиво оформим наведение на ссылку */
			background:#fd926d;
			border-bottom:solid 3px #dd6b44;
			text-decoration:none;
		}
	.copyright {
		width:280px;
		position:absolute;
		top:82px;
		left:20px;
	}
	.creator {
		position:absolute;
		top:82px;
		right:20px;
	}
		.creator span {padding-left:35px;}
		.creator img {border:0;}
		.webestet {position:relative;top:4px;}

Итоговый листинг HTML:

<html lang="ru">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="author" content="" />
	<title>Вёрстка - введение</title>
	<link rel="stylesheet" href="css/style.css" />

</head>

<body>

<div class="outer">

	<header class="header">
		<div class="inner">
			<a href="/"><img class="logo" src="img/a-flowers-logo.png" alt=""/></a>
			<ul class="submenu submenu__positioning">
				<li><a href="#">Доставка</a></li>
				<li><a href="#">Оплата</a></li>
				<li><a href="#">Как заказать</a></li>
				<li><a href="#">Контакты</a></li>
				<li><a href="#">Очень длинный элемент меню, чтобы проверить, как элементы обрезаются при переполнении</a></li>
			</ul>
			<div class="cart cart__positioning">
				<div class="cart__title">Мой заказ</div>
				<div class="cart__total-items">Всего товаров: <span class="cart__total-num">1022</span></div>
				<div class="cart__total-cost">На сумму: <span class="cart__total-num"><span class="cart__total-cost-value">1222230</span> <span class="rub">₽</span></span></div>
				<div class="cart__next-step"><a class="button button_variant-01 button_size-01" href="#"><span>Оформить</span></a></div>
			</div>
			<div class="contact contact__positioning">
				<div class="contact__phone">+7 (495) 333-23-55</div>
				<div class="contact__button"><div class="button button_variant-02 button_size-02"><span>Заказать звонок</span></div></div>
			</div>
		</div>
	</header>

	<div class="section">
		<div class="inner">
			<h1>Заголовок страницы</h1>
			<p>Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности представляет собой интересный эксперимент проверки форм развития. Не следует, однако забывать, что постоянное информационно-пропагандистское обеспечение нашей деятельности играет важную роль в формировании направлений прогрессивного развития. Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности представляет собой интересный эксперимент проверки систем массового участия. С другой стороны начало повседневной работы по формированию позиции требуют от нас анализа новых предложений.</p>
		</div>
	</div>

	<div class="footer-place"></div>

</div>

<footer class="footer">
	<div class="inner">

		<div class="footer__menu">
			<ul class="submenu submenu_footer-positioning submenu_footer-styling">
			<li><a href="#">Главная</a></li>
			<li><a href="#">Доставка</a></li>
			<li><a href="#">Оплата</a></li>
			<li><a href="#">Как заказать</a></li>
			<li><a href="#">Корзина</a></li>
			<li><a href="#">Контакты</a></li>
			</ul>
		</div>

		<div class="copyright">
			Все права защищены, копирование информации запрещено<br>
			© «A-Flower», 2005 — 2017.
		</div>
		<div class="creator">
			<span>Сделано в </span><br><a href="#"><img class="webestet" src="img/webestet.png" alt="Сделано в Webestet"></a>
		</div>

	</div>
</footer>

</body>

</html>

Итоговый листинг CSS:

* {box-sizing:border-box;}
html, body {min-width:320px;font-size:16px;margin:0;padding:0;height:100%;}
body {font-family:Roboto, Calibri, Arial, sans-serif;color:#252525;}
h1, .h1 {display:block;font-size:36px;line-height:48px;font-weight:bold;margin-bottom:12px;}

header,
footer,
section,
.section {width:100%;margin:0 0 40px 0;}

footer:after,
section:after,
.section:after {content:"";display:block;clear:both;}

header .inner,
footer .inner,
section .inner,
.section .inner {max-width:1160px;padding:0 15px;margin:0 auto;position:relative;}

.outer {
	min-height:100%;
    overflow:hidden;
}

.footer-place {
	height:188px;
}

footer {
	height:188px;
	margin:-188px 0 0 0;
	background:#42353c url(../img/bgrd-long.jpg) no-repeat 50% 0;
}

.header {
	height:188px;
	background:#42353c url(../img/bgrd-long.jpg) no-repeat 50% 0;
}
.logo {
	position:absolute;
	top:38px;
	left:20px;
}
.submenu {
	list-style-type:none;
	max-width:200px;
}
.submenu li {
	float:left;
	width:100%;
	font-size:14px;
	line-height:26px;
	color:#fff;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.submenu li a {
	color:#fff;
}
.submenu__positioning {
	position:absolute;
	top:13px;
	left:330px;
}
.cart {
	width:240px;
	padding:0 0 0 70px;
	background:url(../img/icon-basket.png) no-repeat 2px 4px;
	line-height:26px;
	color:#fff;
}
.cart__positioning {
	position:absolute;
	top:29px;
	right:245px;
	transition:.3s;
}
	.cart__title {
		line-height:26px;
		font-size:18px;
	}
	.cart__total-items,
	.cart__total-cost,
	.cart__next-step {
		font-size:14px;
		line-height:26px;
	}
.button {
	display:inline-block;
	padding:0 7px;
	border:1px solid #fd926d;
	cursor:pointer;
}

.button_variant-01 {
	color:#fd926d;
	border-radius:3px;
}
.button_size-01 {
	font-size:14px;
	line-height:26px;
	padding:0 7px;
}
.button_variant-01:hover {
	color:#3a373f;
	background:#fd926d;
	border:1px solid transparent;
	text-decoration:underline;
}

.button_variant-02 {
	color:#fff;
	text-transform:uppercase;
	letter-spacing:1px;
	background:#fd926d;
	border-top:1px solid #fd926d;
	border-right:1px solid #fd926d;
	border-left:1px solid #fd926d;
	border-bottom:solid 3px #df7450;
	font-family:"Open Sans", Arial, sans-serif;
}
.button_variant-02:hover {
	background:#ffb59b;
	color:#000;
}
.button_size-02 {
	line-height:30px;
	padding:14px 26px;
}

.contact {
	
}
.contact__positioning {
	position:absolute;
	top:20px;
	right:20px;
}
	.contact__phone {
		font-size:25px;
		margin:10px 0 13px 0;
		color:#fff;
	}
	.contact__button {
		text-align:right;
	}


.submenu__positioning {
	left:28.85%;
}
.cart__positioning {
	right:21.12%;
}

ul {padding:0;margin:0;}

footer,
footer p {
	color:#fff;
	font-size:14px;
}
.footer__menu {
	height:74px;
	text-align:center;
}
	.submenu_footer-positioning {
		display:inline-block;
		max-width:960px;
		position:relative;
		height:32px;
		list-style-type:none;
		margin:24px auto 0 auto;
		text-align:center;
	}
	.submenu_footer-styling li {
		float:none;
		width:auto;
	}
	.footer__menu .submenu li {
		display:inline-block;
		height:32px;
		color:#fff;
		margin:0 5px;
		font-size:14px;
	}
		.footer__menu .submenu li a {
			display:block;
			height:29px;
			line-height:29px;
			padding:0 5px;
			color:#fff;
		}
		.footer__menu .submenu li a:hover {
			background:#fd926d;
			border-bottom:solid 3px #dd6b44;
			text-decoration:none;
		}
			.copyright {
				width:280px;
				position:absolute;
				top:82px;
				left:20px;
			}
			.creator {
				position:absolute;
				top:82px;
				right:20px;
			}
				.creator span {padding-left:35px;}
				.creator img {border:0;}
				.webestet {position:relative;top:4px;}

@media (max-width: 1010px) {
	.cart__positioning {
		right:25%;
	}
}