How To Create A Simple Newsletter Using HTML CSS

How To Create A Simple Newsletter Using HTML CSS
304 Views

Newsletter is an important part of a blog / website. With this, we can collect email of our visitors. After that, we can send them offers and other benefits if we have any.

Guys, welcome back to anupdebnath.info. In this article I am going to show you how to make a newsletter using only html and css. Let’s see the outlook at first.

How To Make A Simple Newsletter Using HTML & CSS
How To Make A Simple Newsletter Using HTML & CSS

How To Make A Simple Newsletter Using HTML & CSS

Apply HTML Code First.

At first we have to create a html structure. Later we have to create a form element for newsletter. Let’s started this.

First step :: Create a html structure –

<!DOCTYPE html>
<html>
<head>
  <title>Create a newsletter</title>
</head>
<body>
</body>
</html>

Second step :: Create a form for newsletter between body tag.

<form action="action_page.php">
  
</form>

Third Step :: Wait for a while. Look at the picture above. We have to add an image inside form. Let’s add an image.

<form action="action_page.php">
  <img src="images/a.jpg"> <!-- add your own image from your pc -->
</form> 

Fourth Step :: This is done. We have completed 20% only. On this step we need to write code for the main body of newsletter. Let’s start working with a div. Create a html class inside this div.

<form action="action_page.php">
<img src="images/a.jpg">
  <div class="mainbody">
    
  </div>
</form>

Well, this is cool.

Fifth Step :: Let’s write something inside this div. You can write your own text. I have written for an example.

<form action="action_page.php">
<img src="images/a.jpg">
  <div class="mainbody">
    <h2>
        Subscribe to our Newsletter
      </h2>
  </div>
</form>

Sixth Step :: Now I am going to write code for the main part of newsletter. I need to create a name and an email option for this. After that I will add a checkbox and a submit button. Let’s start coding.

<form action="action_page.php">
<img src="images/a.jpg">
  <div class="mainbody">
    <h2>
        Subscribe to our Newsletter
      </h2>

      <!-- code for name and email -->
      <input type="text" name="name" placeholder="name">
      <input type="text" name="email" placeholder="Email">

      <!-- code for submit button and checkbox -->
      <label>
        <input type="checkbox" name="subscribe" checked="checked"> Accept
      </label>
      <input type="submit"value="Subscribe">
  </div>
</form>

We have done everything of html. Our form is ready to show. We just need to add some css codes. That’s all. :p

Apply Css Code

Time to add css code. Before adding css code, let’s check something.

Did you notice something? I have added an image, 4 input box and 1 html class. I am going to apply css code for these. Let’s start-

First Step :: Write css code for the image we have added on our form.

img{
      border-radius: 50%;
      height: 120px;
      width: 120px;
      top: 9%;
      position: absolute;
      left: 40%;
      z-index: 200;
    }

Second Step :: i have added a html class, right? Time to apply css code for this.

.mainbody{
      padding: 20px;
      background-color: #f1f1f1;
      top: 18%;
      padding-top: 50px;
      width: 50%;
      left: 20%;
      border-top: 2px solid black;
      position: absolute;
      box-shadow: 0px 8px 20px 0px rgba(0,0,0,.2);
    }

Third step :: In this step i am gonna style 4 input boxes. Let’s tsart styling these.

input[type=text], input[type=submit]{
      width: 100%;
      margin:8px 0;
      display: inline-block;
      padding: 12px;
      box-sizing: border-box;
    }
    input[type=checkbox]{
      margin-top: 16px;
    }
    input[type=submit]{
      background-color: #000;
      border:none;
      color: #fff;
      font-size: 17px;
      cursor: pointer;
    }

I am done. Now run the newsletter on our browser. Do you like this?

For your better understanding i have made a video. Watch this –

How is this? Coding is fun, isn’t it? :p :p If you like this comment below. If you think it is not so cool as your thought then describe your opinion regarding it on comment box.

Related posts for you

Share Your Opinion With Me