Posted in
2713
3:54 am, July 1, 2022
Responsive Friendly Subscribe to our Newsletter Section
Just a nice quick section layout for a newsletter subscribe button and text.
You could add this to a home page or just before the footer section of a page.
Its also done in foundation grid so its responsive.
Preview
Frameworks
This uses the foundation framework to handle the responsive and the grid. Then google fonts for the included fonts.
Background Image
The image is selected automatically from the url https://picsum.photos/1200/600 but you can change this to your own background image. As it has an overlay on the image as well in the form of a linear gradient, it should work with almost any background image you select.
Responsive Friendly Subscribe to our Newsletter Section Demo
View Demo Full Screen View Demo New Tab
Responsive Friendly Subscribe to our Newsletter Section Code
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/css/foundation.min.css" />
<section class="subscribe-newsletter">
<div class="grid-container">
<div class="grid-x">
<div class="large-8 cell">
<div class="sub-n-title">
Subscribe To Our Newsletter
</div>
<div class="sub-n-text">
Stay in touch with us to get the latest news.
</div>
</div>
<div class="large-4 cell">
<div class="sub-n-button">
<a href="#!">Subscribe</a>
</div>
</div>
</div>
</div>
</section>
CSS
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
.subscribe-newsletter {
padding:130px;
background:linear-gradient(357.05deg, rgba(0, 0, 0, 0.62) 2.39%, rgba(0, 0, 0, 0) 97.49%), url("https://picsum.photos/1200/600") center no-repeat;
background-size:cover;
}
.sub-n-title {
margin-bottom:20px;
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 116.5%;
text-transform: uppercase;
color: #FFFFFF;
text-shadow:0px 1px 2px #000;
}
.sub-n-text {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 132%;
color: #FFFFFF;
text-shadow:0px 1px 2px #000;
margin-bottom:20px;
}
.sub-n-button a:hover {
color:#FFF;
background:teal;
}
.sub-n-button a {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 30px;
text-align: center;
color: teal;
padding:12px 65px;
display:inline-block;
background: #FFFFFF;
border-radius: 5px;
}
External Link for Responsive Friendly Subscribe to our Newsletter Section
Add Comment
Other Items in Sections
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript