Card Design, Html and CSS

Design an email newsletter in Html and CSS with code

A website newsletter is a very important component of any website and we will design an email newsletter. It indicates that people are interested in your business and that’s why they are following you by putting your email. In the last lesson, we were discussing how to create a Great email newsletter . Now, let us see how to create a website newsletter using Html and CSS only.

A website newsletter is very important for the progress of the website. The website can grow without it but it will take a lot of time to grow. By using this method you will be able to grow your business easily and fast. So, you need to create it if you have any type of website to grow your business in a short time. If you have a website in Html and CSS then you can create it by following our below steps. But first, let’s see something about its content.

It has a gradient background and it is very simple to achieve it using Html and CSS. Then it has a box at the center created using the center and div property. This box has a shadow which is also created using CSS. Then it has a heading at the top “Monthly newsletter”. Below this, it has a description related to the website newsletter and the reason to join the website or follow the website.

Then it has a field for entering the email. A field is a part where you can input your data into the form or any other part of the website. So, you can enter your email here for a subscription. We can create it using Html and CSS. If you like the design or idea then you can also create it by following our 3 simple steps.

Download an IDE:

You must have any type of IDE for writing the code of Html and CSS. You can start with brackets, vs code, notepad, or anyone else related to your comfort.

Source code of Html:

For creating the newsletter you have to create an Html file so that you can write the content using Html. Then the Html code is given below and you have to copy-paste this code into your Html file.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Newsletter - Fantacy Design</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
  </head>
  <body>
    <div class="newsletter">
      <h1>
        Weekly
        <span>Newsletter</span>
      </h1>

      <p>Lorem ipsum dolor sit amet, natus sequi maxime assumenda.</p>

      <div class="txtb">
        <input type="text" placeholder="Enter Your Email Address">
        <button type="button"><i class="fas fa-arrow-right"></i></button>

      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Newsletter - Fantacy Design</title>

</head>

<body>

<h1>

Weekly

<span>Newsletter</span>

</h1>

<p>Lorem ipsum dolor sit amet, natus sequi maxime assumenda.</p>

</div>

</body>

</html>

Source code of CSS:

So, create a CSS file in the same folder in which the Html file was saved and then you have to copy-paste this given code into your file.

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@600&family=Montserrat:ital,wght@0,600;1,800&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}

body{
  background: #786fa6;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.newsletter{
  background: linear-gradient(125deg,#778beb,#f8a5c2);
  width: 500px;
  padding: 60px;
  text-align: center;
  box-shadow: 0 0 20px #00000060;
}

.newsletter h1{
  text-transform: uppercase;
  color: #fff;
  font-size: 48px;
  line-height: 50px;
  font-weight: bold;
font-family: 'Montserrat', sans-serif;
}

.newsletter h1 span{
  display: block;
  font-size: 38px;
  font-family: 'Montserrat', sans-serif;
}

.newsletter p{
  color: #fff;
  font-size: 14px;
  margin: 10px 0;
}

.txtb{
  width: 100%;
  height: 70px;
  background: #f1f1f199;
  border-radius: 40px;
  position: relative;
  margin-top: 40px;
}

.txtb input{
  width: 100%;
  height: 70px;
  border-radius: 40px;
  border: 0;
  background: none;
  padding: 0 30px;
  outline: none;
  font-size: 15px;
  padding-right: 80px;
}

.txtb button{
  background: #574b90;
  border: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  right: 10px;
  top: 10px;
  outline: none;
  cursor: pointer;
  color: #fff;
  transition: 0.3s linear;
}

.txtb button:hover{
  opacity: .5;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@600&family=Montserrat:ital,wght@0,600;1,800&display=swap');

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Montserrat', sans-serif;

}

body{

background: #786fa6;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}

.newsletter{

background: linear-gradient(125deg,#778beb,#f8a5c2);

width: 500px;

padding: 60px;

text-align: center;

box-shadow: 0 0 20px #00000060;

}

.newsletter h1{

text-transform: uppercase;

color: #fff;

font-size: 48px;

line-height: 50px;

font-weight: bold;

font-family: 'Montserrat', sans-serif;

}

.newsletter h1 span{

display: block;

font-size: 38px;

font-family: 'Montserrat', sans-serif;

}

.newsletter p{

color: #fff;

font-size: 14px;

margin: 10px 0;

}

.txtb{

width: 100%;

height: 70px;

background: #f1f1f199;

border-radius: 40px;

position: relative;

margin-top: 40px;

}

.txtb input{

width: 100%;

height: 70px;

border-radius: 40px;

border: 0;

background: none;

padding: 0 30px;

outline: none;

font-size: 15px;

padding-right: 80px;

}

.txtb button{

background: #574b90;

border: 0;

width: 50px;

height: 50px;

border-radius: 50%;

position: absolute;

right: 10px;

top: 10px;

outline: none;

cursor: pointer;

color: #fff;

transition: 0.3s linear;

}

.txtb button:hover{

opacity: .5;

}

Therefore by following these steps you can create a responsive newsletter for your website. If you have any errors then we have a solution for that.

Download Source code:

Its source code is given below. Just click on the download button and your file will start downloading within 30 seconds.

Task:

Email newsletters are the most essential part of the website. You can use it at multiple places on the website pages. If you have a basic knowledge of Html and CSS then create a footer. Then add this email newsletter inside the footer of the website. It is mostly used inside the footer area. It is also used in the sidebar of the website. It helps the admin to collect the emails of the customers easily and retarget them in the future,

If you have any questions then ask below in the comment section.

Thanks for reading this article.

Download Source Code