<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<style type="text/css">
@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap);
</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
.mj-column-per-50 {
width: 50% !important;
max-width: 50%;
}
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
.moz-text-html .mj-column-per-50 {
width: 50% !important;
max-width: 50%;
}
</style>
<style type="text/css">
@media only screen and (max-width:479px) {
table.mj-full-width-mobile {
width: 100% !important;
}
td.mj-full-width-mobile {
width: auto !important;
}
}
</style>
<style type="text/css">
a {
color: #0078d4;
}
.spark-item {
margin-bottom: 100px;
}
.spark-title {
font-weight: bold;
color: #505050;
padding: 5px 0 5px 0;
font-size: 18px;
}
.spark-item-type {
opacity: 0.5;
text-transform: uppercase;
margin: 0;
font-size: 11px;
}
.spark-desc {
padding-top: 4px;
font-size: 15px;
line-height: 1.5;
}
.spark-thumb {
border: 0;
display: block;
height: auto;
width: 100%;
outline: none;
text-decoration: none;
margin: 0 0 10px 0;
}
table.mobile-container {
table-layout: fixed;
}
.icon-cell {
width: 25%;
}
.icon-cell img {
width: 100%;
height: auto;
aspect-ratio: 1;
}
</style>
</head>
<body style="word-spacing:normal;background-color:white;">
<div style="color:transparent;visibility:hidden;opacity:0;font-size:0px;border:0;max-height:1px;width:1px;margin:0px;padding:0px;border-width:0px!important;display:none!important;line-height:0px!important;"><img border="0" width="1" height="1" src="https://go.sparkpostmail2.com/q/y4fWweKDxPCSi9sX2OilxA~~/AABEfhA~/ZRe60JPDH-16pDNziG3fJ_uB_AWoF7GTsVBb35BxbHhqh9qWKmhFKT0uIEh4vkReNrOmwJfWtxFytOV7Eo-J4Q~~" alt=""/></div>
<div style="background-color:white;">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="center" style="font-size:0px;padding:0;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:600px;">
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=1200,quality=90,format=auto/codepen-spark/codepen-spark-header-special-edition-2.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:16px;" width="600" height="auto" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:12px;line-height:1.5;text-align:center;color:#333333;"><a href="https://go.sparkpostmail2.com/f/a/hVd8RtIV3fVtT_7bMnrP2w~~/AABEfhA~/8nENPHJxpWXNOodZp3k_HolrxUObdoOmtRXUiiIEE8Q6xACrg9wtuIb3B9TqG0PrBMVq7LQC3eAeGyIvgjA6OteZAYRf8DpmhRip_dpMjnpARLxwnsS-aJ5LaZHNe_7b" class="view-on-web-link"> View this issue on CodePen </a></div>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;padding-top:10px;padding-right:35px;padding-bottom:0;padding-left:35px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:16px;line-height:1.2;text-align:center;color:#333333;">
<h1>CSS Scrollytelling, Ordered Dithering, and SVG Pixelation</h1>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;padding-top:0;padding-right:35px;padding-left:35px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:16px;line-height:1.5;text-align:left;color:#333333;">
<p> This edition of The CodePen Spark is sponsored by AWS Marketplace. Learn how AI‑driven coding solutions can help you <a href="https://go.sparkpostmail2.com/f/a/Kmfvns5jGpiYl0sIvJvJBA~~/AABEfhA~/gGEPllQoo8TXLrdDR_WmC3c6tNYOxUf6YA4TpbogfT5JpvqxmWVx2yVo3F6AqSvEAFIugazehkY2TKeIZvKO4wk0_a2f2Yqb5g8murN7fSzLanv9x-z1oMQXkBVwKFzmQLMIGGh2p1GbIQcxy8pBcPEu3Th7D0HHDYgNLGMsAANcIosH8BrzbMWfyLzdBWewPutgU8FOBBIgYDWhPtvuYtgVxOnckMBGS3CeYKU00eRDDwLi3nAa9UozBzb67MbHWQBzaQmWp0-s6RbC1tVnwg~~">accelerate coding with intelligent automation</a> in their free on-demand webinar. </p>
<p>Today's CodePen community highlights include an awesome exploration of storytelling with new CSS features from Lee Meyer, a close-up look at dithering patterns from damarberlari, and a fun SVG pixelation effect from Jhey Tompkins.</p>
</div>
</td>
</tr>
<tr>
<!--<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" border="0">-->
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:550px;">
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/aws_marketplace_banner_teal.png" style="border-top:5px solid black;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:16px;" width="550" height="auto" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:150px;">
<img alt="AWS Marketplace" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=400,quality=90,format=auto/codepen-spark/aws_marketplace_white_background.jpg" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:16px;" width="150" height="auto" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:16px;line-height:1.5;text-align:left;color:#333333;">
<a href="https://go.sparkpostmail2.com/f/a/Kmfvns5jGpiYl0sIvJvJBA~~/AABEfhA~/gGEPllQoo8TXLrdDR_WmC3c6tNYOxUf6YA4TpbogfT5JpvqxmWVx2yVo3F6AqSvEAFIugazehkY2TKeIZvKO4wk0_a2f2Yqb5g8murN7fSzLanv9x-z1oMQXkBVwKFzmQLMIGGh2p1GbIQcxy8pBcPEu3Th7D0HHDYgNLGMsAANcIosH8BrzbMWfyLzdBWewPutgU8FOBBIgYDWhPtvuYtgVxOnckMBGS3CeYKU00eRDDwLi3nAa9UozBzb67MbHWQBzaQmWp0-s6RbC1tVnwg~~">
<h2 style="margin: 0; line-height: 1.3; text-wrap: pretty">
Accelerate coding with intelligent automation</h2>
</a>
<p>AI is transforming software development by enhancing coding speed, accuracy, and security. Learn how predictive code generation can automate repetitive tasks, improve debugging, and refine infrastructure as code.</p>
<p>Watch this on‑demand Amazon Web Services (AWS) webinar, How to incorporate generative AI on AWS to accelerate and secure code development, to explore how AI‑driven coding solutions, including Amazon Bedrock and AWS Marketplace tools that seamlessly integrate into your development workflow.</p>
<a href="https://go.sparkpostmail2.com/f/a/Kmfvns5jGpiYl0sIvJvJBA~~/AABEfhA~/gGEPllQoo8TXLrdDR_WmC3c6tNYOxUf6YA4TpbogfT5JpvqxmWVx2yVo3F6AqSvEAFIugazehkY2TKeIZvKO4wk0_a2f2Yqb5g8murN7fSzLanv9x-z1oMQXkBVwKFzmQLMIGGh2p1GbIQcxy8pBcPEu3Th7D0HHDYgNLGMsAANcIosH8BrzbMWfyLzdBWewPutgU8FOBBIgYDWhPtvuYtgVxOnckMBGS3CeYKU00eRDDwLi3nAa9UozBzb67MbHWQBzaQmWp0-s6RbC1tVnwg~~" style="display:block;text-align:center;width:125px;border:1px solid #008bce;font-family:Lato, system-ui, sans-serif;font-size:22px;font-weight:normal;line-height:1.5;margin:0 auto;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:6px;" target="_blank"> Watch now </a>
<p style="border-top:solid 2px #028bcd;font-size:1px;margin:20px auto;width:100%;">
</p>
<p>You will learn:</p>
<ul>
<li>How gen AI refines code based on developer feedback for smarter, more efficient development.</li>
<li>About automating and enhancing key tasks such as test writing, code refactoring, debugging, and performance optimization.</li>
<li>How to leverage infrastructure as code (IaC) to propose optimal cloud configurations.</li>
</ul>
<p style="border-top:solid 2px #028bcd;font-size:1px;margin:20px auto;width:100%;">
</p>
<strong>Webinar speakers</strong>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#a9f7e4" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="border-top: 0; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table cellpadding="0" cellspacing="0" width="100%" border="0" style="color:#333333;font-family:Lato, system-ui, sans-serif;font-size:16px;line-height:1.5;table-layout:auto;width:100%;border:none;">
<tr>
<td style="vertical-align: top; padding-right: 10px;">
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/helen_beal_aws.png" alt="Helen Beal headshot" width="80" />
</td>
<td>
<strong>Helen Beal</strong>
<p><small>Head of the Ambassador Programme, DevOps Institute, ITIL and PRINCE2, PeopleCert</small></p>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table cellpadding="0" cellspacing="0" width="100%" border="0" style="color:#333333;font-family:Lato, system-ui, sans-serif;font-size:16px;line-height:1.5;table-layout:auto;width:100%;border:none;">
<tr>
<td style="vertical-align: top; padding-right: 10px;">
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/rich_giuli_aws.png" alt="Rich Giulu headshot" width="80" />
</td>
<td>
<strong>Rich Giuli</strong>
<p><small>Principal Solutions Architect, AWS</small></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 2px #028bcd;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;">
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
</tr>
<tr>
<td height="30" style="font-size:0px;line-height:0px;height:30px;"> </td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:540px; margin:0 auto;" class="mobile-container">
</table>
</td>
</tr>
<tr>
<td height="30" style="font-size:0px;line-height:0px;height:30px;"> </td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<p style="border-top:solid 5px #000000;font-size:1px;margin:0px auto;width:100%;">
</p>
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 5px #000000;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;">
</td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#000000;"><mj-raw>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/mtVSWyjdAUFYpTLNZmn_tQ~~/AABEfhA~/Pq6PVY3-vK-_o7e3rcdnzJ4McpT4YQO36Y0eI2JG3MZAb-IM_01VurvB-9990t0FeAFBrTJBNrqYI0sxh_H9NfZ1lgweIF3I6p3PjVFf0oLeUyttLvAx-zp7VA-YDbrm2fsRzgakI0MCfg381xM3_Zi-cF5hXX7vaqd78ri9dQiqUarMgAxbyKsUvxeOLH5j">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/scrollytelling-css-tricks.png" alt="Scrollytelling on Steroids With Scroll-State Queries" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/mtVSWyjdAUFYpTLNZmn_tQ~~/AABEfhA~/Pq6PVY3-vK-_o7e3rcdnzJ4McpT4YQO36Y0eI2JG3MZAb-IM_01VurvB-9990t0FeAFBrTJBNrqYI0sxh_H9NfZ1lgweIF3I6p3PjVFf0oLeUyttLvAx-zp7VA-YDbrm2fsRzgakI0MCfg381xM3_Zi-cF5hXX7vaqd78ri9dQiqUarMgAxbyKsUvxeOLH5j">Scrollytelling on Steroids With Scroll-State Queries</a></div>
<div class="spark-desc">Lee Meyer wields new CSS scrolling capabilities to tell a story with scroll interactions in this fascinating tutorial for CSS-Tricks. Make sure to try the interactive game in the Pen!</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/rCDcfCg-jP8p2nOMNU_A_A~~/AABEfhA~/iNU39W9C5BTUns6L9fCU4LXSw0VgQ0b5rF-lSP7q9EJsDcVXw_ZmVkTi_Hew5ehJclsNg_3MKU7wIj8NwGxiVBZjtqbogJJ_MO2Vw6BO2p8ozHWLHbdEYiA7kp7TdkfJWuoZQqxBhAmASWHMtIDnYg~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/fake-3d-spinning-toggle.png" alt="Fake 3D spinning ball toggle (CSS only)" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/rCDcfCg-jP8p2nOMNU_A_A~~/AABEfhA~/iNU39W9C5BTUns6L9fCU4LXSw0VgQ0b5rF-lSP7q9EJsDcVXw_ZmVkTi_Hew5ehJclsNg_3MKU7wIj8NwGxiVBZjtqbogJJ_MO2Vw6BO2p8ozHWLHbdEYiA7kp7TdkfJWuoZQqxBhAmASWHMtIDnYg~~">Fake 3D spinning ball toggle (CSS only)</a></div>
<div class="spark-desc">Alvaro Montoro cleverly fakes a spin animation by moving a dot pattern in this "toggle component created with HTML and CSS. No images and no JS."</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/2OMLsfp8iY2Omx_KyOxYPA~~/AABEfhA~/o6EWQn1k9EsPdyEdxzvYNf47X1WUsz-41IOgtIcypwPagJDRjJi7Sgx5cUEm-3MqK56dem0mjhdW-A7q0yc_4Oqjgy1Dv8A9SJwSGxnzmDfZPdxNCE5s9xKPwKhIDdJOLWlUKsOzRrupZ02sL32FEdiJQ2ekjzRSedLGimpFnzrgGhOZAUsq6szz0DIXkiKJxVs-hlS3bewg9HGWygPTgkBnQ7Zz2Ej1Pjs-lWd5ZWU~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/add_remove_native_items.jpeg" alt="How to Add and Remove Items From a Native CSS Carousel" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/2OMLsfp8iY2Omx_KyOxYPA~~/AABEfhA~/o6EWQn1k9EsPdyEdxzvYNf47X1WUsz-41IOgtIcypwPagJDRjJi7Sgx5cUEm-3MqK56dem0mjhdW-A7q0yc_4Oqjgy1Dv8A9SJwSGxnzmDfZPdxNCE5s9xKPwKhIDdJOLWlUKsOzRrupZ02sL32FEdiJQ2ekjzRSedLGimpFnzrgGhOZAUsq6szz0DIXkiKJxVs-hlS3bewg9HGWygPTgkBnQ7Zz2Ej1Pjs-lWd5ZWU~">How to Add and Remove Items From a Native CSS Carousel</a></div>
<div class="spark-desc">" (…with CSS)". In this tutorial for Frontend Masters, Daniel Schwarz gives us the scoop on CSS Overflow Module Level 5 specs for scroll controls that let users navigate overflow content without manually scrolling.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/nscDg91S1MHs6bRkpVG5vA~~/AABEfhA~/iUOOfmZ135yG58tLc8-_0vjAENcPYBAZJ8hVl2ZrgN4M3efcxzQEkrb3NJ7fLAb3L9X-o20snc71fGltLjGFUsX6prs9U5XBgyzDQunG7vJm0aLSbHyTz9QZ-pSojy7IwtU2FLgQFGr2lWZcCev4ZQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/image-zoom-in-scrolltrigger.png" alt="Image Zoom in with ScrollTrigger" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/nscDg91S1MHs6bRkpVG5vA~~/AABEfhA~/iUOOfmZ135yG58tLc8-_0vjAENcPYBAZJ8hVl2ZrgN4M3efcxzQEkrb3NJ7fLAb3L9X-o20snc71fGltLjGFUsX6prs9U5XBgyzDQunG7vJm0aLSbHyTz9QZ-pSojy7IwtU2FLgQFGr2lWZcCev4ZQ~~">Image Zoom in with ScrollTrigger</a></div>
<div class="spark-desc">Scroll through the Hobbit door and into the shire in this fun GSAP-fueled zoom interaction from Ryan Yu.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/GOVg4WeWfu-qpSo2jputGQ~~/AABEfhA~/sgqi8FRw_oWs-YhTjV5UH7TNI5r8Ykm-Gurq10fAlEGRo92WZotB96KmPPmSagQQ4j7Tn0HQQENs3zeL6ZsSqrO25N4S-4QSWDNvNSz8X4qoLUS8KMpr4-195NSizuBAjc47Vu3Epm5CboJ1Z4o47g~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/petals-shaw.png" alt="petals" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/GOVg4WeWfu-qpSo2jputGQ~~/AABEfhA~/sgqi8FRw_oWs-YhTjV5UH7TNI5r8Ykm-Gurq10fAlEGRo92WZotB96KmPPmSagQQ4j7Tn0HQQENs3zeL6ZsSqrO25N4S-4QSWDNvNSz8X4qoLUS8KMpr4-195NSizuBAjc47Vu3Epm5CboJ1Z4o47g~~">petals</a></div>
<div class="spark-desc">Riley Shaw shares a dreamy CSS & JS flower with kaleidoscopically rotating petals 🪷</div>
</div>
</mj-raw></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:13px;line-height:1.5;text-align:left;color:#000000;"><mj-raw>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/fadVyjflwHhV9crAC8hTBw~~/AABEfhA~/LP0HgXN6ljJp2p1Gm1X2Gsezx7dDGcKvTaFs0HwiMtD1s7m9ageJNFmYNTCbgvblzE9t6p_C7NicDeui3ZecFHND32AJBoOkOubmvmxj5cXMV2sgY5BvjtCqcsExr0NS">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/css-text-grow.png" alt="CSS Text Grow" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/fadVyjflwHhV9crAC8hTBw~~/AABEfhA~/LP0HgXN6ljJp2p1Gm1X2Gsezx7dDGcKvTaFs0HwiMtD1s7m9ageJNFmYNTCbgvblzE9t6p_C7NicDeui3ZecFHND32AJBoOkOubmvmxj5cXMV2sgY5BvjtCqcsExr0NS">CSS Text Grow</a></div>
<div class="spark-desc">Adam Argyle demonstrates <code>text-grow: per-line scale;</code>, a new CSS prototype that's coming soon in Chrome 145+. Check out the video demo in Adam's post, or pop open Canary and play around with <a href="https://go.sparkpostmail2.com/f/a/NnRK0yYW45np1S8ju3H79w~~/AABEfhA~/iUOOfmZ135yG58tLc8-_0qGUbPV5uzuLQt_meJC0OqHgTgeMBFb4unF-WfvzymsLFcX-0QQA61Em0mgyuQYpF1XJkgTgM9NaITpy4ZG5DYNUVak2cHsWfOyea8GM1PBh4_xLM-tttpmFtG1rde_Wng~~">the Pen</a>.</div>
</div>
<div class="spark-item" data-type="collection">
<a href="https://go.sparkpostmail2.com/f/a/5Xd8Ih12a3-Fnor4t7qXbA~~/AABEfhA~/WU5BQ2aKe11uJmHOr1Sm026Xn7VDMnqrA18rtG3GVwQK3BHYyjuO86WQF5iV81uRPrxLc5oV-Io1kopwGgvmFGchZvzYmdPO5_y776I3VTaCgNN4UfPIq7_PM2O_zmh78r_cYVIl4TMjOWeXua4wdw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/cpc-snow-ice-col.png" alt="#CodePenChallenge: Snow and Ice" height="" width="260" />
</a>
<div class="spark-item-type">collection</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/5Xd8Ih12a3-Fnor4t7qXbA~~/AABEfhA~/WU5BQ2aKe11uJmHOr1Sm026Xn7VDMnqrA18rtG3GVwQK3BHYyjuO86WQF5iV81uRPrxLc5oV-Io1kopwGgvmFGchZvzYmdPO5_y776I3VTaCgNN4UfPIq7_PM2O_zmh78r_cYVIl4TMjOWeXua4wdw~~">#CodePenChallenge: Snow and Ice</a></div>
<div class="spark-desc">Our Winter Wonderland challenge kicked off with a flurry of snow and ice! Check out our collection from week one, including Pens by <a href="https://go.sparkpostmail2.com/f/a/SL_riBEtojPOLDLaL_K4gw~~/AABEfhA~/OIF1kkP5_cZY9zVZs19M4uQOJgXhLN8zZ6zEgcjLDJZL7XJgfJg6sn61WS8hBIk95xd5psYAqA4lDGcpKD-9gLYfkvfX2LGiBmD9fx0vWkjWGgtNNM278Rt30_X0Hc_3OevkFAZ6QTPoHZkMB9t54w~~">ikrprojects</a>, <a href="https://go.sparkpostmail2.com/f/a/QCNedlez4clwCy2dnxNQDA~~/AABEfhA~/sgqi8FRw_oWs-YhTjV5UH4lkE43Uto5jiar5CpIGJD1sOUEJtKrwvKwucX9FVujgmbPPIeNPc6n0gQ1P72BCyTAGl-Ub_5zt0r2Kxtvf7YIyYBjCnQPt3cr9GkrnC-SQm4yETKHFHjNeTd7caC_meQ~~">Nils Keller</a>, <a href="https://go.sparkpostmail2.com/f/a/Uk4yhPC9k-00LVwFFiOO1A~~/AABEfhA~/OWq3w8aXhNWaxpn93RJupTha0Sjr7wU1O4eQgGL6cjno9POLwjPYOZ-yBs-FzMSygGV2KoCbyDJvXjWHChFVwj20Yt2DHwPD9GA3lok4ja2PT9lRU8Ft9MGUM6upP9WsDgHsSAtviY54ujUVQ2V1hKFuBcBU3sxMgctIjiEFBZM~">Alexandre Vacassin</a>, and <a href="https://go.sparkpostmail2.com/f/a/xU2HUwJBXquQEr7aWrhWVA~~/AABEfhA~/OIF1kkP5_cZY9zVZs19M4pGi9RfgGsKJEaa0qlawcu37zCYBF0W0wtK7O3tWz6uRozzKdGCKim1cNtbY5Uxq6iZlHOXxvRpexJESEH9CvIrMmpiv7c1SxGvFnH87nl0rSoaGylKUZxzY-7aekg8BjA~~">Matt Cannon</a>. Ready to join in the wintertime fun? <a href="https://go.sparkpostmail2.com/f/a/DZZN5sb0l3J7TTh2FfjJIg~~/AABEfhA~/q6zw2sVQGqIxUu0TXAGbQSxefmHKXZn-xxTOo-fRVUIWzZm4jDSOFsdH3vH_iWcXH0_bVrova3c61G0kvXQzQrAa5kXTrBgeJ-6prOEDh3NhGL7U2cHb2DapnbdmCAItvIssMV_BtD8qvSYcVC66qA~~">Week two starts today</a>!</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/uwgbuiCudiC2P6KNgBMXJw~~/AABEfhA~/-hENgaLoGxcbpkoGPxMMynavTKbDHsDoCvkRiO94SpkjzdHA5sgCjuMgQ6wY-owfdC4cZZpwkNc-FGQx9ndaG5N_93idskjsd9gVg64Q-vPdEU8fukl0gAN0AaMZ8bV2QjOweJXpCyMm5R-AxVbN7g~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/ordered-dithering-closeup.png" alt="Ordered Dithering - A Close-Up Look" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/uwgbuiCudiC2P6KNgBMXJw~~/AABEfhA~/-hENgaLoGxcbpkoGPxMMynavTKbDHsDoCvkRiO94SpkjzdHA5sgCjuMgQ6wY-owfdC4cZZpwkNc-FGQx9ndaG5N_93idskjsd9gVg64Q-vPdEU8fukl0gAN0AaMZ8bV2QjOweJXpCyMm5R-AxVbN7g~~">Ordered Dithering - A Close-Up Look</a></div>
<div class="spark-desc">damarberlari gives us "a close-up look at dithering patterns produced by various threshold maps. Try different maps from the options to see the unique patterns they produce."</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/jiyAUQxeXqjfRkwyDOmAWA~~/AABEfhA~/hO9gr1dhjn2jemmiLnjFnzZClVqnb5nPLIysuT5F_Z0gzZDJgJ-vl8gbuKcD9CaWcpxwn2TXPIdmFnGjRYD0FupfZ4pyi_K-Sq3mI-iQsxNKsteo_5f_H_T_KOmaDzJqdCbcmqkjoVzzP1c5t2H4gg~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/image-pixelation-svg-jhey.png" alt="image pixelation w/svg" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/jiyAUQxeXqjfRkwyDOmAWA~~/AABEfhA~/hO9gr1dhjn2jemmiLnjFnzZClVqnb5nPLIysuT5F_Z0gzZDJgJ-vl8gbuKcD9CaWcpxwn2TXPIdmFnGjRYD0FupfZ4pyi_K-Sq3mI-iQsxNKsteo_5f_H_T_KOmaDzJqdCbcmqkjoVzzP1c5t2H4gg~~">image pixelation w/svg</a></div>
<div class="spark-desc">Jhey Tompkins uses a little SVG magic to transform a photo into a chunkily pixelated image. Use the config panel to try it out with different pixel counts, sizes, and offsets.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/F1nAGr03X9jWX1CNUTa2ww~~/AABEfhA~/sgqi8FRw_oWs-YhTjV5UH9xaciRJWrUjWxf-orG7kup-U-6HNUrSlGWgZ9CcqdEzS15JQ1ukEoBl8jNe1RbFEZ4RzObCrAmrFJgsH4DljDfTvRkX2DuZWD_42UerVdSlTB97ehq0ofbQU8miQuoHww~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/neon-sine-wave-equant.png" alt="Neon sine wave effect GLSL" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/F1nAGr03X9jWX1CNUTa2ww~~/AABEfhA~/sgqi8FRw_oWs-YhTjV5UH9xaciRJWrUjWxf-orG7kup-U-6HNUrSlGWgZ9CcqdEzS15JQ1ukEoBl8jNe1RbFEZ4RzObCrAmrFJgsH4DljDfTvRkX2DuZWD_42UerVdSlTB97ehq0ofbQU8miQuoHww~~">Neon sine wave effect GLSL</a></div>
<div class="spark-desc">A gleaming sine wave pulses through this GLSL animation from Fabio E Zola. You can pause the animation, take a screenshot, or toggle the pixel ratio from the control panel up top.</div>
</div>
</mj-raw></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:16px;line-height:1.5;text-align:left;color:#000000;"><mj-raw>
<h2 class="corner-header">
<img src="https://assets.codepen.io/t-1/chriscorner.png" style="width: 65px; border-radius: 4px;" /> Chris’ Corner
</h2>
<p class="corner-intro">A collection of web design and development news and thoughts from CodePen's own Chris Coyier.</p>
</mj-raw>
<h3>HTML</h3>
<p>There’s a new term in town: <a href="https://go.sparkpostmail2.com/f/a/lwN7WRiZmcyAXDdaD0SFyA~~/AABEfhA~/QOniuqWhb766Mxg8VsIl8OSYu-XA7v3A0A1AZvjuNmvi_KCmnEApad_3CVj5-AcJY5gjja-5mgBUFoqAW6arFYSuETGr4kaHAh8Id-VMPfxxwJsFbLG-ylPa24e6iogeAbLjj6SRoJ7fQKeTOx5XVdf-OLofzpcAXCPfuzX4gMgJFc20rjyIPL86fRDODagc"><em>soft</em> navigations</a>. Basically it means “single page app” (SPA) style navigations where page stuff changes, and the URL changes, but the browser didn’t do a traditional full-reload thing. I like the term in the sense that it sounds like a light insult. Whattaya too weak, <em>child</em>, to do a <em>proper</em> page load? Whattaya <em>soft</em>? Anyway the point of it is so that the browser itself has a way to detect these things, and testing Core Web Vitals is the entire reason. That feels like kind of a light reason to introduce a whole new API, but Google invented Core Web Vitals and their in-house initiatives like that get the juice.</p>
<p>And the out-of-house initiatives sometimes get the boot. So when there is a cool new image format in town, like <a href="https://go.sparkpostmail2.com/f/a/sklgoVpnRABBI7ScXMNtGw~~/AABEfhA~/HmtWcCWXETNTQ4-QSOYthlhQENbyvL0OQ-tqeLnrxWXhxnzRGbVvgKY7pRFq0qJaXc-8Q-yg2wgdK8YEbC6TOY6bgfXeyi-LBnAUG2bI7I_-7LkX-1HSV8vtfFrYO7P-">JPEG XL</a>, that isn’t from Google, things get weird. <a href="https://go.sparkpostmail2.com/f/a/aZW8UMEp0yiGth5sE54gDA~~/AABEfhA~/uSHWb9FHAVf2E_anaEeFpF90c6hd1_oUTfwsKhwznAj76wDxuvSuXo38avIA1YiACwu7qvJ0MzzOrRyNyxIaXqxsRUay7xldXXzPc1R6nw4DIBToRdtf1DGgk_rCFBjm">Declan Chidlow</a> wrote about this in <a href="https://go.sparkpostmail2.com/f/a/yIMCApjZuCJTIKcxppuVCQ~~/AABEfhA~/EdWZJvn9nY4A6IwX3AhPSN1su0G22pnNJe-V_FtauxQoNzEt5eJDZ3jxO85WvZZ0IyuD71cfqCU1PAcDr96jb2wb0seQw1A1L7iCSpVEpCSf6KigddkIkhpb0m6GbANGA2wWUDLg52D9jPbs3aBMXgvALEWRqabuu0H-_w5p1Yo~">JPEG XL and Google’s War Against It</a>. Google invented WebP in-house, so people feel it’s protected over better technology.</p>
<blockquote><p>This would also partly explain why they adopted AVIF but not JPEG XL. AVIF wasn’t superior in every way and, as such, didn’t threaten to dethrone WebP.</p>
<p>JPEG XL, however, <strong>is</strong> better than WebP in every quantifiable way and would obsolete it.</p>
</blockquote>
<p>But Google can do what they want with Chrome. It’s theirs, after all, a fact <a href="https://go.sparkpostmail2.com/f/a/zTJFFOCWOwsDlCNAcZBoyg~~/AABEfhA~/dVyA0uphWS4GUCjs_c_hPLFZBULJGADw-LtYFEWs5YI39o0pJRC-OLB5NWd0YCrwydUcSEzv0P-L1XntcvqkRFCLqtTm6ec9pAC8PoayVrBNtK8kmT9E6zSfwFPAbeLnjlm_dMEjhFRJX3J3dVSug71-BNl4PWwx5vovyXb2yjfWXu7yZNO6x8hoHsdF_zxo">just recently confirmed</a>. That’s for the better, if you ask me, but it does serve to tighten the iron grip they have over the web generally.</p>
<hr />
<p>This is putting me in an HTML-y mood so allow me to share a few more HTML-y things.</p>
<p>I found Alex MacArthur’s article <a href="https://go.sparkpostmail2.com/f/a/NVY4YHHa5CAW9xhh9qhl5g~~/AABEfhA~/uHWxBZyf0pDA24OLb3p1U8YgppCiyCh5wUrGZa25A_I7dZYsaRxhyv1rwBLM_4gpopx2Ba1hzn4Goandotq1Fas9WwlUP3wGwVOmR6JoiKSQQkEZStsK2p3ApCr94rJHTbqJvC-UUEGzRrvCu66ViH5SMnKwXI7H8IFrk4QIwaQ~">TIL: A Link’s Download Attribute Won’t “Just Work” for Cross-Origin Resources</a> from a few years ago very useful recently. See, you’ll see advice where if you want a link-click on a website to immediately download a file, you just put the <code>download</code> attribute on it, like:</p>
<pre><code class="html"><a href="/files/thing.pdf" download>
Download PDF
</a></code></pre>
<p>But what nobody tells you is that if the URL is cross-origin, that just straight up doesn’t work.</p>
<pre><code class="html"><a href="https://api.site.com/files/thing.pdf" download>
Download PDF
</a></code></pre>
<p>So thankfully we have people like Alex to dig around and to the research and blog the answer, which is that you need the server to serve that file with a <code>Content-Disposition</code> header. Phew.</p>
<hr />
<p>Ya know how there’s a little thing people call <em>best practices</em>? Some people seek them out. Some people poke fun at them like they know better. I’m more the former, myself. Be like <a href="https://go.sparkpostmail2.com/f/a/RwMClHWPh2OihYxYLe-oeA~~/AABEfhA~/0QwMJtudCXvj1NZYmG-QFQOm-ePuAzzr7g_WKbDCFKwH1dK6PgKsiwNvjOxSzmTh05UQHZ9Ivtq7HQPaHbzXaeCD0O4BwcMJNcMaJ6wT5g6-PJx3exbOojJN-RlhSkiqpk0kUt1tVRf_eN6G2NTxfBy_Ex0hIKLPNQIj7DO7iq0~">Chesterton</a>, before you tear down a fence, know why it was built in the first place. The best practices are the fence, see.</p>
<p>A classic best practice is that you don’t duplicate IDs on HTML attributes. You’re told to not do it, but less often, why not to do it. I best most of you could think of at least one reason. Right away I think about how <code>getElementById</code> will only find the first one, which may or may not be what any given code is aiming for. I think about hash links and they’ll only scroll to the first find, which again might be a mis-aim. Other elements that point toward an element with the ID (think <code>for</code> or <code>aria-labelledby</code>) might miss their aim too.</p>
<p>Welp, that’s three. Enough for you? Maybe you think… well those don’t apply to this current website I’m working on. And the fact that a <code>#id</code> selector matches multiple elements just fine in CSS is little a little shrine for you to hang your hat and say you just don’t care about this little “best practice”.</p>
<p><a href="https://go.sparkpostmail2.com/f/a/zs_8nRXc62DLbCzwHD3lFw~~/AABEfhA~/iG4QTji7i850mY3z5GjQrTlV7jk5WXV3bXtudGAC0RCd_xpvLZp6tVWmHHrgaDSNoWNhPcYpRagce8oRKCACQKtpQwZ5j7JDWwqfLigw6dmxyqDc1EdVHQnqpvVZ8bdaOvLDagfW795h9dd-bQSn6_7vYWmAVI6iTQy4dA0leYk~">Here’s Lee Amador with a couple of more examples</a>. Maybe there are more. But that’s why this is a best practice. Just lock in your brain that you don’t duplicate IDs and you avoid every possible problem with no downside.</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:25px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Lato, system-ui, sans-serif;font-size:16px;line-height:1.5;text-align:left;color:#999999;">
<p class="subscription-details"> You can adjust your <a href="https://go.sparkpostmail2.com/f/a/pyFXw2ODGcFf3RwW4Tj8gQ~~/AABEfhA~/sgqi8FRw_oWs-YhTjV5UH12caHhxx-VIsgFXAt_WdZz8FkVs76x0rE_1fDehbhcYFWeUSKL_K-WbZvm6YTbRCA34F1PznwRJiGwDrKZW3_cjTUbI4vE9yZcQr8ezHWSMj_YK2A0xAr--nUEDDU3zuA~~"> email preferences </a> any time, or <a href="https://go.sparkpostmail2.com/f/a/w4mBnjEAYFsrqyYT4QJbNA~~/AABEfhA~/Oc2q1Kn4sVFno5306uRPO8U4Z6XrqObmcotsOAQDfP_2IK5_rV2zUQ_T_MjPGgUAFW_OWNvnMsDGnrmT-NH-pbqWP9CPUM8Yr3Tnep2eFuCzKnF3I4bN42rpDlVVTcnvbdh-RgAH0PEiArZwOsA2lOLeTCn6_D4ITakuCYwFsF_oCHBVUIHG0rCL1el4p1fwjxpFpncPW0XopG6mF4PADHr-E1lJwmGWHkWh2SS_UQPTWwqy-qjhM5jLkrXeFB-ypsATZRARr8yL1HUvY6P6-gIghMsq1jWvyh7tppe2OA7mmcO9Jz176pNKtpS-LsPvX70siAdAi8SHgSosFdt7GYirKOTHIN7KhuY5WB3BlUs~"> instantly unsubscribe </a> from emails of this kind. Need help with anything? Hit up <a href="https://go.sparkpostmail2.com/f/a/16F6xewrbmqz2_8PSLt2Xg~~/AABEfhA~/avNMmsNgwzHrP9CsUld_OBVOocMPRKy3u_ejsxzkSGTJXDKlIUc1NfG2RD2HI-ac5NbGNS3n29lVkB75QEWKBcq_eM1xMDg5XQNIqtGIyilsjisKNh8uTxgvtqcepUs2">support</a>. Interested in sponsoring? Here's our <a href="https://go.sparkpostmail2.com/f/a/Qrdlbbb6wurkHBr3fRtRFw~~/AABEfhA~/8nENPHJxpWXNOodZp3k_HgK8V4zHvW_8OMSeNZ98_UYamjW6TtKQpHr56QvKuYBt6IFAdI1KRcvV-b6zboVyr430HmiQIWbwb9HPUSPqjrnejur1DEsGrzrKBBkDTSka">sponsorship info</a>. </p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><![endif]-->
<div class="footer-bar"></div>
<!--[if mso | IE]></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
<img border="0" width="1" height="1" alt="" src="https://go.sparkpostmail2.com/q/mLbvbn__fB1iztQ0GqDwaQ~~/AABEfhA~/-RChmpG3VIetlnEhY2Yj18FvSqNmdo5yr3EdBuucHqHSFQjhr1s3aeYgQNX9GqjfYuRwR5dUMJ5f-OGA9uyUuw~~">
</body>
</html>
