<!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 {
border: 0;
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">
.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;
}
</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/0jjCY9F4jrZvmnHlKJcl3w~~/AABEfhA~/bqLeVDzJRIrdsns0Ocp7oWeFlOvxzGwrzcKTKAUEQDywTZOfQCUi-Ul763DnHpG84q8eL5rYgQq6a2qC2s8lWA~~" 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: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="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/special-edition-spark-header.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/zbehhC6PmsMi2ZxDyvDjpg~~/AABEfhA~/rU7l0_xwjYRW-8eEi5eAkYBey3lZk0XYUORT3oygDaS-f82c9ZaU2SGWYymKJjRKEPjghpePIIed9mWasphWEAhuUCUkCKsujuu9TIDN9X1FGq2Ry_AAqU_1Wxz8Zcjj" 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>Elastic Text, Flippin' Menus, and Style Range Queries</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 <a href="https://go.sparkpostmail2.com/f/a/G8xHJIRDXnFeUtzugMrw_g~~/AABEfhA~/dRig7Q5PVKrOnENA02XoDf0P35eijib_VQCHvfDIFUfalzxD8vIRI7KfOdUdlANJOgRSgEo1kjwiZ20ewcwYmFA9a23Rpdxa8uDPjFFtQdOJkc2D7gv-MSY-UkQ5Pt1d1uPjHc3NMXFy_6YQWhA_ekK270AQQkvgR6yMdMWwUP7jTBEiXxJ2u-gTwLjL3bwWyYv54YHRK_fAX7CSXAlnCvzWKFZupz_qAYCzN_sdb4pNsJP91tda5hUFkfBwZmB3LpPoBZJvAbLqzuu3x__izg~~">AWS Marketplace</a>. Read their free new ebook and learn how to modernize development, deploy with confidence, and scale securely on AWS.</p>
<p>This week's CodePen community highlights include a tutorial on how to create bouncy, elastic text effects with just CSS from Temani Afif, a menu with a flippin' cool image effect by Vivi Tseng, and a tool for exploring range queries in the CSS <code>if()</code> function from Una Kravets.</p>
<p>Plus, the CodePen Challenge community builds color palettes, and Michael Watts experiments with glass distortion.</p>
</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="#f5f5f5" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#f5f5f5;background-color:#f5f5f5;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#f5f5f5;background-color:#f5f5f5;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:#333333;"><a href="https://go.sparkpostmail2.com/f/a/G8xHJIRDXnFeUtzugMrw_g~~/AABEfhA~/dRig7Q5PVKrOnENA02XoDf0P35eijib_VQCHvfDIFUfalzxD8vIRI7KfOdUdlANJOgRSgEo1kjwiZ20ewcwYmFA9a23Rpdxa8uDPjFFtQdOJkc2D7gv-MSY-UkQ5Pt1d1uPjHc3NMXFy_6YQWhA_ekK270AQQkvgR6yMdMWwUP7jTBEiXxJ2u-gTwLjL3bwWyYv54YHRK_fAX7CSXAlnCvzWKFZupz_qAYCzN_sdb4pNsJP91tda5hUFkfBwZmB3LpPoBZJvAbLqzuu3x__izg~~">
<img style="display: block; margin: 0 auto; width: 325px; box-shadow: rgba(17, 12, 46, 0.45) 0px 48px 100px 0px; border-radius: 10px;" width="100%" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/AWS_Marketplace_Q1-25_DevOps_Cloud-Native-Compilation-Ebook_ROI_Banners_REFRESH_011426-5p_600x600-1.png" />
</a></div>
</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;">
<p> Modern application teams must move quickly while maintaining security and reliability. In this Amazon Web Services (AWS) ebook, learn how cloud-native DevOps practices on AWS help organizations modernize application development, improve deployment velocity, and deliver greater business value.</p>
<strong>You'll learn:</strong>
<ul>
<li>Modern development approaches for real-world use cases.</li>
<li>When and why to use purpose-built databases.</li>
<li>How to implement reliable continuous deployment.</li>
<li>How DevSecOps strengthens security and speed.</li>
</ul>
</div>
</td>
</tr>
<tr>
<td align="center" vertical-align="middle" style="font-size:0px;padding:10px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
<tbody>
<tr>
<td align="center" bgcolor="#fdf8c3" role="presentation" style="cursor:auto;mso-padding-alt:10px 25px;background:#fdf8c3;" valign="middle">
<a href="https://go.sparkpostmail2.com/f/a/G8xHJIRDXnFeUtzugMrw_g~~/AABEfhA~/dRig7Q5PVKrOnENA02XoDf0P35eijib_VQCHvfDIFUfalzxD8vIRI7KfOdUdlANJOgRSgEo1kjwiZ20ewcwYmFA9a23Rpdxa8uDPjFFtQdOJkc2D7gv-MSY-UkQ5Pt1d1uPjHc3NMXFy_6YQWhA_ekK270AQQkvgR6yMdMWwUP7jTBEiXxJ2u-gTwLjL3bwWyYv54YHRK_fAX7CSXAlnCvzWKFZupz_qAYCzN_sdb4pNsJP91tda5hUFkfBwZmB3LpPoBZJvAbLqzuu3x__izg~~" style="display:inline-block;background:teal;color:white;font-family:Lato, system-ui, sans-serif;font-size:22px;font-weight:normal;line-height:1.5;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;" target="_blank"> Download Now </a>
</td>
</tr>
</tbody>
</table>
</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/zaMLTlCxepaX9Mam2IsQIw~~/AABEfhA~/2xCQ3tzjnZOV1Dy1_BRP5LUkFKpqmcVh54TEnW80HpU0_yl5CyIwXGzyJh2H7rEBj54SM2c1gMxgAmItj2roarfMjSic5xh8rCdxso7fRB4m-JfmhyGZAmfkF3AiV8KwZZeC1oi7dVijeDdlEF1exgjnZNJKdNE7jahhiICyF01pMF3hQ1zmxF8c8MPWIiwl">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/wiggle_temani_afif.jpeg" alt="How to Create a CSS-only Elastic Text Effect" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/zaMLTlCxepaX9Mam2IsQIw~~/AABEfhA~/2xCQ3tzjnZOV1Dy1_BRP5LUkFKpqmcVh54TEnW80HpU0_yl5CyIwXGzyJh2H7rEBj54SM2c1gMxgAmItj2roarfMjSic5xh8rCdxso7fRB4m-JfmhyGZAmfkF3AiV8KwZZeC1oi7dVijeDdlEF1exgjnZNJKdNE7jahhiICyF01pMF3hQ1zmxF8c8MPWIiwl">How to Create a CSS-only Elastic Text Effect</a></div>
<div class="spark-desc">Temani Afif shows us how to create a text effect with a trampoline-like bounce on hover in this excellent tutorial for Frontend Masters, complete with embedded Pen demos for every bouncy step of the way.</div>
</div>
<div class="spark-item" data-type="collection">
<a href="https://go.sparkpostmail2.com/f/a/1yt_iNy4Dqeuv94Ckqg_jQ~~/AABEfhA~/ic5blfZluT9RWgcxR7efdltXHjBLopCVfGJgiydx22uMrfTxNQfj6rupAILtLygPuMCiOWvbvTH1NITWHnIGenIPGMgUuQc5ekSXp5EDW3maanYEfTmwWxmmOQt7Dznvjgt7lK7yWxqAQlCcqZ9JqQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/cpc-palettes-col.png" alt="CodePen Challenge: Color Palettes" height="" width="260" />
</a>
<div class="spark-item-type">collection</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/1yt_iNy4Dqeuv94Ckqg_jQ~~/AABEfhA~/ic5blfZluT9RWgcxR7efdltXHjBLopCVfGJgiydx22uMrfTxNQfj6rupAILtLygPuMCiOWvbvTH1NITWHnIGenIPGMgUuQc5ekSXp5EDW3maanYEfTmwWxmmOQt7Dznvjgt7lK7yWxqAQlCcqZ9JqQ~~">CodePen Challenge: Color Palettes</a></div>
<div class="spark-desc">In week two of our Colors challenge we created color palettes. Check out our palettes collection, including Pens by <a href="https://go.sparkpostmail2.com/f/a/UUSXZWbveMngwp28fVfkOQ~~/AABEfhA~/mfbhIklICDxu99TwaQFiW3swtjP53JvWJcel5CDGAF141-wg0D97hT0bnsCW4r0XXlT5qV-aojuPXJXafOVwkMg2dPDYuRHaT5XIBxYO7X837KVzKLhcZFSJl6Gje6Uln6uGtxK-QU7O907GEk5Sqw~~">Mads Stoumann</a>, <a href="https://go.sparkpostmail2.com/f/a/hLBELvHRhP_xia6leeqKQw~~/AABEfhA~/Yv4-hzuif-k3fzEpJMeRHyeUDk-rzy8zf5923Rqe7-gaFc39MPfwYmuqPcTMq4smozHbL-nf2-V4ks9owiJGLs4I23zrBJDQOQtgl_ml78IpnHDTigvDESuiBMBid2iiDGlL6JWyVaiMJa-L4BMpyixuk_O1NCm0b6ce-kxc31o~">russell-henderson</a>, <a href="https://go.sparkpostmail2.com/f/a/ok06K8RX2yzRkWkBOMYgUQ~~/AABEfhA~/R9A6_Ug86B9Vcv3pbrtCRZaw2uVLMUZWwxU_-NEz45MSyYPkhIHTlhvf0Snyx-TD6Tap5px0B5pAI9A-xJzuwIYcjgaX7t_CtEMKo0wBXN7EleHqjdv9tndSILOLg45XX0IIdatDtr7MuWPm_VCeDg~~">Hola Soy Malva</a>, and <a href="https://go.sparkpostmail2.com/f/a/jh0aCA9A30_qUoj_iFKLtA~~/AABEfhA~/J59XsrpWgS3Zog591VPPfJehLbxb9E8IjhwHIdVEVdqCH8KQDhYx_CJ8hU0wDSjQZVXUsQoeYSnJWqbJ91S0-nptCqWl3w5qUOYhkvlZdQN0wHY2mFeDiVNg0Z8mfWLwvFV1kxPMveN5xiD_9CQAxA~~">H-L-the-lessful</a>.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/RMh8nXOWzSc7PNiuNlW3Bw~~/AABEfhA~/mfbhIklICDxu99TwaQFiWzChkdThrD7mMVKajUgi5ttvdLYF-wcC0FzIhrbySckbwvVS5J2WCo4220dZqo6dfpYszMkFCcnhRcDGZE9MzhHGLtHoEwO5R2vhfg0II9fURg_bAMwUaa3GnvyV2AfArw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/glass-displacement-effect.png" alt="Glass displacement effect" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/RMh8nXOWzSc7PNiuNlW3Bw~~/AABEfhA~/mfbhIklICDxu99TwaQFiWzChkdThrD7mMVKajUgi5ttvdLYF-wcC0FzIhrbySckbwvVS5J2WCo4220dZqo6dfpYszMkFCcnhRcDGZE9MzhHGLtHoEwO5R2vhfg0II9fURg_bAMwUaa3GnvyV2AfArw~~">Glass displacement effect</a></div>
<div class="spark-desc">Michael Watts shares variations on the liquid glass-like theme with "three 'pills' that you can drag around the screen to see their effect on the underlying content. The first is a glass-like effect that offsets and distorts the content underneath using RGB offsets and a displacement map with gradient image."</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/77S6BsWqUxKJduUXtbyEbA~~/AABEfhA~/JrsQfETnlJmhtu_yWFkdqcYqZuz5WdMsP6Vf_RXcPStXCLlZ0sXvK1BSmRZ8kc61Lyq-ZPLAHxFuBcjducFbJATcXraquLiTCdOiBGpZPQBvn959Ft6GM5BwjGNi0-2Jv_MccSF6wtW5nEw-mOoxcA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/good-morning-aaaaaa.png" alt="Good morning A-A-A-A-A" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/77S6BsWqUxKJduUXtbyEbA~~/AABEfhA~/JrsQfETnlJmhtu_yWFkdqcYqZuz5WdMsP6Vf_RXcPStXCLlZ0sXvK1BSmRZ8kc61Lyq-ZPLAHxFuBcjducFbJATcXraquLiTCdOiBGpZPQBvn959Ft6GM5BwjGNi0-2Jv_MccSF6wtW5nEw-mOoxcA~~">Good morning A-A-A-A-A</a></div>
<div class="spark-desc">Andry Zirka shares a relatable comic and an excellent demonstration of text-on-path in SVG with this cartoon racoon who is <em>not</em> a morning person.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/WGS9KM7heEaJqX1Bw3c0MQ~~/AABEfhA~/7X7EchbX_1t1udet3f7NbkVElb-cVIhTK9_-7MFZ-nniKCb9SpqcMqKGtslwRXZlbNEv4-a67zEVExM96ejSdPdkEuEOaSaPKNxHuIrdw8dESW-DEtvuhGX-Ug1Y0B3QOrCDVQ9n9-RHzHa_I_VW8g~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/lazy-maze-runner.png" alt="Lazy Maze-runner" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/WGS9KM7heEaJqX1Bw3c0MQ~~/AABEfhA~/7X7EchbX_1t1udet3f7NbkVElb-cVIhTK9_-7MFZ-nniKCb9SpqcMqKGtslwRXZlbNEv4-a67zEVExM96ejSdPdkEuEOaSaPKNxHuIrdw8dESW-DEtvuhGX-Ug1Y0B3QOrCDVQ9n9-RHzHa_I_VW8g~~">Lazy Maze-runner</a></div>
<div class="spark-desc">leimapapa spins up an SVG animation of a rotating, self-solving maze that could make a really cool loader.</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="pen">
<a href="https://go.sparkpostmail2.com/f/a/8ZFFa9A7dtZrp_z5kapJ6Q~~/AABEfhA~/KuRYEAIoaPlyJBN7Zue-Oa_wq6h0bu6mX5GHeipQaVSvpe_xgdMFNm_Y_bifpAzT37vy9dQvpw8EARJGyYCCBWA9Lf1Owf6-INHW0zvYOAJ37siMPOxumm8AxsmeAtQg4TjHB0Tj4O5BfNmGtXDX_Q~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/animated-slider-nidal95.png" alt="Animated Slider" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/8ZFFa9A7dtZrp_z5kapJ6Q~~/AABEfhA~/KuRYEAIoaPlyJBN7Zue-Oa_wq6h0bu6mX5GHeipQaVSvpe_xgdMFNm_Y_bifpAzT37vy9dQvpw8EARJGyYCCBWA9Lf1Owf6-INHW0zvYOAJ37siMPOxumm8AxsmeAtQg4TjHB0Tj4O5BfNmGtXDX_Q~~">Animated Slider</a></div>
<div class="spark-desc">Nidal95's slick GSAP-powered slider features a fun text effect where the titles slide in letter-by-letter as each photo slides into focus.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/_7BFBiYSqzHZQdXa22KQ2w~~/AABEfhA~/jD5rR4WevkTXYz-nV8uZ6nRWfY0bhS_6Lebgi8NKBaTTkNpGFxMC6hdCKZLpwHGu-O8Jw104BChTncniVZlL-44FLyQN7jiorwii2jWIf-nzv_TrS-p3AFx2xOYhx1XDnMN4FH3MwcO1FNKALSGSsA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/menu_thumbnail_flip.png" alt="menu thumbnail flip animation" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/_7BFBiYSqzHZQdXa22KQ2w~~/AABEfhA~/jD5rR4WevkTXYz-nV8uZ6nRWfY0bhS_6Lebgi8NKBaTTkNpGFxMC6hdCKZLpwHGu-O8Jw104BChTncniVZlL-44FLyQN7jiorwii2jWIf-nzv_TrS-p3AFx2xOYhx1XDnMN4FH3MwcO1FNKALSGSsA~~">menu thumbnail flip animation</a></div>
<div class="spark-desc">Hover your way down the menu in this Pen from Vivi Tseng and watch the thumbnail image flip down and change as you go. Want to slow the roll? Toggle on "Slow Mode" up top.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/pUhl9cWQa9aA2C_zwoKhmw~~/AABEfhA~/mfbhIklICDxu99TwaQFiWy-yw5Sl7vu-3GqWijdi1kfY-Odae-2S6uy6yYwrzTNBOQetTUl9_tEf-2fSZfpNYawIs0BKTjVF3pV89uECgHDhCTwHjkUcV4blhbciWor6Ty-r3DCG2HKQY8_6KFsWjQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/3d-embossing-image.png" alt="3D Embossing Image" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/pUhl9cWQa9aA2C_zwoKhmw~~/AABEfhA~/mfbhIklICDxu99TwaQFiWy-yw5Sl7vu-3GqWijdi1kfY-Odae-2S6uy6yYwrzTNBOQetTUl9_tEf-2fSZfpNYawIs0BKTjVF3pV89uECgHDhCTwHjkUcV4blhbciWor6Ty-r3DCG2HKQY8_6KFsWjQ~~">3D Embossing Image</a></div>
<div class="spark-desc">This Three.js scene from Sabo Sugi is impressive right off the bat, but it gets <em>interesting</em> when you start playing with the controls. Start by dragging the "Depth Power" setting, then try the "Inverse Depth" š®</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/QoTcIqNLt6dpswbDytNrLA~~/AABEfhA~/KuRYEAIoaPlyJBN7Zue-OWKLUiDFBJTt_820UhPJFwFKqanDMl8SiqAoP6pYk9PxI7VsqakAj954YCvFSGwsJI29BeN-76F5J9PtVaQ5v53m8B51xBpgf5rQap_Qspg5jrvR0H1Kzzu8DjNpNELo2Q~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/picket-fence-animation.png" alt="Picket fence animation using scroll animations" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/QoTcIqNLt6dpswbDytNrLA~~/AABEfhA~/KuRYEAIoaPlyJBN7Zue-OWKLUiDFBJTt_820UhPJFwFKqanDMl8SiqAoP6pYk9PxI7VsqakAj954YCvFSGwsJI29BeN-76F5J9PtVaQ5v53m8B51xBpgf5rQap_Qspg5jrvR0H1Kzzu8DjNpNELo2Q~~">Picket fence animation using scroll animations</a></div>
<div class="spark-desc">Scroll down to start the zoetrope-like animation in this Pen from Chris Bolson. You control the animation speed with how fast or slow you scroll. Toggle between a runner, cheetah, and BMX trickster and watch 'em go!</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/DLe65Pm5ishZVcY6Z8BF4g~~/AABEfhA~/tJA8A8FCPBj6DtqGzmTQdEWsVnjBYAJMq9GaXORr3wwsL2zS8kpXqmvtEMY4Qdsn0tRQPZ7o5GmGS6P0iTVSqhO_t8lxBoNDmr8wMs4cN8xGmqjnLkByHGlYCgF7FudkehA_Tp5JNSBHhYsb0ZkJ6Q~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/style-range-queries-explorer.png" alt="Style range queries explorer" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/DLe65Pm5ishZVcY6Z8BF4g~~/AABEfhA~/tJA8A8FCPBj6DtqGzmTQdEWsVnjBYAJMq9GaXORr3wwsL2zS8kpXqmvtEMY4Qdsn0tRQPZ7o5GmGS6P0iTVSqhO_t8lxBoNDmr8wMs4cN8xGmqjnLkByHGlYCgF7FudkehA_Tp5JNSBHhYsb0ZkJ6Q~~">Style range queries explorer</a></div>
<div class="spark-desc">As of Chrome 142, style queries can respond to a range of values, not just predefined states. Una Kravets built this interactive range query explorer to help you get your mind around the idea. Read more in Una's article, <a href="https://go.sparkpostmail2.com/f/a/ICh6fhaqt3W4SlRSJlO9qg~~/AABEfhA~/tJA8A8FCPBj6DtqGzmTQdANy47ozFv388y8XCzdWUYGLydAUnphJjOTZNtuRvWAl6egBK-eLzc5gXdA2lcrW_zHQj8D_uVnIfO-F7KtbLhjkrFXMmnnfLZC04O1FL077_LFQGzzUjjh5EOQfvUAVgw~~">Range Syntax for Style Queries</a>.</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>
<p>Individual fresh CSS features can be amazing, but I always say itās the most impressive when they go <em>together</em>. Adam Argyle knocked one out of the park with his modestly named <a href="https://go.sparkpostmail2.com/f/a/qFHP99fMYZSxWyXoesdRYA~~/AABEfhA~/dV4JToXFdLah_uzwjzagCedJtPxWnMrcG5EHe98s8ly6kXllO2pTysCuQ_gvewyhOiUzdYyZh93E-1qbgbrFlACjSndy_Hsth7DB_rCFOGG-9NMq7S-Dq2p51u4mUm8I">Nice Select</a> post & <a href="https://go.sparkpostmail2.com/f/a/qFHP99fMYZSxWyXoesdRYA~~/AABEfhA~/dV4JToXFdLah_uzwjzagCedJtPxWnMrcG5EHe98s8ly6kXllO2pTysCuQ_gvewyhOiUzdYyZh93E-1qbgbrFlACjSndy_Hsth7DB_rCFOGG-9NMq7S-Dq2p51u4mUm8I">demo</a>. His own post lists all the CSS features that went into it, but Iāll do a quick overview.</p>
<img src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/nice_selects_demo.jpeg" alt="" width="400"/>
<ul>
<li>The core of it is these are āCustom Selectsā meaning a native <code><select></code> element with <code>appearance: base-select</code> applied. That unlocks the ability to essentially style any part of it any way you want. (By the way, <a href="https://go.sparkpostmail2.com/f/a/1vJm6t-2l2wV2sA6C4mUdA~~/AABEfhA~/sZ0v2RwoPlm_8-yBmgo_8UASb-J3IMiF_ho190vIUv6amlZZk0PqGBJeDz_9nn_MBwTv_mDZGZlIeXm4YLTW8D4gmmMyR7P296HKCAJETLnwxVimJ82I9CX6QJ9Z9BDndNjWrIrNUeg1lF3LQhQXHNVqAfOLaTiIUAwn9-kbCBlTXDYaxHvM5dcyHXR0R5NXC_jOcaeUisbSAw5CTMl36A~~">multi-selects are very close now too</a>.)</li>
<li>The opened menu is positioned with anchor positioning and have great edge-detection fallbacks.</li>
<li>The menus animate both opening and closing thanks to <code>@starting-style</code> and <code>allow-discrete</code> transitions.</li>
<li>The scrolling menus have slightly customized scrollbar styles and a subtle animation where the fade in from the edges via a <code>view()</code> style scroll-driven animation.</li>
<li>Logical properties, color schemes, and user preferences are used so users needs are taken into account.</li>
<li>The headers within the menus are sticky with custom styling when stuck.</li>
</ul>
<p>And honestly, a whole bunch more. Perhaps on their own, each of these features is like <em>hey, thatās kinda neat</em>, but when you start looking at all these CSS improvements combined, you can see how wildly powerful CSS has become. You might say CSS has become a <a href="https://go.sparkpostmail2.com/f/a/g1k3kMK4Ghq0NQUvpy_m8Q~~/AABEfhA~/r1FwDY7jT0-DwrPNL8AzvD2lkN2-Vn-5VEgfvKHOG-CVWURNB09jV5Zg-Rw94mi4DqR2Nnw7iDqu_i824wDmVOSmX8B2Zr9pkd0FyxrFXWPNQpqbggk5Ofn_4K2DBGG90GTshjz6UvG80seJxTP7WZupi8ED4WqQN2rcaPhFhbq6QKwKcDoUOe4z6lfvUD2C050bKbu-NHgJRnggK4oVmw~~">much more intelligent language</a>.</p>
<p>What do we still want from CSS? Itās getting harder to think of entirely fresh features that donāt have any thought put into them at all yet. For instance, Nathan Knowlerās <a href="https://go.sparkpostmail2.com/f/a/HPcD-7GFifMjLNaetwHzjQ~~/AABEfhA~/ZZK9bgM2fvtRWnv_7oNFPZhCqQixSbGw9YD_MYDXTeCpSZT1J4KKaSv1QRuwC_N-XqqHxL7iwiyRL4de3xkVNjAQ1C2LxsFDSLwXNxSxEgBcJjlOuROqx-GbH42_K7MGmvmjKYJZ1MYCZLBaXNwC0w~~">2026 CSS Wishlist</a> is all stuff that is either here or coming already, and the wish is how they turn CSS into a more cohesive system. Me, I still really want <code>margin-trim</code> supported everywhere, and <a href="https://go.sparkpostmail2.com/f/a/hvKBq2IuXHN57IH3Uf6ZZQ~~/AABEfhA~/thtcwoqCve2EegNGg_91JkKyW2P0kclA6kMCnUd3Hn3eCHGaiYc7ip64dtRnN68Grq8CyfQ8eATGUWiPsTlDfGPOWeCXuVsQr4uhaWqV1EbTh70SaphSzUp0EyuPYKsb85A88UosU8rIxzc_xhrvUkJOzRtUIyVGfUuP9hY5FjC5Q8KMrZ_ggnBiYVZERYfac2rDusJINwNkdZSWwYFq2f5r2ysEw6x_swI1-MrZbM0~">my 2023 list</a> still had some stuff Iād take. Oh, and Iād take like <code>::before-end</code> / <code>::before-begin</code> / <code>::after-end</code> / <code>::after-begin</code> so weād have both more and more-placeable pseudo elements that mimics <a href="https://go.sparkpostmail2.com/f/a/a36UfOGw9ZG5iiZjkvVgXg~~/AABEfhA~/JgH9wx44hKiA-9kc4Q9zJSCBvZPXBpnuAQCdPwgiv48jMlCjsgNFAvPLszKLBb8arNGXRVLCBo8vtYZn9n2R4CGJiHa-_04_a3N1VoX7VaJjGHoa1DSLNqdegl386hmMBfKqWBzLd5_OdpIQ3xS6xz-3OXwMpSAB0vEd5r2orhbcg3j-7yc0jr5mPEC_Cu7_"><code>insertAdjacentHTML</code></a>. Or <a href="https://go.sparkpostmail2.com/f/a/fTSBpDrGQALq4NnjWKLedQ~~/AABEfhA~/LDyMJn6lU5-ZpLX3MZ9UTKfXQeXo2MqMd2W8Ikz7tT0QZxBRk9a12Ie_mcm71_AXUrXjf7EvnCAL6uKOX3bl5aEKzHVHjk7fxcClDc8aPCunYFKM1fYbCLFh-KLRJyC8BgwUYz57VJ-LETkxFTQG9QZiwLywOe0b5IGKJH64hAU~">infinite</a>.</p>
<p>Ya know how there used to be lists and roundups and stuff that were like <strong>āStuff you donāt need JavaScript for anymore!!!!!ā</strong>? I love those, obviously, but I feel like we donāt see them quite as much anymore because HTML and CSS have darn near got it covered now. Like if you absolutely <em>need</em> JavaScript for something, itās like, yes, thatās JavaScript territory. Itās not for things that weāre only leaning on JavaScript for because of itās power to measure things or detect visibility or handle events. Weāve gotten the heart of those things in CSS now.</p>
<p>Just a few of those as a tasteā¦</p>
<ul>
<li><strong>Una Kravets</strong>: <a href="https://go.sparkpostmail2.com/f/a/JE8Qi-yN1Yd3PoaKjkf4zQ~~/AABEfhA~/BOvYBQJ7hoK4fjgyseBcL6ojnlUdzgvv4BPD-xAP4ULXz6mVAT5PM_F68rwsbxC3No3qYgukEvBjSZm71fVsBRn6lDZ4oHep1ZFkZKVHry5rfhPiAU5eCazJZJMutHZqszQhgxxlLywX7hWDKTrkhg~~">Follow-the-leader pattern with CSS anchor positioning</a>. A Table of Contents menu that knows exactly which sections are currently visible and can be styled as such? With no JavaScript at all? Amazing.</li>
<li><strong>Bramus Van Damme</strong>: <a href="https://go.sparkpostmail2.com/f/a/LF2gNGuB4dNEIEZgRrpyHw~~/AABEfhA~/acM7J9HjM0YFf2yBlxXmzaUvdXfdsyuloqGr8vG-COA8A9WCKPrtJSra2v9ORhEKuLkY0JA9sC7Gbdx0QHDj5ghxhTsLg2JK5TJgljxOcYIa--skMj_zn6SbxvTF5l_DVyvWsolL28hKJPnSJGtTI_9Ab9_Ag8JgPTr6INSfIC-o1OtUNThT8xFDdZyxppQFmtrhcZXcszJJ-9F_RkPnmgHOuUvTWiEAelmxseThSfPxGqmVkO4ndpjWUo5h0DPcm68ZXklXgulaakDQ-JsFUA~~">Solved by CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up</a>. With no JavaScript at all? Get outta here.
<ul>
<li><strong>Una</strong> (again) also explains this in <a href="https://go.sparkpostmail2.com/f/a/QTtor_B4sWof8ylK_Jmtxw~~/AABEfhA~/ic5blfZluT9RWgcxR7efds4eOyu4kKLcsoux5X-4GMXikOew3uZT6LSqy8eAG9TJSItGp8oSN7D4XTW6t5HWwH7oHobqsXh9ygLzVKFGjno4xNFnMluvMYit6uhFygkVTWNoMsu9hU-UpIrv2N8Leg~~">Directional CSS with scroll-state(scrolled)</a>. Itās so simple. No JavaScript.</li>
</ul>
</li>
<li><strong>Ahmad Shadeed</strong>: <a href="https://go.sparkpostmail2.com/f/a/Y28BE6FeLFGste2v0DcLKQ~~/AABEfhA~/ZZK9bgM2fvtRWnv_7oNFPa0tPk1xzHr_A0iZHmU2Pd-oTSFv_t9RGDxt1PAtB4vn5X9plA6vRgxYPTE7lUdziBbI9_H81xHAXLN_PNBBImHpsCx8I6qfSrD4KjCwhbVBpTWxR3COrONJqptmPybXLA~~">Use Cases for Field Sizing</a>. Form fields like <code><textarea></code> and <code><input></code> that grow in size based on the contents they contain, with whatever constraints you want? With No JavaScript at all? Ship it.</li>
</ul>
<p>Itās almost like CSS is evolving specifically to do things we once needed JavaScript for.</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" 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;">
<p class="subscription-details"> You can adjust your <a href="https://go.sparkpostmail2.com/f/a/ckoM-s2eVEO3H3yz7Dmcig~~/AABEfhA~/Yd8mkTk6w-wwFKxf3XBOvhmJt-2p1ZOZWw9BDfyqEO9wb-9o0k5uRxLXu2l8ylAN0eSsrs_iwBOtgeMERNAsHtv7_NLajWIoMN9nKDM9kOVRQcQq7AOgRN-r1AvfyKm7j0IliASmQdrOXW9rgr-5Mw~~"> email preferences </a> any time, or <a href="https://go.sparkpostmail2.com/f/a/Thi6IwY46XhaPLQXEIzIWQ~~/AABEfhA~/YbrYjEJ4XbQGXg9v7nZOI0NaIv6NVZ5G0gYSNEuAysImhKMLyitZAzOJhw_mihaIv8MkdivP2DYJM_hERu8_DM1fXHfAFjPxhZr6FqJKTstF3d0UabIiJHuPub0216v2IkOIv0_2KmeCRci2fHbouv2Jy0Rx9OvOL40sbIi2Mmqb44Q54gtrLrvNEhVWs9izf4Bw3f85v9OQL0Z3ebbVGsngD8-zlXKwfqHNpaBFL9G64H4bBYZzpx1FmqQ2KUeBb8vQexqL2P7t32GGXrZnW84OgopiXg_oEx-pfDS4QLYLQNL9SpS8CkSqQHk9qK7ysiz1fLGQJg-t3ke70N9CulflCZwUIN5THkvgpP1GGvY~"> instantly unsubscribe </a> of emails of this kind. Need help with anything? Hit up <a href="https://go.sparkpostmail2.com/f/a/jJ_riBpPZRBGILWJI6d1yw~~/AABEfhA~/Nejv9JLc2icYusGt32lHIak7SNziMr5kQ1YhaYYAfgLHE_uBP8jhgxu2Fr26cqSvMLiO3SG5-wfVOC2naYZIP90tSOGGASdPbXmKXBHgffU0IwLkyOYeTTFGsFyPvsew">support</a>. Interested in sponsoring? Here's our <a href="https://go.sparkpostmail2.com/f/a/qNkeTJ7JwlcULGQAA0r8Cg~~/AABEfhA~/rU7l0_xwjYRW-8eEi5eAkWPx9EJunQRKb49otPUz3wfOaZhoZE8B2N1SahJ1jTuSwGgXEjNgKmwJ6Un9H68fm8xS8U7PtJKpOBFKVlybpLHv6NcfrKawpkRXcW8asuCi">sponsorship info</a>. </p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<img border="0" width="1" height="1" alt="" src="https://go.sparkpostmail2.com/q/BYkEVFbgFjryYTfucnNGpg~~/AABEfhA~/41-Nr5rleWl2EnG6-QNqukAixjDUf9S-WunxmWaW8sJv61wBQk9jv44IdN3ehHdnY5yp-xborhw-Nty5DdXZ_A~~">
