diff --git a/assets/css/gp-style-core.css b/assets/css/gp-style-core.css index 218c358..7a1c936 100644 --- a/assets/css/gp-style-core.css +++ b/assets/css/gp-style-core.css @@ -100,6 +100,14 @@ body{ font-weight: 400; color: var(--text-white); } +.text-3{ + font-weight: 400; + color: var(--text-white); + text-transform: uppercase; +} +.text--bo-line{ + text-decoration: none; +} /* text */ /* components */ @@ -119,6 +127,8 @@ body{ background-color: var(--background-grey); transition: background-color .3s; + + cursor: pointer; } .btn-social:first-child{ margin-left: 0; @@ -137,7 +147,7 @@ body{ .btn-big{ display: block; - padding: 22px 32px; + padding: 22.5px 32px; font-weight: 400; font-size: 16px; @@ -210,6 +220,8 @@ body{ text-transform: uppercase; transition: all 0.3s; + + pointer-events: none; } .input__field{ height: 64px; @@ -267,6 +279,87 @@ body{ .form.checked .input__error{ display: block; } + +.form__item{ + margin-top: 16px; +} +.form__item:first-child{ + margin-top: 0; +} +.form__item--two{ + display: flex; + justify-content: space-between; +} +.form__item--two .input__block{ + width: calc(50% - 8px); +} +.form__additional{ + margin-top: 32px; + + display: flex; + align-items: center; +} +.form__additional input[type="file"]{ + display: none; +} +.form-additional__text{ + margin-left: 16px; +} +.form input[type=submit]{ + margin-top: 32px; + + width: 100%; + + border: none; +} +.form__link{ + margin-left: 6px; + + font-size: 16px; + text-transform: uppercase; + text-decoration: underline; + text-decoration-skip-ink: none; + color: var(--link); +} +.form__file{ + display: flex; + align-items: center; +} +.form__mini-btn{ + background-color: var(--background-grey-hover); + border: none; + + transition: all .3s; +} +.form__mini-btn:hover{ + opacity: .8; +} +.form__checkbox{ + display: none; +} +.form__checkbox:checked + .form-checkbox__square{ + border-color: var(--blood); + + background-image: url(/assets/img/icon/red-arrow.svg); + background-repeat: no-repeat; + background-position: center; +} +.form.checked .form__checkbox:invalid + .form-checkbox__square{ + border-color: var(--blood); +} +.form__checkbox-block{ + display: flex; + align-items: center; +} +.form-checkbox__square{ + width: 18px; + aspect-ratio: 1; + + border-radius: 4px; + border: 1.50px solid var(--text-white); + + cursor: pointer; +} /* components */ /* header */ diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 0914d06..5506c7a 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -23,6 +23,9 @@ .text-2{ font-size: 18px; } +.text-3{ + font-size: 16px; +} /* text */ /* header */ @@ -563,6 +566,45 @@ } /* free */ +/* text and form */ +.text-form{ + display: flex; + + +} +.text-form__content{ + width: 100%; +} +.text-form__form{ + margin-left: 40px; + + width: 453px; + + padding: 32px; + + background-color: var(--background-grey); + + flex-shrink: 0; +} +.text-form__form .title-3{ + margin-bottom: 32px; + + text-align: center; +} +.text-form__form .form__additional, +.text-form__form input[type=submit]{ + margin-top: 24px; +} +.text-form__form .form-additional__text a{ + margin-left: 0; +} +.text-form__agreement--text-form{ + height: 44px; + + align-items: start; +} +/* text and form */ + /* services */ .services{ margin: 34px -20px -20px -20px; diff --git a/assets/img/icon/paper-clip.svg b/assets/img/icon/paper-clip.svg new file mode 100644 index 0000000..f2a3a40 --- /dev/null +++ b/assets/img/icon/paper-clip.svg @@ -0,0 +1,3 @@ + diff --git a/assets/img/icon/red-arrow.svg b/assets/img/icon/red-arrow.svg new file mode 100644 index 0000000..5037503 --- /dev/null +++ b/assets/img/icon/red-arrow.svg @@ -0,0 +1,3 @@ + diff --git a/index.html b/index.html index b5e2851..d510710 100644 --- a/index.html +++ b/index.html @@ -543,11 +543,49 @@