<div class="container d-flex justify-content-center">
<button class="btn btn-primary" id="modal" data-toggle="modal" data-target="#my-modal">Contact Details</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">
<div class="card border-0">
<div class="card-header p-3">
<div class="row align-items-center">
<div class="col-auto">
<h6 class="mb-0"><b>Contact Sales</b></h6>
</div>
<div class="col text-right"><button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span class="cross" aria-hidden="true">×</span> </button></div>
</div>
</div>
<div class="card-body">
<h6 class="card-title text-center"><b>Contact a Sales Representative</b></h6>
<div class="row my-3">
<div class="col">
<div class="form-group mt-1 mb-1"> <input type="text" id="email" class="form-control pl-3 " required> <label class="ml-3 form-control-placeholder" for="email">Full Name</label> </div>
</div>
</div>
<div class="row my-3">
<div class="col">
<div class="form-group mt-1 mb-1"> <input type="text" id="email" class="form-control pl-3 " required> <label class="ml-3 form-control-placeholder" for="email">Company Name</label> </div>
</div>
</div>
<div class="row my-3">
<div class="col">
<div class="form-group mt-1 mb-1"> <input type="text" id="email" class="form-control pl-3 " required> <label class="ml-3 form-control-placeholder" for="email">Working Email</label> </div>
</div>
</div>
<div class="row my-3">
<div class="col">
<div class="form-group mt-1 mb-1"> <input type="text" id="email" class="form-control pl-3 " required> <label class="ml-3 form-control-placeholder" for="email">Phone</label> </div>
</div>
</div>
<div class="row mt-4 mb-3">
<div class="col"><button type="button" id="Submit" class="btn btn-primary btn-block" data-dismiss="modal"><b>Submit</b></button></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: 81.4vh;
background: linear-gradient(0deg, #fff, 50%, rgb(210, 231, 252));
font-family: 'Rubik', sans-serif;
background-repeat: no-repeat;
overflow: hidden
}
.container {
position: relative;
top: 250px !important
}
h6 {
font-size: calc(14px + (17 - 14) * ((100vw - 360px) / (1600 - 320))) !important;
}
.modal-content {
border-radius: 0;
width: calc(360px + 10 * ((100vw - 320px) / 680));
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.8)
}
.modal {
background-image: radial-gradient(circle 919px at 1.7% 6.1%, rgb(198, 198, 207) 0%, rgb(133, 208, 240) 100.2%)
}
.modal-content {
background: transparent !important
}
label {
font-size: calc(11px + (13 - 11) * ((100vw - 360px) / (1600 - 320))) !important;
;
vertical-align: middle !important
}
#my-input {
vertical-align: middle !important
}
.signin {
color: #52B4DB;
cursor: pointer
}
.custom-control-label span {
position: relative;
top: 4px
}
#Submit {
font-size: calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 320))) !important;
;
padding: calc(10px + (14 - 10) * ((100vw - 360px) / (1600 - 320))) !important;
;
background-color: #04A79C !important;
border: 0px !important
}
button:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
outline-width: 0
}
.form-group {
margin-bottom: 1.5rem
}
#email {
padding: 23px 7px 18px 7px;
font-size: 15px !important
}
.form-control-placeholder {
position: absolute;
top: 17px;
transition: all 300ms;
opacity: 0.5;
overflow: hidden
}
.form-control:focus+.form-control-placeholder,
.form-control:valid+.form-control-placeholder {
position: absolute;
top: 9px !important;
opacity: 1;
background-color: #fff;
color: #04A79C !important;
font-size: 8px !important
}
.form-control:focus {
border: 1px solid #04A79C !important;
box-shadow: 2px 2px rgba(233, 226, 226, 0.8) !important
}
#modal {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8) !important;
border-radius: 0 !important;
border: 0
}