<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.