"skype-call-popup"
Bootstrap 4.1.1 Snippet by Guley

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Skype Call Popup</title> </head> <body> <div class="callwrapper"> <div class="main_cont"> <div class="left_side"> <div class="image_col"> <img src="https://www.flaticon.com/premium-icon/icons/svg/2589/2589026.svg"> </div> <div class="name_col"> <h2>Ramu Kaka</h2> <h5>Incomimg Call</h5> </div> </div> <div class="right_side"> <button class="video_call"> <img src="https://image.flaticon.com/icons/svg/884/884451.svg" alt=""> </button> <button class="audio_call"><img src="https://image.flaticon.com/icons/svg/830/830688.svg" alt=""></button> <button class="cancel_call"><img src="https://image.flaticon.com/icons/svg/830/830606.svg" alt=""></button> </div> </div> <div class="footer_cont"> Accept with video using CTRL+Alt+Page Up </div> </div> </body> </html>
*{ padding: 0; margin: 0; } .callwrapper{ width: 450px; margin: 0 auto; font-family: Arial, } h1,h2,h3,h4,h5{ margin: 0; } .main_cont { background-color: #00aff0; border: 1px #0094cc solid; border-radius: 3px 3px 0 0; padding: 25px; float: left; width: 100%; } .left_side{ float: left; } .left_side div{ display: inline-block; color: #fff; font: 13px/18px Arial; } .left_side .image_col{ } .left_side .image_col img{ border-radius: 50%; width: 40px; height: 40px; } .left_side .name_col{ margin-left: 10px; } .left_side .name_col h2{ font-size: 15px; } .right_side{ float: right; } .right_side button{ width: 40px; height: 40px; border-radius: 50%; border: 0; margin-left: 10px; } .right_side button.video_call,.right_side button.audio_call{ background-color: #007fae; } .right_side button.audio_call:hover,.right_side button.video_call:hover{ background-color: #0076a2; } .right_side button.cancel_call{ background-color: #e81123; } .footer_cont { background-color: #0094cc; display: inline-block; width: 100%; padding: 25px; border-radius: 0 0 3px 3px; border: 1px #0094cc solid; color: #fff; font: 13px/18px Arial; }
function position() { $( ".callwrapper" ).position({ of: $( ".callwrapper" ), my: $( ".callwrapper" ).val() + " " + $( ".callwrapper" ).val(), at: $( ".callwrapper" ).val() + " " + $( ".callwrapper" ).val(), collision: $( ".callwrapper" ).val() + " " + $( ".callwrapper" ).val() }); } $( "#calldialog" ).draggable({ drag: position }); position();

Related: See More

BLK• Design System
animated sinin and signup panel. animated login and registeration page, popup,
Callouts - Call to Action
Call to action with dark background

Questions / Comments: