"newsletter box"
Bootstrap 4.1.1 Snippet by csshint

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="newsletter js-rollover" data-radius="50">
<svg viewBox="0 0 694 549" width="694" height="549">
<path d="M74.7,439.6c58.9,76.3,152.2,113.1,224.6,109C585.8,532.3,734.2,295,684.7,94.2C658.7-11.3,508.1-8.6,433.6,9.8C384.1,22,329.1,47.8,277.8,60.4c-42.5,10.5-90,7.2-130.4,17.1C60.4,99-21.1,201.9,4.9,307.6C16.7,355.3,45.2,401.4,74.7,439.6z"></path>
</svg>
<h2 class="newsletter-title">Get the latest<br> info about Tech</h2>
<p class="newsletter-text">Register to our newsletter and don’t miss anything anymore. We promise we will not spam you!</p>
<form method="GET" action="https://kikk.us6.list-manage.com/subscribe" class="newsletter-form" target="_blank">
<input type="hidden" name="u" value="d08fe605a9149dc54a3c13f44">
<input type="hidden" name="id" value="96f67efdeb">
<input type="email" name="EMAIL" id="email" placeholder="Enter your email">
<button type="submit" class="button">Subscribe</button>
</form>
</div>
</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 {
position: relative;
padding-top: 30px;
padding-left: 220px;
flex-grow: 1;
}
.newsletter svg {
position: absolute;
z-index: 0;
top: -90px;
left: 60px;
fill: #fcdbe8;
}
.newsletter .newsletter-title {
margin-bottom: 40px;
font-family: IMFell DW,Times,Georgia,serif;
font-weight: 400;
font-style: italic;
color: #1107ff;
font-size: 4.0625rem;
letter-spacing: -.02em;
line-height: .9230769231;
position: relative;
z-index: 999;
}
.newsletter .newsletter-text {
color: rgba(17,7,255,.8);
padding-right: 140px;
position: relative;
z-index: 999;
max-width: 450px;
}
.newsletter .newsletter-form {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: