diff --git a/Readme.md b/Readme.md index c168fe9..ea8d7a2 100644 --- a/Readme.md +++ b/Readme.md @@ -1,7 +1,7 @@ # Личный проект «Седона» * Студент: [Владислав Удовенко](https://up.htmlacademy.ru/univer-html1/2/user/1902653). -* Наставник: `Неизвестно`. +* Наставник: [Артём Хрушков](https://htmlacademy.ru/profile/id98923). --- diff --git a/catalog.html b/catalog.html new file mode 100644 index 0000000..6aa64bb --- /dev/null +++ b/catalog.html @@ -0,0 +1,323 @@ + + + + + Каталог гостиниц - Седона + + + +
+ +
+ +
+
+
+

Гостиницы Седоны

+ +
+ +
+ Инфраструктура: +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ +
+

Тип жилья:

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ +
+

Стоимость, ₽:

+
+
+ + +
+
+
+ + +
+
+
+
+ +
+ + + +
+
+
+
+ +
+ +
+

Найдено гостиниц: 38

+ + + +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ + + +
+ +
+
+
+

Подпишитесь на рассылку

+

Только полезная информация и никакого спама, + честное бойскаутское!

+
+
+
+ + +
+
+
+ + + + diff --git a/images/2-stars-icon.svg b/images/2-stars-icon.svg new file mode 100644 index 0000000..6e076a9 --- /dev/null +++ b/images/2-stars-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/3-stars-icon.svg b/images/3-stars-icon.svg new file mode 100644 index 0000000..64c9ea0 --- /dev/null +++ b/images/3-stars-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/4-stars-icon.svg b/images/4-stars-icon.svg new file mode 100644 index 0000000..2f752a3 --- /dev/null +++ b/images/4-stars-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/adventages-photo-1.jpg b/images/adventages-photo-1.jpg new file mode 100644 index 0000000..b9a9d98 Binary files /dev/null and b/images/adventages-photo-1.jpg differ diff --git a/images/adventages-photo-2.jpg b/images/adventages-photo-2.jpg new file mode 100644 index 0000000..ef8050a Binary files /dev/null and b/images/adventages-photo-2.jpg differ diff --git a/images/arrow.svg b/images/arrow.svg new file mode 100644 index 0000000..bd84bb0 --- /dev/null +++ b/images/arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/calendar.svg b/images/calendar.svg new file mode 100644 index 0000000..8f13801 --- /dev/null +++ b/images/calendar.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/images/close-modal-icon.svg b/images/close-modal-icon.svg new file mode 100644 index 0000000..9b2d638 --- /dev/null +++ b/images/close-modal-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/email-blur-background.jpg b/images/email-blur-background.jpg new file mode 100644 index 0000000..932898a Binary files /dev/null and b/images/email-blur-background.jpg differ diff --git a/images/favourites.svg b/images/favourites.svg new file mode 100644 index 0000000..1527739 --- /dev/null +++ b/images/favourites.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/filter-background.jpg b/images/filter-background.jpg new file mode 100644 index 0000000..869eba8 Binary files /dev/null and b/images/filter-background.jpg differ diff --git a/images/food-icon.svg b/images/food-icon.svg new file mode 100644 index 0000000..78baa22 --- /dev/null +++ b/images/food-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/home-breadcrumbs-icon.svg b/images/home-breadcrumbs-icon.svg new file mode 100644 index 0000000..6bbfb36 --- /dev/null +++ b/images/home-breadcrumbs-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/hotel-1.jpg b/images/hotel-1.jpg new file mode 100644 index 0000000..d69be66 Binary files /dev/null and b/images/hotel-1.jpg differ diff --git a/images/hotel-2.jpg b/images/hotel-2.jpg new file mode 100644 index 0000000..61f5b45 Binary files /dev/null and b/images/hotel-2.jpg differ diff --git a/images/hotel-3.jpg b/images/hotel-3.jpg new file mode 100644 index 0000000..ea45a16 Binary files /dev/null and b/images/hotel-3.jpg differ diff --git a/images/hotel-4.jpg b/images/hotel-4.jpg new file mode 100644 index 0000000..f795c57 Binary files /dev/null and b/images/hotel-4.jpg differ diff --git a/images/house-icon.svg b/images/house-icon.svg new file mode 100644 index 0000000..80c212d --- /dev/null +++ b/images/house-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/info.svg b/images/info.svg new file mode 100644 index 0000000..456f351 --- /dev/null +++ b/images/info.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/list-view-icon.svg b/images/list-view-icon.svg new file mode 100644 index 0000000..f42ea0b --- /dev/null +++ b/images/list-view-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..0c9099f --- /dev/null +++ b/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/minus.svg b/images/minus.svg new file mode 100644 index 0000000..36750c3 --- /dev/null +++ b/images/minus.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/plus.svg b/images/plus.svg new file mode 100644 index 0000000..c7b0109 --- /dev/null +++ b/images/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/search-loupe.svg b/images/search-loupe.svg new file mode 100644 index 0000000..3708333 --- /dev/null +++ b/images/search-loupe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/single-view-icon.svg b/images/single-view-icon.svg new file mode 100644 index 0000000..a6ad34d --- /dev/null +++ b/images/single-view-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/souvenirs-icon.svg b/images/souvenirs-icon.svg new file mode 100644 index 0000000..9b89710 --- /dev/null +++ b/images/souvenirs-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/table-view-icon.svg b/images/table-view-icon.svg new file mode 100644 index 0000000..495abc9 --- /dev/null +++ b/images/table-view-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/telegram-icon.svg b/images/telegram-icon.svg new file mode 100644 index 0000000..b553bee --- /dev/null +++ b/images/telegram-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/tooltip-arrow.svg b/images/tooltip-arrow.svg new file mode 100644 index 0000000..d37ce0c --- /dev/null +++ b/images/tooltip-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/vk-icon.svg b/images/vk-icon.svg new file mode 100644 index 0000000..eb1c4c4 --- /dev/null +++ b/images/vk-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/welcome-background.jpg b/images/welcome-background.jpg new file mode 100644 index 0000000..ea52d47 Binary files /dev/null and b/images/welcome-background.jpg differ diff --git a/images/welcome-text.svg b/images/welcome-text.svg new file mode 100644 index 0000000..5dabfda --- /dev/null +++ b/images/welcome-text.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/youtube-icon.svg b/images/youtube-icon.svg new file mode 100644 index 0000000..2407e3b --- /dev/null +++ b/images/youtube-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index-modal.html b/index-modal.html new file mode 100644 index 0000000..3d277f6 --- /dev/null +++ b/index-modal.html @@ -0,0 +1,248 @@ + + + + + HTML Academy: Седона + + + +
+ +
+ +
+
+

Добро пожаловать в Седону

+ Приветствие +
+
+
+
+

Седона - небольшой городок в Аризоне, заслуживающий большего!

+

Рассмотрим причины, по которым Седона круче, чем Гранд-Каньон!

+
+
+ +
+ +
+
+
+

Приезжайте в Седону отдохнуть в комфорте и уюте!

+

Опытный персонал и качественное обслуживание!

+
+
+ +
+ +
+
+
+

Заинтересовались?

+

Укажите предполагаемые даты поездки,
+ и мы покажем вам лучшие предложения гостиниц в Седоне

+
+
+ Поиск гостиницы в Седоне +
+ +
+
+
+

Подпишитесь на рассылку

+

Только полезная информация и никакого спама, + честное бойскаутское!

+
+
+
+ + +
+
+
+ + + +
+
+ +
+

Поиск гостиницы в Седоне

+
+
    +
  1. + +
    + +

    Мы не можем отправить вас в прошлое.

    +
    +
    2. +
  2. + +
    + +

    На эти даты есть свободные номера. Пока есть.

    +
    +
    3. +
  3. +
    + + +
    + +
    + + + + + Укажите количество детей,
    которые будут с вами, + возраст
    которых от 6 до 18 лет. Дети
    до 6 лет размещаются бесплатно.     +     +     + +
    +
    4. +
+ +
+
+
+
+ + + diff --git a/index.html b/index.html index 4c50ba4..2e2fef4 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,197 @@ - - - HTML Academy: Седона - - + + + HTML Academy: Седона + + + +
+ +
- +
+
+

Добро пожаловать в Седону

+ Приветствие +
+
+
+
+

Седона - небольшой городок в Аризоне, заслуживающий большего!

+

Рассмотрим причины, по которым Седона круче, чем Гранд-Каньон!

+
+
+ +
+ +
+
+
+

Приезжайте в Седону отдохнуть в комфорте и уюте!

+

Опытный персонал и качественное обслуживание!

+
+
+ +
+ +
+
+
+

Заинтересовались?

+

Укажите предполагаемые даты поездки,
+ и мы покажем вам лучшие предложения гостиниц в Седоне

+
+
+ Поиск гостиницы в Седоне +
+ +
+
+
+

Подпишитесь на рассылку

+

Только полезная информация и никакого спама, + честное бойскаутское!

+
+
+
+ + +
+
+
+ + + diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..fcf2c4f --- /dev/null +++ b/styles/style.css @@ -0,0 +1,1309 @@ +@font-face { + font-family: "PT Sans"; + font-style: normal; + font-weight: 400; + src: url("../fonts/ptsans-400.woff2") format('woff2'); + font-display: swap; +} + +@font-face { + font-family: "PT Sans"; + font-style: normal; + font-weight: 700; + src: url("../fonts/ptsans-700.woff2") format("woff2"); + font-display: swap; +} + +body { + margin: 0; + display: flex; + flex-direction: column; + align-items: center; + min-height: 100%; + font-family: "PT Sans", sans-serif; + font-size: 22px; + font-weight: 400; + line-height: 26px; + background-color: #F2F2F2; + color: #000000; + text-align: justify; +} + +html { + height: 100%; +} + + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; + clip: rect(0 0 0 0); + overflow: hidden; +} + +.main { + flex-grow: 1; + width: 1200px; + background-color: #FFFFFF; +} + +.list { + list-style: none; + padding: 0; + margin: 0; +} + +.button { + font-family: "PT Sans", sans-serif; + color: #FFFFFF; + font-size: 16px; + line-height: 20px; + font-weight: 700; + text-align: center; + text-transform: uppercase; + border: none; + border-radius: 4px; +} + +a { + text-decoration: none; + color: #000000; +} + +.about-heading, .subscription-heading, .result-heading, .search-button { + font-size: 30px; + font-weight: 700; + line-height: 36px; + text-transform: uppercase; +} + +.menu-list, .form-section-heading, .field-label { + color: #000000; + font-weight: 700; + font-size: 20px; + line-height: 24px; +} + +.header-main { + background-color: #FFFFFF; + width: 1200px; + margin: 0 auto; +} + +.header-menu { + display: flex; + margin-right: 0; + margin: 0 70px; + width: 1060px; +} + +.menu-list { + display: flex; + flex-wrap: wrap; + align-items: center; + width: 507px; + margin: 0; + padding: 0; +} + +.menu-item a { + position: relative; + display: block; + text-align: center; + padding: 20px 16px;; +} + +.current-page::before { + position: absolute; + bottom: 0; + right: 16px; + left: 16px; + height: 2px; + background-color: #756257; + content: ""; +} + +.logo-to-main { + height: 64px; +} + +.logo { + position: relative; +} + +.header-main .menu-item { + position: relative; +} + +.header-main .menu-item:hover::before { + position: absolute; + bottom: 0; + right: 16px; + left: 16px; + height: 2px; + background-color: #756257; + content: ""; +} + +.navigation-user { + margin-right: 0; + max-width: 268px; + margin-left: 285px; +} + +.navigation-user .navigation-item { + display: block; + min-width: 20px; + min-height: 20px; + text-align: center; +} + +.navigation-item a { + padding: 22px 12px; +} + +.favourites { + position: relative; +} + +.favourites::before { + position: absolute; + content: '12'; + width: 20px; + height: 20px; + top: 11px; + left:20px; + right: 4px; + background-color: #7DB54F; + border-radius: 50%; + color: #ffffff; + font-size: 10px; + text-align: center; + line-height: 20px; +} + +.choose-button, .reset-button, .apply-button { + width: 160px; + height: 36px; +} + +.welcome-section { + text-align: center; + background-color: #83B3D3; + background: url("../images/welcome-background.jpg") no-repeat; + background-size: 100% auto; + height: 485px; +} + +.welcome-text { + margin-top: 51px; +} + +.about-section, .section-comfort, .choose-section { + display: flex; + flex-direction: column; +} + +.section-header { + display: flex; + flex-direction: column; + align-items: center; +} + +.section-header-wrapper { + max-width: 651px; + display: flex; + flex-direction: column; + text-align: center; + margin: 69px auto; +} + +.about-heading { + margin: 0; +} + +.advantages-list { + display: flex; + flex-wrap: wrap; +} + +.advantages-item-with-image { + display: flex; + width: 100%; +} + +.advantage-wrap, .advantage-wrap-without-image, .services-item-wrapper { + display: flex; + flex-direction: column; + align-items: center; + margin: 91px 85px; + text-align: center; +} + +.advantage-wrap-without-image { + margin: 112px 85px; +} + + +.advantages-item, .services-list, .advantages-item-without-image, .services-list-item { + height: auto; +} + +.advantages-item-without-image, .services-list-item { + width: 400px; +} + +.section-header-wrapper-comfort { + max-width: 505px; +} + +.services-list { + display: flex; +} + +.advantages-description { + margin: 0; + margin-top: 30px; +} + +.services-item-wrapper .advantages-description { + margin-top: 0; +} + +.services-item-wrapper { + margin: 81px 85px; +} + +.services-header-item { + margin-top: 24px; + margin-bottom: 24px; +} + +.services-list-item, .choose-section { + background-color: #FFFFFF; +} + +.advantages-item, .services-item-dark { + background-color: #83B3D333; +} + +.advantages-item-with-image { + background-color: #82B3D3; +} + +.advantages-item-light { + background-color: #83B3D31F; +} + +.advantages-header-item { + width: 175px; + position: relative; +} + +.advantages-header-item::before { + content: ''; + position: absolute; + background-color: rgba(255, 255, 255, 0.3); + height: 2px; + top: 86px; + left: 57px; + right: 57px; + /* bottom: 86px; */ +} + +.advantages-header-item-no-image::before { + background-color: rgba(0, 0, 0, 0.3); +} + +.advantages-header-item, .services-header-item, .hotel-name { + font-size: 24px; + font-weight: 700; + line-height: 28px; + font-family: inherit; + text-transform: uppercase; +} + +.advantages-description, .sorted-by, .information { + font-size: 18px; + line-height: 21px; + color: #333333; +} + +.reasons-text { + margin: 0; + line-height: 26px; + color: #333333; + margin-top: 25px; +} + +.choose-section { + align-items: center; +} + +.choose-section-header-wrapper, .subscribtion-section-header-wrapper { + max-width: 592px; + margin-top:96px; + margin-bottom: 54px; +} + +.search-button { + width: 376px; + margin-bottom: 96px; + font-size: 20px; + padding-top: 8px; + padding-bottom: 8px; +} + +.index-subscribtion-section { + background-color: #44759e; + background: url("../images/email-blur-background.jpg") no-repeat; +} + +.subscribtion-section { + min-height: 414px; + display: flex; + flex-direction: column; + align-items: center; + margin:0; +} + +.subscription-heading { + color: #000000; + margin: 0; +} + +.advantages-header-bright, .description-bright, .subscription-heading-bright, .reasons-text-bright { + color: #FFFFFF; +} + +.reasons-text-bright { + margin-top: 20px; +} + +.subscription-form { + display: grid; + grid-template-columns: 1fr 232px; + min-width: 684px; +} + +.email-input { + border: 0; + padding: 12px 20px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + background-color: #F2F2F2; +} + +.action-button.subscribe-button { + padding-top: 8px; + padding-bottom: 8px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.footer-main { + display: flex; + justify-content: center; + background-color: #FFFFFF; + width: 1200px; + align-self: center; +} + +.page-footer-container { + display: flex; + align-items: center; + width: 1060px; + margin-top: 40px; + margin-bottom: 30px; +} + +.footer-sotial-list { + margin-right: 41px; + width: 142px; + display: flex; + flex-wrap: wrap; +} + +.footer-social-item a { + display: block; + padding: 13px 13px; + text-align: center; +} + +.social-item-icon:hover { + filter: brightness(80%) +} + +.social-item-icon:active { + opacity: 0.3; +} + +.social-item-icon:focus { + filter: brightness(80%) +} + +.htmlacademy { + width: 116px; + margin-right: 0; +} + +.htmlacademy-link:hover { + color: #756157; +} + +.htmlacademy-link:active { + color: rgba(117, 97, 87, 0.3); +} + +.htmlacademy-link:focus { + color: #756157; +} + + +.footer-contacts-address-phone { + font-size: 40px; + line-height: 40px; + text-decoration: none; + color: #000000; + cursor: pointer; +} + +.footer-contacts { + width: 720px; + text-align: center; +} + +.footer-contacts-address-phone:hover { + color: #756157; +} + +.footer-contacts-address-phone:active { + color: rgba(117, 97, 87, 0.3); +} + +.footer-contacts-address-phone:focus { + color: #756157; +} + +.choose-button, .more-details-button { + background-color: #756157; +} + +.button:hover { + background-color: #615048; + cursor: pointer; +} + +.button:active { + background-color: #756157; + color: rgba(255, 255, 255, 0.3); +} + +.button:focus { + background-color: #615048; +} + +.action-button { + background-color: #82B3D3; +} + +.action-button:hover { + background-color: #68A2CA; +} + +.action-button:active { + background-color: #82B3D3; + color: rgba(255, 255, 255, 0.3); +} + +.action-button:focus { + background-color: #68A2CA; +} + +.added { + background-color: #7DB54F; +} + +.added:hover { + background-color: #6C9E42; +} + +.added:active { + background-color: #7DB54F; + color: rgba(255, 255, 255, 0.3); +} + +.added:focus { + background-color: #6C9E42; +} + +.reset-button:hover { + background-color: transparent; + color: rgba(255, 255, 255, 0.5); +} + +.reset-button:active { + background-color: transparent; + color: rgba(255, 255, 255, 0.3); +} + +.reset-button:focus { + background-color: transparent; + border: solid 3px #83B3D3; + border-radius: 4px; +} + +.hotels-filter-section { + background-color: #44759e; + background: url('../images/filter-background.jpg') no-repeat; + display: flex; + justify-content: center; +} + +.hotels-filter-section-wrapper { + width: 1060px; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 35px; + margin-bottom: 70px; +} + +.catalog-heading { + align-self: flex-start; + margin-bottom: 8px; + margin-top: 0; +} + +.breadcrumbs { + display: flex; + align-self: flex-start; +} + +.breadcrumbs-item { + margin-left: 10px; +} + +.breadcrumbs-item:first-child { + margin-left: 0; +} + +.filter-form { + color: #FFFFFF; + width: 100%; + display: flex; + justify-content: space-between; + margin-top: 40px; +} + +.form-section { + border: none; + margin: 0; + padding: 0; +} + +.parametrs-list-item { + margin-top: 16px; +} + +.parametrs-list-item:first-child { + margin-top: 0; +} + + +.control { + position: relative; + display: block; + padding-left: 32px; +} + +.control-mark { + position: absolute; + top: 2px; + left: 0; + width: 20px; + height: 20px; + background-color: #ffffff; + border-radius: 2px; +} + +.control-input[type="checkbox"]:checked + .control-mark::before { + position: absolute; + left: 4px; + color: #000000; + content:"\2713"; +} + +.control-input[type="checkbox"]:checked + .control-mark:focus::before { + position: absolute; + left: 1px; + top: -3px; + color: #000000; + content:"\2713"; +} + +.control-input[type="radio"] + .control-mark { + border-radius: 50%; +} + +.control-input[type="radio"]:checked + .control-mark::before { + position: absolute; + top: 5px; + left: 5px; + width: 10px; + height: 10px; + background-color: rgba(63, 94, 114, 1); + border-radius: 50%; + content: ""; +} + +.control:hover { + cursor: pointer; + opacity: 0.4; +} + +.control-mark:focus { + width: 14px; + height: 14px; + border: solid 3px rgba(131, 179, 211, 1); +} + +.control:active { + opacity: 0.3; +} + +.range { + position: relative; + display: flex; + flex-direction: column; +} + +.range-inputs { + display: flex; + width: 288px; +} + +.price-input { + border: 0; + height: 48px; + width: 131px; + padding-left: 12px; + background-color: #F2F2F2; + border-radius: 4px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + font-weight: bold; + color: #000000; +} + +.price-input:hover { + background-color: #E6E6E6; +} + +.price-input:focus { + height: 42px; + width: 125px; + border: solid 3px #83B3D3; +} + +.range::before { + position: absolute; + content: "от"; + width: 24px; + top: 12px; + bottom: 68px; + font-size: 18px; + color: rgba(0, 0, 0, 0.3); + left: 106px; +} + +.range::after { + position: absolute; + content: "до"; + width: 24px; + top: 12px; + bottom: 68px; + font-size: 18px; + color: rgba(0, 0, 0, 0.3); + right: 12px; +} + +.price-input:nth-child(2) { + margin-left: 2px; + border-radius: 4px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.range-scale { + position: relative; + width: 288px;; + height: 4px; + margin-top: 48px; + background-color: rgba(255, 255, 255, 0.3); + border-radius: 4px; +} + +.range-bar { + position: absolute; + height: 4px; + background-color: #ffffff; +} + +.range-toggle { + position: absolute; + width: 19px; + height: 19px; + background: #ffffff; + border-radius: 5px; + cursor: pointer; + border: 1px #ffffff solid; +} + +.range-toggle:hover { + background-color: #ffffff; +} + +.range-toggle:active, +.range-toggle:focus { + border: 3px solid #83B3D3; +} + +.toggle-min { + top: -8px; + left: 0; +} + +.toggle-max { + top: -8px; + left: 207px; +} + +.buttons-module { + margin-top: -10px; + display: flex; + flex-direction: column; +} + +.reset-button { + width: 191px; + background-color: transparent; + margin-top: 32px; +} + +.apply-button { + width: 191px; + margin-top: 56px; +} + +.filtered-catalog-section{ + display: flex; + flex-direction: column; + margin: 0; +} + +.catalog-heading { + font-size: 60px; + line-height: 78px; + font-weight: 700; + color: #FFFFFF; +} + +.breadcrumbs-link { + font-size: 16px; + line-height: 21px; + color: #FFFFFF; +} + +.form-section-heading{ + color: #FFFFFF; + margin-top: 0; +} + +.results-header { + display: flex; + width: 1060px; + margin: 50px 70px 40px 70px; + align-items:center; +} + +.sorted-by { + margin-right: 70px; + height: 49px; + width: 292px; + padding: 13px 20px; + margin-left: 200px; +} + +.sorted-by:hover { + cursor: pointer; + border: solid 2px #68A2CA; +} + +.sorted-by:focus { + border: solid 2px #68A2CA; +} + +.display-methods-list { + display: flex; + max-width: 160px; +} + +.display-methods-item, .sorted-by{ + border: solid 2px #E5E5E5; + border-radius: 4px; +} + +.display-methods-item { + margin-left: 8px; + height: 48px; + width: 48px; + text-align: center; +} + +.method-icon { + margin-top: 10px; +} + +.display-methods-item:first-child { + margin-left: 0; +} + +.display-methods-item label { + display:block; + cursor:pointer; + position:relative; +} + +.display-methods-item:hover, .current-method { + border: solid 2px #000000; + cursor: pointer; +} + +.display-methods-item:active, .current-method { + border: solid 2px #000000; + cursor: pointer; +} + +.display-methods-item:focus { + border: solid 2px rgba(104, 162, 202, 1); + cursor: pointer; +} + +.parametrs-list { + font-size: 18px; + line-height: 23px; + color: #FFFFFF; + margin-top: 32px; +} + +.hotels-cards-list { + display: grid; + position: relative; + grid-template-columns: repeat(3, 340px); + gap: 20px; + width: 1060px; + margin-top: 40px; + margin-right: 70px; + margin-left: 70px; + margin-bottom: 80px; +} + +.hotel-card-item { + box-sizing: border-box; + border: solid 1px #E6E6E6; + width: 340px; + display: grid; + grid-template-rows: 212px repeat(4, auto); + gap: 16px; + padding: 20px; +} + +.hotel-name { + text-transform: none; + margin: 0; +} + +.information { + margin: 0; +} + +.information span { + padding-left: 138px; +} + +.cards-buttons { + display: grid; + grid-template-columns: repeat(2, 140px); + gap: 20px; + min-height: 36px; +} + +.cards-buttons .more-details-button { + padding-top: 8px; +} + +.rating-information { + display: grid; + grid-template-columns: repeat(2, 140px); + gap: 20px; + min-height: 36px; +} + +.rating-information img { + padding-top: 10px; +} + +.rating{ + font-size: 16px; + line-height: 20px; + color: #333333; + background-color: #F2F2F2; + margin: 0; + text-align: center; + padding-top: 8px; +} + +.pagination { + width: 1060px; + display: flex; + height: 60px; + margin-left: 70px; + padding-bottom: 60px; +} + +.hotels-cards-list::before { + position: absolute; + height: 1px; + background-color: rgba(230, 230, 230, 1); + top: 940px; + left:0; + right:0; + content: ''; +} + +.pagination-item { + margin-left: 8px; + width: 60px; + height: 60px; + background-color: #82B3D3; + border-radius: 4px; + text-align: center; +} + +.pagination-item:first-child { + margin-left: 0; +} + +.pagination-link { + max-width: 100%; + display: inline-block; + font-size: 20px; + line-height: 36px; + font-weight: 700; + height: 100%; + padding-top: 12px;; + padding-left: 25px; + padding-right: 24px; + box-sizing: border-box; + text-align: center; + border-radius: 4px; +} + +.pagination-item:last-child .pagination-link { + padding-left: 18px; +} + +.pagination-item .pagination-link { + color: #FFFFFF; +} + +.pagination-item:first-child .pagination-link { + background-color: #F2F2F2; + color: #000000 +} + +.pagination-item:nth-child(5) .pagination-link { + font-size: 22px; + color: #000000; + line-height: 36px; + background-color: #FFFFFF; + padding-left: 20px; +} + +.pagination-link:hover { + background-color: #68A2CA; +} + +.pagination-link:active { + background-color: #82B3D3; + color: rgba(255, 255, 255, 0.3); +} + +.pagination-link:focus { + background-color: #68A2CA; +} + +.catalog-subscribtion-section { + background-color: white; +} + +.modal-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + background-color: rgba(242, 242, 242, 0.8); +} + +.modal { + position: relative; + margin: auto; + padding: 64px 70px; + background-color: #ffffff; + border-radius: 30px; + box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 0.15); +} + +.modal-search { + width: 717px; +} + +.modal-close-button { + position: absolute; + padding: 19px; + top: 64px; + right: 53px; + width: 14px; + height: 14px; + background-color: #F2F2F2; + border: 0; + border-radius: 50%; + background-image: url('../images/close-modal-icon.svg'); + background-repeat: no-repeat; + background-position: center; + cursor: pointer; +} + +.modal-close-button:hover { + background-color: #E6E6E6 +} + +.modal-close-button:focus { + width: 11px; + height: 11px; + padding: 16px; + border: solid 3px #83B3D3; +} + +.modal-close-button:active { + opacity: 0.5; +} + +.modal-content { + display: flex; + flex-direction: column; +} + +.modal-form { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + margin: 0; + margin-top: 64px; + width: 577px; + align-self: center; +} + +.fields-list { + width: inherit; + display: flex; + flex-direction: column; + margin-bottom: 48px; +} + +.modal-button { + width: 577px; + height: 60px; + font-size: 20px; + line-height: 24px; +} + +.fields-list-item { + display: flex; + justify-content: space-between; + margin-bottom: 23px; +} + +.fields-list-item:last-child { + margin-bottom: 0; +} + +.field-label { + padding-top: 12px; +} + +.modal-input { + background-color: #F2F2F2; + border: 0; + height: 48px; + font-size: 18px; + line-height: 24px; + font-weight: 700; + color: #333333; + padding-left: 20px; + border-radius: 4px; +} + +.modal-field-wrapp { + position: relative; + display: flex; + flex-direction: column; + width: 440px; +} + +.modal-input.datepicker { + position: relative; + width: 420px; +} + +.modal-field-wrapp::before { + position: absolute; + content: ""; + width: 17px; + height: 16px; + background-image: url('../images/calendar.svg'); + background-repeat: no-repeat; + top: 17px; + right: 20px; + background-position: center; + cursor: pointer; + z-index: 1; +} + +.modal-input.people-count { + padding: 0; + width: 110px; + text-align: center; + margin-left: 46px; +} + +.people-count-wrapper { + position: relative; +} + +.people-count-wrapper::before { + position: absolute; + content: ""; + width: 14px; + height: 2px; + background-image: url('../images/minus.svg'); + background-repeat: no-repeat; + background-position: center; + right: 83px; + top: 23px; + z-index: 1; +} + +.people-count-wrapper::after { + position: absolute; + content: ""; + width: 14px; + height: 14px; + background-image: url('../images/plus.svg'); + background-repeat: no-repeat; + background-position: center; + right: 13px; + top: 17px; + z-index: 1; +} + +.people-count-wrapper:hover::after, +.people-count-wrapper:hover::before { + cursor: pointer; +} + +.tooltip { + position: absolute; + width: 16px; + height: 16px; + margin-top: 9px; +} + +.tooltip-toggle { + border: none; + background-color: transparent; + width: 26px; + height: 27px; + padding: 0; + margin: 0; + display: block; +} + +.tooltip-icon { + width: 100%; + height: 100%; + color: #242424; + display: block; +} + +.tooltip-text { + background-color: #333333; + color: #ffffff; + font-size: 16px; + line-height: 20px; + text-transform: none; + padding: 15px 18px 22px 22px; + border-radius: 10px; + width: 216px; + position: absolute; + top: 100%; + margin-top: 28px; + text-align: start; + transform: translateX(-45%); + z-index: 1; + display: none; + box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.3); +} + +.tooltip-text:after { + content:''; + background-image: url("../images/tooltip-arrow.svg"); + width: 19px; + height: 9px; + position: absolute; + bottom: 100%; + left:0; + right:0; + margin-left: auto; + margin-right: auto; +} + +.tooltip-toggle:hover + .tooltip-text, +.tooltip-toggle:focus + .tooltip-text { + display: block; +} + +.field-label-tool { + position: relative; + padding-right: 10px; +} + +.message { + margin: 0; + margin-top: 4px; + font-size: 16px; + line-height: 21px; + color: #333333; +} + +.error-message { + color: #FF5757; +}