<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalTitle" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<button type="button" class="close " data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="btn-dark float-right">×</span>
</button>
<div class="modal-body">
<div class="row">
<div class="col-lg-5 d-none d-md-none d-sm-none d-lg-block d-xl-block"><img src="https://www.tolmatol.com/uploads-images/img-1.jpg" class="img-fluid" alt=""></div>
<div class="col-lg-7">
<div class="modal-inner">
<h4>JOIN OUR MAILING LIST </h4>
<p><small>Sign Up for exclusive updates, new arrivals & insider-only discounts</small></p>
<form action="">
<input type="text" name="" id="" class="form-control">
<button class="btn btn-danger btn-block mt-2">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
button.close span {
opacity: 1;
width: 30px;
height: 30px;
display: block;
text-shadow: none;
}
button.close {
position: absolute;
right: 0;
opacity: 1;
border: none;
z-index: 9999; outline: none;
}
.modal-body {
padding: 0;
}
.modal-content {
border-radius: 0px;
border: none;
}
.modal-inner { text-align: center; padding: 65px 80px;}
.modal-inner .form-control, .modal-inner .btn { border-radius: 0px; }
.modal-inner .form-control { background: #f1f1f1; }
</style>