Good-Production
/
template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

сделал free и text-form для пк

Browse Source
fitness
Kirill Pet 8 months ago
parent d07d972c10
commit c082f320f6
5 changed files with 247 additions and 5 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 95
      assets/css/gp-style-core.css
  2. 42
      assets/css/gp-style-desktop.css
  3. 3
      assets/img/icon/paper-clip.svg
  4. 3
      assets/img/icon/red-arrow.svg
  5. 109
      index.html

95
assets/css/gp-style-core.css
Unescape View File

@ -100,6 +100,14 @@ body{
font-weight: 400; font-weight: 400;
color: var(--text-white); color: var(--text-white);
} }
.text-3{
font-weight: 400;
color: var(--text-white);
text-transform: uppercase;
}
.text--bo-line{
text-decoration: none;
}
/* text */ /* text */
/* components */ /* components */
@ -119,6 +127,8 @@ body{
background-color: var(--background-grey); background-color: var(--background-grey);
transition: background-color .3s; transition: background-color .3s;
cursor: pointer;
} }
.btn-social:first-child{ .btn-social:first-child{
margin-left: 0; margin-left: 0;
@ -137,7 +147,7 @@ body{
.btn-big{ .btn-big{
display: block; display: block;
padding: 22px 32px; padding: 22.5px 32px;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
@ -210,6 +220,8 @@ body{
text-transform: uppercase; text-transform: uppercase;
transition: all 0.3s; transition: all 0.3s;
pointer-events: none;
} }
.input__field{ .input__field{
height: 64px; height: 64px;
@ -267,6 +279,87 @@ body{
.form.checked .input__error{ .form.checked .input__error{
display: block; 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 */ /* components */
/* header */ /* header */

42
assets/css/gp-style-desktop.css
Unescape View File

@ -23,6 +23,9 @@
.text-2{ .text-2{
font-size: 18px; font-size: 18px;
} }
.text-3{
font-size: 16px;
}
/* text */ /* text */
/* header */ /* header */
@ -563,6 +566,45 @@
} }
/* free */ /* 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 */
.services{ .services{
margin: 34px -20px -20px -20px; margin: 34px -20px -20px -20px;

3
assets/img/icon/paper-clip.svg
Unescape View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.9998 8.11765L8.05874 14.0587C7.26274 14.8547 7.26274 16.1453 8.05874 16.9413C8.85476 17.7373 10.1454 17.7373 10.9414 16.9413L18.3078 9.57484C19.7947 8.08801 19.7945 5.67732 18.3073 4.19077C16.8206 2.70461 14.4107 2.70483 12.9242 4.19127L5.55775 11.5577C3.38049 13.735 3.38049 17.265 5.55775 19.4423C7.73502 21.6196 11.2651 21.6196 13.4424 19.4423L18.8846 14" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 534 B

3
assets/img/icon/red-arrow.svg
Unescape View File

@ -0,0 +1,3 @@
<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 3.5L3.75 6.25L9.25 0.749999" stroke="#AE0B05" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 227 B

109
index.html
Unescape View File

@ -543,18 +543,119 @@
<div class="free__content"> <div class="free__content">
<form class="form" method="post" action="/send-telegram.php"> <form class="form" method="post" action="/send-telegram.php">
<div class="input__block"> <div class="form__item">
<input class="input__field" type="text" name="Имя" minlength="2" placeholder="" required> <div class="input__block">
<label class="input__label">Имя</label> <input class="input__field" type="text" name="Имя" minlength="2" placeholder="" required>
<span class="input__error">error</span> <label class="input__label">Имя</label>
<span class="input__error">Имя введено не верно</span>
</div>
</div>
<div class="form__item form__item--two">
<div class="input__block">
<input class="input__field" type="phone" name="Имя" minlength="2" placeholder="" required>
<label class="input__label">Телефон</label>
<span class="input__error">Телефон введен не верно</span>
</div>
<div class="input__block">
<input class="input__field" type="email" name="Имя" minlength="2" placeholder="" required>
<label class="input__label">E-mail</label>
<span class="input__error">E-mail введен не верно</span>
</div>
</div>
<div class="form__additional">
<input type="file" id="free__file">
<label for="free__file" class="form__file">
<button href="#" class="btn-social form__mini-btn">
<img src="/assets/img/icon/paper-clip.svg" alt="">
</button>
<p class="form-additional__text text-3">Загрузить свой проект на просчет</p>
</label>
</div>
<div class="form__additional">
<label for="free__agreement" class="form__checkbox-block">
<input type="checkbox" id="free__agreement" class="form__checkbox" required>
<div class="form-checkbox__square"></div>
<p class="form-additional__text text-3">
Я принимаю
<a href="#" class="text--bo-line form__link">Политику конфиденциальности</a>
</p>
</label>
</div> </div>
<input class="btn-big btn-big--blood" type="submit" value="оставить заявку"> <input class="btn-big btn-big--blood" type="submit" value="оставить заявку">
</form> </form>
</div> </div>
</article> </article>
</div> </div>
<div class="main__item">
<div class="text-form">
<div class="text-form__content">
<p class="title-1">
КАкой-то заголовок
</p>
<p class="text-2">
С учётом сложившейся международной обстановки, дальнейшее развитие различных форм деятельности прекрасно подходит для реализации системы обучения кадров, соответствующей насущным потребностям. Сложно сказать, почему представители современных социальных резервов формируют глобальную экономическую сеть и при этом — преданы социально-демократической анафеме. И нет сомнений, что независимые государства являются только методом политического участия и объединены в целые кластеры себе подобных.<br><br>
В рамках спецификации современных стандартов, тщательные исследования конкурентов могут быть объединены в целые кластеры себе подобных. Разнообразный и богатый опыт говорит нам, что выбранный нами инновационный путь играет важную роль в формировании стандартных подходов. <br><br>
<a href="#" class="link">Читать подробнее</a>
</p>
</div>
<div class="text-form__form">
<p class="title-3">Получи проект бесплатно</p>
<form action="" class="form">
<div class="form__item">
<div class="input__block">
<input class="input__field" type="text" name="Имя" minlength="2" placeholder="" required="">
<label class="input__label">Имя</label>
<span class="input__error">Имя введино не верно</span>
</div>
</div>
<div class="form__item">
<div class="input__block">
<input class="input__field" type="phone" name="Имя" minlength="2" placeholder="" required="">
<label class="input__label">Телефон</label>
<span class="input__error">Телефон введен не верно</span>
</div>
</div>
<div class="form__item">
<div class="input__block">
<input class="input__field" type="email" name="Имя" minlength="2" placeholder="" required="">
<label class="input__label">E-mail</label>
<span class="input__error">E-mail введен не верно</span>
</div>
</div>
<div class="form__additional">
<input type="file" id="text-form__file">
<label for="text-form__file" class="form__file">
<div href="#" class="btn-social form__mini-btn">
<img src="/assets/img/icon/paper-clip.svg" alt="">
</div>
<p class="form-additional__text text-3">Загрузить свой проект на просчет</p>
</label>
</div>
<div class="form__additional">
<label for="text-form__agreement" class="form__checkbox-block text-form__agreement--text-form">
<input type="checkbox" id="text-form__agreement" class="form__checkbox" required="">
<div class="form-checkbox__square"></div>
<p class="form-additional__text text-3">
Я принимаю<br><a href="#" class="text--bo-line form__link">Политику конфиденциальности</a>
</p>
</label>
</div>
<input class="btn-big btn-big--blood" type="submit" value="оставить заявку">
</form>
</div>
</div>
</div>
<!-- <div class="main__item"> <!-- <div class="main__item">
<p class="title-1"> <p class="title-1">
Дополнительные услуги Дополнительные услуги

Write Preview
Loading…
Cancel
Save