Skip to content

Commit eaedb09

Browse files
vudovenkovudovenko
committed
6.18
1 parent f5f0c2b commit eaedb09

File tree

3 files changed

+596
-298
lines changed

3 files changed

+596
-298
lines changed

‎catalog.html‎

Lines changed: 142 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<body>
99
<header class="header-main">
1010
<nav class="header-menu">
11-
<a href="index.html">
11+
<a href="index.html" class="logo-to-main">
1212
<img src="images/logo.svg" alt="Логотип сайта Седона" class="logo" width="140" height="70">
1313
</a>
1414
<ul class="menu-list list">
@@ -19,7 +19,7 @@
1919
<a href="#">О Седоне</a>
2020
</li>
2121
<li class="menu-item">
22-
<a class="current-page">Гостиницы</a>
22+
<a href="#" class="current-page">Гостиницы</a>
2323
</li>
2424
</ul>
2525

@@ -29,21 +29,26 @@
2929
<span class="visually-hidden">Поиск</span>
3030
<img src="images/search-loupe.svg" alt="Иконка поиска" width="20" height="20">
3131
</a>
32+
</li>
33+
<li class="navigation-item">
3234
<a href="#">
3335
<span class="visually-hidden">Избранное</span>
34-
<img src="images/favorits.svg" alt="Иконка Избранного" width="18" height="17">
36+
<img src="images/favourites.svg" alt="Иконка Избранного" width="20" height="20">
3537
</a>
38+
</li>
39+
<li class="navigation-item">
3640
<button type="button" class="button choose-button">
3741
Хочу сюда!
3842
</button>
3943
</li>
44+
</li>
4045
</ul>
4146
</nav>
4247
</header>
4348

44-
<div class="page-container">
45-
<main class="main main-catalog">
46-
<section class="hotels-filter-section">
49+
<main class="main main-catalog">
50+
<section class="hotels-filter-section">
51+
<div class="hotels-filter-section-wrapper">
4752
<h1 class="catalog-heading">Гостиницы Седоны</h1>
4853
<ul class="breadcrumbs list">
4954
<li class="breadcrumbs-item">
@@ -109,140 +114,143 @@ <h3 class="visually-hidden">Кнопки для применения фильт
109114
<button type="reset" class=" button filter-button reset-button">Сбросить</button>
110115
</section>
111116
</form>
112-
</section>
117+
</div>
118+
</section>
113119

114-
<section class="filtered-catalog-section">
115-
<h2 class="visually-hidden">Результаты поиска и способы их отображения</h2>
116-
<header class="results-header">
117-
<h2 class="result-heading">Найдено гостиниц: <span>38</span></h2>
118-
<h3 class="visually-hidden">Выбор способа сортировки результата</h3>
119-
<select class="sorted-by" name="sorting-method">
120-
<option value="cheaper">Сначала дешевле</option>
121-
<!-- another options -->
122-
</select>
123-
<h3 class="visually-hidden">Выбор способа визульного представления результата</h3>
124-
<ul class="display-methods-list list">
125-
<li class="display-methods-item">
126-
<label class="method-icon">
127-
<input type="radio" name="display" value="table">
128-
<img src="images/table-view-icon.svg" alt="Иконка отображения в виде таблицы" width="16" height="14">
129-
</label>
130-
</li>
131-
<li class="display-methods-item">
132-
<label class="method-icon">
133-
<input type="radio" name="display" value="one-per-page">
134-
<img src="images/single-view-icon.svg" alt="Иконка отображения в виде одного элемента списка на каждой странице" width="16" height="14">
135-
</label>
136-
</li>
137-
<li class="display-methods-item">
138-
<label class="method-icon">
139-
<input type="radio" name="display" value="list">
140-
<img src="images/list-view-icon.svg" alt="Иконка отображения в виде списка" width="16" height="14">
141-
</label>
142-
</li>
143-
</ul>
144-
</header>
145-
<h2 class="visually-hidden">Отсортированный список гостиниц</h2>
146-
<ul class="hotels-cards-list list">
147-
<li class="hotel-card-item">
148-
<img src="images/hotel-1.jpg" alt="Изображение гостиницы" width="300" height="212">
149-
<h3 class="hotel-name">Amara Resort & Spa</h3>
150-
<p class="information">Гостиница <span>От 4000 ₽</span></p>
151-
<div class="cards-buttons">
152-
<a href="#" class="more-details-button button">
153-
Подробнее
154-
</a>
155-
<button class="add-button added button">В избранное</button>
156-
</div>
157-
<div class="rating-information">
158-
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
159-
<img src="images/4-stars-icon.svg" alt="Иконка рейтинга 4 звезды" width="90" height="17">
160-
<p class='rating'>РЕЙТИНГ: 8,5</p>
161-
</div>
162-
</li>
163-
<li class="hotel-card-item">
164-
<img src="images/hotel-2.jpg" alt="Изображение гостиницы" width="300" height="212">
165-
<h3 class="hotel-name">Villas at Poco Diablo</h3>
166-
<p class="information">Гостиница <span>От 5000 ₽</span></p>
167-
<div class="cards-buttons">
168-
<a href="#" class="more-details-button button">
169-
Подробнее
170-
</a>
171-
<button class="add-button added button">В избранном</button>
172-
</div>
173-
<div class="rating-information">
174-
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
175-
<img src="images/4-stars-icon.svg" alt="Иконка рейтинга 4 звезды" width="90" height="17">
176-
<p class='rating'>РЕЙТИНГ: 9,2</p>
177-
</div>
120+
<section class="filtered-catalog-section">
121+
<h2 class="visually-hidden">Результаты поиска и способы их отображения</h2>
122+
<header class="results-header">
123+
<h2 class="result-heading">Найдено гостиниц: <span>38</span></h2>
124+
<h3 class="visually-hidden">Выбор способа сортировки результата</h3>
125+
<select class="sorted-by" name="sorting-method">
126+
<option value="cheaper">Сначала дешевле</option>
127+
<!-- another options -->
128+
</select>
129+
<h3 class="visually-hidden">Выбор способа визульного представления результата</h3>
130+
<ul class="display-methods-list list">
131+
<li class="display-methods-item current-method">
132+
<input type="radio" name="display" value="table">
133+
<label class="method-icon">
134+
<img src="images/table-view-icon.svg" alt="Иконка отображения в виде таблицы" width="16" height="14">
135+
</label>
178136
</li>
179-
<li class="hotel-card-item">
180-
<img src="images/hotel-3.jpg" alt="Изображение гостиницы" width="300" height="212">
181-
<h3 class="hotel-name">Desert Quail Inn</h3>
182-
<p class="information">Гостиница <span>От 2500 ₽</span></p>
183-
<div class="cards-buttons">
184-
<a href="#" class="more-details-button button">
185-
Подробнее
186-
</a>
187-
<button class="add-button added button">В избранное</button>
188-
</div>
189-
<div class="rating-information">
190-
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
191-
<img src="images/3-stars-icon.svg" alt="Иконка рейтинга 3 звезды" width="66" height="17">
192-
<p class='rating'>РЕЙТИНГ: 6,9</p>
193-
</div>
137+
<li class="display-methods-item">
138+
<input type="radio" name="display" value="one-per-page">
139+
<label class="method-icon">
140+
<img src="images/single-view-icon.svg" alt="Иконка отображения в виде одного элемента списка на каждой странице" width="16" height="14">
141+
</label>
194142
</li>
195-
<li class="hotel-card-item">
196-
<img src="images/hotel-4.jpg" alt="Изображение гостиницы" width="300" height="212">
197-
<h3 class="hotel-name">GreenTree Inn</h3>
198-
<p class="information">Гостиница <span>От 1500 ₽</span></p>
199-
<div class="cards-buttons">
200-
<a href="#" class="more-details-button button">
201-
Подробнее
202-
</a>
203-
<button class="add-button added button">В избранное</button>
204-
</div>
205-
<div class="rating-information">
206-
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
207-
<img src="images/2-stars-icon.svg" alt="Иконка рейтинга 2 звезды" width="42" height="17">
208-
<p class='rating'>РЕЙТИНГ: 5,0</p>
209-
</div>
143+
<li class="display-methods-item">
144+
<input type="radio" name="display" value="list">
145+
<label class="method-icon">
146+
<img src="images/list-view-icon.svg" alt="Иконка отображения в виде списка" width="16" height="14">
147+
</label>
210148
</li>
211149
</ul>
212-
<ul class="pagination list">
213-
<li class="pagination-item">
214-
<a class="pagination-link pagination-current">1</a>
215-
</li>
216-
<li class="pagination-item">
217-
<a class="pagination-link" href="#">2</a>
218-
</li>
219-
<li class="pagination-item">
220-
<a class="pagination-link" href="#">3</a>
221-
</li>
222-
<li class="pagination-item">
223-
<a class="pagination-link" href="#">4</a>
224-
</li>
225-
<li class="pagination-item">
226-
<a class="pagination-link" href="#">...</a>
227-
</li>
228-
<li class="pagination-item">
229-
<a class="pagination-link" href="#">10</a>
230-
</li>
231-
</ul>
232-
</section>
150+
</header>
151+
<h2 class="visually-hidden">Отсортированный список гостиниц</h2>
152+
<ul class="hotels-cards-list list">
153+
<li class="hotel-card-item">
154+
<img src="images/hotel-1.jpg" alt="Изображение гостиницы" width="300" height="212">
155+
<h3 class="hotel-name">Amara Resort & Spa</h3>
156+
<p class="information">Гостиница <span>От 4000 ₽</span></p>
157+
<div class="cards-buttons">
158+
<a href="#" class="more-details-button button">
159+
Подробнее
160+
</a>
161+
<button class="add-button added button">В избранное</button>
162+
</div>
163+
<div class="rating-information">
164+
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
165+
<img src="images/4-stars-icon.svg" alt="Иконка рейтинга 4 звезды" width="90" height="17">
166+
<p class='rating'>РЕЙТИНГ: 8,5</p>
167+
</div>
168+
</li>
169+
<li class="hotel-card-item">
170+
<img src="images/hotel-2.jpg" alt="Изображение гостиницы" width="300" height="212">
171+
<h3 class="hotel-name">Villas at Poco Diablo</h3>
172+
<p class="information">Гостиница <span>От 5000 ₽</span></p>
173+
<div class="cards-buttons">
174+
<a href="#" class="more-details-button button">
175+
Подробнее
176+
</a>
177+
<button class="add-button added button">В избранном</button>
178+
</div>
179+
<div class="rating-information">
180+
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
181+
<img src="images/4-stars-icon.svg" alt="Иконка рейтинга 4 звезды" width="90" height="17">
182+
<p class='rating'>РЕЙТИНГ: 9,2</p>
183+
</div>
184+
</li>
185+
<li class="hotel-card-item">
186+
<img src="images/hotel-3.jpg" alt="Изображение гостиницы" width="300" height="212">
187+
<h3 class="hotel-name">Desert Quail Inn</h3>
188+
<p class="information">Гостиница <span>От 2500 ₽</span></p>
189+
<div class="cards-buttons">
190+
<a href="#" class="more-details-button button">
191+
Подробнее
192+
</a>
193+
<button class="add-button added button">В избранное</button>
194+
</div>
195+
<div class="rating-information">
196+
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
197+
<img src="images/3-stars-icon.svg" alt="Иконка рейтинга 3 звезды" width="66" height="17">
198+
<p class='rating'>РЕЙТИНГ: 6,9</p>
199+
</div>
200+
</li>
201+
<li class="hotel-card-item">
202+
<img src="images/hotel-4.jpg" alt="Изображение гостиницы" width="300" height="212">
203+
<h3 class="hotel-name">GreenTree Inn</h3>
204+
<p class="information">Гостиница <span>От 1500 ₽</span></p>
205+
<div class="cards-buttons">
206+
<a href="#" class="more-details-button button">
207+
Подробнее
208+
</a>
209+
<button class="add-button added button">В избранное</button>
210+
</div>
211+
<div class="rating-information">
212+
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
213+
<img src="images/2-stars-icon.svg" alt="Иконка рейтинга 2 звезды" width="42" height="17">
214+
<p class='rating'>РЕЙТИНГ: 5,0</p>
215+
</div>
216+
</li>
217+
</ul>
218+
<ul class="pagination list">
219+
<li class="pagination-item">
220+
<a class="pagination-link pagination-current">1</a>
221+
</li>
222+
<li class="pagination-item">
223+
<a class="pagination-link" href="#">2</a>
224+
</li>
225+
<li class="pagination-item">
226+
<a class="pagination-link" href="#">3</a>
227+
</li>
228+
<li class="pagination-item">
229+
<a class="pagination-link" href="#">4</a>
230+
</li>
231+
<li class="pagination-item">
232+
<a class="pagination-link" href="#">...</a>
233+
</li>
234+
<li class="pagination-item">
235+
<a class="pagination-link" href="#">10</a>
236+
</li>
237+
</ul>
238+
</section>
233239

234-
<section class="subscribtion-section catalog-subscribtion-section">
235-
<header class="section-header subscription-header">
236-
<h2 class="subscription-heading">Подпишитесь на рассылку</h2>
237-
<p class="resons-text">Только полезная информация и никакого спама, честное бойскаутское!</p>
238-
</header>
239-
<form class="subscription-form" action="#" method="post">
240-
<input type="email" placeholder="Ваш e-mail" name="email" class="email-input" required>
241-
<input type="submit" value="Подписаться" class="button subscribe-button">
242-
</form>
243-
</section>
244-
</main>
245-
</div>
240+
<section class="subscribtion-section catalog-subscribtion-section">
241+
<header class="section-header subscription-header catalog-subscribtion-header">
242+
<div class="section-header-wrapper subscribtion-section-header-wrapper">
243+
<h2 class="subscription-heading subscription-heading-bright">Подпишитесь на рассылку</h2>
244+
<p class="reasons-text reasons-text-bright">Только полезная информация и никакого спама,
245+
честное бойскаутское!</p>
246+
</div>
247+
</header>
248+
<form class="subscription-form" action="https://echo.htmlacademy.ru/" method="post">
249+
<input type="email" placeholder="Ваш e-mail" name="email" class="email-input" required>
250+
<input type="submit" value="Подписаться" class="button subscribe-button">
251+
</form>
252+
</section>
253+
</main>
246254

247255
<footer class="footer-main">
248256
<div class="page-footer-container">
@@ -281,6 +289,5 @@ <h2 class="visually-hidden">Контакты</h2>
281289
</section>
282290
</div>
283291
</footer>
284-
</footer>
285292
</body>
286293
</html>

0 commit comments

Comments
 (0)