CodePen Embed - Hotspots

<!DOCTYPE HTML>
<html lang="fr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<meta name="x-apple-disable-message-reformatting">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
<title>Deezer - L'instant Culture</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style>
body, table, td, a {
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}
table, td {
	mso-table-lspace:0pt;
	mso-table-rspace:0pt;
}
img {
	-ms-interpolation-mode:bicubic;
}
img {
	border:0;
	height:auto;
	line-height:100%;
	outline:none;
	text-decoration:none;
}
table {
	border-collapse:collapse !important;
}
body {
	height:100% !important;
	margin:0 !important;
	padding:0 !important;
	width:100% !important;
}
a[x-apple-data-detectors] {
	color:inherit !important;
	text-decoration:none !important;
	font-size:inherit !important;
	font-family:inherit !important;
	font-weight:inherit !important;
	line-height:inherit !important;
}
u + #body a {
	color:inherit;
	text-decoration:none;
	font-size:inherit;
	font-family:inherit;
	font-weight:inherit;
	line-height:inherit;
}
#MessageViewBody a {
	color:inherit;
	text-decoration:none;
	font-size:inherit;
	font-family:inherit;
	font-weight:inherit;
	line-height:inherit;
}
a {
	color:inherit !important;
	font-weight:inherit !important;
}
a:hover {
	color:inherit !important;
	text-decoration:inherit !important;
}
.backgroundcolor01 {
	animation: 5s backgroundcolor01 infinite;
}
@keyframes backgroundcolor01 {
0% {
background-color:#316897;
background-image:linear-gradient(#263D92, rgba(38, 61, 146, 0));
}
50% {
background-color:#061137;
}
100% {
background-color:#316897;
background-image:linear-gradient(#263D92, rgba(38, 61, 146, 0));
}
}
.backgroundcolor02 {
	animation: 5s backgroundcolor02 infinite;
}
@keyframes backgroundcolor02 {
0% {
background-color:#CC1953;
background-image:linear-gradient(#A11A46, rgba(161, 26, 70, 0));
}
50% {
background-color:#241284;
}
100% {
background-color:#CC1953;
background-image:linear-gradient(#A11A46, rgba(161, 26, 70, 0));
}
}
.backgroundcolor03 {
	animation: 5s backgroundcolor03 infinite;
}
@keyframes backgroundcolor03 {
0% {
background-color:#FD5A22;
background-image:linear-gradient(#FFD100, rgba(255, 209, 0, 0));
}
50% {
background-color:#CC1953;
}
100% {
background-color:#FD5A22;
background-image:linear-gradient(#FFD100, rgba(255, 209, 0, 0));
}
}
.hoverbgcolor02:hover {
	background-color:#EF5466 !important;
	border-color:#EF5466 !important;
	transition:0.5s;
}
.hoverbgcolor02:hover * {
	color:#FFFFFF !important;
}
.hovertextdecorationunderline:hover {
	text-decoration:underline !important;
}
.hovertextdecorationnone:hover {
	text-decoration:none !important;
}
table {
	border-collapse: collapse;
	mso-table-lspace: 0;
	mso-table-rspace: 0;
}
.bul-link {
	padding-bottom: 1px;
	text-decoration: none !important;
	border-bottom: 1.5px solid #3A9B87;
}
.bul-link:hover {
	color: #3A9B87 !important;
}
.bul-quiz-answer input+table {
	cursor: pointer;
}
noinput.bul-quiz-radio {
	display: block !important;
}
.bul-quiz-answer-right input:checked+table span {
	background-image: url(https://test.badsender.com/images_hebergees_tests/litmus/email_02/radio_on.png) !important;
}
.bul-quiz-answer-wrong input:checked+table span {
	background-image: url(https://test.badsender.com/images_hebergees_tests/litmus/email_02/radio_wrong.png) !important;
}
.bul-quiz-answer input:checked+table+p {
	display: block !important;
}
p.textes_deroulants {
	color:#FFFFFF;
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	overflow:hidden;
	margin:0 auto;
	font-size:0px;
	font-weight:bold;
}
#texte01 {
	animation:typing01 10s infinite;
}
#texte02 {
	animation:typing02 10s infinite;
}
#texte03 {
	animation:typing03 10s infinite;
}
#texte04 {
	animation:typing04 10s infinite;
}
#texte05 {
	animation:typing05 10s infinite;
}
#texte06 {
	animation:typing06 10s infinite;
}
#texte07 {
	animation:typing07 10s infinite;
}
#texte08 {
	animation:typing08 10s infinite;
}
#texte09 {
	animation:typing09 10s infinite;
}
#texte10 {
	animation:typing10 10s infinite;
}
#texte11 {
	animation:typing11 10s infinite;
}
#texte12 {
	animation:typing12 10s infinite;
}
#texte13 {
	animation:typing13 10s infinite;
}
#texte14 {
	animation:typing14 10s infinite;
}
#texte15 {
	animation:typing15 10s infinite;
}
@keyframes typing01 {
0% {
width:100%;
font-size:22px;
}
20% {
width:100%;
font-size:22px;
}
21% {
width:0%;
font-size:0px;
}
62% {
width:0%;
font-size:0px;
}
63% {
width:100%;
font-size:22px;
}
100% {
width:100%;
font-size:22px;
}
}
@keyframes typing02 {
0% {
width:100%;
font-size:22px;
}
21% {
width:100%;
font-size:22px;
}
22% {
width:0%;
font-size:0px;
}
63% {
width:0%;
font-size:0px;
}
64% {
width:100%;
font-size:22px;
}
100% {
width:100%;
font-size:22px;
}
}
@keyframes typing03 {
0% {
width:100%;
font-size:22px;
}
22% {
width:100%;
font-size:22px;
}
23% {
width:0%;
font-size:0px;
}
64% {
width:0%;
font-size:0px;
}
65% {
width:100%;
font-size:22px;
}
100% {
width:100%;
font-size:22px;
}
}
@keyframes typing04 {
0% {
width:100%;
font-size:22px;
}
23% {
width:100%;
font-size:22px;
}
24% {
width:0%;
font-size:0px;
}
65% {
width:0%;
font-size:0px;
}
66% {
width:100%;
font-size:22px;
}
100% {
width:100%;
font-size:22px;
}
}
@keyframes typing05 {
0% {
width:100%;
font-size:22px;
}
24% {
width:100%;
font-size:22px;
}
25% {
width:0%;
font-size:0px;
}
66% {
width:0%;
font-size:0px;
}
67% {
width:100%;
font-size:22px;
}
100% {
width:100%;
font-size:22px;
}
}
@keyframes typing06 {
0% {
width:0%;
font-size:0px;
}
21% {
width:0%;
font-size:0px;
}
22% {
width:100%;
font-size:22px;
}
40% {
width:100%;
font-size:22px;
}
41% {
width:0%;
font-size:0px;
}
100% {
width:0%;
font-size:0px;
}
}
@keyframes typing07 {
0% {
width:0%;
font-size:0px;
}
22% {
width:0%;
font-size:0px;
}
23% {
width:100%;
font-size:22px;
}
41% {
width:100%;
font-size:22px;
}
42% {
width:0%;
font-size:0px;
}
100% {
width:0%;
font-size:0px;
}
}
@keyframes typing08 {
0% {
width:0%;
font-size:0px;
}
23% {
width:0%;
font-size:0px;
}
24% {
width:100%;
font-size:22px;
}
42% {
width:100%;
font-size:22px;
}
43% {
width:0%;
font-size:0px;
}
100% {
width:0%;
font-size:0px;
}
}
@keyframes typing09 {
0% {
width:0%;
font-size:0px;
}
24% {
width:0%;
font-size:0px;
}
25% {
width:100%;
font-size:22px;
}
43% {
width:100%;
font-size:22px;
}
44% {
width:0%;
font-size:0px;
}
100% {
width:0%;
font-size:0px;
}
}
@keyframes typing10 {
0% {
width:0%;
font-size:0px;
}
25% {
width:0%;
font-size:0px;
}
26% {
width:100%;
font-size:22px;
}
44% {
width:100%;
font-size:22px;
}
45% {
width:0%;
font-size:0px;
}
100% {
width:0%;
font-size:0px;
}
}
@keyframes typing11 {
0% {
width:0%;
font-size:0px;
}
41% {
width:0%;
font-size:0px;
}
42% {
width:100%;
font-size:22px;
}
62% {
width:100%;
font-size:22px;
}
63% {
width:0%;
font-size:0px;
}
100% {
width:0%;
font-size:0px;
}
}
@keyframes typing12 {
0% {
width:0%;
font-size:0px;
}
42% {
width:0%;
font-size:0px;
}
43% {
width:100%;
font-size:22px;
}
63% {
width:100%;
font-size:22px;
}
64% {
width:0%;
font-size:0px;
}
100% {
width:0%;
font-size:0px;
}
}
@keyframes typing13 {
0% {
width:0%;
font-size:0px;
}
43% {
width:0%;
font-size:0px;
}
44% {
width:100%;
font-size:22px;
}
64% {
width:100%;
font-size:22px;
}
65% {
width:0%;
font-size:0px;
}
100% {
width:0%;
font-size:0px;
}
}
@keyframes typing14 {
0% {
width:0%;
font-size:0px;
}
44% {
width:0%;
font-size:0px;
}
45% {
width:100%;
font-size:22px;
}
65% {
width:100%;
font-size:22px;
}
66% {
width:0%;
font-size:0px;
}
100% {
width:0%;
font-size:0px;
}
}
@keyframes typing15 {
0% {
width:0%;
font-size:0px;
}
45% {
width:0%;
font-size:0px;
}
46% {
width:100%;
font-size:22px;
}
66% {
width:100%;
font-size:22px;
}
67% {
width:0%;
font-size:0px;
}
100% {
width:0%;
font-size:0px;
}
}
@media screen {
a[href^="tel"], a[href^="sms"], .moblinks a {
color: inherit;
text-decoration: none !important;
}
}
a[x-apple-data-detectors] {
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}
.bgimg {
	background:url(https://test.badsender.com/images_hebergees_tests/litmus/email_02/hotspots.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-image:url(https://test.badsender.com/images_hebergees_tests/litmus/email_02/hotspots.png);
	background:url(https://test.badsender.com/images_hebergees_tests/litmus/email_02/hotspots.png) no-repeat top center;
	display: block;
	width: 480px;
	height: 280px;
}
.wrapper-secondary {
	max-height: 0px;
	max-width: 0px;
}
.hot-tool-wrapper {
	position: relative;
	display: inline-block;
	max-width: 0px;
}
.tooltip-content {
	background-color:#121216;
	color:#FFFFFF;
	display:block;
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-size:13px;
	line-height:16px;
	text-align:left;
	padding:10px;
	mso-line-height-rule:exactly;
	border-radius:3px !important;
	-moz-border-radius:3px !important;
	-webkit-border-radius:3px !important;
}
.tooltip-wrapper {
	max-height: 0px;
	opacity: 0;
	overflow: hidden;
	transition: 0.3s;
}
.hot-tool-wrapper:hover .tooltip-wrapper {
	max-height: none !important;
	opacity: 1 !important;
	transition: 0.3s;
}
.outlookshow {
	display: none !important;
}
body[data-outlook-cycle] .outlookshow {
	display:block !important;
	width: auto !important;
	overflow: visible !important;
	float: none !important;
	max-height:inherit !important;
	max-width:inherit !important;
	line-height: auto !important;
	margin-top:0px !important;
	visibility:inherit !important;
}
body[data-outlook-cycle] .outlookhide {
	display:none !important;
	display:none;
	overflow:hidden;
	float:left;
	width:0px;
	max-height:0px;
	max-width:0px;
	line-height:0px;
	visibility:hidden;
}
[class~="x_outlookshow"] {
display:block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height:inherit !important;
max-width:inherit !important;
line-height: auto !important;
margin-top:0px !important;
visibility:inherit !important;
}
[class~="x_outlookhide"] {
display:none !important;
display:none;
overflow:hidden;
float:left;
width:0px;
max-height:0px;
max-width:0px;
line-height:0px;
visibility:hidden;
}
.interactive-form {
	display: block !important;
	max-height: inherit !important;
	overflow: visible !important;
}
.fallback-form {
	display: none;
}
body[data-outlook-cycle] .outlookshow {
	display:block !important;
	width: auto !important;
	overflow: visible !important;
	float: none !important;
	max-height:inherit !important;
	max-width:inherit !important;
	line-height: auto !important;
	margin-top:0px !important;
	visibility:inherit !important;
}
body[data-outlook-cycle] .outlookhide {
	display:none !important;
	display:none;
	overflow:hidden;
	float:left;
	width:0px;
	max-height:0px;
	max-width:0px;
	line-height:0px;
	visibility:hidden;
}
[class~="x_outlookshow"] {
display:block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height:inherit !important;
max-width:inherit !important;
line-height: auto !important;

margin-top:0px !important;
visibility:inherit !important;
}
[class~="x_outlookhide"] {
display:none !important;
display:none;
overflow:hidden;
float:left;
width:0px;
max-height:0px;
max-width:0px;
line-height:0px;
visibility:hidden;
}
@media only screen and (max-width: 640px) {
.fallback-form {
display:block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height:inherit !important;
max-width:inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility:inherit !important;
}
.interactive-form, .interactive-form p, .interactive-form label, .interactive-form input {
display:none !important;
display:none !important;
overflow:hidden !important;
max-height: 0px !important;
max-width: 0px !important;
line-height: 0px !important;
visibility:hidden !important;
}
}
</style>
<!--[if mso]>
<style type="text/css">

.fallbackfont {
font-family:Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
</head>
<body id="body" style="padding:0px !important; margin:0px !important; background-color:#000000;" bgcolor="#000000">
<div role="article" aria-roledescription="email" aria-label="Deezer - L'instant Culture" lang="fr" style="font-size:1rem">
  
  
  
  
  
  
  
  <table style="width:100%; margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center" bgcolor="#000000"><!--[if (gte mso 9)|(IE)]><table style="margin:0px auto; width:550px;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0"><tr><td><![endif]-->
        
        <table style="margin:0px auto; max-width:550px; width:100%;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" bgcolor="#121216">
          <tr>
            <td style="line-height:1px; font-size:1px; width:5px; background-color:#FD5A22;
background-image:linear-gradient(#FFD100, rgba(255, 209, 0, 0));" class="backgroundcolor03">&nbsp;</td>
            <td><!-- DEBUT HOTSPOTS --> 
              <!-- START force fallback on Yahoo -->
              
              <style>
.& #☃ .yahoohide {display: none !important;}
.& #☃ .yahooshow {display: block !important;}
</style>
              
              <!-- END force fallback on Yahoo -->
              
              <table id="☃" role="article" aria-label="Email from Litmus" lang="en" cellpadding="0" cellspacing="0" border="0" style="width: 100%; text-align:center; margin: 0 auto; table-layout: fixed;">
                <tr>
                  <td><!-- start BODY -->
                    
                    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                      <tr>
                        <td align="center" valign="top"><!-- start MODULE_00 -->
                          
                          <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="width: 480px; max-width: 480px;">
                            <tr>
                              <td align="center" style="width: 480px; max-width: 480px;"><!-- start HERO -->
                                
                                <div style="margin: 0 auto; padding: 0; display:block; width:480px; max-width: 480px;" align="left"> 
                                  <!-- start SECTION_INTERACTIVE --> 
                                  <!--[if !mso]><! -->
<div class="yahoohide outlookhide wrapper-primary" style="margin: auto; width:480px; height:280px;">
<div class="bgimg" style="background:url(https://test.badsender.com/images_hebergees_tests/litmus/email_02/hotspots.png) no-repeat top center; background-image:url(https://test.badsender.com/images_hebergees_tests/litmus/email_02/hotspots.png); background-repeat:no-repeat; background-position:top center; background-size:100%;">
<div class="wrapper-secondary">
<div class="hot-tool-wrapper" style="margin-top:160px; margin-left:10px; background-color:#0F0">
<img src="https://test.badsender.com/images_hebergees_tests/litmus/email_02/animated.png" width="25" style="margin-left:0px;" border="0" alt="" />
<div class="tooltip-wrapper" style="width:240px;">
<span class="tooltip-content">Jonathan Morali, membre fondateur du groupe, a aussi composé <a href="https://www.youtube.com/watch?v=t3v25rt-DYA" target="_blank" style="color:#FFFFFF; text-decoration:underline;">la musique du jeu vidéo "Life is Strange"</a>.</span>
</div>
</div>
</div>
<div class="wrapper-secondary">
<div class="hot-tool-wrapper" style="margin-top:70px; margin-left:160px;">
<img src="https://test.badsender.com/images_hebergees_tests/litmus/email_02/animated.png" width="25" style="margin-left:0px;" border="0" alt="" />
<div class="tooltip-wrapper" style="width:230px;">
<span class="tooltip-content">Jean-Yves Lozac'h, le bassiste du groupe, a rejoint Jonathan Morali en 2003, il y a déjà 17 ans&nbsp;!</span>
</div>
</div>
</div>
<div class="wrapper-secondary">
<div class="hot-tool-wrapper" style="margin-top:170px; margin-left:200px;">
<img src="https://test.badsender.com/images_hebergees_tests/litmus/email_02/animated.png" width="25" style="margin-left:0px;" border="0" alt="" />
<div class="tooltip-wrapper" style="width:230px;">
<span class="tooltip-content">Olivier Marguerit propose une superbe version de son titre "La rivière" sur <a href="https://www.youtube.com/watch?v=uzU0F8dCe8M" target="_blank" style="color:#FFFFFF; text-decoration:underline;">Youtube</a> avec trois anges.</span>
</div>
</div>
</div>
<div class="wrapper-secondary">
<div class="hot-tool-wrapper" style="margin-top:30px; margin-left:220px;">
<img src="https://test.badsender.com/images_hebergees_tests/litmus/email_02/animated.png" width="25" style="margin-left:80px;" border="0" alt="" />
<div class="tooltip-wrapper" style="width:240px;">
<span class="tooltip-content">Clément Carle devait aussi être présent pour l'adaptation musicale de "La Métamorphose" de Kafka à la Maison de la Radio début 2020&hellip;</span>
</div>
</div>
</div>
<div class="wrapper-secondary">
<div class="hot-tool-wrapper" style="margin-top:160px; margin-left:260px; text-align:right;">
<img src="https://test.badsender.com/images_hebergees_tests/litmus/email_02/animated.png" width="25" style="margin-left:175px;" border="0" alt="" />
<div class="tooltip-wrapper" style="width:200px;">
<span class="tooltip-content">Rémi Alexandre a aussi son <a href="https://www.youtube.com/channel/UCsJA55D5bCokRD7ovNQDyRQ" target="_blank" style="color:#FFFFFF; text-decoration:underline;">compte officiel Youtube</a> avec les compositions de son groupe "Shorebilly".</span>
</div>
</div>
</div>
</div>
</div>
<!--<![endif]--> 
                                  <!-- end SECTION_INTERACTIVE --> 
                                  <!-- start SECTION_FALLBACK --> 
                                  <!--[if !mso]><! -->
<div class="outlookshow yahooshow">
<!--<![endif]--> 
                                  <a href="https://www.deezer.com/fr/artist/1655" target="_blank"><img src="https://test.badsender.com/images_hebergees_tests/litmus/email_02/hotspots_fallback.gif" width="480" height="280" style="display:block; padding:0; margin:0; height:auto; max-width:100%;" border="0" alt="" /></a> 
                                  <!--[if !mso]><! -->
</div>
<!--<![endif]--> 
                                  <!-- end SECTION_FALLBACK --> 
                                </div>
                                
                                <!-- end HERO --></td>
                            </tr>
                          </table>
                          
                          <!-- end MODULE_00 --></td>
                      </tr>
                    </table></td>
                </tr>
              </table>
              
              <!-- end BODY_SECTION --> 
              <!-- FIN HOTSPOTS --></td>
            <td style="line-height:1px; font-size:1px; width:5px;" bgcolor="#000000">&nbsp;</td>
          </tr>
        </table>
        
        <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
    </tr>
  </table>
  <table style="width:100%; margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center" bgcolor="#000000" style="padding:0px 5px;"><!--[if (gte mso 9)|(IE)]><table style="margin:0px auto; width:540px;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0"><tr><td><![endif]-->
        
        <table style="margin:0px auto; max-width:540px; width:100%;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td bgcolor="#121216" style="padding:20px 0px 40px; border-radius:0px 0px 3px 3px; -moz-border-radius:0px 0px 3px 3px; -webkit-border-radius:0px 0px 3px 3px;"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; color:#A0A0A2; font-weight:400; font-style:italic;" class="fallbackfont">Pour voir les anecdotes sur le groupe apparaître, survolez les "+".<br>
                En cas de problème d'affichage, vous pouvez consulter la <a href="#toreplace" style="color:#A0A0A2; text-decoration:underline;">version en ligne</a>.</p></td>
          </tr>
        </table>
        
        <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
    </tr>
  </table>
  
</div>
</body>
</html>
This Pen is owned by DEFOSSEZ on CodePen.
See more by @Badsender on CodePen
External CSS

This Pen doesn't use any external CSS resources.
External JavaScript

This Pen doesn't use any external JavaScript resources.