Итог прохождения курсов - первая верстка. Очень нужна ваша критика.

Alivan · 26.Август.2017 22:55:39

Приветствую всех!

На прохождение курсов у меня ушло около 16 дней. Еще какое-то время читала статьи, на которые ссылались в заданиях, и другие, попутно подвернувшиеся под руку, интересные материалы на Хабрахабре и.пр. Макет для первой верстки был выбран из рассылки HTMLacademy за этот месяц. Для первого раза выбирала самый простой, с наименьшим количеством разделов…

О, как я была наивна!
Нет, в нем нет почти ничего сложного. Почти. Кроме надписей.

(41 mail) Photobook 01

Если присмотреться, то можно заметить, что все буквы в названии “LightBook” прописные, но выполнены разным кеглем. Photoshop, правда, утверждает что одним, но к нему доверия нет. Еще веселей становится когда эта же конструкция внизу карточки группируется с уже уже более нормальным на вид текстом “Make your”.
Впрочем, сделать можно все, идеи были. Но стоит ли авчинка выделки?
Я рассудила что на данный момент в верстке есть проблемы более глобального характера и ограничилась стилизацией ::first-letter и строки в целом.

Поэтому именно на соответствие подобных надписей на сайте исходному макету прошу не обращать особо внимания.

На написание html-кода у меня ушло где-то полдня, Затем день я писала css-стили, на следующий день их удалила, и за два - два с половиной дня написала новые.

Самая большая проблема с которой я столкнулась - это непонимание как оно вообще работает на сайте в реальности. Т.е., к примеру, чтобы изменить стоимость администратор сайта должен иметь какой-то внутренний интерфейс для взаимодействия с html. Какой, как он утроен, как “связать” кнопочку в админ-панели с конкретными тегами? В общем, читать мне еще предстоит много

А пока очень прошу Вас оценить первый блин и дать пинок в нужном направлении.

Архив с проектом - без правок.

Исходный шаблон из рассылки

Проект на GitHub - уже с правками.

Заранее огромное спасибо всем откликнувшимся!

…

Для удобства также добавлю код прямо сюда.

	<header>

	<nav class="header-nav">
		<div class="main_menu">
			<span></span>
			<ul>
				<li>
					<a href="#">Photobooks</a>
					<ul>
						<li><a href="#">LightBook</a></li>
						<li><a href="#">ClassicBook</a></li>
						<li><a href="#">PremiumBook</a></li>
					</ul>
				</li>
				<li><a href="#">Terms</a></li>
				<li>
					<a href="#">Payment</a>
					<ul>
						<li><a href="#">VISA</a></li>
						<li><a href="#">MasterCard</a></li>
						<li><a href="#">PayPal</a></li>
						<li><a href="#">American Express</a></li>
					</ul>
				</li>
				<li><a href="#">Shipping</a></li>
			</ul>
		</div>
		<div class="logo">
			<a href="#"><img src="img/logo.png" alt="PHOTOBOOK"></a>
		</div>
		<div class="phone_number">
			<span>+11 235 813 2134</span>
		</div>
		<div class="sign_in">
			<a href="#">Sign in</a>
		</div>
	</nav>

	<section class="promo">
		<div class="wrapper">
			<h1>Create your own photostory</h1>
			<p>Make your photobook online</p>
			<a href="#" class="btn">Make your photobook</a>
		</div>
	</section>

</header>

<main>

	<section class="steps">
		<div class="wrapper">
				<div class="step">Download photos</div>
				<div class="step">Design your photobook</div>
				<div class="step">Pay<br>for service</div>
				<div class="step">Get your photobook</div>
		</div>
	</section>

	<section class="advantage">
		<div class="wrapper">
			<h2>Advantage</h2>
			<figure>
				<img src="img/social.png" alt="Social networks">
				<figcaption>
					<h3>Import photos<br>from your social networks</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt modi tempora</p>
				</figcaption>
			</figure>
			<figure>
				<img src="img/editing.jpg" alt="Photo editing">
				<figcaption>
					<h3>Photo editing</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ora incidunt ut labore.</p>
				</figcaption>
			</figure>
			<figure>
				<img src="img/templates.jpg" alt="Templates">
				<figcaption>
					<h3>Templates</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing. Ut enim ad minim, nostrud exercitation ullamco laboris nisi ut aliquip ex commodo.</p>
				</figcaption>
			</figure>
			<span><a href="#" class="btn btn-red">Make your photobook</a></span>
		</div>
	</section>

	<section class="products">
		<div class="wrapper">
			<h2>Ready solutions</h2>
			<article data-title="LightBook">
				<h3>LightBook</h3>
				<ul>
					<li>15x10 cm</li>
					<li>12 pages</li>
					<li>binding on the clip</li>
				</ul>
				<span class="price">$129</span>
			</article>
			<article data-title="ClassicBook" class="best">
				<h3>ClassicBook</h3>
				<ul>
					<li>30x21 cm</li>
					<li>36 pages</li>
					<li>binding on the spring</li>
					<li>fabric cover</li>
				</ul>
				<span class="price">$239</span>
			</article>
			<article data-title="PremiumBook">
				<h3>PremiumBook</h3>
				<ul>
					<li>45x50 cm</li>
					<li>50 pages</li>
					<li>hardcover</li>
					<li>leather cover</li>
					<li>free shipping</li>
				</ul>
				<span class="price">$759</span>
			</article>
		</div>
	</section>

	<section class="reviews">
		<div class="wrapper">
			<div class="wrapper-left">
				<h2>Testimonials</h2>
				<article class="review">
					<header>
						<h3>John Doe</h3>
						<span>Wedding photographer</span>
					</header>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
					<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
				</article>
				<a href="#" class="next-review">Next testimonial</a>
				<a href="#" class="btn">Make your photobook</a>
			</div>
			<div class="wrapper-right"></div>
		</div>
	</section>

	<section class="helpful_info">
		<div class="wrapper">
			<article>
				<h3>Terms</h3>
				<div>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
					<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.</p>
				</div>
			</article>
			<article>
				<h3>Payment</h3>
				<div>
				<p>Payment methods:</p>
					<ul>
						<li>VISA</li>
						<li>MasterCard</li>
						<li>PayPal</li>
						<li>American Express</li>
					</ul>
				</div>
			</article>
			<article>
				<h3>Shipping</h3>
				<div>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
					<p class="bonus">Free shipping for PremiumBook</p>
				</div>
			</article>
			<span><a href="#" class="btn btn-red">Make your photobook</a></span>
		</div>
	</section>

</main>

<footer>

	<div class="wrapper">
			<ul>
				<li><a href="#">About us</a></li>
				<li><a href="#">Careers</a></li>
				<li><a href="#">Help</a></li>
				<li><a href="#">Press</a></li>
			</ul>
			<ul>
				<li><a href="#">Terms</a></li>
				<li><a href="#">Payment</a></li>
				<li><a href="#">Shipping</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			<ul class="product">
				<li><a href="#">LightBook</a></li>
				<li><a href="#">ClassicBook</a></li>
				<li><a href="#">PremiumBook</a></li>
			</ul>

		<aside>
			<div class="social">
				<a href="#" class="fs">Fasebook</a><a href="#" class="vk">Вконтакте</a><a href="#" class="in">Instagram</a>
			</div>
			<div class="design-copy">
				<span>Designed by</span>
				<img src="img/design_copy.png" alt="Asanov">
			</div>
		</aside>
		
		<div class="copyright">
			&copy; 2017 Photobook. All rights reserved.
		</div>
	</div>

</footer>

И СSS-стили:

@font-face {
  font-family: "AgoraSansProLight";
  src:
    local("AgoraSansProLight"),
    url("../fonts/AgoraSansProLight.woff") format("woff");
}

@font-face {
  font-family: "AgoraSansProRegular";
  src:
    local("AgoraSansProRegular"),
    url("../fonts/AgoraSansProRegular.woff") format("woff");
}

@font-face {
  font-family: "AgoraSansProThin";
  src:
    local("AgoraSansProThin"),
    url("../fonts/AgoraSansProThin.woff") format("woff");
}

@font-face {
  font-family: "AgoraSansProXThin";
  src:
    local("AgoraSansProXThin"),
    url("../fonts/AgoraSansProXThin.woff") format("woff");
}

@font-face {
  font-family: "AgoraSansProBold";
  src:
    local("AgoraSansProBold"),
    url("../fonts/AgoraSansProBold.woff") format("woff");
}

/*--------------- COMMON ELEMENTS ---------------*/

html,
body {
	margin: 0;
	padding: 0;
	background: #ffffff;
	color: #000000;
	font-family: "AgoraSansProLight", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "AgoraSansProXThin", sans-serif;
	letter-spacing: 0.06em;
	font-variant: small-caps;
	margin: 0;
}

h1 {
	font-size: 3.3333em;
}

h2 {
	font-size: 3.3em;
	letter-spacing: 0.065em;
}

h3 {
	font-size: 1.3em;
	letter-spacing: 0.18em;
}


p {
	margin: 0 0 0.5em;
}

body > footer,
section {
	display: flex;
	justify-content: center;
	min-width: 1243px;
}

.wrapper {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	align-content: flex-start;
	flex-wrap: wrap;
	width: 1079px;
}

.btn {
	display: inline-block;
	padding: 17px 36px 17px;
	margin: 0 auto;
	font-family: "AgoraSansProThin";
	font-size: 1.4444em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: #000000;
	border: 1px solid #000000;
	border-radius: 10px;
}

.btn:hover {
	color: #f0c000;
	border-color: #f0c000;
	font-weight: bold;
}

.btn:active {
	color: #888888;
}

.btn-red {
	background-color: #e11a27;
	border-color: #e11a27;
	color: #f3f0e7;
}

.btn-red:hover {
	background-color: #ffd200;
	border-color: #ffd200;
	color: #f3f0e7;
	font-weight: bold;
}

.btn-red:active {
	color: #888888;
}

/*--------------- HEADER ---------------*/

.header-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 1243px;
	margin: 0 auto;
	min-height: 80px;
}

.main_menu {
	position: relative;
	width: 26px;
	height: 26px;
	margin: 0 20px;
	cursor: pointer;
}

.main_menu span,
.main_menu span::before,
.main_menu span::after {
	position: absolute;
	display: block;
	width: 26px;
	height: 2px;
	background-color: #000000;
	transition-duration: 0.3s;
}

.main_menu span {
	top: 12px;
	left: 0;
}

.main_menu span::before {
	content: "";
	top: -8px;
	left: 0px;
}

.main_menu span::after {
	content: "";
	top: 8px;
	left: 0;
}

.main_menu:hover  span{
	transform: rotate(90deg) scale(0.8, 1) translateX(-2px);
}

.main_menu:hover span::before {
	transform-origin: top right;
	transform:  rotate(45deg) scale(0.5, 1) translate(15px, 5px);
}

.main_menu:hover span::after {
	transform-origin: bottom right;
	transform:  rotate(-45deg) scale(0.5, 1)  translate(15px, -5px);
}

.main_menu ul {
	position: absolute;
	list-style: none;
	margin: 0;
	padding: 0;
	transform-origin: top left;
	transition-duration: 0.3s;
	opacity: 0;
	transform: scale(0);
}

.main_menu li {
	position: relative;
}

.main_menu > ul {
	top: 25px;
	left: -20px;
	padding: 27px 0 0;
}

.main_menu:hover > ul {
	opacity: 1;
	transform: scale(1);
}

.main_menu li > ul {
	top: 0;
	left: 100%;
}

.main_menu li:hover > ul {
	opacity: 1;
	transform: scale(1);
}

.main_menu li > ul li {
	border-left: 1px solid #f3f0e7;
}

.main_menu li > ul li:first-child {
	border-left: 1px solid #ffd200;
}

.main_menu li > ul li:first-child::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	border: 19px solid transparent;
	border-right: none;
	border-left: 10px solid #ffd200;
	transform-origin: center left;
	transform: translateX(-19px) scale(0);	
}

.main_menu li:hover > ul li:first-child::after {
	transform: translateX(0px) scale(1);
	transition-duration: 0.2s;
	transition-delay: 0.1s;
}

.main_menu a {
	display: block;
	position: relative;
	min-width: 150px;
	padding: 10px 20px;
	box-sizing: border-box;
	background: #ffffff;
	color: #000000;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.85em;
}

.main_menu li:hover > a {
	color: #ffffff;
	background: #ffd200;
	font-weight: bold;
}

.main_menu li a:active {
	color: #888888;
}

.logo {
	width: 162px;
	height: 19px;
	margin-left: 46px;
	margin-right: auto;
}

.logo img {
	width: 162px;
	height: 19px;
}

.phone_number {
	min-width: 137px;
	margin-right: 36px;
	margin-left: 56px;
	padding: 10px 37px;
	background-color: #ffd200;
	border-radius: 10px;
	font-size: 0.878em;
	letter-spacing: 0.06em;
}

.phone_number:hover {
	font-weight: bold;
}

.phone_number::after {
	content: "";
	display: block;
	width: 100%;
	border-top: 1px dotted #000000;
}

.sign_in {
	position: relative;
	width: 31px;
	height: 29px;
	margin: 0 20px;
	font-size: 0;
	
}

.sign_in::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 18px;
	height: 29px;
	background: #000000;
	transform-origin: center right;
	transform: scale(0, 1);
	transition-duration: 0.3s;
}

.sign_in:hover::before {
	transform: scale(1);
}

.sign_in a {
	display: block;
	position: relative;
	width: 23px;
	height: 25px;
	border: 2px solid #000000;
	border-left: none;
	margin-left: 8px;	
}

.sign_in a::before {
	content: "";
	display: block;
	position: absolute;
	top: 12px;
	left: -8px;
	width: 19px;
	height: 2px;
	background-color: #000000;
	transform: translateX(0px);
	transition-duration: 0.3s;
}

.sign_in a::after {
	content: "";
	display: block;
	position: absolute;
	top: 8px;
	left: 0px;
	width: 8px;
	height: 8px;
	border: 2px solid #000000;
	border-left: none;
	border-bottom: none;
	transform: translateX(0px) rotate(45deg);
	transition-duration: 0.3s;
}

.sign_in a:hover::before {
	background-color: #ffffff;
	transform: translateX(7px);
}

.sign_in a:hover::after {
	border: 2px solid #ffffff;
	border-left: none;
	border-bottom: none;
	transform: translateX(7px) rotate(45deg);
}

header .wrapper {
	display: block;
	padding: 43px 0;
	text-align: center;
	margin: 0 auto;
}

.promo {
	width: 100%;
	min-height: 547px;
	background: #f3f0e7 url("../img/banner.jpg") no-repeat 50% 100%;
	background-size: cover;
}

.promo h1 {
	margin-bottom: 0.1em;
}

.promo p {
	font-size: 1.33em;
	margin-bottom: 67px;
}

/*--------------- STEPS ---------------*/

.steps {
	min-height: 362px;
}

.steps .wrapper {
	position: relative;
	justify-content: space-around;
	padding: 55px 0;
}

.steps .wrapper::before {
	content: "";
	display: block;
	position: absolute;
	top: 122px;
	width: 80%;
	max-width: 800px;
	margin: 0 auto;
	border-top: 5px dashed #ffd200;
}

.steps .step {
	width: 140px;
	font-size: 1.3333em;
	text-align: center;
	background: #ffffff;
	z-index: 10;
} 

.steps .step::before {
	content: "";
	display: block;
	width: 130px;
	height: 130px;
	margin-bottom: 20px;
	border: 5px solid #ffd200;
	border-radius: 50%;
}

.steps .step:nth-child(1)::before {
	background: #ffffff url("../img/steps_sprite.png") no-repeat 0px 5px;
}

.steps .step:nth-child(2)::before {
	background: #ffffff url("../img/steps_sprite.png") no-repeat -130px 0px;
}

.steps .step:nth-child(3)::before {
	background: #ffffff url("../img/steps_sprite.png") no-repeat -260px -5px;
}

.steps .step:nth-child(4)::before {
	background: #ffffff url("../img/steps_sprite.png") no-repeat -390px 0px;
}

/*--------------- ADVANTAGE ---------------*/

.advantage {
	background: #f7f0e6;
	min-height: 817px;
}

.advantage .wrapper {
	padding: 45px 0;
}

.advantage h2 {
	display: block;
	width: 100%;
	text-align: center;
	margin-bottom: 33px;
}

.advantage figure {
	max-width: 267px;
	padding: 20px;
	margin: 0 0 58px;
	text-align: center;
}

.advantage figure img {
	width: 267px;
	height: 267px;
	background-color: #ffffff;
	border-radius: 50%;
	margin-bottom: 12px;
}

.advantage figure h3 {
	font-variant: normal;
	font-size: 1.3333em;
	letter-spacing: 0.03em;
	margin-bottom: 20px;
}

.advantage figure h3::first-letter {
	font-size: 1em;
}

.advantage p {
	font-size: 0.8888em;
}

.advantage span {
	display: block;
	width: 100%;
	text-align: center;
}

/*--------------- PRODUCTS ---------------*/

.products {
	min-height: 730px;
}

.products .wrapper {
	padding: 60px 0;
}

.products h2 {
	display: block;
	margin-bottom: 45px;
	width: 100%;
	text-align: center;
}

.products article {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 313px;
	min-height: 367px;
	box-sizing: border-box;
	border: 5px solid #ffd200;
	border-radius: 10px;
	margin-top: 22px;
}

.products article h3 {
	display: block;
	width: 100%;
	padding: 36px 0 39px;
	background-color: #ffd200;
	font-family: "AgoraSansProRegular";
	font-size: 1.85em;
	line-height: 1em;
	letter-spacing: 0.12em;
	text-align: center;
}

.products article ul {
	margin: 15px 22px 5px;
	padding: 0;
	list-style: none;
}

.products article li {
	position: relative;
	padding-left: 37px;
	line-height: 1.75em;
	letter-spacing: 0.02em;
}

.products article li::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	width: 16px;
	height: 16px;
	border: 2px solid #ffd200;
	border-top-color: transparent;
	border-radius: 50%;
	transform: rotate(45deg);
}

.products article li:after {
	content: "";
	position: absolute;
	top: 10px;
	left: 6px;
	width: 9px;
	height: 3px;
	border: 2px solid #000000;
	border-top: none;
	border-right: 0;
	transform: rotate(-45deg);
}

.products article .price {
	display: block;
	width: 100%;
	margin: auto 0 5px;
	font-size: 3.3333em;
	text-align: center;
}

.products article::after {
	content: "Make your " attr(data-title);
	display: block;
	width: 100%;
	padding: 14px 0 8px;
	background-color: #ffd200;
	font-family: "AgoraSansProThin";
	font-size: 1.2em;
	letter-spacing: 0.09em;
	text-align: center;
}

.products .best h3 {
	position: relative;	
}

.products .best h3::before {
	content: "";
	display: block;
	position: absolute;
	width: 155px;
	top: -27px;
	left: 52px;
	border: 22px solid #ffd200;
	border-top: none;
	border-left-color: transparent;
	border-right-color: transparent;
}

.products .best h3::after {
	content: "Bestseller";
	position: absolute;
	top: -22px;
	left: 0;
	width: 100%;
	font-family: "AgoraSansProBold";
	font-size: 0.6111em;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	color: #e11a27;
}

/*--------------- REVIEWS ---------------*/

.reviews {	
	min-height: 767px;
	background: #f7f0e6 url("../img/cover.jpg") no-repeat 50% 50%;
	background-size: auto 100%;
}

.reviews .wrapper-left,
.reviews .wrapper-right {
	width: 50%;
}

.reviews .wrapper-left {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 30px 0 54px;
}

.reviews h2 {
	margin-bottom: 37px;
}

.reviews article header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	padding-left: 188px;
	min-height: 158px;
	margin-bottom: 25px;
}

.reviews article header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 158px;
	height: 158px;
	border-radius: 50%;
	background: url("../img/avatar.jpg") no-repeat 50% 50%;
}

.reviews article header h3{
	margin-bottom: 0.2em;
}

.reviews .next-review {
	display: block;
	position: relative;
	margin: 25px 0;
	padding-right: 40px;
	text-align: right;
	color: #000000;
	text-decoration: none;
	font-size: 0.8888em;
	letter-spacing: -0.015em;
}

.reviews .next-review:hover {
	text-decoration: underline;
}

.reviews .next-review:active {
	color: #888888;
}

.reviews .next-review::before {
	content: "";
	display: block;
	position: absolute;
	top: 8px;
	right: 7px;
	width: 20px;
	height: 1px;
	background-color: #000000;
}

.reviews .next-review::after {
	content: "";
	display: block;
	position: absolute;
	top: 6px;
	right: 0;
	border: 2px solid #000000;
	border-right: none;
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-left-width: 7px;
}

.reviews .btn {
	margin-top: auto;
}

/*--------------- HELPFULL INFO ---------------*/

.helpful_info {
	min-height: 659px;
}

.helpful_info .wrapper {
	padding: 92px 0;
}

.helpful_info article {
	width: 313px;
	min-height: 307px;
	margin-bottom: 75px;
	background: #f7f0e6;
	border-radius: 10px;
}

.helpful_info article h3 {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
	background: #ffd200;
	border-bottom: 6px solid #ffffff;
	font-size: 2em;
	letter-spacing: 0.08em;
	text-align: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.helpful_info article > div {
	padding: 28px 36px;
	font-family: "AgoraSansProRegular";
}

.helpful_info article > div ul {
	margin: 0;
	padding-left: 29px;
	line-height: 1.7em;
}

.helpful_info article .bonus {
	font-family: "AgoraSansProBold";
	color: #e11a27;
}

.helpful_info .wrapper > span {
	display: block;
	width: 100%;
	text-align: center;
}

/*--------------- FOOTER ---------------*/

body > footer {
	background-color: #ffd200;
	min-height: 376px;
	font-family: "AgoraSansProRegular";
	line-height: 1.5em;
}

body > footer .wrapper {
	align-content: stretch;
	padding: 50px 0;
}

body > footer ul {
	width: 150px;
	list-style: none;
	padding: 25px 0 0 ;
	margin: 0;
	margin-right: 80px;
	border-top: 1px solid #000000;
	line-height: 1.7em
}

body > footer a {
	color: #000000;
	text-decoration: none;
	font-size: 0.8888em;
	letter-spacing: 0.06em;
}

body > footer a:hover {
	text-decoration: underline;
}

body > footer a:active {
	color: #888888;
}

body > footer aside {
	width: 152px;
	border-top: 1px solid #000000;
	padding: 26px 0 0;
	margin-left: auto;
}

body > footer aside .social {
	margin-bottom: 52px;
}

body > footer aside .social a {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	margin-right: 20px;
	border-radius: 3px;
	font-size: 0;
	background: url("../img/social_btn.png") no-repeat;
}

body > footer aside .social .fs {
	background-position: 0 0;
}

body > footer aside .social .vk {
	background-position: -44px 0;
}

body > footer aside .social .in {
	background-position: -86px 0;
}

body > footer aside .design-copy {
	width: 85px;
	height: 100px;
	padding-top: 5px;
	text-align: center;
	border: 1px solid #000000;
	border-radius: 10px;
	font-size: 0.6111em;
}

body > footer .design-copy img {
	margin-top: 5px;
}

body > footer .copyright {
	align-self: flex-end;
	width: 100%;
	text-align: center;
	font-size: 0.7777em;
}

OscarHandsome · 27.Август.2017 01:02:23

Ну что ж, поздравляю с первым крещением!) А для того, что бы вдохнуть жизнь в сайт, нужно интегрировать cms или писать свой back-end код. Это не дня фронтендера работа по сути своей.
Можно кое-какие вещи написать на js. это правда все так же front-end. если не углубляться в node.js и бэкэнд…

Ineska · 27.Август.2017 06:19:38

Опубликуйте свою работу через Github, будет удобнее смотреть. А перед этим воспользуйтесь онлайн-сервисом Autoprefixer для css-кода. Всё-таки вы используете flexbox в верстке, префиксы необходимы.
Также обратите внимание на свойство font-variant, возможно оно поможет вам справиться с регистром надписей.

Alivan · 27.Август.2017 07:19:01

Просто я не понимаю процесс и, соответственно, не понимаю какой должна выдать результат. Т.е. должна ли я внутри кода предусмотреть какие-то моменты, предназначенные именно для интеграции с CMS, тем более что CMS бывают разные (если я не ошибаюсь).

Alivan · 27.Август.2017 08:46:05

Проект на GitHub

Ссылку также добавила в первое сообщение.

Отредактировала CSS перед заливкой на GitHub, спасибо. В первом сообщение CSS править не буду - и так занимает слишком много места, а суть одна.

Большое спасибо за совет.

А какое у Вас сложилось мнение о верстке в целом? Все очень плохо или более менее близко к реальному рабочему проекту? Можно ли с таким уровнем (и + еще 10-20 учебных версток) брать мелкие заказы (лендинги и проще)? Надо же как-то заработать на интенсивы

Ineska · 27.Август.2017 10:53:35

Если это ваша первая работа, то здесь можно только поздравить. Верстка - это определенно ваше, по моему мнению.
Но несколько замечаний напишу, чтобы проект был еще лучше.
Было бы неплохо использовать normalize.css.
Есть недочеты, связанные с семантикой. Так, в header есть блок с номером телефона. Предполагается, что на странице будет возможность позвонить, а значит элемент должен быть ссылкой. Почитайте.
В блоке products внутри article есть надписи “Make your ____ book”. Это также должны быть ссылки.
Еще один недочет связан с поведением текста при наведении на кнопках. Вы используете полужирное начертание, которое увеличивает ширину содержимого кнопки. Из-за этого получается, что и текст начинает “скакать”, и кнопка увеличивается в размерах.
Если стили при наведении не показаны в макете, и вы придумываете их сами, то лучше сделать что-то другое. Например, поиграть с прозрачностью, изменить фон, добавить рамку и т. д. Если вы всё же хотите стилизовать текст, то здесь лучше подойдут текстовые тени.

Пользуйтесь больше классами. В разметке у вас много безымянных элементов. Например, div-ы без классов. Это очень плохо.
Попробую объяснить, что имеется в виду. Например, я хочу сказать, что в блоке advantage у вас есть недочет. Чтобы указать точное место, мне придется сказать: “В блоке advantage внутри первого figure заголовок h3 не совпадает с макетом…” Или я могла бы сказать, что заголовок первого .advantage-item не совпадает с макетом (если бы у элемента был этот класс).
Заголовок в макете идет в две строки, у вас получается в три. Из-за этого различие в высоте элементов становится заметнее, чем нужно.

Перечитайте теорию о семантическом теге article. Использование его в блоке helpful_info является спорным моментом исходя из предложенной разметки. Хотя бы потому, что в блоке нет ссылок. которые бы предполагали переход к полной версии Terms, Payment или Shipping.

Ссылки соцсетей в футере должны быть стилизованы (при наведении и в активном состоянии).
Мне понравился ваш прием с использованием display: block; для заголовка внутри section. Это ведь сделано, чтобы обойти поведение дочерних флекс-элементов при flex-direction: row? Вы где-то прочитали или сами к этому пришли?

Alivan · 27.Август.2017 11:38:49

Вы себе даже представить не можете насколько важна для меня такая оценка, полученная от Вас. Большое спасибо!

Да, стили, выпадающее меню, анимацию кнопки меню и авторизации сочиняла сама. Вообще, просматривая скачанные для учебы макеты из рассылки и интернета, сложилось впечатление, что наличие styleguid скорее редкое и приятное исключение, чем правило.

Сама. Мне показалось это необходимым. Тот же прием я старалась использовать для span, в который оборачивала самую нижнюю ссылку-кнопку (ведь она inline-block). Я потом еще экспериментировала с этим - нижняя всегда центрированная кнопка под содержим при flex-direction: row и justify-content: space-between. Не хотелось захламлять код лишними wrapper и сохранить ее положение при увеличении количества контента (ну и где-то в уголке с мыслями об адаптивной верстке).

Спасибо за такие ценные рекомендации. Обязательно изучу и постараюсь применить.

Ineska · 27.Август.2017 13:01:03

Не совсем поняла, зачем это нужно. Разве не проще использовать align-self для кнопки?
Вспомнила еще одно. Видела у вас в коде параграфы, обёрнутые в div. Так не надо делать, поскольку тег параграфа - это и так блочный элемент.

Alivan · 27.Август.2017 13:26:32

Я имела ввиду нечто такое:

С align-self

C дополнительным span хотя может, конечно, быть и просто div

Но, возможно, подход неправильный…

…а div-ы перед p почищу.

Ineska · 28.Август.2017 08:53:28

Я поняла ваш вопрос. У меня было бы немного по-другому.
https://codepen.io/IneSSka/pen/PKyzXy

Alivan · 28.Август.2017 19:47:04

Ясно. Я над еще буду размышлять.

И еще один маленький вопросик - во время верстки меня просто до ужаса раздражали такие вещи, как:

width: 1079px;
height: 751px;
padding: 47px 0 48px;
margin: 0 15px 0 17px;

вместо логичных, с точки зрения того же дизайна:

width: 1080px;
height: 750px;
padding: 48px 0;
margin: 0 15px;

Как вы считаете - допустимо ли, там где это логично, “подравнивать” макеты или лучше максимально строго повторять даже такие моменты? Т.е. у всех на слуху PixelPerfect, но дизайнер ведь тоже человек, и может просто сработать неаккуратно…

Ineska · 28.Август.2017 19:53:08

Я могу быть неправа (пускай кто-нибудь поправит, если это так), но скажу, что корректировка допустима на 1-2px по ширине и высоте.

Dmitrij_Perejro · 29.Август.2017 05:41:29

ТЗ решает. Если фикс, то в основном по ширине нет допуска, по высоте до 3. В основном, конечно же

Alivan · 29.Август.2017 16:55:16

Ясно. Спасибо. Макет я в итоге поправила. Единственное - не убрала div в которые были обернуты p: это были карточки Terms/Payment/Shipping и div задавал боковые padding для p и ul, для нескольких p. При этом заголовок идет от края до края о своим собственным background-color и задать padding всей карточке нельзя.

Мне понравилось использовать ссылки href=“tel:…”, добавила еще одну в footer, но только href=“mailto:…”.

И все таки не удержалась и задала одинаковые верхние и нижние padding у wrapper для каждой секции. Все таки макет учебный, даже если добавить в портфолио - исходный дизайн не прилагается Хотя для портфолио, наверное, слабовато.

Ineska · 29.Август.2017 17:56:28

В любом случае, div-ы не должны быть безымянными. Лучше задать им классы.

OscarHandsome · 13.Октябрь.2017 21:25:28

Стоит ли используя bootstrap прикручивать normalize.css?

Ineska · 14.Октябрь.2017 05:01:26

Исходя из документации normalize.css находится в составе bootstrap, а значит отдельно его добавлять уже не надо.

OscarHandsome · 16.Октябрь.2017 17:36:26

Да вот тоже сегодня нашел https://prnt.sc/gy62ke) но спасиб за ответ

OscarHandsome · 22.Октябрь.2017 10:53:44

Вообщем прошел я курс верстки на academy, сверстал пару сайтов, но не оптимизировал под мобильные, т.е. есть куда расти, понимание как и что менять в принципе есть.
Решил посмотреть, что такое фрейм ворк, вот собственно, что сверстал Ссылка Если будут комментарии буду рад.

Alivan · 22.Октябрь.2017 11:44:21

Поздравляю Вас с первыми проектами!
В код пока не заглядывала - первое, что сильно бросается в глаза, это явные огрехи в визуальной сетке (выделила голубыми направляющими).
Я, конечно, не видела исходный макет, но скорее всего там все немного по-другому. Обратите внимание на правый край шапки и края макетной сетки, фильтр Price не закончен видимо. Не ясно какую цену он регулирует - минимум или максимум? Выравнивание фото - на автомобильных сайтах сталкивалась с тем, что подобные фото ровняют по нижнему краю - так создается ощущение единой плоскости, на которой стоят авто, но тут, конечно, в макете всякое может быть.