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.

HTML Code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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;">
</form>
<p class="para">We respect your privacy. You information is safe and will never be shared.</p>
</div>

CSS CODE:

<style>
.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 {
  background:#4a122b;
}
form input:focus {
  outline: none;
  background: white;
}
.para{
  padding:0px;
  font-weight: bold;
}
.icon{
  font-size: 50px;
}
@media only screen and (max-width: 600px){
  .container{
  margin: 0 auto;
  width: 350px;
  background: #ddd;
  border:15px solid #eee;
  background: linear-gradient(to right, #f5af19, #f12711);
  padding: 20px;
  }
}
</style>

That’s It.

Leave a Reply Cancel reply