Modal style : demo 97

HTML

(Icons : Fontawesome & CSS Framwork: Bootstrap)
                        

CSS

(Fonts required: Poppins)
                    .modal-box{ font-family: 'Poppins', sans-serif; }
                    .modal-box .show-modal{
                        color: #fff;
                        background-color: #ff6262;
                        font-size: 18px;
                        font-weight: 600;
                        text-transform: capitalize;
                        padding: 10px 15px;
                        margin: 80px auto 0;
                        border: none;
                        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
                        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: 350px;
                        margin: 70px auto 0;
                    }
                    .modal.fade .modal-dialog{
                        transform: scale(0);
                        transition: all 400ms cubic-bezier(.47,1.64,.41,.8);
                    }
                    .modal.in .modal-dialog{ transform: scale(1); }
                    .modal-box .modal-dialog .modal-content{
                        color: #818080;
                        background: linear-gradient(to top,#ff6262,#ff6262 75px,#fff 75px);
                        text-align: center;
                        border: none;
                        border-radius: 15px;
                        box-shadow: none;  
                    }   
                    .modal-box .modal-dialog .modal-content .modal-body{ padding: 60px 20px 25px!important; }
                    .modal-box .modal-dialog .modal-content .modal-body .modal-icon{
                        color: #ff6262;
                        font-size: 100px;
                        line-height: 100px;
                        margin: 0 0 25px;
                    }
                    .modal-box .modal-dialog .modal-content .modal-body .title{
                        color: #ff6262;
                        font-size: 33px;
                        font-weight: 600;
                        text-transform: capitalize;
                        margin: 0 0 15px;
                    }
                    .modal-box .modal-dialog .modal-content .modal-body .description{
                        font-size: 17px;
                        margin: 0 0 70px;
                    }
                    .modal-box .modal-dialog .modal-content .modal-body .btn{
                        color: #fff;
                        background: transparent;
                        font-size: 17px;
                        font-weight: 400;
                        padding: 0;
                        transition: all 0.3s ease 0s;
                    }
                    .modal-box .modal-dialog .modal-content .modal-body .btn:hover{
                        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
                    }
                    .modal-box .modal-dialog .modal-content .modal-body .btn:focus{ outline: none; }
                    @media only screen and (max-width: 767px){
                        .modal-dialog{ width: 90% !important; }
                    }
                    

JavaScript

(Modal depend on jQuery and Bootstrap.)
                        
                        
                    
License Terms