Newsletter Design using HTML & CSS

Newsletter Design using HTML & CSS


Hello developers, today in this blog, you will learn to create Newsletter Design using HTML & CSS.

A newsletter design is made, to report about an organization that is sent regularly to members and other people who are interested or subscribed. A newsletter is a tool used by businesses and organizations to share relevant and valuable information with their network of customers or subscribers. The client or the subscriber will receive every update made by the company. Newsletters give direct access to the customers.

In this program (Newsletter Design), on the webpage, there is a card at the center of the webpage that consists of a mail icon at the center and, some content to subscribe to the blog that is "Subscribe to our Blog and get the latest updates". There is an input field text box to enter the email id and a subscribe button to subscribe to the blog. If the customer or the client enters their email id and click on the subscribe button, there will receive the latest updates of the blog. We won't spam your mail.

The source code of this Newsletter Design is given below. If you want the source code of this program, you can copy it. You can use this Newsletter Design code on your projects.

Newsletter Design [Source Code]

To make this website, you would like to make two files: an HTML file and a CSS file. First, create an HTML file with the name of index.html and remember, you have to make a file with a .html extension.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Newsletter Design || Learning Robo</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/> </head> <body> <div class="wrapper"> <div class="top"> <i class="fas fa-envelope"></i> </div> <div class="bottom"> <div class="info"> Subscribe to our Blog and <br>Get the latest updates </div> <form action="#"> <div class="input-box"> <input type="text" placeholder="Enter your email" required> </div> <div class="input-box"> <input type="submit" value="Subscribe"> </div> </form> <div class="footer"> No Stress, We don't spam <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </div> </div> </body> </body> </html>
CSS provides style to an HTML page. To form the page attractive, create a CSS file with the name style.css and, remember that you have got to make a file with a .css extension.


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
html,body{
  height: 100vh;
  width: 100%;
  background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

}
.wrapper{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50% , -50%);
  background: #12192c;
  width: 550px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
  color:#fff
}
.wrapper .top{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0093E9;
  height: 140px;
  position: relative;
  border-radius: 12px 12px 0 0;
}
.wrapper .top::before{
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  background: #0093E9;
  bottom: -10px;
  transform: rotate(45deg);
}
.wrapper .top i{
  font-size: 70px;
  color: #fff;
}
.wrapper .bottom{
  padding: 30px;
  word-spacing: -1px;
}
.wrapper .bottom .info{
  font-size: 20px;
  font-weight: 500;
}
.wrapper .bottom .input-box{
  height: 45px;
  margin: 15px 0 10px 0;
}
.wrapper form .input-box input{
  height: 100%;
  width: 100%;
  padding-left: 14px;
  outline: none;
  font-size: 18px;
  border-radius: 25px;
  transition: all 0.4s ease;

}
.wrapper .bottom input[type="text"]{
  border: 2px solid #fff;
}
.wrapper .bottom input[type="text"]:focus,
.wrapper .bottom input[type="text"]:valid{
  border-color: #0f4ce4;
}
.wrapper .bottom input[type="submit"]{
  border: none;
  cursor: pointer;
  background: #0093E9;
  color: #fff;
  letter-spacing: 1px;
}
.wrapper .bottom input[type="submit"]:hover{
  background: #0f4ce4;
}
.wrapper .bottom .footer{
  font-size: 16px;
  margin-top: 12px;
}
.credit a{
    text-decoration: none;
    color: #0093E9;
  }

  .credit {
      margin-top: 10px;
      text-align: center;
  }
We hope you would like this Newsletter Design using HTML & CSS.

Thank you for reading our blog. If you face any problem, in creating this Newsletter Design using HTML & CSS, then contact us or comment us. We will try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome