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.
@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;
}
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.
Post a Comment
Thank you
Learning robo team