<main class="form" >
<div class="form00">
<h1 class="form__heading">Как выглядит форма?</h1>
<p class="form__description">Желающие получить услугу подбора или каталог недвижимости заполняют форму заявки. Все данные передаются вам на E-mail или в CRM-систему автоматически.</p>
<div class="form-radio">
<div class="form-radio-block">
<h1 class="form-radio-block__heading">Какой тип недвижимости вас интересует?</h1>
<input type="radio" id="choosePropertyOne1" name="propertyOne" class="form-radio-block__radio00 radiobox">
<label for="choosePropertyOne1" class="form-radio-block__radiolabel00 radio">Вся</label>
<input type="radio" id="choosePropertyOne2" name="propertyOne" class="form-radio-block__radio01 radiobox ">
<label for="choosePropertyOne2" class="form-radio-block__radiolabel01 radio">Новая</label>
<input type="radio" id="choosePropertyOne3" name="propertyOne" class="form-radio-block__radio02 radiobox">
<label for="choosePropertyOne3" class="form-radio-block__radiolabel02 radio">Вторичная</label>
</div>
<div class="form-checkbox">
<div class="form-checkbox-block check00">
<input type="checkbox" id="chooseTypeProperty1" class="form-checkbox-block__checkbox00 checkbox " >
<label for="chooseTypeProperty1" class="form-checkbox-block__checkboxlabel00 checkboxtext">Квартира / Апартаменты</label>
</div>
<div class="form-checkbox-block">
<input type="checkbox" id="chooseTypeProperty2" class="form-checkbox-block__checkbox01 checkbox" >
<label for="chooseTypeProperty2" class="form-checkbox-block__checkboxlabel01 checkboxtext">Дом / Вилла</label>
</div>
<div class="form-checkbox-block">
<input type="checkbox" id="chooseTypeProperty3" class="form-checkbox-block__checkbox02 checkbox" >
<label for="chooseTypeProperty3" class="form-checkbox-block__checkboxlabel02 checkboxtext">Земельный участок</label>
</div>
<div class="form-checkbox-block">
<input type="checkbox" id="chooseTypeProperty4" class="form-checkbox-block__checkbox03 checkbox" >
<label for="chooseTypeProperty4" class="form-checkbox-block__checkboxlabel03 checkboxtext">Коммерческая</label>
</div>
</div>
</div>
</div>
<div class="form01">
<div class="form-radio">
<div class="form-radio-block">
<h1 class="form-radio-block__heading">Какой тип недвижимости вас интересует?</h1>
<input type="radio" id="choosePropertyTwo1" name="propertyTwo" class="form-radio-block__radio00 radiobox">
<label for="choosePropertyTwo1" class="form-radio-block__radiolabel00 radio">Вся</label>
<input type="radio" id="choosePropertyTwo2" name="propertyTwo" class="form-radio-block__radio01 radiobox ">
<label for="choosePropertyTwo2" class="form-radio-block__radiolabel01 radio">Новая</label>
<input type="radio" id="choosePropertyTwo3" name="propertyTwo" class="form-radio-block__radio02 radiobox">
<label for="choosePropertyTwo3" class="form-radio-block__radiolabel02 radio">Вторичная</label>
</div>
<div class="form-checkbox">
<div class="form-checkbox-block check00">
<input type="checkbox" id="chooseTypePropertyTwo1" class="form-checkbox-block__checkbox00 checkbox " >
<label for="chooseTypePropertyTwo1" class="form-checkbox-block__checkboxlabel00 checkboxtext">Квартира / Апартаменты</label>
</div>
<div class="form-checkbox-block">
<input type="checkbox" id="chooseTypePropertyTwo2" class="form-checkbox-block__checkbox01 checkbox" >
<label for="chooseTypePropertyTwo2" class="form-checkbox-block__checkboxlabel01 checkboxtext">Дом / Вилла</label>
</div>
<div class="form-checkbox-block">
<input type="checkbox" id="chooseTypePropertyTwo3" class="form-checkbox-block__checkbox02 checkbox" >
<label for="chooseTypePropertyTwo3" class="form-checkbox-block__checkboxlabel02 checkboxtext">Земельный участок</label>
</div>
<div class="form-checkbox-block">
<input type="checkbox" id="chooseTypePropertyTwo4" class="form-checkbox-block__checkbox03 checkbox" >
<label for="chooseTypePropertyTwo4" class="form-checkbox-block__checkboxlabel03 checkboxtext">Коммерческая</label>
</div>
</div>
</div>
</div>
</main>
</div>
@charset "UTF-8";
.form {
width: 1880px;
height: 1230px;
background: #353535;
border-radius: 5px;
}
.form__heading {
margin-left: 690px;
width: 480px;
height: 50px;
color: #ffffff;
line-height: 50px;
font-size: 42px;
position: relative;
top: 100px;
font-weight: 700;
}
.form__description {
width: 480px;
height: 120px;
color: #BCBCBC;
line-height: 30px;
font-size: 20px;
font-weight: 400;
color: #A5A5A5;
margin-left: 690px;
margin-top: 150px;
text-align: center;
}
.form-radio {
height: 530px;
width: 300px;
border: 1px solid #4f4f4f;
border-radius: 5px;
margin-left: 350px;
}
.form-radio-block label::before {
background: red;
}
.form-radio-block__heading {
letter-spacing: 0.05em;
color: #CEAC6A;
font-weight: 500;
font-size: 18px;
line-height: 150%;
width: 260px;
height: 54px;
margin-left: 25px;
}
.form-radio-block__radio00 {
margin-left: 20px;
}
.form-radio-block__radio00 .form-radio-block:checked {
background: red;
}
.form-radio-block__radio01 {
margin-left: 20px;
}
.form-radio-block__radio02 {
margin-left: 20px;
}
.radio {
position: relative;
bottom: 2px;
font-weight: 400;
font-size: 13px;
line-height: 28px;
color: #A5A5A5;
}
.check00 {
margin-top: 20.45px;
}
.form-checkbox-block {
border: 0.814605px solid rgba(165, 165, 165, 0.5);
border-radius: 1.62921px;
width: 260px;
height: 48px;
margin: 10px 20px;
}
.form-checkbox-block__checkbox00 {
display: none;
}
.form-checkbox-block__checkbox01 {
display: none;
}
.form-checkbox-block__checkbox02 {
display: none;
}
.form-checkbox-block__checkbox03 {
display: none;
}
.checkboxtext {
color: #A5A5A5;
line-height: 20px;
font-size: 13px;
font-weight: 400;
margin-left: 10px;
margin-top: 16.95px;
/* Сверху | Справа | Снизу | Слева */
}
.checkbox {
margin-left: 15px;
background: red;
color: red;
margin-top: 16.95px;
}
.form-radio-block input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 40.7302px;
width: 14px;
height: 14px;
border: 2px solid rgba(165, 165, 165, 0.5);
-webkit-transition: 0.2s all linear;
transition: 0.2s all linear;
outline: none;
}
.form-radio-block input:checked {
background-color: #CEAC6A;
-webkit-box-shadow: inset 0 0 0 2px #353535;
box-shadow: inset 0 0 0 2px #353535;
}
.checkbox + label:before {
content: "";
margin-right: 10px;
display: inline-block;
width: 14px;
margin-top: 16.95px;
height: 14px;
border: 1.62921px solid rgba(165, 165, 165, 0.5);
border-radius: 50%;
}
.checkbox:checked + label::before {
content: url(../image/check.png);
background: #CEAC6A;
}
.form01 {
position: absolute;
top:369px;
margin-left: 400px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.