From c082f320f6e52d5c36afe306920e386bbf91dbb5 Mon Sep 17 00:00:00 2001 From: Kirill Pet Date: Wed, 18 Dec 2024 19:49:11 +0300 Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20free=20?= =?UTF-8?q?=D0=B8=20text-form=20=D0=B4=D0=BB=D1=8F=20=D0=BF=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/gp-style-core.css | 95 +++++++++++++++++++++++++++- assets/css/gp-style-desktop.css | 42 ++++++++++++ assets/img/icon/paper-clip.svg | 3 + assets/img/icon/red-arrow.svg | 3 + index.html | 109 ++++++++++++++++++++++++++++++-- 5 files changed, 247 insertions(+), 5 deletions(-) create mode 100644 assets/img/icon/paper-clip.svg create mode 100644 assets/img/icon/red-arrow.svg 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 @@
-
- - - error +
+
+ + + Имя введено не верно +
+
+
+
+ + + Телефон введен не верно +
+ +
+ + + E-mail введен не верно +
+
+ +
+ + +
+ + +
+
+ @@ -555,6 +593,69 @@
+
+
+
+

+ КАкой-то заголовок +

+

+ С учётом сложившейся международной обстановки, дальнейшее развитие различных форм деятельности прекрасно подходит для реализации системы обучения кадров, соответствующей насущным потребностям. Сложно сказать, почему представители современных социальных резервов формируют глобальную экономическую сеть и при этом — преданы социально-демократической анафеме. И нет сомнений, что независимые государства являются только методом политического участия и объединены в целые кластеры себе подобных.

+ В рамках спецификации современных стандартов, тщательные исследования конкурентов могут быть объединены в целые кластеры себе подобных. Разнообразный и богатый опыт говорит нам, что выбранный нами инновационный путь играет важную роль в формировании стандартных подходов.

+ Читать подробнее +

+
+ +
+

Получи проект бесплатно

+ +
+
+
+ + + Имя введино не верно +
+
+
+
+ + + Телефон введен не верно +
+
+
+
+ + + E-mail введен не верно +
+
+
+ + +
+
+ +
+ +
+
+
+ +
+