<div class="container d-flex justify-content-center"> <button class="btn btn-icon bg-info text-light" data-toggle="modal" data-target="#my-modal">Sign Up</button>
<div id="my-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered justify-content-center " role="document">
<div class="modal-content border-0 mx-3">
<div class="modal-body p-0">
<div class="row justify-content-center">
<div class="col-auto">
<div class="card">
<div class="card-header bg-white pb-0 border-0">
<div class="row">
<div class="col text-right"><img class="img-fluid m-3 cross" src="https://retohercules.com/images/white-close-icon-png-3.png" data-dismiss="modal" alt="Image result for close png" width="17" height="17"></div>
</div>
</div>
<div class="card-body pt-0">
<div class="row justify-content-center text-center">
<div class="col">
<p class="mb-2"><b>Sign up</b></p><small class="px-sm-5 px-2">Create an account to unlock all the benefisto easily save, like or submit your favorite content.</small>
</div>
</div>
<div class="row justify-content-center">
<div class="col-sm-9 mt-5"><button type="button" class="btn btn-icon btn-block text-left "><span><img src="https://img.icons8.com/color/48/000000/google-logo.png" class="img-fluid mr-1" width="25"></span> Sign up with Google</button></div>
<div class="col-sm-9 mt-2"><button type="button" class="btn btn-icon btn-block text-left "><span><img src="https://i.imgur.com/URmkevm.png" class="img-fluid mr-1" width="25"></span> Sign up with Facebook</button> </div>
<div class="col-sm-9 mt-2"><button type="button" class="btn btn-icon btn-block text-left "><span><img src="https://img.icons8.com/color/48/000000/twitter.png" class="img-fluid mr-1" width="25"></span> Sign up with Twitter</button> </div>
</div>
<div class="row justify-content-center my-5">
<div class="col-10">
<div class="custom-control custom-checkbox"><input id="my-input" class="custom-control-input" type="checkbox" name="" value="true"><label for="my-input" class="custom-control-label"><span>I'm not interested in update about products and service. </span></label></div>
</div>
</div>
<div class="row mt-auto pt-auto text-center ">
<div class="col mt-auto pt-auto">
<p class="signin">Sign in</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Rubik&display=swap');
body {
min-height: 81vh;
background: linear-gradient(0deg, #fff, 50%, #DEEEFE);
font-family: 'Rubik', sans-serif
}
.container {
margin-top: 180px !important
}
p {
font-size: 14px !important
}
.card {
border-radius: 0px !important
}
.card-body {
border-radius: 9px !important
}
small {
font-size: 15px !important;
display: flex;
justify-content: center !important
}
button {
font-size: calc(12px + (13 - 12) * ((100vw - 360px) / (1600 - 320))) !important;
;
padding: calc(6px + 5 * ((100vw - 320px) / 780)) !important;
color: #000 !important
}
button:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
outline-width: 0
}
.btn-icon {
border: 1px solid #ccc;
background-color: transparent;
border-radius: 0;
letter-spacing: 1px
}
.btn-icon:hover {
background-color: #52B4DB;
color: #fff !important;
border: 1px solid #ccc
}
label {
font-size: 11px !important;
vertical-align: middle !important
}
#my-input {
vertical-align: middle !important
}
.custom-control {
padding: auto !important
}
.signin {
color: #52B4DB;
cursor: pointer
}
.custom-control-label span {
position: relative;
top: 4px
}
.modal-content {
width: calc(400px + 10 * ((100vw - 320px) / 680))
}
.cross {
cursor: pointer
}
.modal {
background-image: radial-gradient(circle 919px at 1.7% 6.1%, rgb(111, 151, 194) 0%, rgba(40, 171, 226, 1) 100.2%)
}
.modal-content {
background: transparent !important
}