<!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/qO0vc7K21Y0VFW_AWBi8zg~~/AABEfhA~/HURs91zQNVc8BQd6c_Bls_FU_xuDeK66gK6ajbPfrVnpjXZiWN6z2VVXW1tX-wuMcpUbihwZFHrEg9EJIxOATg~~" 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/xpkFNRmWvu_a99aSMuQECg~~/AABEfhA~/vnSb3Gt9bRElDpzvc2KV8Ex2WN1S4bGRQXpUFueWhLHA5TRoXJEeeQForUpYptYBtrxYnd6-kpiuU1-LF-USaXcfY5H-XZwG_LdDL7jXsJoRXJDkd2x1_1WPgd835Pyo" 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>Anchors Aweigh!</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/5HiOXW8mrfos8wuDh-gWSA~~/AABEfhA~/aV5cALp3nIaL2SsJlMlMHUajI3VQ7UDsdYlHM2GOspqvwxMSDqn67IrUbuYAw6xxUH9Y0EHF3wjjOL6mLF-V2maUPe_VGq4CMgmjyCRQDySXT3lMCuPnYkLobKjeF5WMze7U2zCqqdio3PtgTjnUn1-5HluoSuteWmOR3v6tMdNV0_hJE5jQVBqk9wg7zmdpYOHHM1cFraXyABWehLDrffNWqqk1ZsDrgOKo2iZiZDKSvDjc1iZMIs_wLhEWkGpQ_AnS0ocDIdAMoLJmdnTPRA~~">MongoDB Atlas</a>, the AI-ready data platform for building, scaling, and running gen AI apps. </p>
<p>Now that Firefox 147 is out, CSS <a href="https://go.sparkpostmail2.com/f/a/rfA1OLW8D7FlwbY1OR0toA~~/AABEfhA~/n-_AiOU7FgW-p4TbHe119KP36GzR6Kj2SGQe694YuI8Xz54LanO3kwH-95RydAxDjnx5UhUBakLCS9TqVPrLxE14Fzrm1QurHzJKyAA5yYZwEWnc6HF6lVc03o_LjLwij7bW_Qp6Xnha72MQYmwrC_cEEQXWE2v-NJWU9R3ep3sukgj-lg9WVRxJKawpG5bz">Anchor Positioning</a> is officially Baseline newly available! In this special edition of The Spark, we're celebrating with a roundup of guides and Pens to help you master this positioning model.</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/5HiOXW8mrfos8wuDh-gWSA~~/AABEfhA~/aV5cALp3nIaL2SsJlMlMHUajI3VQ7UDsdYlHM2GOspqvwxMSDqn67IrUbuYAw6xxUH9Y0EHF3wjjOL6mLF-V2maUPe_VGq4CMgmjyCRQDySXT3lMCuPnYkLobKjeF5WMze7U2zCqqdio3PtgTjnUn1-5HluoSuteWmOR3v6tMdNV0_hJE5jQVBqk9wg7zmdpYOHHM1cFraXyABWehLDrffNWqqk1ZsDrgOKo2iZiZDKSvDjc1iZMIs_wLhEWkGpQ_AnS0ocDIdAMoLJmdnTPRA~~">
<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/Codepen_AIRevolution-Green_Square_600x600.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;">
<h2> Gen AI apps are built with MongoDB Atlas</h2>
<p>MongoDB Atlas is the AI-ready data platform for building, scaling, and running gen AI apps—no separate vector DB needed. With built-in vector search, flexible schema, and global availability across 115+ regions, Atlas helps you build faster—all in one place.</p>
</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/5HiOXW8mrfos8wuDh-gWSA~~/AABEfhA~/aV5cALp3nIaL2SsJlMlMHUajI3VQ7UDsdYlHM2GOspqvwxMSDqn67IrUbuYAw6xxUH9Y0EHF3wjjOL6mLF-V2maUPe_VGq4CMgmjyCRQDySXT3lMCuPnYkLobKjeF5WMze7U2zCqqdio3PtgTjnUn1-5HluoSuteWmOR3v6tMdNV0_hJE5jQVBqk9wg7zmdpYOHHM1cFraXyABWehLDrffNWqqk1ZsDrgOKo2iZiZDKSvDjc1iZMIs_wLhEWkGpQ_AnS0ocDIdAMoLJmdnTPRA~~" style="display:inline-block;background:#00ED64;color:#001E2B;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"> Start Building </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="video">
<a href="https://go.sparkpostmail2.com/f/a/PptdV7s8J7u-37XneNzpiA~~/AABEfhA~/KP6dt-D4H6PD5RiSuVBIqDehcDYKDYnIlK2PEloQzKcBJdi8I5lsEUlE4j6729MLNvzCFbLSeAgGq63doTIrnMl9n6ciL_EES50tMEqMZrDQetpbMiOqIZYKmZ2M8_p6wZmUovFWsWqUmnYyhTUjXQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/couple-of-great-anchor-kp.png" alt="A couple of great anchor positioning use cases" height="" width="260" />
</a>
<div class="spark-item-type">video</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/PptdV7s8J7u-37XneNzpiA~~/AABEfhA~/KP6dt-D4H6PD5RiSuVBIqDehcDYKDYnIlK2PEloQzKcBJdi8I5lsEUlE4j6729MLNvzCFbLSeAgGq63doTIrnMl9n6ciL_EES50tMEqMZrDQetpbMiOqIZYKmZ2M8_p6wZmUovFWsWqUmnYyhTUjXQ~~">A couple of great anchor positioning use cases</a></div>
<div class="spark-desc">Kevin Powell showcases practical use cases for the anchor positioning module (beyond tooltips) in this 20 minute live coding tutorial on YouTube.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/t9_B27P5I9gVlNK5g_cufg~~/AABEfhA~/CNIIbbk4DnD3Hjvt1qcZG2tItKNAGzPIp_jUhnqju4RKLmOPIWIn1Y4uyPhg7ok9Y2fwMtOHt1sfcBti7MjyZsrfLxDmegOT8iJqU1HT6TYcFnzZl8VYGpdcnll08rTe43rBxc46DMhHkD5enPyXHQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/follow-the-leader-anchor.png" alt="Action bar - "follow the leader" magnifying lens" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/t9_B27P5I9gVlNK5g_cufg~~/AABEfhA~/CNIIbbk4DnD3Hjvt1qcZG2tItKNAGzPIp_jUhnqju4RKLmOPIWIn1Y4uyPhg7ok9Y2fwMtOHt1sfcBti7MjyZsrfLxDmegOT8iJqU1HT6TYcFnzZl8VYGpdcnll08rTe43rBxc46DMhHkD5enPyXHQ~~">Action bar - "follow the leader" magnifying lens</a></div>
<div class="spark-desc">Una Kravets combines CSS anchor positioning with a dash of JS for this action bar with a glassy roving focus. This Pen is part of Una's
<a href="https://go.sparkpostmail2.com/f/a/mean9JUacGmQVrIRAxosFg~~/AABEfhA~/3R4rl5L9_CihgSpVI9rVobkWLANS7VhIFjkrI-UhPnswSTgVhESZaLpwtFTbLPfBHS987zwHGoCnUoqxW_-E0WPXsd7F-MCcC1B-hR5J6rh26LWuzDwjN_pFkMFlWA1cc53qWGUM2CApq8XymFQO5g~~">tutorial</a> on the "follow the leader" technique.</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/JRzxLSyNT5FpGncC5rkDlA~~/AABEfhA~/rTSAZ9eQc_gw7iMWlx4sCI5x5oyIj-YIWyQQbAo0PKTPs8FCFEFqrgdRL4ELIihBs2ov1J9JDMrmuphfTJxiqqvZx73_dkk_u_HNM4uVCBZKHXPEao2HfdsjQqYlSvlGMY1urmCj7DIWM6R1xiPAIA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/connecting-circles-anchor-afif.png" alt="Connecting Circles With Anchor Positioning" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/JRzxLSyNT5FpGncC5rkDlA~~/AABEfhA~/rTSAZ9eQc_gw7iMWlx4sCI5x5oyIj-YIWyQQbAo0PKTPs8FCFEFqrgdRL4ELIihBs2ov1J9JDMrmuphfTJxiqqvZx73_dkk_u_HNM4uVCBZKHXPEao2HfdsjQqYlSvlGMY1urmCj7DIWM6R1xiPAIA~~">Connecting Circles With Anchor Positioning</a></div>
<div class="spark-desc">Temani Afif combines "Anchor Positioning, attr(), container queries, shape(), trigonometric functions" for this one! Try dragging the circles in one of the embedded Pens and watch how the distance calculation between the circles updates as it moves.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/foIyYj4xQJWWv5Kb-ErSsw~~/AABEfhA~/EPU8MMjkod8oFpZkbvwj3_S6kTCn1ts0dsbzsrMY3IujOCuOR954WBqVkkbYfPt6SCtEZShKNwwl9akDDKylacbOl9GJS5di-d_piEjeRKyY0HmYiHXmV9ita9qj3HxhaYXfOuYWzaNeaw0A3IzLCQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/progressive-anchor-pagination.png" alt="Progressive Anchor Pagination" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/foIyYj4xQJWWv5Kb-ErSsw~~/AABEfhA~/EPU8MMjkod8oFpZkbvwj3_S6kTCn1ts0dsbzsrMY3IujOCuOR954WBqVkkbYfPt6SCtEZShKNwwl9akDDKylacbOl9GJS5di-d_piEjeRKyY0HmYiHXmV9ita9qj3HxhaYXfOuYWzaNeaw0A3IzLCQ~~">Progressive Anchor Pagination</a></div>
<div class="spark-desc">A little more "follow the leader", this time from Jhey Tompkins! Hover over a page number then click and watch the highlight slide on over to meet you.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/poeFyL2oN9Ef4JY0V7iGqg~~/AABEfhA~/YTe2Xy122dTpRAt9GgRQ1sbS0OHYHiOwvFv-cXO7AI6n83gh58GPKQo5hMgenU5wX1nRYbwFEJupBCS-DYzj_VBMVmBivZ836d22pDB0wDYAbgutfIDZwRlkMjITSbj6G5OyXvb00xL6iWqb8ZYUgQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/cloud-generator-ferenczy.png" alt="Cloud Generator" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/poeFyL2oN9Ef4JY0V7iGqg~~/AABEfhA~/YTe2Xy122dTpRAt9GgRQ1sbS0OHYHiOwvFv-cXO7AI6n83gh58GPKQo5hMgenU5wX1nRYbwFEJupBCS-DYzj_VBMVmBivZ836d22pDB0wDYAbgutfIDZwRlkMjITSbj6G5OyXvb00xL6iWqb8ZYUgQ~~">Cloud Generator</a></div>
<div class="spark-desc">The resize handle at the bottom right of the cloud in Bálint Ferenczy's ethereal generator sticks to the cloud no matter how big or small you make it. Make sure to try the weather condition slider, too!</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/egt60NFRkuek-7zpiyufXA~~/AABEfhA~/SE6CrCld41gsXe3RjacuSPGLyWzSMsRHIBCzORcfe33z7oOAHsDdUpeStiDeMv7wit9IDLB1QclKzM5wm9b38qhYq5LTb2TMdTYTovkRqlgVrp3IHGj86UoPFRBp9W6eUhGQgcywbLmLf44GAshAqC0SSApHHEh8YGnXakHoEOc~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/anchor-diagram-1.png" alt="The CSS anchor positioning API" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/egt60NFRkuek-7zpiyufXA~~/AABEfhA~/SE6CrCld41gsXe3RjacuSPGLyWzSMsRHIBCzORcfe33z7oOAHsDdUpeStiDeMv7wit9IDLB1QclKzM5wm9b38qhYq5LTb2TMdTYTovkRqlgVrp3IHGj86UoPFRBp9W6eUhGQgcywbLmLf44GAshAqC0SSApHHEh8YGnXakHoEOc~">The CSS anchor positioning API</a></div>
<div class="spark-desc">Learn the ins and outs of anchor positioning in the comprehensive documentation on the Chrome for Developers blog, complete with lots of embedded Pens for you to try.</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/CMYO_SMxPw5AFwhdCgoEug~~/AABEfhA~/oewjI6qUr10OEj_H907Ja7ewKQ8bQ4351_IuKKl0fI4IPcvM6i_YSSkFZYvD3mbFABfAKdOpKI5UJVy6EgJ_SAe4Z4knzIwdUroS2gwV4S23ZF8vP0xOLjIWXWupHiOAxO3RkRToyrMUpO_f7qi2yT26VxhsVFt8uSyHomaxE72mgisyVfuhRDPyp3d5ouSzLb-OMi5PmQj0g4ASYRCOCw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/drawing-connections-anchor.png" alt="Drawing Connections with CSS Anchor Positioning" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/CMYO_SMxPw5AFwhdCgoEug~~/AABEfhA~/oewjI6qUr10OEj_H907Ja7ewKQ8bQ4351_IuKKl0fI4IPcvM6i_YSSkFZYvD3mbFABfAKdOpKI5UJVy6EgJ_SAe4Z4knzIwdUroS2gwV4S23ZF8vP0xOLjIWXWupHiOAxO3RkRToyrMUpO_f7qi2yT26VxhsVFt8uSyHomaxE72mgisyVfuhRDPyp3d5ouSzLb-OMi5PmQj0g4ASYRCOCw~~">Drawing Connections with CSS Anchor Positioning</a></div>
<div class="spark-desc">"Anchor positioning feels like a missing puzzle piece. Instead of asking 'where should this element go?' we can finally say 'this belongs there, relative to that.'" Roland Franke takes us step-by-step through the thought process behind his <a href="https://go.sparkpostmail2.com/f/a/Bq2bwrh1_TABRi946XrdZQ~~/AABEfhA~/rTSAZ9eQc_gw7iMWlx4sCAl22KH5QRqWu8kYrAN_LpoQyMSHG-DHKmYQy5pnGaPfeVd46Lo8NHIPHgpBr-qOBy-imWttlJvSiUgT0YaQZ5R-z2OkNceOeZOYdavbDlbVx_a2TsNQ4AYMA4_RDcILAQ~~">comment thread Pen</a>.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/K59W2maJV67Hzv7R7bv1yg~~/AABEfhA~/yXdF3nvzBzyJRPEQwpIBHVrrFe_14TNJ8RC_xQNf_lQIuHEyCT3kmgQJhIvyATBKKq3N_GhzQBdgIDVROrPSnqovkThq4gRlzhG_y--c65zKthX2zHiagXVRK3t-I24qaKwytgbXUjIJw_ZVSkN_lg~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/image-swap-anchor-bolson.png" alt="Image swap using anchor-positioning" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/K59W2maJV67Hzv7R7bv1yg~~/AABEfhA~/yXdF3nvzBzyJRPEQwpIBHVrrFe_14TNJ8RC_xQNf_lQIuHEyCT3kmgQJhIvyATBKKq3N_GhzQBdgIDVROrPSnqovkThq4gRlzhG_y--c65zKthX2zHiagXVRK3t-I24qaKwytgbXUjIJw_ZVSkN_lg~~">Image swap using anchor-positioning</a></div>
<div class="spark-desc">Chris Bolson wields anchor-positioning to build a classic swap-on-click image gallery without JS, setting the large area in the grid as the anchor for the selected photo.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/1-dfpLc5KHAQHtQ4j4Z6IQ~~/AABEfhA~/CO8k1Fm04JBcbGhmFLAw5gLfqxwqS9XUYx8116sBA3f28ep84ylZTBuPv-yuecub7C1gMJ9WrQSnM8ujtf4Fm_6e1ShnZhU7FvdRsnGQed7z8Xf9fpnt7ygu_lfRKKCoju-gcFzt9_4TRDIfc6O8UA~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/custom-select-align-shooft.png" alt="custom select - alignment" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/1-dfpLc5KHAQHtQ4j4Z6IQ~~/AABEfhA~/CO8k1Fm04JBcbGhmFLAw5gLfqxwqS9XUYx8116sBA3f28ep84ylZTBuPv-yuecub7C1gMJ9WrQSnM8ujtf4Fm_6e1ShnZhU7FvdRsnGQed7z8Xf9fpnt7ygu_lfRKKCoju-gcFzt9_4TRDIfc6O8UA~~">custom select - alignment</a></div>
<div class="spark-desc">shooft's demo of the newly-customizable <a href="https://go.sparkpostmail2.com/f/a/YjpOuPCq8uMH96mayz3E4A~~/AABEfhA~/v3xsN-ncXsBmWdxsBgNilxVZKLxUcAqTaxXzFc4_pYvBuYwkFwLQOzrGv8VpFjOtnTKR25FxCRBjDptK6Qh7QThcDIyAwdHEm7xVBxYavh1e4Vu9kSQeJHZUlVulTITu9w8xuvl5RgQYQ40v-hrU0KIuwW5_8N3ffJqntwcLI-E~"><select></a> element also includes a little anchor positioning magic. Click one of the alignment options on the select menu and it re-aligns itself to match.</div>
</div>
<div class="spark-item" data-type="video">
<a href="https://go.sparkpostmail2.com/f/a/bfFAMr9ypqItWY-7uLuCgw~~/AABEfhA~/KP6dt-D4H6PD5RiSuVBIqDehcDYKDYnIlK2PEloQzKcMQgngNyS2aLeRSQPYuBpHoI2BDCPYIxrI0XvnFqwnTpP7IUaKhcIjxiAlXiqEbKt9A_6kApwboBNJAhxGpELA8R-1-31lgNxjTGcVWFbfbw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/nav-broke-brain.png" alt="This nav broke my brain (coding speed run)" height="" width="260" />
</a>
<div class="spark-item-type">video</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/bfFAMr9ypqItWY-7uLuCgw~~/AABEfhA~/KP6dt-D4H6PD5RiSuVBIqDehcDYKDYnIlK2PEloQzKcMQgngNyS2aLeRSQPYuBpHoI2BDCPYIxrI0XvnFqwnTpP7IUaKhcIjxiAlXiqEbKt9A_6kApwboBNJAhxGpELA8R-1-31lgNxjTGcVWFbfbw~~">This nav broke my brain (coding speed run)</a></div>
<div class="spark-desc">On the Syntax podcast, Wes Bos speedruns through recreating a design by <a href="https://go.sparkpostmail2.com/f/a/Vz_8pMMV_bx1lew2EFQB9A~~/AABEfhA~/0zccf-fPgAkG1DpfrGituwOX-4e2MtKbftDO1i0XG4FSSy-x1UqF0nzrJSjSQnTQddvwTiGKfBgZJ2AWgqwN8SNES7HjqCCJMdI6-TKo25-qkbfqcLI5ewAZnbnuKUaBr0fKXTLzgmGmnzY8UU736K_YhvthIRpgksKKp04InLA~">Raul Dronca</a> and gets his brain melted in the process. Check out the results in <a href="https://go.sparkpostmail2.com/f/a/po6KL5kwK6oQ3edbwdPgmg~~/AABEfhA~/CO8k1Fm04JBcbGhmFLAw5pcSvqjvGbPI30r8koV8yPMqr_dSrtqjqXgvk64w2veczwW95-AzjTFsfn7L7OrT_DQ9nn_SZbz-hUHqO0Tqo1WPTWEuN9KmWvwFy69aS6xFsT6VERiXD2ZhODmxsoSqig~~">the Pen</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: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/4lhKuS0cWydHtiAuL7pvtQ~~/AABEfhA~/rsxsd3Lt6NJ4ueq97R3Wj_oDmUFMfJc2yjRvpAWK1EjfOesTXUaXDfYXj0yedxaXAO-p7jab9NYAD7_GRnadyZrMwjG57IAoOIjwFIWU84A6gOeS9krGEtZKHChv3hRM1WhIt1JYu9D4EH4XbO4jLg~~"> email preferences </a> any time, or <a href="https://go.sparkpostmail2.com/f/a/BXHxlxVdHq0vZPA-C6JImQ~~/AABEfhA~/l71YjjZzxSQrbZ4JQQwLmJn1JxVkYg7UGTC0yh2rU8rqMqs7uCa5YodKSv0QtUbrDVfo68HVPQGGHXjH7UwtO9k-F1hVD4sXWeIy_BNz__yzcJ0qJRZTpPoQlqnxn8ZLGAj4h0YXmVuu__Nv2El65iN-nYehl7PVJYJkJXsBgL5LbBMOcUmLINTW32K8HrtbyBvMB1PMqm-mpL4whpecdVUf16SYy1F5KgFtXjyrfh3P5Tvd2J1Qb10dANdewtEt4l-71BKL2R537c9z3KkXYruRiJh5BUnG3GqvHDIPmkB1vjCXFf8PGCrFUhud5YSoetObyBjw2kEC9ZnhYPD0g6icdFK3fLalv-QzaWSyFIM~"> instantly unsubscribe </a> from emails of this kind. Need help with anything? Hit up <a href="https://go.sparkpostmail2.com/f/a/9Tr0KS8_1Lv-4mpWUObXiQ~~/AABEfhA~/j9R3mc3PcdCVBFM2t9AaSUxGw7mvxXqG_aEiH8hydrNRLa385g4pBTI4UjPPt90rPbeTQaAOqlDEM-x8XChTIedK5hJLmVGn26wAMu8r3eQAqXzjCLdTKkLme1__5Vuc">support</a>. Interested in sponsoring? Here's our <a href="https://go.sparkpostmail2.com/f/a/dEXa2IwtXcOjObDKGfAy4w~~/AABEfhA~/vnSb3Gt9bRElDpzvc2KV8KZ5EPi21JTQTV59xZ4Jx5dPDRJbMweaAfNJpokB81fpqDIoBV5n1O7uzkjYhIr_XAXUzbqV_5HrWPdMAAnbyXZCfUWOprWgDc7fCw_nG1pu">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/aJaoZFq5DFX23LA7cDQ5iQ~~/AABEfhA~/VPU_PVgvBn3zdYVouViNvCPA_mex553HdZl486YqRsTBf4oqeeuZodikHWyY_ZYzzNIzX-tiBvOlfdnn5cirSg~~">
