<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css"> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="section_bg_gray"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="ptb-50"> <h2 class="text-center">Workshops</h2> </div> </div> </div> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="single_what_we_do"> <div class="top_line"></div> <div class="what_we_do_figure"> <i class="devicon-amazonwebservices-original colored xxxlarge"></i> </div> <h4 class="what_we_do_title">AWS</h4> <div class='single_what_we_do'>Date : 23-10-2018</div> <div class='single_what_we_do'>Price : 200/-</div> <div class='single_what_we_do'>Days : 2</div> <br> <button class="btn btn-primary btn-round">Know More</button> <br> </a> </div> </div> <div class="col-sm-6 col-md-4"> <div class="single_what_we_do"> <div class="top_line"></div> <div class="what_we_do_figure"> <i class="devicon-mongodb-plain colored xxxlarge"></i> </div> <h4 class="what_we_do_title">Mongo DB</h4> <div class='single_what_we_do'>Date : 23-10-2018</div> <div class='single_what_we_do'>Price : 200/-</div> <div class='single_what_we_do'>Days : 2</div> <br> <a class="what_we_do_icon" href="#"> <i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div> </div> <div class="col-sm-6 col-md-4"> <div class="single_what_we_do"> <div class="top_line"></div> <div class="what_we_do_figure"> <i class="devicon-android-plain colored xxxlarge"></i> </div> <h4 class="what_we_do_title">Android</h4> <div class='single_what_we_do'>Date : 23-10-2018</div> <div class='single_what_we_do'>Price : 200/-</div> <div class='single_what_we_do'>Days : 5</div> <br> <a class="what_we_do_icon" href="#"> <i class="fa fa-angle-right" aria-hidden="true"></i> <div class="modal animate" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body text-center p-lg"> <p>Are you sure to execute this action?</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </a> </div> </div> </div> </div> </div> </div>

.xxxlarge{font-size:88px!important} .modal.animate .a-flipX{-webkit-animation:flipOutX .5s;animation:flipOutX .5s} .modal.animate.show .a-flipX{-webkit-animation:flipInX .5s;animation:flipInX .5s} .modal.animate {opacity:0} .modal.animate.show {opacity:1} .modal.animate .modal-dialog{-webkit-transform:translate(0,0);-ms-transform: translate(0,0);transform:translate(0,0)} .ptb-50{ padding: 50px 50px; } .section_bg_gray { background-color: #f3f5f7; } .single_what_we_do { background-color: #ffffff; text-align: center; padding: 0 35px; border-radius: 10px; position: relative; margin-bottom: 3px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .single_what_we_do:hover { -webkit-box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2); } .single_what_we_do .top_line { position: absolute; top: 0; left: 44%; background-color: #8448ff; width: 12%; height: 3px; } .single_what_we_do .what_we_do_figure { padding: 40px 0; } .single_what_we_do .what_we_do_figure img { margin: 0 auto; } .single_what_we_do .what_we_do_title { font-weight: 600; font-size: 22px; padding-bottom: 3px; margin: 0; color: #2b353a; } .single_what_we_do .what_we_do_content { padding-bottom: 65px; color: #2b353a; } .single_what_we_do .what_we_do_icon { position: absolute; bottom: -9px; left: 47%; color: #fff; background-color: #8448ff; width: 30px; height: 30px; text-align: center; border-radius: 50%; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .single_what_we_do .what_we_do_icon i { font-size: 24px; text-align: center; padding: 2px 3px 2px 5px; }

$(function(){ $('[role=dialog]') .on('show.bs.modal', function(e) { $(this) .find('[role=document]') .removeClass() .addClass('modal-dialog ' + $(e.relatedTarget).data('ui-class')) }) })