<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no"> <!-- Tell iOS not to automatically link certain text strings. -->
<!-- CSS Reset : BEGIN -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. */
table {
border: 0;
border-spacing: 0;
border-collapse: collapse
}
/* What it does: Forces Samsung Android mail clients to use the entire viewport. */
#MessageViewBody,
#MessageWebViewDiv{
width: 100% !important;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
a {
text-decoration: none;
}
/* What it does: A work-around for email clients automatically linking certain text strings. */
/* iOS */
a[x-apple-data-detectors],
.unstyle-auto-detected-links a,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
u + #body a, /* Gmail */
#MessageViewBody a /* Samsung Mail */
{
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* What it does: Prevents Gmail from changing the text color in conversation threads. */
.im {
color: inherit !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
u ~ div .email-container {
min-width: 320px !important;
}
}
/* iPhone 6, 6S, 7, 8, and X */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
u ~ div .email-container {
min-width: 375px !important;
}
}
/* iPhone 6+, 7+, and 8+ */
@media only screen and (min-device-width: 414px) {
u ~ div .email-container {
min-width: 414px !important;
}
}
</style>
<!-- What it does: Helps DPI scaling in Outlook 2007-2013 -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!-- CSS Reset : END -->
<!-- Progressive Enhancements : BEGIN -->
<style>
/* What it does: Hover styles for buttons and tags */
.s-btn__primary:hover {
background: #0077CC !important;
border-color: #0077CC !important;
}
.s-btn__white:hover {
background: #EFF0F1 !important;
border-color: #EFF0F1 !important;
}
.s-btn__outlined:hover {
background: rgba(0,119,204,.05) !important;
color: #005999 !important;
}
.s-tag:hover,
.post-tag:hover {
border-color: #cee0ed !important;
background: #cee0ed !important;
}
/* What it does: Styles markdown links that we can't write inline CSS for. */
.has-markdown a,
.has-markdown a:visited {
color: #0077CC !important;
text-decoration: none !important;
}
/* What it does: Styles markdown code blocks that we can't write inline CSS for. */
code {
padding: 1px 5px;
background-color: #EFF0F1;
color: #242729;
font-size: 13px;
line-height: inherit;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
}
pre {
margin: 0 0 15px;
line-height: 17px;
background-color: #EFF0F1;
padding: 4px 8px;
border-radius: 3px;
overflow-x: auto;
}
pre code {
margin: 0 0 15px;
padding: 0;
line-height: 17px;
background-color: none;
}
/* What it does: Styles markdown blockquotes that we can't write inline CSS for. */
blockquote {
margin: 0 0 15px;
padding: 4px 10px;
background-color: #FFF8DC;
border-left: 2px solid #ffeb8e;
}
blockquote p {
padding: 4px 0;
margin: 0;
overflow-wrap: break-word;
}
/* What it does: Rounds corners in email clients that support it */
.bar {
border-radius: 5px;
}
.btr {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.bbr {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
@media screen and (max-width: 680px) {
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* Hides things in small viewports. */
.hide-on-mobile {
display: none !important;
max-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
/* What it does: Utility classes to reduce spacing for smaller viewports. */
.sm-p-none {padding: 0 !important;}
.sm-pt-none {padding-top: 0 !important;}
.sm-pb-none {padding-bottom: 0 !important;}
.sm-pr-none {padding-right: 0 !important;}
.sm-pl-none {padding-left: 0 !important;}
.sm-px-none {padding-left: 0 !important; padding-right: 0 !important;}
.sm-py-none {padding-top: 0 !important; padding-bottom: 0 !important;}
.sm-p {padding: 20px !important;}
.sm-pt {padding-top: 20px !important;}
.sm-pb {padding-bottom: 20px !important;}
.sm-pr {padding-right: 20px !important;}
.sm-pl {padding-left: 20px !important;}
.sm-px {padding-left: 20px !important; padding-right: 20px !important;}
.sm-py {padding-top: 20px !important; padding-bottom: 20px !important;}
.sm-mb {margin-bottom: 20px !important;}
/* What it does: Utility classes to kill border radius for smaller viewports. Used mainly on the email's main container(s). */
.bar,
.btr,
.bbr {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
/* Dark Mode : BEGIN */
@media (prefers-color-scheme: dark) {
.email-bg {
background: #3b4045 !important;
}
.logo-dark-mode {
display: block !important;
}
.logo-light-mode {
display: none !important;
}
.bg-white {
background-color: #242729 !important;
}
.fc-light {
color: #bbc0c4 !important;
}
.fc-medium {
color: #e4e6e8 !important;
}
.fc-dark {
color: #ffffff !important;
}
a.s-link {
color: #0095ff !important;
}
a.s-link-muted {
color: #bbc0c4 !important;
}
td.s-btn__primary {
background: #0095ff !important;
}
a.s-btn__primary {
background: #0095ff !important;
border-color: #379fef !important;
color: #0C0D0E !important;
box-shadow: none !important;
}
.s-btn__primary:hover {
background: #379fef !important;
border-color: #379fef !important;
}
.footer-divider {
border-color: #6a737c !important;
}
.footer-glyph-dark-mode {
display: block !important;
}
.footer-glyph-light-mode {
display: none !important;
}
.footer-heart {
background-color: #242729 !important;
}
.footer-heart div {
border-color: #6a737c !important;
color: #de535e !important;
}
}
/* Dark Mode : END */
</style>
<!-- Progressive Enhancements : END -->
</head>
<body width="100%" style="margin: 0; padding: 0 !important; background: #f3f3f5; mso-line-height-rule: exactly;" class="email-bg">
<center style="width: 100%; background: #f3f3f5;" class="email-bg">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f3f3f5;" class="email-bg">
<tr>
<td>
<![endif]-->
<div class="email-container" style="max-width: 680px; margin: 0 auto;">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 680px; width:100%">
<!-- Logo : BEGIN -->
<tr>
<td style="padding: 20px 30px; text-align: left;" class="sm-px">
<a href="https://stackoverflow.com/">
<img src="https://d2axdqolvqmdvx.cloudfront.net/37e3b36a-1955-430d-9788-368c11699637/logostackoverflow.png" alt="Stack Overflow logo." border="0" height="30" width="146" style="display: block; font-family: arial, sans-serif; font-size: 15px; line-height: 15px; color: #3C3F44; margin: 0;" class="logo-light-mode">
<img src="https://d2axdqolvqmdvx.cloudfront.net/7a9705e3-b98a-4c24-a163-c4d1035b8eaa/logostackoverflowlight.png" alt="Stack Overflow logo." border="0" height="30" width="146" style="display: none; font-family: arial, sans-serif; font-size: 15px; line-height: 15px; color: #3C3F44; margin: 0;" class="logo-dark-mode">
</a>
</td>
</tr>
<!-- Logo : END -->
<tr>
<td style="padding: 30px; background-color: #ffffff;" class="bg-white sm-p bar">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<!-- Team Name : BEGIN -->
<tr>
<td style="padding-bottom: 10px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" align="left">
<tr>
<td valign="middle" height="19" width="19" style="font-family: arial, sans-serif; font-size: 13px; line-height: 13px; color: #ffffff; background-color: #EB5757; font-weight: bold; text-align: center; border-radius: 3px;">
S
</td>
<td valign="middle" style="padding-left: 5px; font-family: arial, sans-serif; font-size: 13px; line-height: 13px; color: #242729; text-align: left;" class="fc-light">
SO for Teams Name
</td>
</tr>
</table>
</td>
</tr>
<!-- Team Name : END -->
<!-- Rich Text : BEGIN -->
<tr>
<td style="padding-bottom: 15px; font-family: arial, sans-serif; font-size: 15px; line-height: 21px; color: #3C3F44; text-align: left;" class="fc-medium">
<h1 style="font-weight: bold; font-size: 27px; line-height: 27px; color: #0C0D0E; margin: 0 0 15px 0;" class="fc-dark">Something happened</h1>
<p style="margin: 0 0 15px;" class="has-markdown">A starting point for more <strong>simple transactional emails</strong> with a single message. It can contain <a href="#" style="color: #0077CC; text-decoration: none;" class="s-link">links</a> or <strong>rich</strong> <em>text</em>. <a href="https://stackoverflow.design/email/typography#links-in-markdown" target="_parent" style="color: #0077CC; text-decoration: none;" class="s-link">Read this</a> if text is written in markdown.</p>
<p style="margin: 0 0 15px;">Good for emails like:</p>
<ul style="padding: 0; margin: 0; list-style-type: disc;">
<li style="margin:0 0 10px 30px;">Forgot password</li>
<li style="margin:0 0 10px 30px;">You’ve been removed from a Team</li>
<li style="margin:0 0 10px 30px;">Cart abandonment</li>
<li style="margin:0 0 10px 30px;">We've updated our privacy policy</li>
</ul>
</td>
</tr>
<!-- Rich Text : END -->
<!-- Button Row : BEGIN -->
<tr>
<td>
<!-- Button : BEGIN -->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="s-btn s-btn__primary" style="border-radius: 4px; background: #0095ff;">
<a class="s-btn s-btn__primary" href="https://stackoverflow.design/email/components/buttons" target="_parent" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #ffffff; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px; white-space: nowrap;">Medium primary button</a>
</td>
</tr>
</table>
<!-- Button : END -->
</td>
</tr>
<!-- Button Row : END -->
</table>
</td>
</tr>
<!-- Footer : BEGIN -->
<tr>
<td style="padding: 30px;" class="sm-p">
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<!-- Subscription Info : BEGIN -->
<tr>
<td style="padding-bottom: 10px; font-size: 12px; line-height: 15px; font-family: arial, sans-serif; color: #9199A1; text-align: left;" class="fc-light">
You're receiving this message because $reason$.
</td>
</tr>
<tr>
<td style="font-size: 12px; line-height: 15px; font-family: arial, sans-serif; color: #9199A1; text-align: left;">
<a href="#"
style="color: #9199A1; text-decoration: underline;" class="s-link-muted">Edit email settings</a>
<a href="https://stackoverflow.com/company/contact" style="color: #9199A1; text-decoration: underline;" class="s-link-muted">Contact us</a>
<a href="Urls.Legal.PrivacyPolicy" style="color: #9EA3A9; text-decoration: underline;" class="s-link-muted">Privacy</a>
</td>
</tr>
<!-- Subscription Info : BEGIN -->
<!-- HR line : BEGIN -->
<tr>
<td style="padding: 30px 0;" width="100%" class="sm-py">
<table aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%">
<tr>
<td height="1" width="100%" style="font-size: 0; line-height: 0; border-top: 1px solid #D6D8DB;" class="footer-divider"> </td>
</tr>
</table>
</td>
</tr>
<!-- HR line : END -->
<tr>
<td style="text-align: left;">
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation">
<!-- Sender Info : BEGIN -->
<tr>
<td style="padding: 0 10px 4px 5px;">
<img src="https://d2axdqolvqmdvx.cloudfront.net/243d2b1f-b293-4106-99fd-bd6e4c540fb9/glyphfooter.png" align="left" alt="" border="0" width="19" height="22" style="display: block; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; color: #3C3F44;" class="footer-glyph-light-mode">
<img src="https://d2axdqolvqmdvx.cloudfront.net/765a8f10-8b29-4ecb-b7b2-41c7fe04b68f/glyphfooterlight.png" align="left" alt="" border="0" width="19" height="22" style="display: none; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; color: #3C3F44;" class="footer-glyph-dark-mode">
</td>
<td style="padding: 5px 0; font-size: 12px; line-height: 15px; font-family: arial, sans-serif; color: #9199A1; text-align: left;" class="fc-light"><strong>Stack Overflow</strong>, <span class="unstyle-auto-detected-links">110 William Street, 28th Floor, New York, NY 10038</span></td>
</tr>
<!-- Sender Info : END -->
</table>
</td>
</tr>
<tr>
<!-- Heart : BEGIN -->
<td style="padding-top: 10px">
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff; border-radius:1px; line-height:0px" class="footer-heart">
<tr>
<td>
<div style="border-radius: 1px; border: 1px solid #D6D9DC; padding: 4px 6px 3px 6px; font-size: 11px; line-height: 11px; font-family: Consolas, monospace; color: #E06C77;" title="because we care"><3</div>
</td>
</tr>
</table>
</td>
<!-- Heart : END -->
</tr>
</table>
</td>
</tr>
<!-- Footer : END -->
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</center>
</body>
</html>
!
