<!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;
}
a {
font-family: sans-serif;
}
</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/K_at4_6l7goN7E92_HBAvw~~/AABEfhA~/mrkv9MX_FiUdpAV3lTp4wgK4ALhoTjvL-8dc2UjE2FzteZRMnvcJ2qV8K7EiC7aBanG24pCpEtt47-1X5gJaVQ~~" 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/UfW-O_Mp1lCpP0dJL_3Pjg~~/AABEfhA~/P3Y9fLp-aZDXf1oKtDgLWbhTxbU-Qqkst69bcnflP6-im4cs84fhna1U3Ubphihgv--JQcKZepC4jRbIMMdNzRnjfJL0RKyO9USjrqGfnZcWuCgHmGPeQMcqXYsl98v8" 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>Popover Party!</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 IBM Instana Observability on AWS. Learn how it can help you <a href="https://go.sparkpostmail2.com/f/a/-LpbSo18A9l-B-sEPw82eQ~~/AABEfhA~/LeAR2Ki4BTWwWwWFe-xYGBhQunCFwmlfYMkJuVsfRLZ455KmIRkbah_PepRpfnwDGllHbSFwxL0ApEppY5m9b4Vsg6n4tXVZ9zNk-hy-DnNjuWKlZERodfYelavzlCdiaFn_J7wZpxRbRtRba-14xkrfraonGTUJc_6qvsq_tXLpflC4GbS8v6GlxShMy8fdD_6dYPtDalhhAW79Yrx_WM6vb4oD_5qiASFQKSz8QEZpLuWtoRWCDy5xOSu96nckP1Ir6lbK2B0V0uF5XJROiw~~">accelerate AWS observability</a> in the AWS Blog. </p>
<p>For this special Spark, we're taking a look at the <a href="https://go.sparkpostmail2.com/f/a/7QdctHv_8PVJ9e5qiDQ_2A~~/AABEfhA~/Wh8fhHTIslSBJ1MEMwgYmGxBPRrGVErDQboxDpGk1YknZqhdCE4uzJae18s04gRg7-wFvtZWGmuu_nBlMA8Ti_aDeKfHkyZIIvwM5s3kD4XP7HPAiNubFEqVOY7c9c5jMDts73y-ywkoUEZ0YTNKjOXO1qLD_S9fyh6VgS4tNeA~">Popover API</a>, <br />a powerful front-end tool that went <a href="https://go.sparkpostmail2.com/f/a/eT1dnsKW67ibzsdUy8ni3Q~~/AABEfhA~/I0eOOFAkCjPXl1Zvob9l8qICRHzaT-BAIoi90PRYNhXFozqVCUfCYgsTVHw2GFlkNNYsSdRrQ_KLEILmkpTAEr9bfCX5pO4CL7Ulj-nLAto9jxfPtMae95T15pIfvWmXmfW9dT1wuLEfch_KhKdqig~~">Baseline</a> (for real this time) in 2025.</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/gradient-header-aws.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/-LpbSo18A9l-B-sEPw82eQ~~/AABEfhA~/LeAR2Ki4BTWwWwWFe-xYGBhQunCFwmlfYMkJuVsfRLZ455KmIRkbah_PepRpfnwDGllHbSFwxL0ApEppY5m9b4Vsg6n4tXVZ9zNk-hy-DnNjuWKlZERodfYelavzlCdiaFn_J7wZpxRbRtRba-14xkrfraonGTUJc_6qvsq_tXLpflC4GbS8v6GlxShMy8fdD_6dYPtDalhhAW79Yrx_WM6vb4oD_5qiASFQKSz8QEZpLuWtoRWCDy5xOSu96nckP1Ir6lbK2B0V0uF5XJROiw~~">
<h2 style="margin: 0; line-height: 1.3; text-wrap: pretty">
Smarter telemetry routing for faster insights and operational efficiency</h2>
</a>
<p>Organizations need actionable metrics fast—especially across distributed AWS workloads. With Metric Streams connected to Instana through Firehose, telemetry flows continuously and efficiently without custom pipelines. This architecture ensures that all AWS service metrics, including new ones, reach Instana in near real time, enabling stronger event detection, better dashboards, and more informed operational decisions.</p>
<strong>Read the blog to learn more about the advantages:
</strong>
<ul>
<li>Fully automated near real-time observability pipeline that scales with your AWS footprint</li>
<li>Supports AWS services and future metric additions</li>
<li>Reduces latency accelerates event recognition</li>
</ul>
<strong><a href="https://go.sparkpostmail2.com/f/a/-LpbSo18A9l-B-sEPw82eQ~~/AABEfhA~/LeAR2Ki4BTWwWwWFe-xYGBhQunCFwmlfYMkJuVsfRLZ455KmIRkbah_PepRpfnwDGllHbSFwxL0ApEppY5m9b4Vsg6n4tXVZ9zNk-hy-DnNjuWKlZERodfYelavzlCdiaFn_J7wZpxRbRtRba-14xkrfraonGTUJc_6qvsq_tXLpflC4GbS8v6GlxShMy8fdD_6dYPtDalhhAW79Yrx_WM6vb4oD_5qiASFQKSz8QEZpLuWtoRWCDy5xOSu96nckP1Ir6lbK2B0V0uF5XJROiw~~">Learn More ›</a></strong>
</div>
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<p style="border-top:solid 2px #028bcd;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 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>
<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="padding-right: 10px;">
<small>In collaboration with</small>
<a href="https://go.sparkpostmail2.com/f/a/zoaxLU2LwNaIHFtcnr_pYQ~~/AABEfhA~/LeAR2Ki4BTWwWwWFe-xYGBhQunCFwmlfYMkJuVsfRLZ455KmIRkbah_PepRpfnwDGllHbSFwxL0ApEppY5m9b6wobW0s-xt9ttM2aR1IEGo1Whf31zgBl3F0vjar4G2xsZSjq3FtNXb6TOCOFwyUAuoilflxyxODvjgtYQ0l-PVNU1OsqIow_m1exIV67aUsAuE-51l3k35p4Q7zu2CcRAKcV-I4VJpce_APykr62pHEaThgV6Y0Rv_tc0jxIBb3IJQlwRpxfN9U553seiDCWQ~~"><img src="https://assets.codepen.io/t-1/01_8-bar-positive.png" alt="IBM logo" width="150px" /></a>
</td>
<td style="vertical-align: top; padding-right: 10px">
<h3>IBM Instana Observability</h3>
<p>Try IBM Instana Observability for free in AWS Marketplace.</p>
<p>
<strong>
<a href="https://go.sparkpostmail2.com/f/a/zoaxLU2LwNaIHFtcnr_pYQ~~/AABEfhA~/LeAR2Ki4BTWwWwWFe-xYGBhQunCFwmlfYMkJuVsfRLZ455KmIRkbah_PepRpfnwDGllHbSFwxL0ApEppY5m9b6wobW0s-xt9ttM2aR1IEGo1Whf31zgBl3F0vjar4G2xsZSjq3FtNXb6TOCOFwyUAuoilflxyxODvjgtYQ0l-PVNU1OsqIow_m1exIV67aUsAuE-51l3k35p4Q7zu2CcRAKcV-I4VJpce_APykr62pHEaThgV6Y0Rv_tc0jxIBb3IJQlwRpxfN9U553seiDCWQ~~">Get started in AWS Marketplace ›</a>
</strong>
</p>
</td>
</tr>
</table>
</td>
</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="pen">
<a href="https://go.sparkpostmail2.com/f/a/sUK8lh49ui9LgygMCpABzA~~/AABEfhA~/AAFZoBlc2YSo5Q1hTQ82fma5vtp3HGb2GTVL5OUITz0mLex6D0I9dLEAb4Z3D72TB-1_-3-R0FtkEx-eouiV1lPCeeqNnNb58tIayfM-acxf9dxEp8dUvuupAAV2WVyEvSkYnBy4xm4XbVYg6I7ykQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/cyberpopover.png" alt="CyberPopover 2025" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/sUK8lh49ui9LgygMCpABzA~~/AABEfhA~/AAFZoBlc2YSo5Q1hTQ82fma5vtp3HGb2GTVL5OUITz0mLex6D0I9dLEAb4Z3D72TB-1_-3-R0FtkEx-eouiV1lPCeeqNnNb58tIayfM-acxf9dxEp8dUvuupAAV2WVyEvSkYnBy4xm4XbVYg6I7ykQ~~">CyberPopover 2025</a></div>
<div class="spark-desc">Click the glitchy button to open the <em>CyberPopover</em> complete with electro sound effects in this slick Pen from Jhey Tompkins. In classic Jhey fashion, this Pen is configurable! Open up the panel at the top right to tinker.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/TOo8O2pij1ZlMmyPMRQJAg~~/AABEfhA~/tm4oPT9fCnjANdiMWeZdtgYibmBZ9zGKlNNIuYhU4xcN0hJIyh08Mqpbqi2TNwfEPpzWA-VRx0zh-x4kOTm0rodUvI0-u6oK46uAMJTlH-wd4g6pKD4vjKzSPwUANgZA_67AV-Qgb79AyDZ3tUuiXw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/eduardo-galeano-popover.png" alt="Eduardo Galeano: Multiple popovers, 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/TOo8O2pij1ZlMmyPMRQJAg~~/AABEfhA~/tm4oPT9fCnjANdiMWeZdtgYibmBZ9zGKlNNIuYhU4xcN0hJIyh08Mqpbqi2TNwfEPpzWA-VRx0zh-x4kOTm0rodUvI0-u6oK46uAMJTlH-wd4g6pKD4vjKzSPwUANgZA_67AV-Qgb79AyDZ3tUuiXw~~">Eduardo Galeano: Multiple popovers, anchor positioning</a></div>
<div class="spark-desc">andrewrock combines the Popover API with <a href="https://go.sparkpostmail2.com/f/a/NuEhf4UNvUJ216RlRIUMAQ~~/AABEfhA~/Ed2keqhGuVWCelYJWhM1_xxsjGegbgF9X3fxAGwJ75sjef2sWWYGpe1A7Dtvmn_rBFywk07FrcjlCTahCeP5gF-G-i56QyIR8pTEHrlL_sZ_lCO4eHubkqN3DwGynmYjYr1tXb0yD35v6-4hXZbs_A1XDtTLThovNqs3wwcJfEJnJC2iZw_AMyKU_SuCrSUA">anchor positioning</a> to craft a beautiful interactive tribute to Uruguayan authorEduardo Galeano.</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/jdj380sSEwnx2jFAO9kktg~~/AABEfhA~/9cKYlxO4ELu0V2sq3ncGvNHfbdqbbn1HDLLASyMAImGXiRJPpaKMvNfJjJ5n0U0pY-7bcrStvV82eutx4gsjzN9gla01z1xp-FPu-xr_kcjp7cwANFzbi2ZjWx9ySJ0sYCYxzl2zvmcuKQQu3xdCag~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/popover_api_101.png" alt="Popover API 101" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/jdj380sSEwnx2jFAO9kktg~~/AABEfhA~/9cKYlxO4ELu0V2sq3ncGvNHfbdqbbn1HDLLASyMAImGXiRJPpaKMvNfJjJ5n0U0pY-7bcrStvV82eutx4gsjzN9gla01z1xp-FPu-xr_kcjp7cwANFzbi2ZjWx9ySJ0sYCYxzl2zvmcuKQQu3xdCag~~">Popover API 101</a></div>
<div class="spark-desc">Amit Merchant walks us through the basics of the Popover API in this approachable tutorial that's loaded with helpful Pen embeds.</div>
</div>
<div class="spark-item" data-type="video">
<a href="https://go.sparkpostmail2.com/f/a/TYgnt-Ni4eO9CUsPQila1A~~/AABEfhA~/d41Z3u2TNOeA40TBsnN0ebsBZaUcRI68vSp4qBK7qIlkdBhBaZ13yrJuIYHArD-sxYgiH-VnEjKCWGBv5-ba3OGD8xanRFzkoMj3pIIWmeATH5jkNAZWI8r3kB8EtcXuf7r8uYdIRXDIB6D8p6gzuw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/kp-popover-anchor.png" alt="CSS Popover + Anchor Positioning is Magical" height="" width="260" />
</a>
<div class="spark-item-type">video</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/TYgnt-Ni4eO9CUsPQila1A~~/AABEfhA~/d41Z3u2TNOeA40TBsnN0ebsBZaUcRI68vSp4qBK7qIlkdBhBaZ13yrJuIYHArD-sxYgiH-VnEjKCWGBv5-ba3OGD8xanRFzkoMj3pIIWmeATH5jkNAZWI8r3kB8EtcXuf7r8uYdIRXDIB6D8p6gzuw~~">CSS Popover + Anchor Positioning is Magical</a></div>
<div class="spark-desc">Kevin Powell wields the combined powers of the Popover API with anchor positioning in this live coding demo on YouTube. Make sure to check out
<a href="https://go.sparkpostmail2.com/f/a/s9Ad12iDRImABDs8QauKCA~~/AABEfhA~/zqyA-1Jfk_0V96vI7konB6af_7a_ySDwnNwfMp9WxUDNMxikwpN7jZ2YDIt89jG-C5Z7jvo6fMla1X3Le3STISWnwmBV6AlXMPKBkgRGQy55hayl8t2VzI4ceHpZwow8AfUr97QsKIlzQnXc0x15Sg~~">the Pen</a> to try casting the spell yourself.</div>
</div>
<div class="spark-item" data-type="video">
<a href="https://go.sparkpostmail2.com/f/a/FKTo6bW_LIYOZrf3_Mu-lw~~/AABEfhA~/d41Z3u2TNOeA40TBsnN0ebsBZaUcRI68vSp4qBK7qImECNTwslMwNNDti0gxpZvEEAWWjzsGIRvPN3sn5y0A_7J2SjHKfUxoSUqJN53IDYgDbJfig391AUzU3Lz1Ne7Z2Dsc8RANE75QMunYc-_nBg~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/chris-popover-hint.png" alt="Seeing if we understand popover=hint" height="" width="260" />
</a>
<div class="spark-item-type">video</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/FKTo6bW_LIYOZrf3_Mu-lw~~/AABEfhA~/d41Z3u2TNOeA40TBsnN0ebsBZaUcRI68vSp4qBK7qImECNTwslMwNNDti0gxpZvEEAWWjzsGIRvPN3sn5y0A_7J2SjHKfUxoSUqJN53IDYgDbJfig391AUzU3Lz1Ne7Z2Dsc8RANE75QMunYc-_nBg~~">Seeing if we understand popover=hint</a></div>
<div class="spark-desc">CodePen co-founder Chris Coyier takes a look at <code>popover=hint</code> (and gives a little sneak peek of the CodePen 2.0 editor) in this live coding session on YouTube.</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="video">
<a href="https://go.sparkpostmail2.com/f/a/4Eb6i5Oa_zVrwsFBuk-v2w~~/AABEfhA~/d41Z3u2TNOeA40TBsnN0ebsBZaUcRI68vSp4qBK7qIlagiHfb9FYLr_OL22k9e0_YhNzrJGk314RzczMe1Po1VEI3pN-vuvL0NdtXHMaSONvFZ70KPSWyrBn1WfZCwn307zUt4qlmPU5yReljpg9dw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/everything-popover-api.png" alt="Everything you need to know about the Popover API" height="" width="260" />
</a>
<div class="spark-item-type">video</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/4Eb6i5Oa_zVrwsFBuk-v2w~~/AABEfhA~/d41Z3u2TNOeA40TBsnN0ebsBZaUcRI68vSp4qBK7qIlagiHfb9FYLr_OL22k9e0_YhNzrJGk314RzczMe1Po1VEI3pN-vuvL0NdtXHMaSONvFZ70KPSWyrBn1WfZCwn307zUt4qlmPU5yReljpg9dw~~">Everything you need to know about the Popover API</a></div>
<div class="spark-desc">Get the rundown on how to use the Popover API in this beginner-friendly tutorial from Coding in Public on YouTube. You can play along with <a href="https://go.sparkpostmail2.com/f/a/Mbr81ooPg5hmah5ITS-GPQ~~/AABEfhA~/zC0kCzydzKkh5nbucsC4oi6jhi0j029iBDR24ISN1xFU1VZchVD6uzQOiCUgq8jFxnjKCGRZ5V4LXjgZTZ6oHgiSvnpauSJDyFySPuLsWL4_-hkWO1ave8ftTbewoAN6dLvCub2ApjZ5q_TclbKLNA~~">the Pen</a>!</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/sjZ0TIlzoto8Dt3MvZLUjg~~/AABEfhA~/5VdS6wG-sgXipsn-jdGNP8NOGEgZqQobMWp0S8KA7k7SR6HkDL9PL5eGHdfK8p1vG33igth9-TnatadqpZ4EbNXl5nDAQ_V2RvLhzSIMO2AV3uswbMF5nrDSBFinlrJP0IdZJ1ckuV9MDEGZIXr71oUM8srQEacNt20DzR-70hdMuG-iUH7z7KTp71pdu7S_7aK9Jkfmys1YUmMyjGsiRw~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/autoclosing-notif.png" alt="Creating an Auto-Closing Notification With an HTML Popover" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/sjZ0TIlzoto8Dt3MvZLUjg~~/AABEfhA~/5VdS6wG-sgXipsn-jdGNP8NOGEgZqQobMWp0S8KA7k7SR6HkDL9PL5eGHdfK8p1vG33igth9-TnatadqpZ4EbNXl5nDAQ_V2RvLhzSIMO2AV3uswbMF5nrDSBFinlrJP0IdZJ1ckuV9MDEGZIXr71oUM8srQEacNt20DzR-70hdMuG-iUH7z7KTp71pdu7S_7aK9Jkfmys1YUmMyjGsiRw~~">Creating an Auto-Closing Notification With an HTML Popover</a></div>
<div class="spark-desc">In this tutorial for CSS-Tricks, Preethi Sam shows us how to cook up a toast notification that automatically dismisses itself using the Popover API.</div>
</div>
<div class="spark-item" data-type="link">
<a href="https://go.sparkpostmail2.com/f/a/63mFan8lF0iZKG3LUnh2Vw~~/AABEfhA~/P3Y9fLp-aZDXf1oKtDgLWdmBag8RjFRd4SPzEUjvuG7qSXDZkVFGa0_nSm-eIxIACd0id8XL1pNpTB9OdV2rJCW1WeiyfL_UXXAoga5LHjO0_KX3SYCow7Gv76X2EWx5">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/popover-hint-kravets.png" alt="What is popover=hint?" height="" width="260" />
</a>
<div class="spark-item-type">link</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/63mFan8lF0iZKG3LUnh2Vw~~/AABEfhA~/P3Y9fLp-aZDXf1oKtDgLWdmBag8RjFRd4SPzEUjvuG7qSXDZkVFGa0_nSm-eIxIACd0id8XL1pNpTB9OdV2rJCW1WeiyfL_UXXAoga5LHjO0_KX3SYCow7Gv76X2EWx5">What is popover=hint?</a></div>
<div class="spark-desc">"<code>popover="hint"</code> allows you to open an unrelated <code>hint</code> popover without closing other popovers in the stack. This means you can have an existing stack of <code>auto</code> popovers remain open while still displaying a <code>hint</code> popover." Una Kravets tells us all about it in this tutorial that includes a <a href="https://go.sparkpostmail2.com/f/a/FKPyWCZkZ0h1vqX67WMKHQ~~/AABEfhA~/9EnNJYHlM4omrBcej3jm-0kIBKX9ZLfheXMBhS5AgZJ0aW1CiSxL6j_VR4b6HgF6lMrrH7jXBZ63B3LYC0_c3vpb5-3nMZkxzm_RaUKmakmW7HpXDtpubV3XDEVy4Jl5c5X_71f9qbIzms5nke7Zvg~~">great Pen</a>.</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/87VTNgV2fgb1D6vsXXd94g~~/AABEfhA~/I0eOOFAkCjPXl1Zvob9l8g_xb_mlLOu54Gf1P-2EoQ-kvKcCkmzgMcpvzyI2Xs8ofkx8_EGeBEiVtnqAmtFT08o7W-6TecVfUrA6B4U1hiqTU9zxIxi1d5dk2m93hoLpR0TzqV1z02a66khE2BXTCQ~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/popover-css-ghaste.png" alt="Popover CSS API Demo" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/87VTNgV2fgb1D6vsXXd94g~~/AABEfhA~/I0eOOFAkCjPXl1Zvob9l8g_xb_mlLOu54Gf1P-2EoQ-kvKcCkmzgMcpvzyI2Xs8ofkx8_EGeBEiVtnqAmtFT08o7W-6TecVfUrA6B4U1hiqTU9zxIxi1d5dk2m93hoLpR0TzqV1z02a66khE2BXTCQ~~">Popover CSS API Demo</a></div>
<div class="spark-desc">ghaste shares a playful demo of the Popover API. Click the brutalist button to reveal popover modal that tumbles out like a newspaper in the old Batman tv show. Kablaam!</div>
</div>
<div class="spark-item" data-type="pen">
<a href="https://go.sparkpostmail2.com/f/a/hgL3bLIGJvLeWrfEZup1XA~~/AABEfhA~/zqyA-1Jfk_0V96vI7konB_F11fkKInzN2PHze47UhnQqQesFn-hN0-mhFvkbsB8WJ9r9THSo6C8G5a65dkBzTPx1LmzeSiJ5NBjUTaF553W4djj4QtKLLxZ3-dPG7c8bv1XoCP9z2xKp3BFsh7OQ7Q~~">
<img class="spark-thumb" src="https://production-codepen-email-assets.codepenassets.com/cdn-cgi/image/width=600,quality=90,format=auto/codepen-spark/lightbox-wo-js.png" alt="Lightbox without JavaScript" height="" width="260" />
</a>
<div class="spark-item-type">pen</div>
<div class="spark-title"><a href="https://go.sparkpostmail2.com/f/a/hgL3bLIGJvLeWrfEZup1XA~~/AABEfhA~/zqyA-1Jfk_0V96vI7konB_F11fkKInzN2PHze47UhnQqQesFn-hN0-mhFvkbsB8WJ9r9THSo6C8G5a65dkBzTPx1LmzeSiJ5NBjUTaF553W4djj4QtKLLxZ3-dPG7c8bv1XoCP9z2xKp3BFsh7OQ7Q~~">Lightbox without JavaScript</a></div>
<div class="spark-desc">David Darnes shares a quick demo for how to use the Popover API to build a simple photo lightbox without JS and under 30 lines of CSS.</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" 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/Zl0aADmWLD0zNVzjeMF4Vg~~/AABEfhA~/tm4oPT9fCnjANdiMWeZdtmmhJaQ-2EJgS7TqOVPkTWWkJ3-xfr_U8basd0XGOWNh1Bq5Ap-gA0QEdxP6FuVYSZxAx91S0rIzECHAMDHx3YDqPBg0M7vKj8xzXmDcGMUiQ7hfFgS0iAZApYBwo25G9g~~"> email preferences </a> any time, or <a href="https://go.sparkpostmail2.com/f/a/vKFQ4jvozL1BYFn8xZpUdg~~/AABEfhA~/NwcBG7qWvaQPqvmkOxAdq7ijsWYVZl2iTTOGHiSTV3kistfCLoLOH6sH_FTGhZQa-XBTSTFsyrbliOe6QsxBCF0qbfaQRGEeEMt6VgTp1mdgPOSzWyccacSpkPC5w4Dk_uoi55WH2ovWxgczjBDOA9VzCL8mjg5bpsu9R7K2VvSDpyxPl88kY1gACpAtXLf9MMvEMitI-TarVu-ep3b2ziCYdw_Yy5Oi6PfYll2YqOIFJ0xTYeZmJlrQbxHZ1mf1Y9WzWPbpNGt70OmZUe4Fyw_nW8oLBqhlCtD2UqHyAK1heXrSMTjPRDt4tpm8BkpP5ky5v90cmmpstjoDD-1sW9lT9O736lM_9yDfevCtJSo~"> instantly unsubscribe </a> from emails of this kind. Need help with anything? Hit up <a href="https://go.sparkpostmail2.com/f/a/1ukiqMzEqNP4GWYgM-j8iA~~/AABEfhA~/hKR7LrdtQB7w4j_HBrggvr9mX06H89SbJt7FxuduVKK9vRwdgabJZlKkm8KbuN6h9m8ZVY4VFk9U7t4IHm_Ye6tNUToylVfI08x7OZ5F6y9koCMqb_OaXstqjtdvQKJQ">support</a>. Interested in sponsoring? Here's our <a href="https://go.sparkpostmail2.com/f/a/ZKw6mio7lDaj3dIFC8HqpA~~/AABEfhA~/P3Y9fLp-aZDXf1oKtDgLWRh8fwc9N4yiQoLauu_AQ3yHehpZBddRU-45SrMCW7kfnH95ORFh5HcpScic7iVpGeO0qQS-Uv2nw4IY_QGlQPtu-s165KjoiTJMUG3H6v0F">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/J3TcYFVh5OJpMzOfREjbIg~~/AABEfhA~/cuKX4o7boyAnAQ5pEEUi3KApE2Up3KRLA-ZcUC0pSFgIrvHAjsZmuwa9fZhZ86dCY-dIleI0U9CNnToQmc9T2Q~~">
</body>
</html>
