<!-- Button trigger modal -->
<div class="container d-flex justify-content-center">
<div class="row">
<div class="col-md-12"><button type="button" class="btn btn-lg btn-success" data-toggle="modal" data-target="#exampleModal"> CONTACT US
</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade mt-3" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content pl-2">
<div class="modal-header py-0"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div>
<div class="container d-flex justify-content-center">
<div class="row">
<div class="col-md-6">
<h2 class="title pl-3 pt-0 pb-3">Contact us</h2>
<div class="form-group col-md-12"> <input type="text" class="form-control" placeholder="Name"> </div>
<div class="form-group col-md-12"> <input type="email" class="form-control" placeholder="E-mail"> </div>
<div class="form-group col-md-12"> <input type="text" class="form-control" placeholder="Message"> </div>
<div class="form-group col-md-12"> <button class="btn btn-dark btn-block">Send</button> </div>
</div>
<div class="col-md-6"> <img src="https://i.imgur.com/hTnBa7t.png" width="100%" height="100%"> </div>
</div>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
body {
background-color: #eee;
font-family: 'Merriweather', serif
}
.btn-lg {
margin-top: 200px
}
button.close {
padding: 10px
}
.close span {
font-weight: 100;
font-size: 30px
}
img {
padding-bottom: 20px
}
.modal-header {
border: none;
outline: 0
}
.btn-dark {
border-radius: 6px;
background: #000 !important
}
.btn-dark:focus {
box-shadow: none
}
.close:focus {
outline: none !important
}
.modal-content {
border: none;
border-radius: 7px
}
.form-group {
margin-bottom: 50px
}
.form-control {
border: none;
border-radius: 0;
border-bottom: 1.5px solid #dae0e5;
padding-left: 0px
}
.form-control::placeholder {
opacity: 0.5;
letter-spacing: 1px;
font-size: 90%
}
.form-control:focus {
color: #000 !important;
border-color: #fff;
border-bottom: 1.5px solid #000;
box-shadow: none;
opacity: 1;
letter-spacing: 1px
}
input:focus::-webkit-input-placeholder {
color: #000 !important;
opacity: 2;
font-size: 90%
}