Modal style : demo 86

HTML

(Images : Unsplash & CSS Framwork: Bootstrap)
                        

CSS

(Fonts required: Poppins)
                    .modal-box{ font-family: 'Poppins', sans-serif; }
                    .modal-box .show-modal{
                        color: #fff;
                        background-color: #222;
                        font-size: 17px;
                        font-weight: 500;
                        text-transform: capitalize;
                        padding: 10px 20px;
                        margin: 80px auto 0;
                        border: none;
                        border-radius: 0;
                        outline: none;
                        display: block;
                        transition: all 0.3s ease 0s;
                    }
                    .modal-box .show-modal:hover,
                    .modal-box .show-modal:focus{
                        color: #fff;
                        outline: none;
                    }
                    .modal-backdrop.in{ opacity: 0; }
                    .modal-box .modal-dialog{
                        width: 750px;
                        margin: 70px auto 0;
                    }
                    .modal.fade .modal-dialog{ transform: translateY(100px); }
                    .modal.in .modal-dialog{ transform: translateY(0); }
                    .modal-box .modal-dialog .modal-content{
                        color: #1B2541;
                        background: #fff;
                        border: none;
                        border-radius: 0;
                        box-shadow: 0 0 25px rgba(0,0,0,0.1);
                    }
                    .modal-box .modal-dialog .modal-content .close{
                        color: rgba(0,0,0, 0.9);
                        background-color: rgba(255,255,255,0.5);
                        font-size: 25px;
                        font-weight: 300;
                        text-shadow: none;
                        line-height: 32px;
                        height: 25px;
                        width: 25px;
                        padding: 0 0 0 2px;
                        border-radius: 50%;
                        opacity: 1;
                        overflow: hidden;
                        position: absolute;
                        left: auto;
                        right: 15px;
                        top: 15px;
                        z-index: 2;
                        transition: all 0.3s ease 0s;
                    }
                    .modal-box .modal-dialog .modal-content .close span{
                        margin: -2px 0 0;
                        display: block;
                    }
                    .modal-box .modal-dialog .modal-content .close:hover{ color: #222; }
                    .modal-box .modal-dialog .modal-content .close:focus{ outline: none; }
                    .modal-box .modal-dialog .modal-content .modal-body{
                        padding: 0 !important;
                        margin: 0;
                    }
                    .modal-box .modal-dialog .modal-content .modal-body .content{ padding: 50px 30px; }
                    .modal-box .modal-dialog .modal-content .modal-body .title{
                        color: #222;
                        font-size: 40px;
                        font-weight: 500;
                        margin: 0 0 15px;
                    }
                    .modal-box .modal-dialog .modal-content .modal-body .description{
                        color: #999;
                        font-size: 15px;
                        font-weight: 500;
                        margin: 0 0 25px;
                    }
                    .modal-box .modal-dialog .modal-content .modal-body .form-group{
                        font-size: 0;
                        margin: 0 0 40px;
                    }
                    .modal-box .modal-dialog .modal-content .modal-body .form-group .form-control{
                        color: #222;
                        width: calc(100% - 96px);
                        height: 40px;
                        padding: 10px 15px;
                        border-radius: 0;
                        border: 3px solid #222;
                        display: inline-block;
                    }
                    .modal-box .modal-dialog .modal-content .modal-body .form-group .btn{
                        color: #fff;
                        background-color: #222;
                        font-weight: 600;
                        padding: 10px 15px;
                        border-radius: 0;
                        border: none;
                        vertical-align: top;
                        display: inline-block;
                    }
                    .modal-box .modal-dialog .modal-content .modal-body .image{ padding: 0; }
                    .modal-box .modal-dialog .modal-content .modal-body .modal-image{
                        height: 100%;
                        width: 100%;
                    }
                    .modal-box .modal-dialog .modal-content .modal-body .terms-desc{
                        color: #999;
                        font-size: 13px;
                    }
                    @media only screen and (max-width: 767px){
                        .modal-dialog{ width: 95% !important; }
                        .modal-box .modal-dialog .modal-content .modal-body .content{ padding: 30px; }
                        .modal-box .modal-dialog .modal-content .modal-body .title{ font-size: 30px; }
                        .modal-box .modal-dialog .modal-content .modal-body .image{
                            height: 200px;
                            overflow: hidden;
                        }
                        .modal-box .modal-dialog .modal-content .modal-body .modal-image{ height: auto; }
                    }
                    

JavaScript

(Modal depend on jQuery and Bootstrap.)
                        
                        
                    
License Terms