Bootstrap Snippet Newsletter with Bootstrap using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<!-- Newsletter -->
  <div class="newsletter bottom"><!-- Can be aligned Top or Bottom -->
    <div class="newsletter-icon"><i class="fa fa-envelope-o"></i></div>
    <p class="newsletter-title">Subscribe to our email newsletter</p>
    <form>
      <input type="email" name="cpemail" placeholder="Enter your email.." required>
      <input type="submit" value="Subscribe">
    </form>
  </div>
  <!-- End Newsletter -->
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Newsletter */
.newsletter {
position : fixed;
z-index : 9999;
right : 0;
left : 0;
width : 80%;
margin : auto;
padding : 18px;
transition : all .4s cubic-bezier(.4, 0, .2, 1);
background: #F0C27B; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #F0C27B , #4B1248); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #F0C27B , #4B1248); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.newsletter.bottom {
bottom : -210px;
animation-name : cpnewsletterbottom;
animation-duration : 1s;
animation-iteration-count : 1;
border-radius : 10px 10px 0 0;
}
@keyframes cpnewsletterbottom {
0% {
    transform : translateY(100%);
}
100% {
    transform : translateY(0%);
}
}
.newsletter.bottom:hover {
bottom : 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Newsletter with Bootstrap"
Bootstrap 3.3.0 Snippet by megatela

Related: See More

Questions / Comments:

"Newsletter with Bootstrap" Bootstrap 3.3.0 Snippet by megatela

Related: See More

Questions / Comments:

"Newsletter with Bootstrap"
Bootstrap 3.3.0 Snippet by megatela