<div class="plug_subs">
<div class="plug_s_head">
<h3 class="plug_h"><span style="background:rgba(0, 0, 0, 0.30); padding:0.2em;text-transform:uppercase;">Subscribe To Our Newsletter</span></h3>
<p class="plug_p"><span style="background:rgba(0, 0, 0, 0.30); padding:0.2em;">Get Exclusive Updates Directly Into Your Inbox And We Never Spam</span></p>
</div>
<div class="plug_body">
<img class="plug_img1" src="https://res.cloudinary.com/pluginbloggers/image/upload/v1480017930/search-icon_mdauxn.png" />
</div>
<form class="plug_form">
<input type="email" class="plug_email" placeholder="Type Email here..."/>
<input type="submit" class="plug_submit"/>
</form>
</div>
.plug_subs{
width:100%;
max-width:400px;
margin:0 auto;
padding:0;
text-align:center;
font-family:sans-serif,sans, arial;
color:#fff;
background-color:#409DC0;
background-image:url(https://res.cloudinary.com/pluginbloggers/image/upload/v1480017916/circle-newsletter_uhvkwo.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
overflow:hidden;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
.plug_s_head{
margin:15px auto;
padding:0;
display:inline-block;
width:95%;
background:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.5));
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
.plug_h{
font-size:28px;
font-weight:700;
}
.plug_p{
font-size:18px;
font-variant:small-caps;
}
.plug_body{
width:98%;
height:240px;
overflow:hidden;
position:relative;
}
.plug_img1{
width:130px;
position:absolute; top:55px;
left:20px;
-webkit-animation: pluganim 5s linear 2s infinite alternate;
animation: pluganim 5s linear 2s infinite alternate;
}
@-webkit-keyframes pluganim {
0% {top:55px;
left:20px;}
25% {top:100px;
left:100px;-webkit-transform:rotate(20deg);}
50% {top:55px;
left:180px;-webkit-transform:rotate(60deg);}
75% {top:10px;
left:100px;-webkit-transform:rotate(20deg);}
100% {top:55px;
left:20px;-webkit-transform:rotate(0deg);}
}
@keyframes pluganim {
0% {top:55px;
left:20px;}
25% {top:100px;
left:100px;transform:rotate(20deg);}
50% {top:55px;
left:180px;transform:rotate(60deg);}
75% {top:10px;
left:100px;transform:rotate(20deg);}
100% {top:55px;
left:20px;transform:rotate(0deg);}
}
.plug_form{
width:100%;
margin:10px auto;
padding:0;
}
.plug_email{
width:90%;
padding:20px 15px;
border:0;
border-radius:4px;
background:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.5));
color:#001A45;
}
.plug_submit{
width:90%;
padding:13px 15px;
border:0;
border-radius:4px;
background:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.5));
color:#fff;
font-weight:700;
font-size:20px;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
.plug_submit:hover{
background-color:#005AFF;
color:inherit;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.