Card Design, Sections

Great email newsletter design in Html and CSS with code

Hello everyone, In this post, we will learn how to make a great email newsletter design using Html, CSS, and javascript. In the last post, we discussed 404 page design Html. Today our main goal is to make a newsletter for our website.

The newsletter is a method that is used for collecting the emails of the visitors to the website. If the users are interested in the content of the website then they will follow your website by putting the email in the newsletter. These emails are also used for email marketing. It helps the company to expand their visitors and also helps increase their revenue.

This newsletter is created using Html and CSS only. It has a background image that is related to the website category. Below this it has a description related to the business of the website or why should you join us. Then it has a subscribe button. When you hover over it then it opens up.

This effect is created using CSS. When it opens up then you can enter your email to subscribe to the website. Then the owner of the website will share his latest content with you whenever he/she will upload any new content to the website. So, if you want to create this email newsletter for your website then follow our steps and in the end, you will be able to create it successfully.

You might like it:

It is a very simple process to create this type of newsletter for any website using Html and CSS. You can modify it if you have a little bit of information about CSS. We will create it in three simple steps and must follow every step if you want to make it.

First, you must have an IDE on your computer for writing the code of Html and CSS. Open your IDE and then follow step 2.

Source code of Html:

Create an Html file and then save it using the extension of .html and copy this code then paste it into your Html file. Html is a markup language used for creating the content of web pages. It is also a part of the web page and we will write its content using Html.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Newsletter - Fantacy Designs</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
  </head>
  <body>
  <div class="container">
    <form action="">
      <h1>Join Our Newsletter</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      <div class="email-box">
        <i class="fas fa-envelope"></i>
        <input class="tbox" type="email" name="" value="" placeholder="Enter your email">
        <button class="btn" type="button" name="button">Subscribe</button>
      </div>
    </form>
  </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Newsletter - Fantacy Designs</title>

</head>

<body>

<h1>Join Our Newsletter</h1>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

<button class="btn" type="button" name="button">Subscribe</button>

</div>

</form>

</div>

</body>

</html>

Source code of CSS:

CSS is also a markup language used for designing web pages. The newsletter is a part of the web page and we will design it using CSS. So create a file for CSS code and save it using the extension of .css and also save it in the folder of Html. Copy this CSS code and paste it into the CSS file of your IDE.

*{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;

}
body{
background-image: linear-gradient(to right top, #ff7f5b, #ff825d, #ff855e, #ff8860, #ff8b62);

}
.container{
  padding: 50px 0px;
  text-align: center;
  color: white;margin-left: auto;
  margin-right: auto;
  margin-top: 180px;
  width: 800px;
background: #fff;
box-shadow: rgba(50, 50, 93, 0.55) 0px 6px 12px -2px, rgba(0, 0, 0, 0.9) 0px 3px 7px -3px;


}
h1{
  font-size: 35px;
  color: #fff;
  color: #fff;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 1px 0 #bbb,
               0 1px 0 #b9b9b9,
               0 1px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.0),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.20);
            background-image: linear-gradient(to right top, #ff7f5b, #ff825d, #ff855e, #ff8860, #ff8b62);
            max-width: 100%;
            padding: 10px;text-align:

             }

.container p {
  max-width: 600px;
  margin: 40px auto;
  font-size: 15px;
  font-weight: 300;
  color: #262626;
  font-size: 16px;
  line-height: 2;
}
.email-box{
  height: 40px;
  justify-content: center;
  display: flex; /*its better to use inline-flex*/
}
.email-box i{
      background-image: linear-gradient(to right top, #ff7f5b, #ff825d, #ff855e, #ff8860, #ff8b62);
  width: 40px;
  line-height: 40px;
}
.tbox,.btn{
  border: none;
  outline: none;
}
.tbox{
  width: 0px;
  transition: 0.6s;
}
.email-box:hover > .tbox,.tbox:focus{
  width: 260px;
  padding: 0 10px;
}
.btn{
    background-image: linear-gradient(to right top, #ff7f5b, #ff825d, #ff855e, #ff8860, #ff8b62);
  color: white;
  padding: 0 10px;
  text-transform: uppercase;
  cursor: pointer;

}

margin: 0;

padding: 0;

font-family: "montserrat",sans-serif;

}

body{

background-image: linear-gradient(to right top, #ff7f5b, #ff825d, #ff855e, #ff8860, #ff8b62);

}

.container{

padding: 50px 0px;

text-align: center;

color: white;margin-left: auto;

margin-right: auto;

margin-top: 180px;

width: 800px;

background: #fff;

box-shadow: rgba(50, 50, 93, 0.55) 0px 6px 12px -2px, rgba(0, 0, 0, 0.9) 0px 3px 7px -3px;

}

h1{

font-size: 35px;

color: #fff;

text-shadow: 0 1px 0 #ccc,

0 2px 0 #c9c9c9,

0 1px 0 #bbb,

0 1px 0 #b9b9b9,

0 1px 0 #aaa,

0 6px 1px rgba(0,0,0,.1),

0 0 5px rgba(0,0,0,.1),

0 1px 3px rgba(0,0,0,.3),

0 3px 5px rgba(0,0,0,.2),

0 5px 10px rgba(0,0,0,.0),

0 10px 10px rgba(0,0,0,.2),

0 20px 20px rgba(0,0,0,.20);

background-image: linear-gradient(to right top, #ff7f5b, #ff825d, #ff855e, #ff8860, #ff8b62);

max-width: 100%;

padding: 10px;text-align:

}

.container p {

max-width: 600px;

margin: 40px auto;

font-size: 15px;

font-weight: 300;

color: #262626;

font-size: 16px;

line-height: 2;

}

.email-box{

height: 40px;

justify-content: center;

display: flex; /*its better to use inline-flex*/

}

.email-box i{

background-image: linear-gradient(to right top, #ff7f5b, #ff825d, #ff855e, #ff8860, #ff8b62);

width: 40px;

line-height: 40px;

}

.tbox,.btn{

border: none;

outline: none;

}

.tbox{

width: 0px;

transition: 0.6s;

}

.email-box:hover > .tbox,.tbox:focus{

width: 260px;

padding: 0 10px;

}

.btn{

background-image: linear-gradient(to right top, #ff7f5b, #ff825d, #ff855e, #ff8860, #ff8b62);

color: white;

padding: 0 10px;

text-transform: uppercase;

cursor: pointer;

}

In this way, you can create a newsletter for your website.

Download source code:

If you are failed in creating a newsletter for your website by following the above steps then we have created a .zip file for you. Download and extract the files of the .zip file.

Task:

We have created an email newsletter. It does not have an open input field for inserting email into the field. It is showing its data in a simple box and a button as well. Now, our job is to modify this email newsletter and make it more attractive. Change the color of the background and box as well. Then use the hover effect on the button of the subscribe. Hover effects have multiple types and you can implement any of them.

If this post was helpful for you then don’t forget to follow and subscribe to us.

Thanks for reading this article

Download Source Code