Simple Html Email Template Free Source Code - WebJourney
In this post we will design a simple html template using html5 and css3. I will design basic html template with a logo. This template will be use-able for invoice, order product details, service details etc. Anyone can customize this template according to his needs. For design a custom html template we have to follow bellow steps.
Let's see the output first:
Step 1: HTML Markup
Bellow is the source code of html and css. Just copy and paste the code into your projects and check the amazing output. Here we write some simple html and css code for designing the html email template.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mail Template by WebJourney</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="mail-container">
<div class="logo-wrapper">
<a href="javascript:void(0)">
<img src="logo.png" alt="logo">
</a>
</div>
<div class="inner-wrap">
<h4>Success!</h4>
<p>Hello, admin a new order has been created by osman223 <br>
<p>Order has been created at: 23 jul 2023 by Paypal</p>
</p>
<br>
<table class="table">
<tbody>
<tr>
<th>Item</th>
<td>I will do this service as you like</td>
</tr>
<tr>
<th>ID</th>
<td>1</td>
</tr>
<tr>
<th>Price</th>
<td>$500</td>
</tr>
<tr>
<th>Revision</th>
<td>4</td>
</tr>
<tr>
<th>Delivery</th>
<td>5 days</td>
</tr>
</tbody>
</table>
<div class="btn-wrapper">
<a href="javascript:void(0)" class="btn-profile btn-bg-1">Back to Home</a>
</div>
</div>
<footer>
<p>Copyright @webjourney. Free to use.</p>
</footer>
</div>
</body>
</html>
Step 2: CSS Markup
Add bellow css code inside html markup <head> </head> tage. other wise it will not work.
* {
font-family: 'Open Sans', sans-serif;
}
.mail-container {
max-width: 650px;
margin: 0 auto;
text-align: center;
background-color: #f2f2f2;
padding: 15px 0;
}
.inner-wrap {
background-color: #fff;
margin: 40px;
margin-top:20px;
padding: 5px 20px;
text-align: left;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.01);
}
.inner-wrap p {
font-size: 16px;
line-height: 26px;
color: #656565;
margin: 0;
}
.message-wrap p {
font-size: 14px;
line-height: 26px;
}
table {
margin: 0 auto;
}
table {
border-collapse: collapse;
width: 100%;
}
table td, table th {
border: 1px solid #ddd;
padding: 8px;
}
table tr:nth-child(even) {
background-color: #f2f2f2;
}
table tr:hover {
background-color: #ddd;
}
table th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
}
.logo-wrapper img {
max-width: 200px;
}
.btn-profile {
color: #666;
font-size: 16px;
font-weight: 500;
display: inline-block;
border-radius: 5px;
text-align: center;
cursor: pointer;
line-height: 24px;
padding: 7px 20px;
white-space: nowrap;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
@media only screen and (max-width: 575.98px) {
.btn-profile {
padding: 6px 20px;
font-size: 15px
}
}
@media only screen and (max-width: 375px) {
.btn-profile {
padding: 5px 15px;
font-size: 14px
}
}
.btn-profile.btn-bg-1 {
background-color: #6176F6;
color: #fff
}
.btn-profile.btn-bg-1:hover {
background-color: #4758C7
}
.btn-wrapper {
text-align: center;
margin-top: 20px
}
.btn-wrapper a {
text-decoration: none
}
Hope this will help you a lot. Thanks to read this article.
If you like what you are reading, please think about buying us a coffee as a token of appreciation.
We appreciate your support and are committed to providing you useful and informative content.
We are thankful for your ongoing support
You May Also Like:
How to setup jQuery with Laravel 10 and vite - WebJourney
Realtime Check Password and Confirm Password is Match or not in jQuery Javascript
jQuery Javascript Dynamic Slug Generate - WebJourney
Dynamic Dependent Dropdown Laravel 10 jQuery Ajax(Category SubCategory)