Skip to content
This repository was archived by the owner on Apr 14, 2018. It is now read-only.

Commit 7aebe6f

Browse files
committedApr 20, 2017
Исправил ошибки по БЭМ (см. ПР)
1 parent 92a4eda commit 7aebe6f

File tree

5 files changed

+153
-159
lines changed

5 files changed

+153
-159
lines changed
 

‎index.html

+46-44
Original file line numberDiff line numberDiff line change
@@ -11,86 +11,88 @@
1111
<header class="main-header">
1212
<div class="container">
1313
<nav class="main-nav">
14-
<ul>
15-
<li><a class="main-nav__link" href="#">Информация</a></li>
16-
<li><a class="main-nav__link" href="#">Новости</a></li>
17-
<li><a class="main-nav__link" href="price-list.html">Прайс-лист</a></li>
18-
<li><a class="main-nav__link" href="shop.html">Магазин</a></li>
19-
<li><a class="main-nav__link" href="#">Контакты</a></li>
14+
<ul class="nav-list">
15+
<li><a class="nav-list__link" href="#">Информация</a></li>
16+
<li><a class="nav-list__link" href="#">Новости</a></li>
17+
<li><a class="nav-list__link" href="price-list.html">Прайс-лист</a></li>
18+
<li><a class="nav-list__link" href="shop.html">Магазин</a></li>
19+
<li><a class="nav-list__link" href="#">Контакты</a></li>
2020
</ul>
2121
</nav>
2222
<div class="user">
23-
<a class="user__login" href="#">Вход</a>
23+
<a class="user__link" href="login.html">Вход</a>
2424
</div>
2525
</div>
2626
</header>
27-
<main class="container">
28-
<div class="index-logo">
29-
<img src="img/index-logo.png" width="368" height="204" alt="Барбершоп «Бородинский»">
30-
</div>
31-
<section class="features">
32-
<div class="features__item">
33-
<b class="features__name">Быстро</b>
34-
<p>Мы делаем свою работу быстро! Два часа пролетят незаметно и вы — счастливый обладатель стильной стрижки-минутки!</p>
35-
</div>
36-
<div class="features__item">
37-
<b class="features__name">Круто</b>
38-
<p>Забудьте, как вы стриглись раньше. Мы сделаем из вас звезду футбола или кино! Во всяком случае внешне.</p>
39-
</div>
40-
<div class="features__item">
41-
<b class="features__name">Дорого</b>
42-
<p>Наши мастера — профессионалы своего дела и не могут стоить дешево. К тому же, разве цена не дает определенный статус?</p>
27+
<main class="main">
28+
<div class="container">
29+
<div class="index-logo">
30+
<img src="img/index-logo.png" width="368" height="204" alt="Барбершоп «Бородинский»">
4331
</div>
44-
</section>
45-
<div class="content">
46-
<div class="column">
32+
<section class="features">
33+
<div class="features-item">
34+
<b class="features-item__subtitle">Быстро</b>
35+
<p class="features-item__text">Мы делаем свою работу быстро! Два часа пролетят незаметно и вы — счастливый обладатель стильной стрижки-минутки!</p>
36+
</div>
37+
<div class="features-item">
38+
<b class="features-item__subtitle">Круто</b>
39+
<p class="features-item__text">Забудьте, как вы стриглись раньше. Мы сделаем из вас звезду футбола или кино! Во всяком случае внешне.</p>
40+
</div>
41+
<div class="features-item">
42+
<b class="features-item__subtitle">Дорого</b>
43+
<p class="features-item__text">Наши мастера — профессионалы своего дела и не могут стоить дешево. К тому же, разве цена не дает определенный статус?</p>
44+
</div>
45+
</section>
46+
</div>
47+
<div class="container">
48+
<section class="news">
4749
<h2 class="section-title">Новости</h2>
4850
<ul class="news-list">
4951
<li class="news-list__item">
50-
<p>Нам наконец завезли Ягермайстер! Теперь вы можете пропустить стаканчик во время стрижки</p>
51-
<time datetime="2016-01-11">11 января</time>
52+
<p class="news-list__text">Нам наконец завезли Ягермайстер! Теперь вы можете пропустить стаканчик во время стрижки</p>
53+
<time class="news-list__datetime" datetime="2016-01-11">11 января</time>
5254
</li>
5355
<li class="news-list__item">
54-
<p>В нашей команде пополнение, Борис «Бритва» Стригунец, обладатель множества титулов и наград пополнил наши стройные ряды</p>
55-
<time datetime="2016-01-18">18 января</time>
56+
<p class="news-list__text">В нашей команде пополнение, Борис «Бритва» Стригунец, обладатель множества титулов и наград пополнил наши стройные ряды</p>
57+
<time class="news-list__datetime" datetime="2016-01-18">18 января</time>
5658
</li>
5759
</ul>
5860
<a class="btn" href="#">Все новости</a>
59-
</div>
60-
<div class="column">
61+
</section>
62+
<section class="gallery">
6163
<h2 class="section-title">Фотогалерея</h2>
62-
<div class="gallery">
64+
<div class="gallery-photo">
6365
<figure class="gallery__content">
6466
<img src="img/photo-1.jpg" width="286" height="164" alt="">
6567
</figure>
6668
<button class="btn gallery__prev" type="button">Назад</button>
6769
<button class="btn gallery__next" type="button">Вперёд</button>
6870
</div>
69-
</div>
71+
</section>
7072
</div>
71-
<div class="content">
72-
<div class="column">
73+
<div class="container">
74+
<section class="office">
7375
<h2 class="section-title">Контактная информация</h2>
74-
<p>
76+
<p class="office__address">
7577
Барбершоп «Бородинский»<br> Адрес: г. Санкт-Петербург, Б. Конюшенная, д. 19/8<br> Телефон: +7 (812) 666-02-66
7678
</p>
77-
<p>
79+
<p class="office__work-time">
7880
Время работы:<br> пн — пт: с 10:00 до 22:00<br> сб — вс: с 10:00 до 19:00
7981
</p>
8082
<a class="btn" href="#">Как проехать</a>
8183
<a class="btn" href="#">Обратная связь</a>
82-
</div>
83-
<div class="column">
84+
</section>
85+
<section class="appoinment">
8486
<h2 class="section-title">Записаться</h2>
85-
<p>Укажите желаемую дату и время и мы свяжемся с вами для подтверждения брони</p>
87+
<p class="appoinment__text">Укажите желаемую дату и время и мы свяжемся с вами для подтверждения брони</p>
8688
<form class="appointment-form" action="https://echo.htmlacademy.ru" method="post">
8789
<input class="appointment-form__input" type="text" name="date" placeholder="Дата">
8890
<input class="appointment-form__input" type="text" name="time" placeholder="Время">
8991
<input class="appointment-form__input" type="text" name="name" placeholder="Ваше имя">
9092
<input class="appointment-form__input" type="tel" name="phone" placeholder="Телефон">
9193
<button class="btn" type="submit">Отправить</button>
9294
</form>
93-
</div>
95+
</section>
9496
</div>
9597
</main>
9698
<footer class="main-footer">
@@ -102,13 +104,13 @@ <h2 class="section-title">Записаться</h2>
102104
Телефон: <a href="tel:+74956660166">+7 (495) 666-01-66</a>
103105
</section>
104106
<section class="social">
105-
<p>Давайте дружить!</p>
107+
<p class="social__subtitle">Давайте дружить!</p>
106108
<a class="social__link social__link--vk" href="#">Вконтакте</a>
107109
<a class="social__link social__link--fb" href="#">Фейсбук</a>
108110
<a class="social__link social__link--inst" href="#">Инстаграм</a>
109111
</section>
110112
<section class="copyright">
111-
<p>Разработано:</p>
113+
<p class="copyright__subtitle">Разработано:</p>
112114
<a class="copyright__link copyright__link--htmlacademy" href="https://htmlacademy.ru">HTML Academy</a>
113115
</section>
114116
</div>

‎login.html

+19-21
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
11
<!doctype html>
2-
<html>
2+
<html lang="ru">
33
<head>
44
<meta charset="utf-8">
55
<title>Log in</title>
66
</head>
77
<body>
8-
<h2>Личный кабинет</h2>
9-
<form method="post">
10-
<fieldset>
11-
<legend>Введите пожалуйста свой логин и пароль</legend>
12-
<label>
13-
<input type="text" placeholder="Логин">
14-
</label>
15-
<label>
16-
<input type="password" placeholder="Пароль">
17-
</label>
18-
</fieldset>
19-
<fieldset>
20-
<label>
21-
<input type="checkbox" name="save-user">
22-
Запомните меня
23-
</label>
24-
<a href="#">Я забыл пароль</a>
25-
</fieldset>
26-
<button name="login">Войти</button>
27-
</form>
8+
<div class="login">
9+
<h2 class="section-title">Личный кабинет</h2>
10+
<form method="post" class="login__form">
11+
<fieldset class="login__group">
12+
<legend>Введите пожалуйста свой логин и пароль</legend>
13+
<input class="login__name" type="text" placeholder="Логин">
14+
<input class="login__password" type="password" placeholder="Пароль">
15+
</fieldset>
16+
<fieldset class="login__group">
17+
<label class="login__label--checkbox">
18+
<input class="login__checkbox" type="checkbox" name="save-user">
19+
<span class="login_subtitle">Запомните меня</span>
20+
</label>
21+
<a href="#">Я забыл пароль</a>
22+
</fieldset>
23+
<button class="btn" name="login">Войти</button>
24+
</form>
25+
</div>
2826
</body>
2927
</html>

‎price-list.html

+33-33
Original file line numberDiff line numberDiff line change
@@ -14,57 +14,57 @@
1414
<img src="img/header-logo.png" alt="Borodinsky" width="111" height="24">
1515
</a>
1616
<nav class="main-nav">
17-
<ul>
18-
<li><a class="main-nav__link" href="#">Информация</a></li>
19-
<li><a class="main-nav__link" href="#">Новости</a></li>
20-
<li><a class="main-nav__link" href="price-list.html">Прайс-лист</a></li>
21-
<li><a class="main-nav__link" href="shop.html">Магазин</a></li>
22-
<li><a class="main-nav__link" href="#">Контакты</a></li>
17+
<ul class="nav-list">
18+
<li><a class="nav-list__link" href="#">Информация</a></li>
19+
<li><a class="nav-list__link" href="#">Новости</a></li>
20+
<li><a class="nav-list__link" href="price-list.html">Прайс-лист</a></li>
21+
<li><a class="nav-list__link" href="shop.html">Магазин</a></li>
22+
<li><a class="nav-list__link" href="#">Контакты</a></li>
2323
</ul>
2424
</nav>
2525
<div class="user">
26-
<a class="user__login" href="#">Вход</a>
26+
<a class="user__link" href="login.html">Вход</a>
2727
</div>
2828
</div>
2929
</header>
3030
<main>
3131
<div class="container">
3232
<h1 class="page-title">Прайс-лист</h1>
33-
<ul class="breadcrumbs">
34-
<li><a href="#">Главная</a></li>
35-
<li><a class="active">Прайс-лист</a></li>
36-
</ul>
33+
<nav class="breadcrumbs">
34+
<a class="breadcrumbs__link" href="index.html">Главная</a>
35+
<a class="breadcrumbs__link breadcrumbs__link--active">Прайс-лист</a>
36+
</nav>
3737
<p class="slogan">Истинно мужская классика</p>
38-
<div class="column">
39-
<h2 class="section-title">Мы используем только лучшие средства:</h2>
40-
<ul>
41-
<li>Baxter of California</li>
42-
<li>Mr natty</li>
43-
<li>Suavecito</li>
44-
<li>Malin+Goetz</li>
38+
<div class="our-brands">
39+
<h2 class="our-brands__title section-title">Мы используем только лучшие средства:</h2>
40+
<ul class="brands-list">
41+
<li class="brands-list__item">Baxter of California</li>
42+
<li class="brands-list__item">Mr natty</li>
43+
<li class="brands-list__item">Suavecito</li>
44+
<li class="brands-list__item">Malin+Goetz</li>
4545
</ul>
4646
</div>
47-
<div class="column">
48-
<h2 class="section-title">Цены на услуги наших мастеров</h2>
49-
<table class="service-table">
50-
<tr>
51-
<td>Стрижка</td>
52-
<td>1500 р.</td>
47+
<div class="price">
48+
<h2 class="price__title section-title">Цены на услуги наших мастеров</h2>
49+
<table class="price-table">
50+
<tr class="price-table__row">
51+
<td class="price-table__cell">Стрижка</td>
52+
<td class="price-table__cell">1500 р.</td>
5353
</tr>
54-
<tr>
55-
<td>Стрижка бороды</td>
56-
<td>500 р.</td>
54+
<tr class="price-table__row">
55+
<td class="price-table__cell">Стрижка бороды</td>
56+
<td class="price-table__cell">500 р.</td>
5757
</tr>
58-
<tr>
59-
<td>Накрутка усов</td>
60-
<td>350 р.</td>
58+
<tr class="price-table__row">
59+
<td class="price-table__cell">Накрутка усов</td>
60+
<td class="price-table__cell">350 р.</td>
6161
</tr>
6262
</table>
6363
</div>
6464
<div class="about">
65-
<h3 class="section-title">Несколько слов о нас</h3>
66-
<p> Наша парикмахерская занимается исключительно мужскими стрижками. Стрижка каждого клиента для нас - это уникальная и продуманная до мелочей работа. Мы не работаем на количество, мы делаем качество. </p>
67-
<p>Наша мастерская расположена в центре города, поэтому сделать стильную стрижку можно в любое время, даже в обеденный перерыв. Здесь вы можете погрузиться в удобную для вас атмосферу, чувствовать себя комфортно и свободно!</p>
65+
<h3 class="about__title section-title">Несколько слов о нас</h3>
66+
<p class="about__text"> Наша парикмахерская занимается исключительно мужскими стрижками. Стрижка каждого клиента для нас - это уникальная и продуманная до мелочей работа. Мы не работаем на количество, мы делаем качество. </p>
67+
<p class="about__text">Наша мастерская расположена в центре города, поэтому сделать стильную стрижку можно в любое время, даже в обеденный перерыв. Здесь вы можете погрузиться в удобную для вас атмосферу, чувствовать себя комфортно и свободно!</p>
6868
</div>
6969
</div>
7070
</main>

‎shop-item.html

+16-16
Original file line numberDiff line numberDiff line change
@@ -14,28 +14,28 @@
1414
<img src="img/logo-header.png" alt="Borodinsky" width="140" height="50">
1515
</a>
1616
<nav class="main-nav">
17-
<ul>
18-
<li><a class="main-nav__link" href="#">Информация</a></li>
19-
<li><a class="main-nav__link" href="#">Новости</a></li>
20-
<li><a class="main-nav__link" href="price-list.html">Прайс-лист</a></li>
21-
<li><a class="main-nav__link" href="shop.html">Магазин</a></li>
22-
<li><a class="main-nav__link" href="#">Контакты</a></li>
17+
<ul class="nav-list">
18+
<li><a class="nav-list__link" href="#">Информация</a></li>
19+
<li><a class="nav-list__link" href="#">Новости</a></li>
20+
<li><a class="nav-list__link" href="price-list.html">Прайс-лист</a></li>
21+
<li><a class="nav-list__link" href="shop.html">Магазин</a></li>
22+
<li><a class="nav-list__link" href="#">Контакты</a></li>
2323
</ul>
2424
</nav>
2525
<div class="user">
26-
<a class="user__login" href="#">Вход</a>
26+
<a class="user__link" href="login.html">Вход</a>
2727
</div>
2828
</div>
2929
</header>
3030
<main>
3131
<div class="container">
3232
<h1 class="page-title">Набор для путешествий «Baxter of California»</h1>
33-
<ul class="breadcrumbs">
34-
<li><a class="breadcrumbs__link" href="#">Главная</a></li>
35-
<li><a class="breadcrumbs__link" href="#">Магазин</a></li>
36-
<li><a class="breadcrumbs__link" href="#">Средства для ухода</a></li>
37-
<li><a class="breadcrumbs__link breadcrumbs__item--active">Набор для путешествий Baxter of California</a></li>
38-
</ul>
33+
<nav class="breadcrumbs">
34+
<a class="breadcrumbs__link" href="index.html">Главная</a>
35+
<a class="breadcrumbs__link" href="shop.html">Магазин</a>
36+
<a class="breadcrumbs__link" href="#">Средства для ухода</a>
37+
<a class="breadcrumbs__link breadcrumbs__item--active">Набор для путешествий Baxter of California</a>
38+
</nav>
3939
<div class="product-gallery">
4040
<img class="product-gallery__main-photo" src="img/gallery-item.png" width="460" height="500" alt="Набор для путешествий Baxter of California">
4141
<div class="photo-choice">
@@ -45,9 +45,9 @@ <h1 class="page-title">Набор для путешествий «Baxter of Cali
4545
</div>
4646
</div>
4747
<section class="description">
48-
<span>Есть в наличии</span>
49-
<span>Артикул:Dexter-ae</span>
50-
<p>
48+
<span class="description__availability">Есть в наличии</span>
49+
<span class="description__code">Артикул:Dexter-ae</span>
50+
<p class="description__text">
5151
Travel kit - необходимый аксессуар во время любого путешествия. В аккуратной кожаной сумке находится все, что нужно для бритья и ухода за кожей во время рабочей поездки или отдыха: средство для умывания, увлажняющий крем, крем для бритья, крем после бритья, шампунь. Набор также может стать отличным подарком.
5252
</p>
5353
<span class="description__price">

‎shop.html

+39-45
Original file line numberDiff line numberDiff line change
@@ -14,75 +14,69 @@
1414
<img src="img/header-logo.png" alt="Borodinsky" width="111" height="24">
1515
</a>
1616
<nav class="main-nav">
17-
<ul>
18-
<li><a class="main-nav__link" href="#">Информация</a></li>
19-
<li><a class="main-nav__link" href="#">Новости</a></li>
20-
<li><a class="main-nav__link" href="price-list.html">Прайс-лист</a></li>
21-
<li><a class="main-nav__link" href="shop.html">Магазин</a></li>
22-
<li><a class="main-nav__link" href="#">Контакты</a></li>
17+
<ul class="nav-list">
18+
<li><a class="nav-list__link" href="#">Информация</a></li>
19+
<li><a class="nav-list__link" href="#">Новости</a></li>
20+
<li><a class="nav-list__link" href="price-list.html">Прайс-лист</a></li>
21+
<li><a class="nav-list__link" href="shop.html">Магазин</a></li>
22+
<li><a class="nav-list__link" href="#">Контакты</a></li>
2323
</ul>
2424
</nav>
2525
<div class="user">
26-
<a class="user__login" href="#">Вход</a>
26+
<a class="user__link" href="login.html">Вход</a>
2727
</div>
2828
</div>
2929
</header>
3030
<section class="shop">
3131
<div class="container">
3232
<h1 class="page-title">Средства для ухода</h1>
3333
<nav class="breadcrumbs">
34-
<ul>
35-
<li><a class="breadcrumbs__link" href="#">Главная</a></li>
36-
<li><a class="breadcrumbs__link" href="#">Магазин</a></li>
37-
<li><a class="breadcrumbs__link breadcrumbs__link--active">Средства для ухода</a></li>
38-
</ul>
34+
<a class="breadcrumbs__link" href="index.html">Главная</a>
35+
<a class="breadcrumbs__link" href="shop.html">Магазин</a>
36+
<a class="breadcrumbs__link breadcrumbs__link--active">Средства для ухода</a>
3937
</nav>
4038
<div class="shop">
4139
<form method="post" class="filter">
4240
<fieldset class="filter-group">
43-
<legend>
44-
<h2 class="section-title">Производители:</h2>
45-
</legend>
46-
<label class="filter-group__label">
47-
<input class="filter-group__checkbox" type="checkbox" name="brands" value="baxterOfCalifornia">
48-
Baxter of california
41+
<legend class="section-title">Производители:</legend>
42+
<label class="filter-label">
43+
<input class="filter-checkbox" type="checkbox" name="brands" value="baxterOfCalifornia">
44+
<span class="filter-subtitle">Baxter of california</span>
4945
</label>
50-
<label class="filter-group__label">
51-
<input class="filter-group__checkbox" type="checkbox" name="brands" value="mrNatty">
52-
Mr natty
46+
<label class="filter-label">
47+
<input class="filter-checkbox" type="checkbox" name="brands" value="mrNatty">
48+
<span class="filter-subtitle">Mr natty</span>
5349
</label>
54-
<label class="filter-group__label">
55-
<input class="filter-group__checkbox" type="checkbox" name="brands" value="suavecito">
56-
Suavecito
50+
<label class="filter-label">
51+
<input class="filter-checkbox" type="checkbox" name="brands" value="suavecito">
52+
<span class="filter-subtitle">Suavecito</span>
5753
</label>
58-
<label class="filter-group__label">
59-
<input class="filter-group__checkbox" type="checkbox" name="brands" value="malinGoets">
60-
Malin+Goets
54+
<label class="filter-label">
55+
<input class="filter-checkbox" type="checkbox" name="brands" value="malinGoets">
56+
<span class="filter-subtitle">Malin+Goets</span>
6157
</label>
62-
<label class="filter-group__label">
63-
<input class="filter-group__checkbox" type="checkbox" name="brands" value="murrays">
64-
Murray's
58+
<label class="filter-label">
59+
<input class="filter-checkbox" type="checkbox" name="brands" value="murrays">
60+
<span class="filter-subtitle">Murray's</span>
6561
</label>
66-
<label class="filter-group__label">
67-
<input class="filter-group__checkbox" type="checkbox" name="brands" value="americanCrew">
68-
American crew
62+
<label class="filter-label">
63+
<input class="filter-checkbox" type="checkbox" name="brands" value="americanCrew">
64+
<span class="filter-subtitle">American crew</span>
6965
</label>
7066
</fieldset>
7167
<fieldset class="filter-group">
72-
<legend>
73-
<h2 class="section-title">Группы товаров:</h2>
74-
</legend>
75-
<label class="filter-group__label">
76-
<input class="filter-group__radio" type="radio" name="product-group" value="forRazor">
77-
Бритвенные принадлежности
68+
<legend class="section-title">Группы товаров:</legend>
69+
<label class="filter-label">
70+
<input class="filter-radio" type="radio" name="product-group" value="forRazor">
71+
<span class="filter-subtitle">Бритвенные принадлежности</span>
7872
</label>
79-
<label class="filter-group__label">
80-
<input class="filter-group__radio" type="radio" name="product-group" value="forCare">
81-
Средства для ухода
73+
<label class="filter-label">
74+
<input class="filter-radio" type="radio" name="product-group" value="forCare">
75+
<span class="filter-subtitle">Средства для ухода</span>
8276
</label>
83-
<label class="filter-group__label">
84-
<input class="filter-group__radio" type="radio" name="product-group" value="accessories">
85-
Аксессуары
77+
<label class="filter-label">
78+
<input class="filter-radio" type="radio" name="product-group" value="accessories">
79+
<span class="filter-subtitle">Аксессуары</span>
8680
</label>
8781
</fieldset>
8882
<button type="submit" class="btn">Показать</button>

0 commit comments

Comments
 (0)
This repository has been archived.