Here is a template to send emails for Troop 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Troop 1</title>
<!-- Prevent Apple Mail auto-darkening -->
<meta name="color-scheme" content="dark light">
<meta name="supported-color-schemes" content="dark light">
<style>
/* Mobile responsiveness */
@media only screen and (max-width: 620px) {
.container {
width: 100% !important;
}
.mobile-padding {
padding: 20px !important;
}
.hero-title {
font-size: 28px !important;
line-height: 34px !important;
}
.body-text {
font-size: 16px !important;
line-height: 26px !important;
}
.stack {
display: block !important;
width: 100% !important;
}
.logo {
width: 42px !important;
}
.button {
width: 100% !important;
}
}
/* Prevent Gmail blue links */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
/* Outlook spacing fixes */
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body style="margin:0; padding:0; background-color: #2b2317;">
<!-- Full Background -->
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
bgcolor="#000e30"
style="background-color:#2b2317;"
>
<tr>
<td align="center" style="padding:30px 15px;">
<!-- Main Email Container -->
<table
class="container"
width="600"
border="0"
cellspacing="0"
cellpadding="0"
bgcolor="#08142f"
style="
width:600px;
max-width:600px;
background-color:#08142f;
border-radius:18px;
overflow:hidden;
"
>
<!-- HEADER -->
<tr>
<td
bgcolor="#3d0066"
style="
background: #ff6b00;
padding:22px 30px;
border-bottom:1px solid black;
"
>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- LEFT -->
<td align="left" valign="middle">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle">
<img
class="logo"
src="https://troop-dashboard.pages.dev/IMG36.png"
width="52"
alt="Troop 1 Logo"
style="
display:block;
border:0;
width:52px;
max-width:52px;
"
>
</td>
<td width="14"></td>
<td valign="middle">
<div
style="
font-family:Arial,sans-serif;
font-size:28px;
line-height:30px;
color: #ffffff;
font-weight:700;
letter-spacing:-0.5px;
"
>
Troop 1
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- HERO -->
<tr>
<td
class="mobile-padding"
style="
padding:45px 40px 10px 40px;
background-color: black;
"
>
<div
class="hero-title"
style="
font-family:Arial,sans-serif;
font-size:40px;
line-height:46px;
color:#ffffff;
font-weight:800;
letter-spacing:-1px;
margin-bottom:18px;
"
>
Good Evening!
</div>
<div
class="body-text"
style="
font-family:Arial,sans-serif;
font-size:18px;
line-height:30px;
color:#d5dcff;
"
>
This is just a friendly reminder to let you know how to stay up to date with the latest updates for the troop.
</div>
</td>
</tr>
<!-- CARD -->
<tr>
<td class="mobile-padding" style="padding:30px 40px; background:black;">
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
bgcolor="black"
style="
background-color:#17130d;
border:2px solid #ff6b00;
border-radius:16px;
"
>
<tr>
<td style="padding:32px;">
<div
class="body-text"
style="
font-family:Arial,sans-serif;
font-size:17px;
line-height:30px;
color:#ffffff;
"
>
Here is a dashboard for the troop which allows you to view all the latest news and announcements for the troop, all in one place.
</div>
<div
class="body-text"
style="
font-family:Arial,sans-serif;
font-size:17px;
line-height:30px;
color:#ffffff;
margin-top: 25px;
"
>
In the future, you can view it at:
</div>
<div
class="body-text"
style="
font-family:Arial,sans-serif;
font-size:17px;
line-height:30px;
color:#ffffff;
margin-top: 0px;
"
>
<span style="color: #67bed9;">troop-dashboard.pages.dev</span>
</div>
<!-- BUTTON -->
<table
border="0"
cellspacing="0"
cellpadding="0"
style="margin-top:30px;"
>
<tr>
<td
class="button"
align="center"
bgcolor="#d900ff"
style="
border-radius:10px;
background:linear-gradient(135deg,#ff6b00,#853700);
"
>
<a
href="https://troop-dashboard.pages.dev"
target="_blank"
style="
display:inline-block;
padding:16px 28px;
font-family:Arial,sans-serif;
font-size:16px;
font-weight:700;
color:#ffffff;
text-decoration:none;
"
>
View Troop Dashboard
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- TESTIMONIAL / TRUST -->
<tr>
<td class="mobile-padding" style="padding:0 40px 30px 40px; background:black;">
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
bgcolor="#091633"
style="
background-color:#17130d;
border:1px solid #ff6b00;
border-radius:14px;
"
>
<tr>
<td style="padding:24px;">
<div
style="
font-family:Arial,sans-serif;
font-size:15px;
line-height:26px;
color:#b8c4f7;
"
>
✓ Upcoming Meetings<br>
✓ Upcoming Campouts<br>
✓ Upcoming Events<br>
✓ Announcements
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- FOOTER -->
<tr>
<td
align="center"
style="
padding:28px 30px 40px 30px;
border-top:1px solid #ff6b00;
background-color:#17130d;
"
>
<div
style="
font-family:Arial,sans-serif;
font-size:18px;
line-height:28px;
color:#ffffff;
font-weight:700;
margin-bottom:8px;
"
>
Ryan M. Pyska
</div>
<div
style="
font-family:Arial,sans-serif;
font-size:14px;
line-height:24px;
color:#8ea1d8;
"
>
Troop 1<br>
Making an impact!
</div>
<!-- SOCIALS -->
<table
border="0"
cellspacing="0"
cellpadding="0"
style="margin-top:18px;"
>
<tr>
<td style="padding:0 8px;">
<a
href="https://sites.google.com/view/bsatroop1/home"
target="_blank"
style="
font-family:Arial,sans-serif;
font-size:14px;
color:#ff6b00;
text-decoration:none;
"
>
Website
</a>
</td>
<td style="padding:0 8px;">
<a
href="tel:4106109231"
style="
font-family:Arial,sans-serif;
font-size:14px;
color:#ff6b00;
text-decoration:none;
"
>
Call
</a>
</td>
<td style="padding:0 8px;">
<a
href="mailto:boyscouttroop01@gmail.com"
style="
font-family:Arial,sans-serif;
font-size:14px;
color:#ff6b00;
text-decoration:none;
"
>
Email
</a>
</td>
</tr>
</table>
<!-- UNSUBSCRIBE -->
<div
style="
margin-top:22px;
font-family:Arial,sans-serif;
font-size:12px;
line-height:20px;
color:#5f74ad;
"
>
© Boy Scout Troop 1
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>