How to Create a Responsive Newsletter Design - Informatic Point

How to Create a Responsive Newsletter Design

How to Create a Responsive Newsletter Design. Responsive Newsletter design is created by using custom HTML, CSS, and font-awesome icons. It’s always testing to push a user to subscribe to your website newsletter. The actual key is where you place them to submit. Then there’s the UI and UX of the form itself. When the user decides to subscribe, we need to make sure the process is a smooth and simple newsletter.

Our access to this resource was: how can we create a responsive newsletter form if possible? Finally, we went with a simple bone-starting structure (a big email input field and a small title).

So, let’s begin.
First of all, you need to create a simple HTML file named index.html or whatever you want. Then place the below code to your HTML file.

Read Also: How to Create Checkout Form HTML and CSS3

HTML Code:

<link rel="stylesheet" href="">
<h2>How to Create a Responsive Newsletter Design</h2>
<div class="container">
  <img src="dsd.png">
<h1>Subscribe to our newsletter</h1>
<p class="para">Susbscribe to our newsletter today to receive updates on the latest news, tutorials and special offers!</p>
<form action="">
<input type="email" name="email" id="email" placeholder="[email protected]" required />
<input class="icon" type="submit" name="submit" value="&#128640;">
<p class="para">We respect your privacy. You information is safe and will never be shared.</p>


Read Also: How to Create Vertical tabs in HTML

.container {
  margin: 0 auto;
  width: 650px;
  background: linear-gradient(to right, #f5af19, #f12711);
  border:15px solid #eee;
  padding: 20px;
  text-align: center;
h1 {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: 0.025em;
form {
  position: relative;
  display: block;
  height: 70px;
  border-radius: 35px;
  background: white;
  margin: 0 auto;
  box-shadow: 0 8px 32px #6818b8;
  overflow: hidden;
form input {
  line-height: 70px;
  padding: 0;
  border: none;
  outline: none;
  font-size: 1rem;
  font-weight: 300;
  background: #eee;
  letter-spacing: 0.02em;
form input:not([type=submit]) {
  width: 100%;
  display: block;
  padding: 0 150px 0 30px;
form input:not([type=email]) {
  position: absolute;
  height: 50px;
  line-height: 50px;
  top: 10px;
  box-shadow: 0 8px 32px #6818b8;
  border:2px groove ;
  right: 10px;
  border-radius: 25px;
  padding: 0 20px;
  background: #2f144f;
  color: white;
  cursor: pointer;
form input:not([type=email]):hover {
form input:focus {
  outline: none;
  background: white;
  font-weight: bold;
  font-size: 50px;
@media only screen and (max-width: 600px){
  margin: 0 auto;
  width: 350px;
  background: #ddd;
  border:15px solid #eee;
  background: linear-gradient(to right, #f5af19, #f12711);
  padding: 20px;

That’s It.

Leave a Reply

Your email address will not be published. Required fields are marked *