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.