##
###
In order to create an email newsletter, we follow the following 3 steps:

### Step 1: Add HTML

To process the input, we first have to create a form, add input fields and a submit button.

<form>
  <div class="container">
    <h2>Our NewsLetter</h2>
  </div>

  <div class="container" >
    <input type="text" placeholder="Enter Full Name" name="name" required>
    <input type="text" placeholder="Enter Email address" name="mail" required>
    <label>
      <input type="checkbox"  name="subscribe"> Daily Updates
    </label>
  </div>

  <div class="container">
    <input type="submit" value="Subscribe to Our NewsLetter">
  </div>
</form>

codemirror

### Explanation

- Line 1: We create a form using the `form` tag.

- Lines 2–4: We create a `div` that displays the heading.


- Lines 6–12: We create a `div` that takes the name and email as input using the `input type="text"` tag. We also add a checkbox for daily updates using the `input type="checkbox"` tag.


- Line 14–16: We create a submit button using the `input type="submit"` tag.


### Step 2: Add CSS

Next, let’s create the styling for our newsletter.



form {
  border: 10px solid #f1f1f1;
}

/* Adding Padding to Containers */
.container 
{
  padding: 15px;
  background-color: #6cf49e;
}

/* Styling for input elements and the Submit Button */
input[type=text], input[type=submit] 
{
  width: 100%;
  padding: 15px;
  margin: 10px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
input[type=checkbox]
{
  margin-top: 30px;
}
input[type=submit] 
{
  background-color: #18e7f2;
  color: white;
  border: none;
}

input[type=submit]:hover 
{
  opacity: 1;
}

### Explanation

- Lines 1–3: We add a border and border color to the form.

- Lines 6–10: We set the padding and background color for the form.

- Lines 13–21: We add custom styling for input fields.


- Lines 22–36: We add styling for the checkbox and the submit button.


### Step 3: Combine HTML and CSS

We now combine the HTML and CSS files in order to connect the form and the styling for the form.

How to make the email newsletter with HTML and CSS

Step 1: Add HTML

Explanation

Step 2: Add CSS

Explanation

Step 3: Combine HTML and CSS