<div class="">
<div class="container">
<div class="row justify justify-content-center">
<div class="col-12 col-lg-9 col-xl-8">
<form class="">
<div class="card">
<div class="row justify-content-center">
<div class="col-md-9 col-11">
<div class="row mt-0">
<div class="col-md-12 ">
<p class="text-center sub-heading1">enter your email and get</p>
</div>
</div>
<div class="row mt-0">
<div class="col-md-12 ">
<h4 class="text-center heading">10% off</h4>
</div>
</div>
<div class="row mt-0">
<div class="col-md-12 ">
<p class="text-center sub-heading2">with order of $ 25 of more</p>
</div>
</div>
<div class="form-group row mb-3">
<div class="col-8 mb-0 px-0 pr-2"> <input id="e-mail" type="text" placeholder="Enter your email here" name="email" class="form-control input-box rm-border text-left"> </div>
<div class="col-4 px-0"> <input type="submit" value="GET IT NOW!" class="btn btn-block btn-green rm-border"> </div>
</div>
<div class="form-group row justify-content-center mb-0">
<div class="col-md-12 px-3 mt-2"> <a href="#">
<p class="thanks">no thanks</p>
</a> </div>
</div>
<div class="form-group row justify-content-center mb-0">
<div class="col-md-12 px-3">
<p class="conditions">First time registerants only. "$10 off on $25+ orders, and entering your email also makes you eligible to receive future promotional emails.</p>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
body {
color: #000000;
background-color: #E0F2F1
}
.thanks,
.heading,
.sub-heading1,
.btn-green {
text-transform: uppercase
}
.box {
margin: auto
}
.heading {
font-weight: bold;
font-size: 85px;
color: #ffffff
}
.sub-heading1 {
padding: 8px 0 8px 0;
margin-bottom: 2px;
color: #64FFDA
}
.sub-heading2 {
padding: 0px 0 8px 0;
margin-bottom: 30px;
color: #9E9E9E
}
.card {
padding: 8%;
padding-bottom: 30px;
padding-top: 35px;
margin-top: 60px;
margin-bottom: 80px;
background-color: #263238;
border-radius: 0
}
#e-mail {
height: 45px
}
input.input-box,
textarea.input-box {
background-color: #ffffff;
border: #000000;
color: #212121;
font-size: 15px;
padding: 15px auto 15px auto !important;
height: 50px !important
}
input.input-box:focus,
textarea.input-box:focus {
border: 1px solid #64FFDA;
color: #212121;
box-shadow: 0 0 1px 1px #64FFDA
}
.rm-border:focus {
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none
}
form .form-control::-webkit-input-placeholder {
color: #9E9E9E
}
::-moz-placeholder {
color: #9E9E9E !important
}
input.btn-green {
background-color: #64FFDA;
padding-left: 0px;
padding-right: 0px;
color: #000000;
font-weight: bold;
height: 50px
}
.thanks {
color: #0091EA !important;
text-align: center
}
.thanks:hover {
color: #01579B !important;
text-decoration: underline
}
.conditions {
font-size: 12px;
color: #546E7A;
text-align: center
}