How to create an Email Newsletter using HTML and CSS
BLUF: Mastering How to create an Email Newsletter using HTML and CSS is a fundamental step in becoming a web developer. This guide covers the structure, syntax, and best practices for using this HTML element effectively.
Key Lesson: How to create an Email Newsletter using HTML and CSS
Web structure starts with solid HTML. Learn how How to create an Email Newsletter using HTML and CSS contributes to accessible and semantic web pages in the tutorial below.
This tutorial will guide you through the process of building an Email Newsletter utilizing HTML and CSS, supported by a range of illustrative instances. HTML plays a crucial role in establishing the framework of the newsletter, while CSS is essential for styling and formatting the newsletter's layout.
What is Email Newsletter?
Email newsletters are a form of electronic communication that delivers regular updates and news to subscribers regarding a website or company. Subscribers receive notifications about fresh content or updated information via email, allowing them to stay informed and up-to-date.
Below are several instances demonstrating how an Email Newsletter can be crafted utilizing HTML and CSS.
Example 1:
Explanation:
In the demonstration provided earlier, an Email Newsletter example was generated. Subscribing to this newsletter is possible by using your registered email address.
Output:
Following is the output of this example.
Example 2:
Example
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> Email Newsletter using CSS </title>
<link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
<link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<link rel = "stylesheet"
href =
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap");
body {
width: 100%;
height: 100%;
display: block;
position: relative;
background: #000;
font-family: "Open Sans", sans-serif;
padding: 0 2em;
overflow-x: 0;
}
h2 {
color: #fff;
margin-bottom: 1em;
font-size: 2.5em;
font-weight: 300;
text-align: center;
letter-spacing: 3px;
width: 100%;
}
.signup-box {
display: block;
margin: 0 auto;
width: 40em;
height: auto;
background: #fff;
padding: 4em 2em;
}
.signup-box .signup-form {
display: block;
margin: 0 auto;
}
.signup-form label {
display: block;
padding: 0;
width: 100%;
}
.signup-form input {
display: block;
padding: 0;
width: 100%;
}
.signup-form input:-webkit-autofill {
border: 0;
border-bottom: 2px solid black;
-webkit-text-fill-color: black;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form input:-webkit-autofill:hover {
border: 0;
border-bottom: 2px solid black;
-webkit-text-fill-color: black;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form input:-webkit-autofill:focus {
border: 0;
border-bottom: 2px solid black;
-webkit-text-fill-color: black;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form textarea:-webkit-autofill {
border: 0;
border-bottom: 2px solid black;
-webkit-text-fill-color: black;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form textarea:-webkit-autofill:hover {
border: 0;
border-bottom: 2px solid black;
-webkit-text-fill-color: black;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form textarea:-webkit-autofill:focus {
border: 0;
border-bottom: 2px solid black;
-webkit-text-fill-color: black;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form select:-webkit-autofill {
border: 0;
border-bottom: 2px solid black;
-webkit-text-fill-color: black;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form select:-webkit-autofill:hover {
border: 0;
border-bottom: 2px solid black;
-webkit-text-fill-color: black;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form select:-webkit-autofill:focus {
border: 0;
border-bottom: 2px solid black;
-webkit-text-fill-color: black;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form label {
font-size: 1em;
text-transform: uppercase;
letter-spacing: 2px;
color: #1b94b9;
}
.signup-form .signup-input {
border: 0;
border-bottom: 2px solid #000;
margin-bottom: 2em;
font-size: 1em;
padding: 0.5em 0.25rem;
}
.signup-form .signup-input:focus {
border: 0;
outline: 0;
border-bottom: 1px solid #000;
}
.signup-form input[type="submit"] {
font-size: 0.9em;
display: block;
margin: 0 auto;
width: max-content;
background: #000;
padding: 1.25em 2em;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
border: 0;
outline: 0;
transition: 0.3s all ease-in-out;
}
.signup-form input[type="submit"]:hover {
background: #333;
padding: 1.25em 4em;
cursor: pointer;
}
.signup-terms {
display: block;
margin: 2em 0;
}
.signup-terms input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.signup-terms label {
position: relative;
cursor: pointer;
text-transform: initial;
}
.signup-terms label a {
border-bottom: 1px dashed #fffafb;
color: #c51c53;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.5px;
padding: 0 2px;
}
.signup-terms label a:hover {
text-decoration: none;
}
.signup-terms label:before {
content: " ";
-webkit-appearance: none;
background-color: transparent;
border: 3px solid #000;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 7px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 1em;
}
h2 {
text-align: center;
font-weight: normal;
color: #fff;
text-transform: uppercase;
font-size: 2em;
white-space: nowrap;
font-size: 2vw;
z-index: 1000;
font-family: 'Titillium Web', sans-serif;
text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
@include skew(0, -6.7deg, false);
@include transition-property(font-size);
@include transition-duration(0.5s);
}
h3 {
text-align: center;
font-weight: normal;
color: #fff;
text-transform: uppercase;
font-size: 1.5em;
white-space: nowrap;
font-size: 1vw;
z-index: 1000;
font-family: 'Titillium Web', sans-serif;
text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
@include skew(0, -6.7deg, false);
@include transition-property(font-size);
@include transition-duration(0.5s);
}
.signup-terms input:checked + label:after {
content: " ";
display: block;
position: absolute;
top: 3px;
left: 7px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.signup-terms input:checked ~ label:before {
background: #000;
}
@media only screen and (max-width: 48em) {
.signup-box {
width: 30em;
}
}
@media only screen and (max-width: 40em) {
.signup-box {
width: 100%;
}
}
</style>
<body>
<section id = "contact">
<div class = "wrapper">
<h2> Example </h2>
<h3> E-mail Newsletter using CSS </h3>
<div class = "signup-box">
<form class = "signup-form">
<label for = "email"> E-mail: </label>
<input type = "email" name = "email" class = "signup-input" required >
<label for = "name"> Name </label>
<input type = "text" name = "name" class = "signup-input" required >
<label for = "surname"> Mobile No. </label>
<input type = "text" name = "surname" class = "signup-input" required >
<div class = "signup-terms">
<input type = "checkbox" id = "terms">
<label for = "terms"> I agree with � the terms of use. </label>
</div>
<input type = "submit" value = "Subscribe">
</form>
</div>
</div>
</section>
</body>
</html>
Explanation:
In the example provided, we have demonstrated the creation of a Sign-up Email Newsletter feature. Through this functionality, users are able to input their Email address, Name, and Mobile Number to register for receiving the newsletter.
Output:
Following is the output of this example.
Example 3:
Example
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> Email Newsletter using CSS </title>
<link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
<link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel = "stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Titillium Web', sans-serif;
background: linear-gradient(125deg, #778beb, #f8a5c2);
min-height: 100vh;
}
.card_container {
width: 350px;
background: #fff;
border-radius: 15px;
}
.card_container .card_header {
background-color: #bf5bee;
background-image: linear-gradient(
43deg,
#bf5bee 0%,
#c850c0 46%,
#ffcc70 100%
);
padding: 4rem 1.3rem;
border-radius: 15px 15px 0 0;
text-align: center;
}
.card_container .card_header h1 {
margin: 0;
padding: 0;
color: #fff;
margin-top: 0.6rem;
font-size: 1.5rem;
}
.card_container .card_header h1 span {
text-transform: uppercase;
}
.card_header .text {
color: #fff;
font-size: 0.9rem;
}
.card_content {
padding: 2rem;
display: flex;
justify-content: center;
gap: 1rem;
align-items:center;
flex-direction: column;
}
input:focus {
border: 2px solid #011936;
font-weight: 600;
}
.card_content .input-field input {
width: 100%;
padding: 0.8rem;
border: 1px solid #ccc;
border-radius: 4px;
}
.card_content .btn {
padding: 0.8rem;
background-color: #bf5bee;
font-family: 'Titillium Web', sans-serif;
font-size: 1.4rem;
font-weight: 800;
background-image: linear-gradient(
43deg,
#bf5bee 0%,
#c850c0 46%,
#ffcc70 100%
);
border: none;
outline: none;
border-radius: 5px;
color: #fff;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease-in-out;
cursor: pointer;
}
.card_content .btn:hover {
box-shadow: 3px 7px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.card_content span {
text-align: center;
padding: 1rem 0;
font-size: 0.8rem;
color: gray;
letter-spacing: 1px;
}
.links {
display: flex;
flex-wrap:wrap;
gap: 1rem;
justify-content: center;
margin-top:1rem;
}
.links .icon {
border: 1px solid transparent;
padding: 1rem 1.5rem;
border-radius: 4px;
transition: 0.2s ease-in-out;
}
.links .icon i {
font-size: 1.3rem;
}
.links .icon .fa-facebook {
color: blue;
font-size: 1.4rem;
font-weight: 800;
}
.links .icon .fa-twitter {
color: #1da1f2;
font-size: 1.4rem;
font-weight: 800;
}
.links .icon .fa-google {
color: #db4437;
font-size: 1.4rem;
font-weight: 800;
}
.links .icon:hover {
border: 1px solid black;
}
h2 {
text-align: center;
font-weight: normal;
color: #fff;
text-transform: uppercase;
font-size: 2em;
white-space: nowrap;
font-size: 2vw;
z-index: 1000;
font-family: 'Titillium Web', sans-serif;
@include skew(0, -6.7deg, false);
@include transition-property(font-size);
@include transition-duration(0.5s);
}
h3 {
text-align: center;
font-weight: normal;
color: #fff;
text-transform: uppercase;
font-size: 2em;
white-space: nowrap;
font-size: 1.5vw;
z-index: 1000;
font-family: 'Titillium Web', sans-serif;
@include skew(0, -6.7deg, false);
@include transition-property(font-size);
@include transition-duration(0.5s);
}
.links a {
border-bottom: 1px dashed #fffafb;
color: #c51c53;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.5px;
padding: 0 2px;
}
span {
text-align: center;
font-weight: normal;
color: #fff;
text-transform: uppercase;
font-size: 2em;
white-space: nowrap;
font-size: 1vw;
z-index: 1000;
font-family: 'Bangers', cursive;
@include skew(0, -6.7deg, false);
@include transition-property(font-size);
@include transition-duration(0.5s);
}
@media screen and (max-width:400px) {
.card_container{
width: calc(90% - 1rem);
margin: 2rem 0;
}
.links .icon i {
font-size: .9rem;
}
}
</style>
<body>
<div class = "card_container">
<div class = "card_header">
<h2> Example </h2>
<h3> E-mail Newsletter using CSS </h3>
</div>
<div class = "card_content">
<div class = "input-field">
<input type = "email" id = "email" placeholder = "Enter your email address">
</div>
<button class = "btn"> Subscribe <i class = "fas fa-arrow-right"> </i> </button>
<span> Or subscribe using </span>
<div class = "links">
<a href = "#" class = "icon">
<i class = "fab fa-google"> </i>
</a>
<a href = "#" class = "icon">
<i class = "fab fa-twitter"> </i>
</a>
<a href = "#" class = "icon">
<i class = "fab fa-facebook"> </i>
</a>
</div>
</div>
</body>
</html>
Explanation:
In the scenario presented, an illustration of an Email Newsletter has been generated. To receive this newsletter, you can opt-in by providing your registered email address or by opting in through different social media channels like a Google account, Twitter, or Facebook, among others.
Output:
Following is the output of this example.
