Форма для сайта на Bootstrap — стиль 6

Подробное описание и демонстрация работы блока «Формы» для сайта под номером №3 для библиотеки Bootstrap. Html и CSS код для реализации блока forms на сайте как на изображении.

.form-bg{
    background: linear-gradient(to right,#e16b47,#3d3537);
    font-family: 'Roboto', sans-serif;
    color: #fff;
}
.form-horizontal .form-group{
    margin-bottom: 30px;
}
.form-horizontal hr{
    border: 1px solid rgba(255,255,255,0.3);
    margin: 20px 0;
}
.form-horizontal .control-label{
    text-align: left;
}
.form-horizontal .form-control{
    padding: 5px 15px;
    background: #fff;
    border: 1px solid #00c7c7;
}
.form-horizontal .form-control:focus{
    box-shadow:0 1px 10px #00c7c7;
}
.form-horizontal .btn-default{
    background: #00c7c7;
    border-color: transparent;
    color: #fff;
    margin-left: -45px;
    border-radius: 0 4px 4px 0;
}
.form-horizontal .btn-default:hover{
    background :#000;
    border-color: transparent;
    color: #fff;
}
.form-horizontal .checkbox-custom{
    opacity: 0;
    position: absolute;
}
.form-horizontal .checkbox-custom,
.form-horizontal .checkbox-custom-label{
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}
.form-horizontal .checkbox-custom-label{
    position: relative;
}
.checkbox-custom + .checkbox-custom-label:before{
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height:30px;
    border-radius: 50%;
    text-align: center;
    background: #fff;
    vertical-align: middle;
    margin-right: 10px;
}
.checkbox-custom:checked + .checkbox-custom-label:before{
    content: "\f00c";
    font-family: "Font Awesome 5 Free"; font-weight: 900;
    background: #00c7c7;
    color: #fff;
    text-align: center;
    vertical-align: middle;
}
@media only screen and (max-width: 767px){
    .form-horizontal .btn-default{
        margin-left: -33px;
    }
}

<div class="form-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-2 col-md-8">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label" for="exampleInputName2">YOUR NAME</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="exampleInputName2" placeholder="Williamson">
                        </div>
                    </div>
                    <hr>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-3 control-label">YOUR EMAIL</label>
                        <div class="col-sm-9">
                            <input type="email" class="form-control" id="inputEmail3" placeholder="example@gmail.com">
                        </div>
                    </div>
                    <hr>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">SETUP PASSWORD</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" placeholder="Must be atleast 6 character">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">CONFIRM PASSWORD</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" placeholder="Retype your password">
                        </div>
                    </div>
                    <hr>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">TEAM GOALS</label>
                        <div class="col-sm-9">
                            <div class="row">
                                <div class="col-sm-6">
                                    <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
                                    <label for="checkbox-1" class="checkbox-custom-label">Add walking</label>
                                </div>
 
                                <div class="col-sm-6">
                                    <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
                                    <label for="checkbox-2" class="checkbox-custom-label">Become a healtier team</label>
                                </div>
 
                                <div class="col-sm-6">
                                    <input id="checkbox-3" class="checkbox-custom" name="checkbox-3" type="checkbox">
                                    <label for="checkbox-3" class="checkbox-custom-label">Reduce stress</label>
                                </div>
 
                                <div class="col-sm-6">
                                    <input id="checkbox-4" class="checkbox-custom" name="checkbox-4" type="checkbox">
                                    <label for="checkbox-4" class="checkbox-custom-label">Be awarded</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="form-group">
                        <label class="col-sm-3 control-label" for="exampleInputName2">INVITE TEAM MEMBER</label>
                        <div class="col-sm-8 col-xs-10">
                            <input type="text" class="form-control" placeholder="Williamson">
                        </div>
                        <div class="col-sm-1 col-xs-2">
                            <button type="submit" class="btn btn-default"><i class="fa fa-plus"></i> Add</button>
                        </div>
                    </div>
                    <hr>
                </form>
            </div>
        </div>
    </div>
</div>