Responsive Friendly Subscribe to our Newsletter Section

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;
}