<div class="">
<div class="container-fluid mt-5">
<div class="row justify-content-center">
<div class="col-lg-9 px-0">
<div class="container-fluid rounded-0 border-0 mt-4">
<div class="row">
<div class="col-md-4 bg-black">
<div class="card rounded-0 border-0 card1">
<div class="row justify-content-center">
<div class="col-md-12 col-10">
<h2 id="summer">summer</h2>
</div>
<div class="col-md-12 col-10">
<h2 id="sale">sale</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 col-10">
<h2 id="saveupto">save up to</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-11">
<div class="row justify-content-left">
<div class="col-md-6 col-6 text-right">
<h2 id="thirty" class="">30</h2>
</div>
<div class="col-1 px-0"></div>
<div class="col-4 text-left">
<div class="row d-flex">
<p id="percent">%</p>
</div>
<div class="row d-flex">
<p id="off">OFF</p>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<p id="instore">in stores & online</p>
</div>
</div>
</div>
<div class="col-md-8 bg-white">
<form class="">
<div class="card rounded-0 border-0 card2">
<div class="row justify-content-center">
<div class="col-11">
<h4 class="subhead1 text-center">enter your email below to unlock</h4>
</div>
</div>
<div class="row justify-content-center">
<div class="col-11">
<h3 class="subhead2 text-center">where should we send your 30% off?</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-10 col-11">
<div class="form-group row">
<div class="col-md-12"> <input id="email" type="email" placeholder="Email your email here" class="form-control input-box rm-border"> </div>
</div>
<div class="form-group row">
<div class="col-md-12"> <input type="submit" value="GET MY $10 OFF" class="btn btn-red rm-border btn-block"> </div>
</div>
<div class="form-group row justify-content-center mb-0">
<div class="col-md-12 px-3 mt-4"> <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-10 px-3">
<p class="conditions">First time registereants 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>
</div>
</div>
</div>
body {
color: #000000;
background-color: #CFD8DC
}
.card1 {
text-transform: uppercase;
text-align: center;
color: #ffffff;
background-color: #000000
}
.card2 {
margin-bottom: 20px;
padding-bottom: 40px
}
.bg-black {
background-color: #000000
}
#summer {
font-weight: normal;
font-size: 50px;
padding-top: 50px;
margin-bottom: 0;
transform: scale(1, 1.3);
color: #FF5252;
opacity: 0.8
}
#sale {
font-weight: normal;
font-size: 70px;
transform: scale(1.2, 1.2);
letter-spacing: 8px;
padding-left: 4px;
color: #FF5252;
opacity: 0.8
}
#saveupto {
color: #00BFA5;
letter-spacing: 10px;
transform: scale(1, 1);
font-size: 20px;
margin-top: 40px;
padding-left: 6px
}
#thirty {
font-size: 70px;
transform: scale(1.2, 1.5)
}
#percent {
font-weight: normal;
font-size: 34px;
margin-bottom: 0;
padding-left: 10px;
transform: scale(1.8, 1.6)
}
#off {
font-size: 35px;
transform: scale(1.2, 1);
padding-left: 0px
}
@media (max-width: 768px) {
#percent {
padding-left: 5px
}
#off {
padding-left: 0px;
transform: scale(1.1, 1);
font-size: 30px
}
}
#instore {
border-top: 1px solid grey;
border-bottom: 1px solid grey;
padding-bottom: 4px;
padding-top: 4px;
color: grey;
margin-bottom: 80px;
padding-left: 20px;
padding-right: 20px
}
.bg-white {
background-color: #ffffff
}
.subhead1 {
text-transform: uppercase;
font-size: 18px;
padding-top: 70px
}
.subhead2 {
color: #00BFA5;
font-weight: normal;
font-size: 25px;
padding-top: 30px;
padding-bottom: 30px
}
input.input-box,
textarea.input-box {
background-color: #CFD8DC;
color: #212121;
font-size: 15px;
padding: 15px auto 15px auto !important;
height: 55px !important;
text-align: center
}
input.input-box:focus,
textarea.input-box:focus {
color: #212121;
background-color: #ECEFF1;
box-shadow: 0 0 1px 1px ##CFD8DC
}
.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-red {
background-color: #D50000;
padding-left: 0px;
padding-right: 0px;
color: #ffffff;
font-weight: bold;
height: 55px;
opacity: 0.8
}
input.btn-red:hover {
opacity: 1
}
.thanks {
color: #000000 !important;
text-align: center;
text-transform: uppercase;
padding-bottom: 10px
}
.thanks:hover {
color: #000000 !important;
text-decoration: underline;
padding-bottom: 10px
}
.conditions {
font-size: 12px;
color: #546E7A;
text-align: center
}