From 93ffd26523b47e77206a591d86d46c5e2dafabc6 Mon Sep 17 00:00:00 2001
From: Keks
Date: Thu, 26 Oct 2023 17:46:32 +0300
Subject: [PATCH] =?UTF-8?q?:heavy=5Fcheck=5Fmark:=20=D0=A1=D0=B1=D0=BE?=
=?UTF-8?q?=D1=80=D0=BA=D0=B0=20#8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
8/catalog.html | 32 ++-
8/images/catalog/alternative.svg | 3 +
8/images/catalog/sorting.svg | 3 +
8/index.html | 13 +-
8/modal.html | 391 +++++++++++++++++++++++++++++++
8/styles/styles.css | 280 +++++++++++++++++++---
6 files changed, 674 insertions(+), 48 deletions(-)
create mode 100644 8/images/catalog/alternative.svg
create mode 100644 8/images/catalog/sorting.svg
create mode 100644 8/modal.html
diff --git a/8/catalog.html b/8/catalog.html
index 8aca86c..771e09c 100644
--- a/8/catalog.html
+++ b/8/catalog.html
@@ -69,6 +69,7 @@ Блок фильтров
+ Поиск гостиницы в Седоне
Подпишитесь на рассылку
diff --git a/8/modal.html b/8/modal.html
new file mode 100644
index 0000000..b38a63d
--- /dev/null
+++ b/8/modal.html
@@ -0,0 +1,391 @@
+
+
+
+
+
+ HTML Academy: Седона
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Подпишитесь на рассылку
+ Только полезная информация и никакого спама, честное бойскаутское!
+
+
+
+
+
+
+
+
+
diff --git a/8/styles/styles.css b/8/styles/styles.css
index 2e3120e..2c048f6 100644
--- a/8/styles/styles.css
+++ b/8/styles/styles.css
@@ -55,6 +55,7 @@ body {
padding: 0px 70px;
margin: 0;
padding: 0;
+ z-index: 2;
}
.site-navigation {
margin: 0;
@@ -179,6 +180,10 @@ body {
background: #756157;
color: rgba(255, 255, 255, 0.30);
}
+.navigation-link-button:disabled {
+ background: #E5E5E5;
+ color: #FFF;
+}
.hero {
background-color: #FFF;
display: flex;
@@ -278,14 +283,14 @@ body {
margin: 20px 0 54px;
}
.advantages-title-block {
- margin: 0 0 30px;
+ margin: 0;
padding: 0;
color: #ffffff;
text-align: center;
width: 175px;
}
.advantages-title {
- margin: 0 0 30px;
+ margin: 0;
padding: 0;
text-align: center;
list-style: none;
@@ -309,6 +314,19 @@ body {
.advantages-descripsion-block {
color: #ffffff;
text-align: center;
+ position: relative;
+ margin-top: 60px;
+}
+.advantages-descripsion-block::after {
+ position: absolute;
+ width: 60px;
+ height: 2px;
+ background: rgba(255, 255, 255, 0.30);
+ right: 0;
+ left: 85px;
+ top: -30px;
+ bottom: 0;
+ content: "";
}
.advantages-item-block {
background: #82B3D3;
@@ -368,7 +386,7 @@ body {
text-transform: uppercase;
margin: 0;
}
-.button-search {
+.button-link {
display: inline-flex;
padding: 8px 50px;
justify-content: center;
@@ -381,27 +399,52 @@ body {
font-weight: 700;
line-height: 36px;
text-transform: uppercase;
+ border-radius: 4px;
+ background: #756157;
+ text-decoration: none;
}
-.button-search:hover {
+.button-link:hover {
background: #615048;
}
-.button-search:focus {
+.button-link:focus {
background: #615048;
}
-.button-search:active {
+.button-link:active {
background: #756157;
color: rgba(255, 255, 255, 0.30);
}
+.button-link:disabled {
+ background: #E5E5E5;
+ color: #FFF;
+}
+.advantages-descripsions {
+ font-size: 22px;
+ font-weight: 400;
+ line-height: 26px;
+ text-align: center;
+ position: relative;
+}
.advantages-descripsion {
font-size: 22px;
font-weight: 400;
line-height: 26px;
text-align: center;
- margin: 0;
+ position: relative;
+ margin-top: 60px;
+}
+.advantages-descripsion::after {
+ position: absolute;
+ width: 60px;
+ height: 2px;
+ background: rgba(0, 0, 0, 0.30);
+ right: 0;
+ left: 85px;
+ top: -30px;
+ bottom: 0;
+ content: "";
}
.subscribe-title {
color: #FFF;
- text-align: center;
font-size: 30px;
font-style: normal;
font-weight: 700;
@@ -446,6 +489,10 @@ body {
.subscribe-button:active {
opacity: 0.3;
}
+.subscribe-button:disabled {
+ background: #E5E5E5;
+ color: #FFF;
+}
.footer-social {
display: flex;
flex-shrink: 0;
@@ -461,7 +508,6 @@ body {
justify-content: space-between;
align-items: center;
margin: 0;
- padding: 0;
}
.footer-social-item-vk {
background-repeat: no-repeat;
@@ -483,12 +529,30 @@ body {
padding: 0px 10px;
gap: 10px;
}
+.button:hover path {
+ fill:rgba(104, 162, 202, 1);
+}
+.button:focus path {
+ fill:rgba(104, 162, 202, 1);
+}
+.button:active path {
+ fill:rgba(104, 162, 202, 0.3);
+}
.htmlacademy-link {
display: flex;
flex-direction: column;
align-items: center;
margin: 40px 70px 30px 0;
}
+.htmlacademy-link:hover path {
+ fill: rgba(117, 97, 87, 1);
+}
+.htmlacademy-link:focus path {
+ fill: rgba(117, 97, 87, 1);
+}
+.htmlacademy-link:active path {
+ fill: rgba(117, 97, 87, 0.3);
+}
.footer-contacts-address-phone {
text-decoration: none;
font-size: 40px;
@@ -510,6 +574,7 @@ body {
}
.footer-contacts-address:focus {
color: #756157;
+ border: none;
}
.footer-contacts-address:active {
color: rgba(117, 97, 87, 0.3);
@@ -533,6 +598,10 @@ body {
.email {
display: flex;
}
+.modal-container {
+ z-index: 1000;
+ position: absolute;
+}
@@ -560,6 +629,22 @@ fieldset {
align-items: center;
margin: 0;
padding: 0;
+ position: relative;
+}
+
+.do {
+ position: absolute;
+ right: 165px;
+ padding: 12px 0;
+ opacity: 0.3;
+ margin: 0;
+}
+.of {
+ position: absolute;
+ left: 248px;
+ padding: 12px 0;
+ opacity: 0.3;
+ margin: 0;
}
.price {
display: flex;
@@ -655,13 +740,47 @@ fieldset {
margin-left: 60px;
padding: 0;
width: 143px;
+ margin-right: 0 ;
}
.price {
padding: 0;
opacity: 0.3;
}
+.control {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+.control-input:checked + .control-input::before {
+ background-image: url("../images/catalog/alternative.svg");
+}
.control-input {
margin: 0;
+ appearance: none;
+}
+.control-input::before {
+ content: "";
+ border-radius: 4px;
+ background: #FFF;
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ margin: 0;
+ padding: 0;
+}
+.control-input-list {
+ margin: 0;
+ appearance: none;
+}
+.control-input-list::before {
+ content: "";
+ border-radius: 10px;
+ background: #FFF;
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ margin: 0;
+ padding: 0;
}
.earch-filter-item:hover {
opacity: 0.6;
@@ -681,44 +800,73 @@ fieldset {
line-height: 23px;
text-transform: capitalize;
}
-.field {
- color: #000000;
- font-size: 18px;
- font-style: normal;
- font-weight: 700;
- line-height: 24px;
- text-transform: capitalize;
+.field-do {
+ border-radius: 4px 0 0 4px;
+ background: #F2F2F2;
display: flex;
- max-width: 143px;
+ width: 143px;
padding: 12px 20px;
+ justify-content: space-between;
+ align-items: center;
border: none;
-}
-.field-email {
- color: #000;
font-size: 18px;
font-style: normal;
- font-weight: 400;
+ font-weight: 700;
line-height: 24px;
+ margin-right: 2px;
+}
+.field-do:hover {
+ background: rgba(230, 230, 230, 1);
+}
+.field-do:focus {
+ background: ;
+ border-radius: 4px 0px 0px 4px;
+ border: 3px solid #83B3D3;
+ background: #E6E6E6;
+}
+.field-of {
+ border-radius: 0px 4px 4px 0px;
+ background: #F2F2F2;
display: flex;
- min-width: 452px;
+ width: 143px;
padding: 12px 20px;
+ justify-content: space-between;
+ align-items: center;
border: none;
- border-radius: 4px 0px 0px 4px;
- background: #F2F2F2;
- min-height: 52px;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 24px
+}
+.field-of:hover {
+ background: rgba(230, 230, 230, 1);
+}
+.field-of:focus {
+ background: ;
+ border-radius: 0 4px 4px 0;
+ border: 3px solid #83B3D3;
+ background: #E6E6E6;
}
.button {
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 700;
- line-height: 36px;
text-transform: uppercase;
width: 20px;
height: 20px;
flex-shrink: 0;
border-radius: 5px;
border: none;
+ display: block;
+}
+.button:focus {
+ border-radius: 5px;
+ border: 3px solid #83B3D3;
+}
+.button:active {
+ border-radius: 5px;
+ border: 2px solid #83B3D3;
}
.button-two {
width: 20px;
@@ -728,6 +876,14 @@ fieldset {
border-radius: 5px;
border: none;
}
+.button-two:focus {
+ border-radius: 5px;
+ border: 3px solid #83B3D3;
+}
+.button-two:active {
+ border-radius: 5px;
+ border: 2px solid #83B3D3;
+}
.button-price {
border-radius: 4px 0px 0px 4px;
background: #F2F2F2;
@@ -735,13 +891,25 @@ fieldset {
align-items: center;
margin: 25px 0 0 0;
height: 4px;
+ width: 226px;
+}
+.button-price-inactively {
+ background: #F2F2F2;
+ margin-left: 226px;
+ height: 4px;
+ width: 61px;
+ opacity: 0.3;
+ display: flex;
+ position: absolute;
+ top: 370px;
}
.button-filter {
display: flex;
- justify-content: flex-end;
+ justify-content: flex-start;
flex-direction: column;
align-items: flex-end;
margin-left: auto;
+ margin-top: 56px;
}
.button-dark {
color: #FFF;
@@ -767,6 +935,10 @@ fieldset {
background: #82B3D3;
color:rgba(255, 255, 255, 0.30);
}
+.button-dark:disabled {
+ background: #E5E5E5;
+ color: #FFF;
+}
.button-light {
color: #FFF;
text-align: center;
@@ -789,9 +961,13 @@ fieldset {
border: 3px solid #83B3D3;
}
.button-light:active {
- color:rgba(204, 66, 66, 0.3);
+ color: rgba(255, 255, 255, 0.30);
+ border: none;
+}
+.button-light:disabled {
+ opacity: 0.1;
}
-.sorting {
+select {
border-radius: 4px;
border: 2px solid #E5E5E5;
font-size: 18px;
@@ -805,13 +981,19 @@ fieldset {
justify-content: space-between;
align-items: center;
box-sizing: border-box;
+ appearance: none;
+ background: url("../images/catalog/sorting.svg") no-repeat right;
}
.sorting:hover {
border: 2px solid #68A2CA;
}
-.sorting:focus {
+.sorting:active {
border: 2px solid #68A2CA;
}
+.sorting:disabled {
+ border: 2px solid rgba(0, 0, 0, 0.30);
+ color: rgba(0, 0, 0, 0.30);
+}
.review {
display: flex;
justify-content: flex-end;
@@ -896,12 +1078,22 @@ fieldset {
margin: 0;
justify-content: flex-start;
}
+.option {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: 16px;
+ margin-top: auto;
+}
.catalog-card-link {
text-decoration: none;
display: flex;
flex-direction: column;
align-items: flex-start;
- gap: 16px;
+ gap: 14px;
+ padding-bottom: 2px;
}
.catalog-card-title {
color:#000;
@@ -959,6 +1151,10 @@ p {
background: #756157;
color: rgba(255, 255, 255, 0.30);
}
+.catalog-card-button-favorites:disabled {
+ background: #E5E5E5;
+ color: #FFF;
+}
.catalog-card-button-favorites {
color:#FFF;
text-align: center;
@@ -987,6 +1183,10 @@ p {
background: #82B3D3;
color: rgba(255, 255, 255, 0.30);
}
+.catalog-card-button-favorites:disabled {
+ background: #E5E5E5;
+ color: #FFF;
+}
.catalog-card-button-favorite {
color:#FFF;
text-align: center;
@@ -1015,6 +1215,10 @@ p {
background: #7DB54F;
color: rgba(255, 255, 255, 0.30);
}
+.catalog-card-button-favorites:disabled {
+ background: #E5E5E5;
+ color: #FFF;
+}
.catalog-card {
border-radius: 4px;
border: 1px solid #E6E6E6;
@@ -1174,6 +1378,20 @@ p {
padding: 12px 20px;
height: 52px;
}
+.field-email {
+ color: #000;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 24px;
+ display: flex;
+ min-width: 452px;
+ padding: 12px 20px;
+ border: none;
+ border-radius: 4px 0px 0px 4px;
+ background: #F2F2F2;
+ min-height: 52px;
+}
.visually-hidden {
position: absolute;
width: 1px;