Scribd
Upload
25 views2 pages

Email Template

The document provides an HTML template for an email with styling for the header, content, and footer sections including logos, icons, headings, paragraphs, and responsive design.

Uploaded by

abderrahim.elmobaraky
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views2 pages

Email Template

The document provides an HTML template for an email with styling for the header, content, and footer sections including logos, icons, headings, paragraphs, and responsive design.

Uploaded by

abderrahim.elmobaraky
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Email template

Code HTML
.....................................................
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; }
.container { max-width: 600px; margin: auto; background-color: #fff; padding: 20px; }
.header { padding: 10px; display: flex; justify-content: space-between; align-items: center;
background-color: #007bff; }
.header-logo { width: 100px; /* Replace with your logo width */ }
.header-icons { display: flex; }
.header-icon { width: 24px; /* Replace with your icon width */ margin-left: 10px; }
.content { padding: 20px; }
.footer { background-color: #333; color: #ffffff; padding: 10px; text-align: center; }
@media only screen and (max-width: 600px) {
.container, .header, .content, .footer { width: 100%; }
.header { flex-wrap: wrap; }
.header-logo, .header-icon { width: auto; }
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<img src="path-to-your-logo.png" alt="Your Logo" class="header-logo">
<div class="header-icons">
<img src="path-to-icon1.png" alt="Icon 1" class="header-icon">
<img src="path-to-icon2.png" alt="Icon 2" class="header-icon">
</div>
</div>
<div class="content">
<h1>Welcome to Our Service!</h1>
<p>We're excited to have you on board. Here's what you can expect...</p>
<!-- Add more text and images here -->
</div>
<div class="footer">
<img src="path-to-your-negative-logo.png" alt="Your Negative Logo" class="footer-logo">
<p>123 Your Street, Your City, Your Country</p>
<p>Email: [email protected] | Phone: +123456789</p>
</div>
</div>
</body>
</html>
.....................................................

You might also like