<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel mui-panel mui--z4 animated fadeInRight">
<div class="icon-wrapper">
<img class="mail" src="https://s15.postimg.cc/aqplevuwb/letter.png"/>
</div>
<h1>Subscribe</h1>
<p>Sign up for our weekly newsletter!</p>
<div class="InputAddOn">
<input type="email" placeholder="Enter your Email"/>
<button class="InputAddOn-item"><img src="https://s15.postimg.cc/3u00g7yaz/paper-plane.png"/> </button>
<div class="close shadow">
<img class="cross" src="https://s15.postimg.cc/dz39j9bbf/x-close-icon-white.png" />
</div>
</div>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
.wrapper {
background-color: #1e46c2;
height: 120vh;
}
.panel {
margin-top: 50px;
min-height: 400px;
background-color: #416efe;
margin-left: 30px;
margin-right: 30px;
padding: 40px 0 0 0;
position: relative;
border-radius: 5px;
}
.panel h1 {
text-align: center;
text-transform: uppercase;
color: white;
font-family: 'PT Sans', sans-serif;
letter-spacing: 3px;
font-size: 40px;
}
.panel p {
text-align: center;
color: white;
font-size: 18px;
font-family: 'PT Sans', sans-serif;
}
.panel input {
width: 100%;
bottom: 30px;
line-height: 70px;
background-color: #3a62e6;
border: none;
position: absolute;
bottom: 0px;
padding: 5px 50px 5px 50px;
font-size: 22px;
outline: none;
color: white;
text-align: center;
opacity: 0.5;
border-radius: 0 0 0 5px;
}
.icon-wrapper {
text-align: center;
margin-top: 20px;
width: 130px;
background-color: #3c64e8;
border-radius: 50%;
height: 130px;
margin: 0 auto;
}
.mail {
width: 80px;
height: 80px;
margin-top: 20px;
}
::placeholder {
color: white;
opacity: 0.5;
font-size: 22px;
text-align: center;
text-transform: uppercase;
}
:-ms-input-placeholder {
color: white;
}
::-ms-input-placeholder {
color: white;
}
.InputAddOn {
display: flex;
width: 100px;
}
.InputAddOn-field {
flex: 1;
/* field styles */
width: 100px;
}
.InputAddOn-item {
/* item styles */
position: absolute;
bottom: -1px;
right: -1px;
width: 90px;
height: 80px;
background-color: #3658c9;
border: none;
outline: none;
border-radius: 0px 0px 5px 0;
}
.close {
position: absolute;
top: -25px;
right: -24px;
width: 50px;
height: 50px;
background-color: #e8c15a;
color: white;
border-radius: 50%;
opacity: 1.0;
transition: 0.3s;
}
.close:hover {
background-color: #eab629f7;
opacity: 1.0;
}
.cross {
margin-left:9px;
margin-top: 9px;
width: 32px;
height: 32px;
}
.shadow {
box-shadow: 0 -3px 54px rgba(0,0,0,.05), 0 5px 34px rgba(0,0,0,.22);
}