Skip to content

Commit 7862d3a

Browse files
vudovenkovudovenko
committed
4.22.
1 parent 30b2a6b commit 7862d3a

File tree

3 files changed

+255
-48
lines changed

3 files changed

+255
-48
lines changed

‎catalog.html‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@
33
<head>
44
<meta charset="utf-8">
55
<title>Каталог гостиниц - Седона</title>
6+
<link rel="stylesheet" href="styles/style.css">
67
</head>
78
<body>
89
<header class="header-main header-catalog">
910
<nav class="header-menu">
1011
<a href="index.html">
1112
<img src="images/logo.svg" alt="Логотип сайта Седона" class="logo" width="140" height="70">
1213
</a>
13-
<ul class="menu-list">
14+
<ul class="menu-list list">
1415
<li class="menu-item">
1516
<a href="index.html">Главная</a>
1617
</li>
@@ -22,7 +23,7 @@
2223
</li>
2324
</ul>
2425

25-
<ul class="menu-list navigation-user">
26+
<ul class="menu-list navigation-user list">
2627
<li class="navigation-item">
2728
<a href="#">
2829
<span class="visually-hidden">Поиск</span>
@@ -32,7 +33,7 @@
3233
<span class="visually-hidden">Избранное</span>
3334
<img src="images/favorits.svg" alt="Иконка Избранного" width="18" height="17">
3435
</a>
35-
<button type="button" class="choose-button">
36+
<button type="button" class="button choose-button">
3637
Хочу сюда!
3738
</button>
3839
</li>
@@ -43,7 +44,7 @@
4344
<main class="main-catalog">
4445
<section class="hotels-filter-section">
4546
<h1 class="catalog-heading">Гостиницы Седоны</h1>
46-
<ul class="breadcrumbs">
47+
<ul class="breadcrumbs list">
4748
<li class="breadcrumbs-item">
4849
<a class="breadcrumbs-link" href="index.html">
4950
<img src="images/home-breadcrumbs-icon.svg" alt="Иконка на Главную страницу" width="13" height="15">
@@ -60,14 +61,14 @@ <h1 class="catalog-heading">Гостиницы Седоны</h1>
6061
<h2 class="visually-hidden">Форма с фильтром для поиска подходящей гостиницы</h2>
6162
<section class="form-section checkbox-module">
6263
<h3 class="form-section-heading">Инфраструктура:</h3>
63-
<ul class="checkbox-list">
64+
<ul class="checkbox-list parametrs-list list">
6465
<li class="checkbox-item">
6566
<input type="checkbox" name="pool" id="pool" checked>
6667
<label for="pool">Бассейн</label>
6768
</li>
6869
<li class="checkbox-item">
6970
<input type="checkbox" name="parking" id="parking" checked>
70-
<label for="parking">Бассейн</label>
71+
<label for="parking">Парковка</label>
7172
</li>
7273
<li class="checkbox-item">
7374
<input type="checkbox" name="wi-fi" id="wi-fi">
@@ -78,7 +79,7 @@ <h3 class="form-section-heading">Инфраструктура:</h3>
7879

7980
<section class="form-section radio-module">
8081
<h3 class="form-section-heading">Тип жилья:</h3>
81-
<ul class="radio-list">
82+
<ul class="radio-list parametrs-list list">
8283
<li class="radio-item">
8384
<input type="radio" name="living-type" value="hotel" id="hotel" checked>
8485
<label for="hotel">Гостиница</label>
@@ -103,8 +104,8 @@ <h3 class="form-section-heading">Стоимость, ₽:</h3>
103104

104105
<section class="form-section buttons-module">
105106
<h3 class="visually-hidden">Кнопки для применения фильтров</h3>
106-
<button type="submit" class="filter-button apply-button">Применить</button>
107-
<button type="reset" class="filter-button reset-button">Сбросить</button>
107+
<button type="submit" class="button filter-button apply-button">Применить</button>
108+
<button type="reset" class=" button filter-button reset-button">Сбросить</button>
108109
</section>
109110
</form>
110111
</section>
@@ -119,7 +120,7 @@ <h3 class="visually-hidden">Выбор способа сортировки ре
119120
<!-- another options -->
120121
</select>
121122
<h3 class="visually-hidden">Выбор способа визульного представления результата</h3>
122-
<ul class="display-methods-list">
123+
<ul class="display-methods-list list">
123124
<li class="display-methods-item">
124125
<label class="method-icon">
125126
<input type="radio" name="display" value="table">
@@ -141,16 +142,16 @@ <h3 class="visually-hidden">Выбор способа визульного пр
141142
</ul>
142143
</header>
143144
<h2 class="visually-hidden">Отсортированный список гостиниц</h2>
144-
<ul class="hotels-cards-list">
145+
<ul class="hotels-cards-list list">
145146
<li class="hotel-card-item">
146147
<img src="images/hotel-1.jpg" alt="Изображение гостиницы" width="300" height="212">
147148
<h3 class="hotel-name">Amara Resort & Spa</h3>
148149
<p class="information">Гостиница <span>От 4000 ₽</span></p>
149150
<div class="cards-buttons">
150-
<a href="#" class="more-details-button">
151+
<a href="#" class="more-details-button button">
151152
Подробнее
152153
</a>
153-
<button class="add-button added">В избранное</button>
154+
<button class="add-button added button">В избранное</button>
154155
</div>
155156
<div class="rating-information">
156157
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
@@ -163,10 +164,10 @@ <h3 class="visually-hidden">Информайия о рейтинге гости
163164
<h3 class="hotel-name">Villas at Poco Diablo</h3>
164165
<p class="information">Гостиница <span>От 5000 ₽</span></p>
165166
<div class="cards-buttons">
166-
<a href="#" class="more-details-button">
167+
<a href="#" class="more-details-button button">
167168
Подробнее
168169
</a>
169-
<button class="add-button added">В избранном</button>
170+
<button class="add-button added button">В избранном</button>
170171
</div>
171172
<div class="rating-information">
172173
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
@@ -179,10 +180,10 @@ <h3 class="visually-hidden">Информайия о рейтинге гости
179180
<h3 class="hotel-name">Desert Quail Inn</h3>
180181
<p class="information">Гостиница <span>От 2500 ₽</span></p>
181182
<div class="cards-buttons">
182-
<a href="#" class="more-details-button">
183+
<a href="#" class="more-details-button button">
183184
Подробнее
184185
</a>
185-
<button class="add-button added">В избранное</button>
186+
<button class="add-button added button">В избранное</button>
186187
</div>
187188
<div class="rating-information">
188189
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
@@ -195,10 +196,10 @@ <h3 class="visually-hidden">Информайия о рейтинге гости
195196
<h3 class="hotel-name">GreenTree Inn</h3>
196197
<p class="information">Гостиница <span>От 1500 ₽</span></p>
197198
<div class="cards-buttons">
198-
<a href="#" class="more-details-button">
199+
<a href="#" class="more-details-button button">
199200
Подробнее
200201
</a>
201-
<button class="add-button added">В избранное</button>
202+
<button class="add-button added button">В избранное</button>
202203
</div>
203204
<div class="rating-information">
204205
<h3 class="visually-hidden">Информайия о рейтинге гостиницы</h3>
@@ -207,7 +208,7 @@ <h3 class="visually-hidden">Информайия о рейтинге гости
207208
</div>
208209
</li>
209210
</ul>
210-
<ul class="pagination">
211+
<ul class="pagination list">
211212
<li class="pagination-item">
212213
<a class="pagination-link pagination-current">1</a>
213214
</li>
@@ -236,15 +237,15 @@ <h2 class="subscription-heading">Подпишитесь на рассылку</h
236237
</header>
237238
<form class="subscription-form" action="#" method="post">
238239
<input type="email" placeholder="Ваш e-mail" name="email" class="email-input">
239-
<input type="submit" value="Подписаться" class="subscribe-button">
240+
<input type="submit" value="Подписаться" class="button subscribe-button">
240241
</form>
241242
</section>
242243
</main>
243244

244245
<footer class="footer-main">
245246
<section>
246247
<h2 class="visually-hidden">Социальные сети</h2>
247-
<ul class="footer-sotial-list">
248+
<ul class="footer-sotial-list list">
248249
<li class="footer-social-item">
249250
<a class="button" href="https://vk.com/htmlacademy">
250251
<span class="visually-hidden">Вконтакте</span>

‎index.html‎

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@
33
<head>
44
<meta charset="utf-8">
55
<title>HTML Academy: Седона</title>
6+
<link rel="stylesheet" href="styles/style.css">
67
</head>
78
<body>
89
<header class="header-main">
910
<nav class="header-menu">
1011
<img src="images/logo.svg" alt="Логотип сайта Седона" class="logo" width="140" height="70">
11-
<ul class="menu-list">
12+
<ul class="menu-list list">
1213
<li class="menu-item">
1314
<a class="current-page">Главная</a>
1415
</li>
@@ -20,7 +21,7 @@
2021
</li>
2122
</ul>
2223

23-
<ul class="menu-list navigation-user">
24+
<ul class="menu-list navigation-user list">
2425
<li class="navigation-item">
2526
<a href="#">
2627
<span class="visually-hidden">Поиск</span>
@@ -30,7 +31,7 @@
3031
<span class="visually-hidden">Избранное</span>
3132
<img src="images/favorits.svg" alt="Иконка Избранного" width="18" height="17">
3233
</a>
33-
<button type="button" class="choose-button">
34+
<button type="button" class="button choose-button">
3435
Хочу сюда!
3536
</button>
3637
</li>
@@ -49,41 +50,41 @@ <h1 class="visually-hidden">Добро пожаловать в Седону</h1>
4950
<section class="about-section">
5051
<header class="section-header">
5152
<h2 class="about-heading">Седона - небольшой городок в Аризоне, заслуживающий большего!</h2>
52-
<p class="resons-text">Рассмотрим причины, по которым Седона круче, чем Гранд-Каньон!</p>
53+
<p class="reasons-text">Рассмотрим причины, по которым Седона круче, чем Гранд-Каньон!</p>
5354
</header>
54-
<ul class="advantages-list">
55+
<ul class="advantages-list list">
5556
<li class="advantages-item advantages-item-with-image">
56-
<h3 class="advantages-header-item">Настоящий городок</h3>
57-
<p class="advantages-description">Седона — не аттракцион для туристов, там течёт своя жизнь</p>
57+
<h3 class="advantages-header-item advantages-header-bright">Настоящий городок</h3>
58+
<p class="advantages-description description-bright">Седона — не аттракцион для туристов, там течёт своя жизнь</p>
5859
<img src="images/adventages-photo-1.jpg" alt="Фотография улочки Седоны" width="800" height="385">
5960
</li>
60-
<li class="advantages-item">
61+
<li class="advantages-item advantages-item-light">
6162
<h3 class="advantages-header-item">Небольшая площадь</h3>
6263
<p class="advantages-description">Все достопримечательности находятся очень близко</p>
6364
</li>
6465
<li class="advantages-item">
65-
<h3 class="advantages-header-item item-dark">Красивая дорога</h3>
66+
<h3 class="advantages-header-item">Красивая дорога</h3>
6667
<p class="advantages-description">Ехать в Седону из Лас-Вегаса совсем не скучно!</p>
6768
</li>
68-
<li class="advantages-item">
69+
<li class="advantages-item advantages-item-light">
6970
<h3 class="advantages-header-item">Мало туристов</h3>
7071
<p class="advantages-description">Большинство едет в Гранд Каньон и толпится там</p>
7172
</li>
7273
<li class="advantages-item advantages-item-with-image">
7374
<img src="images/adventages-photo-2.jpg" alt="Фотография моста Дьявола" width="800" height="385">
74-
<h3 class="advantages-header-item">Там есть мост дьявола</h3>
75-
<p class="advantages-description">Да, по нему можно пройти! Если вы осмелитесь, разумеется</p>
75+
<h3 class="advantages-header-item advantages-header-bright">Там есть мост дьявола</h3>
76+
<p class="advantages-description description-bright">Да, по нему можно пройти! Если вы осмелитесь, разумеется</p>
7677
</li>
7778
</ul>
7879
</section>
7980

8081
<section class="section-comfort">
8182
<header class="section-header">
8283
<h2 class="about-heading">Приезжайте в Седону отдохнуть в комфорте и уюте!</h2>
83-
<p class="resons-text">Опытный персонал и качественное обслуживание!</p>
84+
<p class="reasons-text">Опытный персонал и качественное обслуживание!</p>
8485
</header>
85-
<ul class="services-list">
86-
<li class="services-list-item item-dark">
86+
<ul class="services-list list">
87+
<li class="services-list-item services-item-dark">
8788
<img src="images/house-icon.svg" alt="Иконка Жилье" width="75" height="72">
8889
<h3 class="services-header-item">Жильё</h3>
8990
<p class="advantages-description">Рекомендуем пожить в настоящем мотеле,
@@ -95,7 +96,7 @@ <h3 class="services-header-item">Еда</h3>
9596
<p class="advantages-description">Всегда заказывайте топовый фирменный бургер,
9697
вы не разочаруетесь!</p>
9798
</li>
98-
<li class="services-list-item item-dark">
99+
<li class="services-list-item services-item-dark">
99100
<img src="images/souvenirs-icon.svg" alt="Иконка Сувениры" width="75" height="72">
100101
<h3 class="services-header-item">Сувениры</h3>
101102
<p class="advantages-description">Не только китайского,
@@ -107,28 +108,28 @@ <h3 class="services-header-item">Сувениры</h3>
107108
<section class="choose-section">
108109
<header class="sction-header">
109110
<h2 class="about-heading">Заинтересовались?</h2>
110-
<p class="resons-text">Укажите предполагаемые даты поездки,
111+
<p class="reasons-text">Укажите предполагаемые даты поездки,
111112
и мы покажем вам лучшие предложения гостиниц в Седоне</p>
112113
</header>
113-
<a href="catalog.html" class="choose-button search-button">Поиск гостиницы в Седоне</a>
114+
<a href="catalog.html" class=" button choose-button search-button">Поиск гостиницы в Седоне</a>
114115
</section>
115116

116-
<section class="subscribtion-section">
117+
<section class="subscribtion-section index-subscribtion-section">
117118
<header class="section-header subscription-header">
118-
<h2 class="subscription-heading">Подпишитесь на рассылку</h2>
119-
<p class="resons-text">Только полезная информация и никакого спама, честное бойскаутское!</p>
119+
<h2 class="subscription-heading subscription-heading-bright">Подпишитесь на рассылку</h2>
120+
<p class="reasons-text reasons-text-bright">Только полезная информация и никакого спама, честное бойскаутское!</p>
120121
</header>
121122
<form class="subscription-form" action="https://echo.htmlacademy.ru/" method="post">
122123
<input type="email" placeholder="Ваш e-mail" name="email" class="email-input">
123-
<input type="submit" value="Подписаться" class="subscribe-button">
124+
<input type="submit" value="Подписаться" class="button subscribe-button">
124125
</form>
125126
</section>
126127
</main>
127128

128129
<footer class="footer-main">
129130
<section>
130131
<h2 class="visually-hidden">Социальные сети</h2>
131-
<ul class="footer-sotial-list">
132+
<ul class="footer-sotial-list list">
132133
<li class="footer-social-item">
133134
<a class="button" href="https://vk.com/htmlacademy">
134135
<span class="visually-hidden">Вконтакте</span>
@@ -151,9 +152,11 @@ <h2 class="visually-hidden">Социальные сети</h2>
151152
</section>
152153

153154
<section class="footer-contacts">
154-
<h2 class="visually-hidden">Контакты</h2>
155-
<a class="footer-contacts-address-phone" href="tel:+78128121212">+7 (812) 812-12-12</a>
156-
<a class="htmlacademy-link" href="https://htmlacademy.ru/">.html academy</a>
155+
<addres>
156+
<h2 class="visually-hidden">Контакты</h2>
157+
<a class="footer-contacts-address-phone" href="tel:+78128121212">+7 (812) 812-12-12</a>
158+
<a class="htmlacademy-link" href="https://htmlacademy.ru/">.html academy</a>
159+
</addres>
157160
</section>
158161
</footer>
159162
</body>

0 commit comments

Comments
 (0)