bootstrap login form style : demo 52

Registration Info

HTML

(Icon Fonts Used : Fontawesome & CSS Framwork: Bootstrap)
                        

Registration Info

CSS

(Fonts required: Nunito.)
                    .form-container{
                        font-family: 'Nunito', sans-serif;
                        font-size: 0;
                        border-radius: 20px;
                        overflow: hidden;
                    }
                    .form-container .form-img{
                        background-image: url('https://source.unsplash.com/600x600/?clothes');
                        background-repeat: no-repeat;
                        background-position: center center;
                        width: 50%;
                        height: 554px;
                        vertical-align: top;
                        display: inline-block;
                    }
                    .form-container .form-horizontal{
                        background: #000;
                        width: 50%;
                        padding: 33px 35px 32.5px;
                        display: inline-block;
                    }
                    .form-container .title{
                        color:#fff;
                        font-size: 25px;
                        font-weight: 400;
                        margin: 0 0 35px;
                    }
                    .form-container .form-horizontal .form-group{ margin: 0 0 10px; }
                    .form-container .form-horizontal .form-control{
                        color: #ccc;
                        background: transparent;
                        padding: 5px 0;
                        margin-bottom: 33px;
                        border: none;
                        border-bottom: 1px solid rgba(255,255,255,.2);
                        border-radius: 0;
                    }
                    .form-container .form-horizontal .form-control:focus{
                        outline: none;
                        box-shadow: none;
                    }
                    .form-container .form-horizontal .form-control::placeholder{
                        color: #ccc;
                        font-size: 16px;
                        font-weight: 400;
                    }
                    .form-container .form-horizontal .form-group select.form-control option{
                        color: #000;
                        background: #fff;
                    }
                    .form-container .form-horizontal .btn{
                        color:#fff;
                        background:#4dae3c;
                        font-size: 18px;
                        letter-spacing: 1px;
                        border-radius: 50px;
                        padding: 8px 25px;
                        border: none;
                        transition: all .4s ease;
                    }
                    .form-container .form-horizontal .btn:hover{ text-shadow: 2px 2px 2px rgba(0,0,0,.6); }
                    .form-container .form-horizontal .btn:focus{ outline: none; }
                    @media only screen and (max-width:576px){
                        .form-container .form-img{
                            width: 100%;
                            height: 400px;
                        }
                        .form-container .form-horizontal{ width: 100%; }
                    }
                    
License Terms