diff --git a/5/.stylelintrc.json b/5/.stylelintrc.json new file mode 100644 index 0000000..189e393 --- /dev/null +++ b/5/.stylelintrc.json @@ -0,0 +1,159 @@ +{ + "rules": { + "block-no-empty": true, + "comment-no-empty": true, + "declaration-block-no-duplicate-custom-properties": true, + "declaration-block-no-shorthand-property-overrides": true, + "font-family-no-duplicate-names": true, + "function-calc-no-unspaced-operator": true, + "function-linear-gradient-no-nonstandard-direction": true, + "media-feature-name-no-unknown": true, + "named-grid-areas-no-invalid": true, + "no-duplicate-selectors": true, + "no-empty-source": true, + "no-extra-semicolons": true, + "no-invalid-double-slash-comments": true, + "no-irregular-whitespace": true, + "property-no-unknown": true, + "selector-pseudo-class-no-unknown": true, + "selector-pseudo-element-no-unknown": true, + "string-no-newline": true, + "unit-no-unknown": true, + "font-family-no-missing-generic-family-keyword": true, + "no-descending-specificity": null, + "color-hex-case": "lower", + "color-hex-length": "long", + "font-family-name-quotes": "always-unless-keyword", + "function-comma-newline-after": "always-multi-line", + "function-comma-newline-before": "never-multi-line", + "function-comma-space-after": "always-single-line", + "function-comma-space-before": "never", + "function-max-empty-lines": 0, + "function-name-case": "lower", + "function-parentheses-space-inside": "never-single-line", + "function-url-quotes": "always", + "function-whitespace-after": "always", + "number-leading-zero": "always", + "number-no-trailing-zeros": true, + "length-zero-no-unit": true, + "string-quotes": "double", + "unit-case": "lower", + "value-keyword-case": "lower", + "value-list-comma-newline-after": "always-multi-line", + "value-list-comma-newline-before": "never-multi-line", + "value-list-comma-space-after": "always-single-line", + "value-list-comma-space-before": "never", + "value-list-max-empty-lines": 0, + "value-no-vendor-prefix": true, + "property-case": "lower", + "property-no-vendor-prefix": true, + "keyframe-declaration-no-important": true, + "declaration-no-important": true, + "declaration-bang-space-after": "never", + "declaration-bang-space-before": "always", + "declaration-colon-space-after": "always-single-line", + "declaration-colon-space-before": "never", + "declaration-block-no-duplicate-properties": true, + "declaration-block-semicolon-newline-after": "always", + "declaration-block-semicolon-newline-before": "never-multi-line", + "declaration-block-semicolon-space-after": "always-single-line", + "declaration-block-semicolon-space-before": "never", + "declaration-block-trailing-semicolon": "always", + "block-closing-brace-empty-line-before": "never", + "block-closing-brace-newline-after": "always", + "block-closing-brace-newline-before": "always", + "block-closing-brace-space-after": "always-single-line", + "block-closing-brace-space-before": "always-single-line", + "block-opening-brace-newline-after": "always", + "block-opening-brace-space-after": "always-single-line", + "block-opening-brace-space-before": "always", + "selector-attribute-brackets-space-inside": "never", + "selector-attribute-operator-space-after": "never", + "selector-attribute-operator-space-before": "never", + "selector-attribute-quotes": "always", + "selector-combinator-space-after": "always", + "selector-combinator-space-before": "always", + "selector-descendant-combinator-no-non-space": true, + "selector-max-id": 0, + "selector-pseudo-class-case": "lower", + "selector-pseudo-class-parentheses-space-inside": "never", + "selector-pseudo-element-case": "lower", + "selector-pseudo-element-colon-notation": "double", + "selector-type-case": "lower", + "selector-type-no-unknown": true, + "selector-max-empty-lines": 0, + "selector-list-comma-newline-after": "always", + "selector-list-comma-newline-before": "never-multi-line", + "selector-list-comma-space-after": "always-single-line", + "selector-list-comma-space-before": "never", + "rule-empty-line-before": [ + "always", + { + "except": [ + "first-nested" + ], + "ignore": [ + "after-comment" + ] + } + ], + "media-feature-colon-space-after": "always", + "media-feature-colon-space-before": "never", + "media-feature-name-case": "lower", + "media-feature-name-no-vendor-prefix": true, + "media-feature-parentheses-space-inside": "never", + "media-feature-range-operator-space-after": "always", + "media-feature-range-operator-space-before": "always", + "media-query-list-comma-newline-after": "always-multi-line", + "media-query-list-comma-newline-before": "never-multi-line", + "media-query-list-comma-space-after": "always-single-line", + "media-query-list-comma-space-before": "never-single-line", + "at-rule-empty-line-before": [ + "always", + { + "except": [ + "first-nested", + "blockless-after-blockless" + ], + "ignore": [ + "after-comment" + ] + } + ], + "at-rule-name-case": "lower", + "at-rule-name-space-after": "always", + "at-rule-no-unknown": [ + true, + { + "ignoreAtRules": [ + "mixin", + "define-mixin", + "include", + "content", + "rules", + "each" + ] + } + ], + "at-rule-no-vendor-prefix": true, + "at-rule-semicolon-newline-after": "always", + "indentation": 2, + "max-nesting-depth": [ + 2, + { + "ignoreAtRules": [ + "media" + ] + } + ], + "max-empty-lines": 2, + "no-eol-whitespace": true, + "no-missing-end-of-source-newline": true, + "no-duplicate-at-import-rules": true, + "no-invalid-position-at-import-rule": true, + "color-no-invalid-hex": true, + "color-no-hex": null, + "color-named": "never", + "number-max-precision": 2 + } +} diff --git a/5/.vscode/extensions.json b/5/.vscode/extensions.json new file mode 100644 index 0000000..0a8e1a6 --- /dev/null +++ b/5/.vscode/extensions.json @@ -0,0 +1,5 @@ +{ + "recommendations": [ + "EditorConfig.EditorConfig" + ] +} diff --git a/5/.vscode/settings.json b/5/.vscode/settings.json new file mode 100644 index 0000000..721d26b --- /dev/null +++ b/5/.vscode/settings.json @@ -0,0 +1,23 @@ +{ + "editor.renderWhitespace": "selection", + "files.exclude": { + "*:Zone.Identifier": true, + "node_modules/": true + }, + "editor.bracketPairColorization.independentColorPoolPerBracketType": true, + "editor.guides.bracketPairs": "active", + "files.insertFinalNewline": true, + "files.trimFinalNewlines": true, + "files.trimTrailingWhitespace": true, + "css.format.spaceAroundSelectorSeparator": true, + "css.lint.compatibleVendorPrefixes": "warning", + "css.lint.duplicateProperties": "warning", + "css.lint.idSelector": "error", + "css.lint.important": "error", + "css.lint.importStatement": "warning", + "css.lint.universalSelector": "warning", + "css.lint.unknownVendorSpecificProperties": "warning", + "css.lint.zeroUnits": "error", + "html.format.endWithNewline": true, + "html.format.indentInnerHtml": true +} diff --git a/5/catalog.html b/5/catalog.html new file mode 100644 index 0000000..48e7232 --- /dev/null +++ b/5/catalog.html @@ -0,0 +1,312 @@ + + + + + HTML Academy: Седона + + + + +
+
+ +
+
+
+

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

+ + +
+ +
+
+ Инфраструктура +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+ Тип жилья +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+ Стоимость, ₽: + + + + + + +
+
+ + +
+
+ + +
+ +
+
+

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

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

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

+ + +
+
+
+ +
+ + + + diff --git a/5/fonts/ptsans-400.woff2 b/5/fonts/ptsans-400.woff2 new file mode 100644 index 0000000..4bcdea3 Binary files /dev/null and b/5/fonts/ptsans-400.woff2 differ diff --git a/5/fonts/ptsans-700.woff2 b/5/fonts/ptsans-700.woff2 new file mode 100644 index 0000000..3e12332 Binary files /dev/null and b/5/fonts/ptsans-700.woff2 differ diff --git a/5/images/Logo.svg b/5/images/Logo.svg new file mode 100644 index 0000000..a019100 --- /dev/null +++ b/5/images/Logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/5/images/button.png b/5/images/button.png new file mode 100644 index 0000000..bdfd625 Binary files /dev/null and b/5/images/button.png differ diff --git a/5/images/catalog/breadcrumbs.png b/5/images/catalog/breadcrumbs.png new file mode 100644 index 0000000..af277d0 Binary files /dev/null and b/5/images/catalog/breadcrumbs.png differ diff --git a/5/images/catalog/breadcrumbs.svg b/5/images/catalog/breadcrumbs.svg new file mode 100644 index 0000000..6bbfb36 --- /dev/null +++ b/5/images/catalog/breadcrumbs.svg @@ -0,0 +1,4 @@ + + + + diff --git a/5/images/catalog/filter.png b/5/images/catalog/filter.png new file mode 100644 index 0000000..e4b1521 Binary files /dev/null and b/5/images/catalog/filter.png differ diff --git a/5/images/catalog/hotel-1.jpg b/5/images/catalog/hotel-1.jpg new file mode 100644 index 0000000..14bf94c Binary files /dev/null and b/5/images/catalog/hotel-1.jpg differ diff --git a/5/images/catalog/hotel-2.jpg b/5/images/catalog/hotel-2.jpg new file mode 100644 index 0000000..18abe80 Binary files /dev/null and b/5/images/catalog/hotel-2.jpg differ diff --git a/5/images/catalog/hotel-3.jpg b/5/images/catalog/hotel-3.jpg new file mode 100644 index 0000000..f439f1d Binary files /dev/null and b/5/images/catalog/hotel-3.jpg differ diff --git a/5/images/catalog/hotel-4.jpg b/5/images/catalog/hotel-4.jpg new file mode 100644 index 0000000..cde5415 Binary files /dev/null and b/5/images/catalog/hotel-4.jpg differ diff --git a/5/images/catalog/snap.svg b/5/images/catalog/snap.svg new file mode 100644 index 0000000..bfcb3a9 --- /dev/null +++ b/5/images/catalog/snap.svg @@ -0,0 +1,3 @@ + + + diff --git a/5/images/catalog/star.svg b/5/images/catalog/star.svg new file mode 100644 index 0000000..cdb8357 --- /dev/null +++ b/5/images/catalog/star.svg @@ -0,0 +1,3 @@ + + + diff --git a/5/images/city.jpg b/5/images/city.jpg new file mode 100644 index 0000000..0c510c4 Binary files /dev/null and b/5/images/city.jpg differ diff --git a/5/images/crag.jpg b/5/images/crag.jpg new file mode 100644 index 0000000..13ea35c Binary files /dev/null and b/5/images/crag.jpg differ diff --git a/5/images/food.svg b/5/images/food.svg new file mode 100644 index 0000000..dbbf352 --- /dev/null +++ b/5/images/food.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/5/images/home.svg b/5/images/home.svg new file mode 100644 index 0000000..cdd81ed --- /dev/null +++ b/5/images/home.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/5/images/house.svg b/5/images/house.svg new file mode 100644 index 0000000..6bbfb36 --- /dev/null +++ b/5/images/house.svg @@ -0,0 +1,4 @@ + + + + diff --git a/5/images/like.svg b/5/images/like.svg new file mode 100644 index 0000000..d021cc4 --- /dev/null +++ b/5/images/like.svg @@ -0,0 +1,3 @@ + + + diff --git a/5/images/logosedona.svg b/5/images/logosedona.svg new file mode 100644 index 0000000..c7ca7c3 --- /dev/null +++ b/5/images/logosedona.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/5/images/mountains.png b/5/images/mountains.png new file mode 100644 index 0000000..e80e9a6 Binary files /dev/null and b/5/images/mountains.png differ diff --git a/5/images/present.svg b/5/images/present.svg new file mode 100644 index 0000000..4191cdd --- /dev/null +++ b/5/images/present.svg @@ -0,0 +1,3 @@ + + + diff --git a/5/images/search.png b/5/images/search.png new file mode 100644 index 0000000..f3243bb Binary files /dev/null and b/5/images/search.png differ diff --git a/5/images/subscribe.png b/5/images/subscribe.png new file mode 100644 index 0000000..5b9f1ea Binary files /dev/null and b/5/images/subscribe.png differ diff --git a/5/images/telegram.svg b/5/images/telegram.svg new file mode 100644 index 0000000..68839c5 --- /dev/null +++ b/5/images/telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/5/images/vk.svg b/5/images/vk.svg new file mode 100644 index 0000000..b0d6f7d --- /dev/null +++ b/5/images/vk.svg @@ -0,0 +1,3 @@ + + + diff --git a/5/images/welcome.svg b/5/images/welcome.svg new file mode 100644 index 0000000..38661e2 --- /dev/null +++ b/5/images/welcome.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/5/images/youtub.svg b/5/images/youtub.svg new file mode 100644 index 0000000..2b08af4 --- /dev/null +++ b/5/images/youtub.svg @@ -0,0 +1,3 @@ + + + diff --git a/5/index.html b/5/index.html new file mode 100644 index 0000000..414c74a --- /dev/null +++ b/5/index.html @@ -0,0 +1,142 @@ + + + + + HTML Academy: Седона + + + + +
+
+ +
+
+
+ Welcome to the gorgeous Sedona , because the Grand Canyon sucks! +
+
+

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

+

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

+
+
+
    +
  • +

    Настоящий городок

    +

    Седона — не аттракцион для туристов, там течёт своя жизнь

    +
    • + Фото природы города Седона. +
  • +

    Небольшая площадь

    +

    Все достопримечательности находятся очень близко

    +
    • +
  • +

    Красивая дорога

    +

    Ехать в Седону из Лас-Вегаса совсем не скучно!

    +
    • +
  • +

    Мало туристов

    +

    Большинство едет в Гранд Каньон и толпится там

    +
    • +
  • +

    Там есть мост Дьявола

    +

    Да, по нему можно пройти! Если вы осмелитесь, разумеется

    +
    • + Фото моста Дьявола города Седона. +
  • +

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

    +

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

    +
    • +
  • + Изображение дома. +

    Жилье

    +

    Рекомендуем пожить в настоящем мотеле, всё как в кино!

    +
    • +
  • + Изображение бургера. +

    Еда

    +

    Всегда заказывайте топовый фирменный бургер, вы не разочаруетесь!

    +
    • +
  • + Изображение подарка. +

    Сувениры

    +

    Не только китайского, но и настоящего местного производства!

    +
    • +
+
+
+

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

+

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

+
+ +
+
+ + +
+ +
+ + diff --git a/5/styles/styles.css b/5/styles/styles.css new file mode 100644 index 0000000..e161f3e --- /dev/null +++ b/5/styles/styles.css @@ -0,0 +1,682 @@ +@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; +} +html { + height: 100%; + display: inline-flex; + padding: 0px 40px; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} +.page-container { + width: 1200px; + margin: 0 auto; + min-height: 100%; + background: #FFF; + box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.20); +} +body { + margin: 0; + display: flex; + flex-direction: column; + height: 100%; + font-family: "PT Sans"; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 24px; + color: #000000; + +} +.main-container { + flex-grow: 1; +} +.main-header { + background: #FFF; +} +.site-navigation { + margin: 0; + padding: 0; + width: 339px; + display: flex; + justify-content: space-between; + align-items: center; + list-style: none; + flex-shrink: 0; +} +.navigation-link-like { + width: 268px; + margin-left: auto; + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: 10px; + color: #ffffff; + background-image: url("../images/like.svg"); + width: 20px; + height: 20px; + border-radius: 10px; + background: #7DB54F; + } +.navigation-link { + text-decoration: none; + color: inherit; + width: 114px; + height: 32px; + flex-shrink: 0; + list-style: none; +} +.navigation-link-button button { + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + text-transform: uppercase; + color: #ffffff; + border-radius: 4px; + background:#756157; +} +.hero { + background-color: #FFF; + display: flex; + width: 1200px; + padding: 69px 0px; + flex-direction: column; + justify-content: center; + align-items: center; +} +.page-container { + width: 1200px; + margin: 0 auto; +} +.main-nav { + display: flex; + width: 1200px; + height: 64px; + margin: 0 auto; + font-size: 20px; + font-weight: 700; + line-height: 24px; + text-transform: capitalize; + text-decoration: none; + color: inherit; +} +.fond { + background: url("../images/mountains.png"); + background-size: contain; + background-repeat: no-repeat; + width: 1200px; + height: 485px; + flex-shrink: 0; +} +.title { + text-align: center; + font-size: 30px; + width: 1200px; + font-style: normal; + font-weight: 700; + line-height: 36px; + text-transform: uppercase; +} +.subject { + text-align: center; + font-size: 22px; + font-style: normal; + font-weight: 400; + line-height: 26px; +} +.advantage { + display: flex; + width: 1200px; + padding: 64px 0px; + flex-direction: column; + justify-content: center; + align-items: center; + align-self: stretch; + background-color: #FFF; +} +.advantages h2 { + font-size: 30px; + font-style: normal; + font-weight: 700; + line-height: 36px; +} + +.advantages h3 { + font-size: 24px; + font-weight: 700; + text-transform: uppercase; + line-height: 28px; +} +.about { + font-size: 22px; + font-style: normal; + font-weight: 400; + line-height: 26px; +} +.advantages p { + font-size: 18px; + font-weight: 400; + line-height: 21px; +} + +.advantages-title-block { + margin: 0; + padding: 0; + color: #ffffff; + text-align: center; + width: 175px; + +} +.advantages-title { + margin: 0; + padding: 0; + text-align: center; + list-style: none; +} +.advantages-list { + margin: 0; + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +.advantages-descripsion-block { + color: #ffffff; +} +.advantages-item-block { + background: #82B3D3; + display: flex; + width: 230px; + height: 170px; + padding: 103px 85px; + flex-direction: column; + justify-content: center; + align-items: center; +} +.advantages-item-block2 { + background-color: rgba(131, 179, 211, 0.12); + display: flex; + width: 230px; + height: 170px; + padding: 103px 85px; + flex-direction: column; + justify-content: center; + align-items: center; +} +.advantages-item-block3 { + background-color: rgba(131, 179, 211, 0.20); + width: 230px; + height: 170px; + padding: 103px 85px; + flex-direction: column; + justify-content: center; + align-items: center; + list-style: none; +} +.search { + display: flex; + padding: 96px 304px; + flex-direction: column; + align-items: flex-start; + background-color: #FFF; + align-items: center; +} +.search button { + color: #ffffff; + border-radius: 4px; + background: #756157; +} +.page-main-title { + text-align: center; + font-size: 30px; + font-style: normal; + font-weight: 700; + line-height: 36px; + text-transform: uppercase; +} +.advantages-descripsion { + font-size: 22px; + font-weight: 400; + line-height: 26px; + text-align: center; +} + +.subscribe-title { + color: #FFF; + text-align: center; + font-size: 30px; + font-style: normal; + font-weight: 700; + line-height: 36px; + text-transform: uppercase; +} +.subscribe-title-light { + color: #FFF; + text-align: center; + font-size: 22px; + font-style: normal; + font-weight: 400; + line-height: 26px; +} +.subscribe-button { + color:#FFF; + border-radius: 0 4 4 0; + background: #82B3D3; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 36px; + text-transform: uppercase; +} +.footer-social { + display: flex; + justify-content: space-between; + align-items: center; + list-style: none; + gap: 10px; +} +.footer-social-item-vk { + background: url("../images/vk.svg"); + color: rgba(131, 179, 211, 1); + background-repeat: no-repeat; +} +.footer-social-item-telegram { + background: url("../images/telegram.svg"); + color: rgba(131, 179, 211, 1); + background-repeat: no-repeat; +} +.footer-social-item-youtub { + background: url("../images/youtub.svg"); + color: rgba(131, 179, 211, 1); + background-repeat: no-repeat; +} +.present { + background: url("../images/logo.svg"); + color: #333; + background-repeat: no-repeat; + display: flex; + flex-direction: column; + align-items: center; +} +.footer-contacts-address-phone { + text-decoration: none; + font-size: 40px; + font-style: normal; + font-weight: 400; + line-height: 40px; + text-transform: uppercase; + color: inherit; +} +.footer-contacts-address { + display: flex; + width: 720px; + height: 50px; + justify-content: center; + align-items: center; + flex-shrink: 0; +} +.footer { + display: flex; + width: 1200px; + height: 120px; + justify-content: center; + align-items: center; + background: #FFF; +} +.footer-page-container { + display: flex; + width: 1060px; + justify-content: space-between; + align-items: center; + flex-shrink: 0; +} + + + + + + + + +/* 2стр */ +.main-catalog { + background: url("../images/catalog/filter.png"); + background-size: contain; + background-repeat: no-repeat; + display: flex; + width: 1200px; + flex-direction: column; + align-items: flex-start; +} +.inner-header-title { + color: #FFF; + font-size: 60px; + font-style: normal; + font-weight: 700; + line-height: 78px; +} +.breadcrumbs-link { + background-image: url("../images/catalog/breadcrumbs.svg"); + background-repeat: no-repeat; +} +.bread-crumbs { + background-image: url("../images/catalog/breadcrumbs.png"); + background-repeat: no-repeat; +} +.breadcrumb-link { + color: #FFF; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 21px; + text-decoration: none; +} +.search-filter { + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; + width: 1200px; +} +.search-filter-title { + color: #FFF; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 24px; + text-transform: capitalize; +} +.earch-filter-item { + color: #FFF; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 23px; + text-transform: capitalize; +} +.field { + color: #000000; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 24px; + text-transform: capitalize; +} +.button { + text-align: center; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 36px; + text-transform: uppercase; +} +.button-price { + border-radius: 4px 0px 0px 4px; + background: #F2F2F2; +} +.button-dark { + color: #FFF; + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + width: 191px; + height: 36px; + text-transform: uppercase; + border-radius: 4px; + background: #82B3D3; +} +.button-light { + color: #FFF; + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + width: 191px; + height: 36px; + text-transform: uppercase; + border-radius: 4px; + background: transparent; +} +.sorting { + border-radius: 4px; + border: 2px solid #E5E5E5; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 21px; + display: flex; + width: 292px; + padding: 14px 20px; + justify-content: space-between; + align-items: center; +} +.button-list-pictures { + width: 16px; + height: 14px; + display: flex; + padding: 3px 2px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + flex-shrink: 0; +} +.button-list-picture { + width: 16px; + height: 14px; + display: flex; + padding: 3px 2px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + flex-shrink: 0; +} +.button-list-list { + width: 16px; + height: 14px; + padding: 14px 12px; + margin: 0; + border-radius: 4px; + border: 2px solid #E5E5E5; +} +.inner-header { + font-size: 30px; + font-style: normal; + font-weight: 700px; + line-height: 36px; + text-transform: uppercase; +} +.button-list-pictures, .button-list-picture { + text-decoration: none; + color: #000000; + padding: 14px 12px; + margin: 0; + border-radius: 4px; + border: 2px solid #E5E5E5; +} +.catalog-card-link { + text-decoration: none; +} +.catalog-card-title { + color:#000; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 28px; + text-decoration: none; + width: 300px; +} +.catalog-card-button-details { + color:#FFF; + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + text-transform: uppercase; + border-radius: 4px; + background: #756157; + padding: 8px 50px; + text-decoration: none; + width: 140px; +} +.catalog-card-button-favorites { + color:#FFF; + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + text-transform: uppercase; + border-radius: 4px; + background: #82B3D3; + padding: 8px 50px; + text-decoration: none; +} +.catalog-card-button-favorite { + color:#FFF; + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + text-transform: uppercase; + border-radius: 4px; + background: #7DB54F; + padding: 8px 50px; + text-decoration: none; +} +.catalog-card { + border-radius: 4px; + border: 1px solid #E6E6E6; +} +.catalog-list { + display: flex; + width: 340px; + height: 438px; + padding: 20px; + flex-direction: column; + align-items: flex-start; + gap: 16px; + list-style: none; +} +.rating-result { + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 20px; + text-transform: uppercase; + text-decoration: none; + color: #333; + width: 140px; + height: 37px; + border-radius: 4px; + background:#F2F2F2; + +} +.pagination-current-one { + color:#000; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 36px; + text-transform: uppercase; + border-radius: 4px; + background:#F2F2F2; + display: flex; + width: 60px; + height: 60px; + justify-content: center; + align-items: center; + display: flex; + align-items: flex-start; + gap: 8px; +} +.pagination-current { + color: #ffffff; + text-align: center; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 36px; + text-transform: uppercase; + border-radius: 4px; + background: #82B3D3; + width: 60px; + height: 60px; + justify-content: center; + align-items: center; + display: flex; + align-items: flex-start; +} +.pagination { + list-style: none; + display: flex; + align-items: center; + align-self: stretch; + gap: 8px; +} +.subscribe { + background-image: url("../images/subscribe.png"); + background-size: cover; + background-repeat: no-repeat; + width: 1200px; + height: 414px; + display: flex; + flex-direction: column; + align-items: center; +} +.subscribe-title-dark { + color:#000000; + text-align: center; + font-size: 22px; + font-style: normal; + font-weight: 400; + line-height: 26px; +} +.subscribe-title-link { + color: #000; + font-size: 30px; + font-style: normal; + font-weight: 700; + line-height: 36px; + text-transform: uppercase; +} +.field { + color: rgba(0, 0, 0, 1); + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 24px; + opacity: 0.6; + border-radius: 4px 0px 0px 4px; + background: #F2F2F2; +} +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; + clip: rect(0 0 0 0); + overflow: hidden; +}