Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<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 align="center" style="padding:40px 0px;"><!--[if (gte mso 9)|(IE)]><table style="margin:0px auto; width:520px;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0"><tr><td><![endif]-->
              
              <table style="margin:0px auto; max-width:520px; width:100%;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td align="center" valign="top"><table align="center" border="0" cellspacing="0" cellpadding="0" style="width:460px; margin:0px auto;" role="presentation">
                      <tr> 
                        <!-- DEBUT CARROUSEL -->
                        <td align="center" valign="top"><style type="text/css">

@media only screen and (-webkit-min-device-pixel-ratio:0),
(min--moz-device-pixel-ratio:0) {
#webkitnocheck:checked~.fallback {
display: none;
}
#webkitnocheck:checked~div .interactive {
display: block !important;
max-height: none !important;
}
}
@media screen yahoo {
.fallback {
display: block !important;
max-height: none;
}
.interactive {
display: none !important;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
#MessageViewBody .fallback,
body.MsgBody .fallback {
display: block !important;
}
#MessageViewBody .interactive,
body.MsgBody .interactive {
display: none !important;
}
#MessageViewBody .samsung {
display: none !important;
}
}
@media screen and (max-width:9999px) {
u+.gmailbody .fallback {
display: block !important;
max-height: none;
}
u+.gmailbody .interactive {
display: none !important;
}
}
@media only screen and (-webkit-min-device-pixel-ratio:0),
(min--moz-device-pixel-ratio:0) {
.wrapper {
position: relative;
overflow: hidden;
width: 460px;
}
.wrapper2 {
position: relative;
overflow: hidden;
width: 460px;
height: 80px;
}
@-webkit-keyframes anim1 {
0%, 22% {
left: 0px;
opacity: 1;
}
25% {
left: -460px;
opacity: 0;
}
25.1%, 97% {
left: 460px;
opacity: 0;
}
100% {
left: 0px;
opacity: 1;
}
}
@-webkit-keyframes anim2 {
0%,
22% {
left: 460px;
opacity: 0;
}
25% {
left: 0px;
opacity: 1;
}
25.1%,
47% {
left: 0px;
opacity: 1;
}
50% {
left: -460px;
opacity: 0;
}
50.1%,
100% {
left: -460px;
opacity: 0;
}
}
@-webkit-keyframes anim3 {
0%,
47% {
left: 460px;
opacity: 0;
}
50% {
left: 0px;
opacity: 1;
}
50.1%,
72% {
left: 0px;
opacity: 1;
}
75% {
left: -460px;
opacity: 0;
}
75.1%,
100% {
left: -460px;
opacity: 0;
}
}
@-webkit-keyframes anim4 {
0%,
72% {
left: 460px;
opacity: 0;
}
75% {
left: 0px;
opacity: 1;
}
75.1%,
97% {
left: 0px;
opacity: 1
}
100% {
left: -460px;
opacity: 0;
}
}
@-webkit-keyframes btn1 {
0%,
25% {
z-index: 0;
opacity: 0;
left: 0%;
margin-left: 0px;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_gauche.png);
}
25.01%,
50% {
z-index: 1;
opacity: 1;
left: 0%;
margin-left: 0px;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_gauche.png);
}
50.1%,
75% {
z-index: 0;
opacity: 0;
left: 0%;
margin-left: 0px;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_gauche.png);
}
75.01%,
100% {
z-index: 1;
opacity: 1;
left: 100%;
margin-left: -40px;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_droite.png);
}
}
@-webkit-keyframes btn2 {
0%,
25% {
z-index: 1;
opacity: 1;
left: 100%;
margin-left: -40px;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_droite.png);
}
25.01%,
50% {
z-index: 0;
opacity: 0;
left: 0%;
margin-left: 0px;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_gauche.png);
}
50.01%,
75% {
z-index: 1;
opacity: 1;
left: 0%;
margin-left: 0px;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_gauche.png);
}
75.01%,
100% {
z-index: 0;
opacity: 0;
left: 0%;
margin-left: 0px;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_gauche.png);
}
}
@-webkit-keyframes btn3 {
0%,
25% {
z-index: 0;
opacity: 0;
left: 100%;
margin-left: -40px;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_droite.png);
}
25.01%,
50% {
z-index: 1;
opacity: 1;
left: 100%;
margin-left: -40px;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_droite.png);
}
50.01%,
75% {
z-index: 0;
opacity: 0;
left: 0%;
margin-left: 0px;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_gauche.png);
}
75.01%,
100% {
z-index: 1;
opacity: 1;
left: 0%;
margin-left: 0px;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_gauche.png);
}
}
@-webkit-keyframes btn4 {
0%,
25% {
z-index: 1;
opacity: 1;
left: 0%;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_gauche.png);
}
25.01%,
50% {
z-index: 0;
opacity: 0;
left: 0%;
margin-left: 0px;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_gauche.png);
}
50.01%,
75% {
z-index: 1;
opacity: 1;
left: 100%;
margin-left: -40px;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_droite.png);
}
75.01%,
100% {
z-index: 0;
opacity: 0;
left: 0%;
margin-left: 0px;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_gauche.png);
}
}
#slide1-img,
#slide2-img,
#slide3-img,
#slide4-img {
display: block;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: auto;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-webkit-transition: opacity 0.75s ease-in-out;
transition: all .75s ease-out;
-webkit-transition: all .75s ease-out;
-moz-transition: all .75s ease-out;
}
#slide1-content,
#slide2-content,
#slide3-content,
#slide4-content {
display: block;
position: absolute;
top: 0;
left: 0;
width: 460px;
height: 120px;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-webkit-transition: opacity 0.75s ease-in-out;
transition: all .75s ease-out;
-webkit-transition: all .75s ease-out;
-moz-transition: all .75s ease-out;
}
.button1,
.button2,
.button3,
.button4 {
display: block;
position: absolute;
top: 60px;
z-index: 10;
width: 40px;
height: 40px;
background-size: cover;
background-position: center;
cursor: pointer;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
-webkit-transition: all 0s linear;
}
.static {
width: 100%;
height: auto;
}
#slide1-img,
#slide1-content {
-webkit-animation-name: anim1;
}
#slide2-img,
#slide2-content {
-webkit-animation-name: anim2;
}
#slide3-img,
#slide3-content {
-webkit-animation-name: anim3;
}
#slide4-img,
#slide4-content {
-webkit-animation-name: anim4;
}
.button1 {
-webkit-animation-name: btn1;
}
.button2 {
-webkit-animation-name: btn2;
}
.button3 {
-webkit-animation-name: btn3;
}
.button4 {
-webkit-animation-name: btn4;
}
#slide1:checked~div #slide1-content,
#slide1:checked~div #slide1-img {
-webkit-animation-name: none;
z-index: 1;
opacity: 1;
left: 0px;
}
#slide1:checked~div .button4 {
-webkit-animation-name: none;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_gauche.png);
left: 0%;
}
#slide1:checked~div .button2 {
-webkit-animation-name: none;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_droite.png);
left: 100%;
margin-left: -40px;
}
#slide1:checked~div #slide2-content,
#slide1:checked~div #slide2-img {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
left: 460px;
}
#slide1:checked~div #slide4-content,
#slide1:checked~div #slide4-img {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
left: -460px;
}
#slide1:checked~div #slide3-content,
#slide1:checked~div #slide3-img {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
}
#slide1:checked~div .button1,
#slide1:checked~div .button3 {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
}
#slide2:checked~div #slide2-content,
#slide2:checked~div #slide2-img {
-webkit-animation-name: none;
z-index: 1;
opacity: 1;
}
#slide2:checked~div .button1 {
-webkit-animation-name: none;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_gauche.png);
left: 0%;
}
#slide2:checked~div .button3 {
-webkit-animation-name: none;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_droite.png);
left: 100%;
margin-left: -40px;
}
#slide2:checked~div #slide3-content,
#slide2:checked~div #slide3-img {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
left: 460px;
}
#slide2:checked~div #slide1-content,
#slide2:checked~div #slide1-img {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
left: -460px;
}
#slide2:checked~div #slide4-content,
#slide2:checked~div #slide4-img {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
}
#slide2:checked~div .button2,
#slide2:checked~div .button4 {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
}
#slide3:checked~div #slide3-content,
#slide3:checked~div #slide3-img {
-webkit-animation-name: none;
z-index: 1;
opacity: 1;
}
#slide3:checked~div .button2 {
-webkit-animation-name: none;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_gauche.png);
left: 0%;
}
#slide3:checked~div .button4 {
-webkit-animation-name: none;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_droite.png);
left: 100%;
margin-left: -40px;
}
#slide3:checked~div #slide4-content,
#slide3:checked~div #slide4-img {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
left: 460px;
}
#slide3:checked~div #slide2-content,
#slide3:checked~div #slide2-img {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
left: -460px;
}
#slide3:checked~div #slide1-content,
#slide3:checked~div #slide1-img {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
}
#slide3:checked~div .button3,
#slide3:checked~div .button1 {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
}
#slide4:checked~div #slide4-content,
#slide4:checked~div #slide4-img {
-webkit-animation-name: none;
z-index: 1;
opacity: 1;
}
#slide4:checked~div .button3 {
-webkit-animation-name: none;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_gauche.png);
left: 0%;
}
#slide4:checked~div .button1 {
-webkit-animation-name: none;
background-image: url(https://test.badsender.com/innovations/carrousel/fleche_droite.png);
left: 100%;
margin-left: -40px;
}
#slide4:checked~div #slide1-content,
#slide4:checked~div #slide1-img {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
left: 460px;
}
#slide4:checked~div #slide3-content,
#slide4:checked~div #slide3-img {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
left: -460px;
}
#slide4:checked~div #slide2-content,
#slide4:checked~div #slide2-img {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
}
#slide4:checked~div .button2,
#slide4:checked~div .button4 {
-webkit-animation-name: none;
z-index: 0;
opacity: 0;
}
}
@media only screen and (max-width:480px),
(max-device-width:480px) {
.wrapper {
width: 100% !important;
}
.wrapper2 {
width: 300px !important;
height: 120px;
}
}
</style>
                          
                          <!--[if !mso]>
<!-- --><input type="checkbox" id="webkitnocheck" name="webkit" checked="checked" style="display:none; max-height:0; visibility:hidden;">
<!--<![endif]-->
                          
                          <div class="fallback pad">
                            <table align="center" border="0" cellspacing="0" cellpadding="0" style="width:340px; margin:0px auto;" role="presentation">
                              <tr>
                                <td style="width:100px;"><a href="https://www.deezer.com/fr/album/54279552" target="_blank"><img src="https://test.badsender.com/innovations/carrousel/pochette_01@2x.jpg" width="100" height="100" style="margin:0px auto; display:block; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; font-family:'Open Sans', Arial, Helvetica, sans-serif; font-weight:400; color:#FFFFFF; font-size:12px;" class="fallbackfont" border="0" alt="Brotherocean" /></a></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td style="width:100px;"><a href="https://www.deezer.com/fr/album/10493790" target="_blank"><img src="https://test.badsender.com/innovations/carrousel/pochette_02@2x.jpg" width="100" height="100" style="margin:0px auto; display:block; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; font-family:'Open Sans', Arial, Helvetica, sans-serif; font-weight:400; color:#FFFFFF; font-size:12px;" class="fallbackfont" border="0" alt="Someday We Will Foresee Obstacles" /></a></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td style="width:100px;"><a href="https://www.deezer.com/fr/album/391864" target="_blank"><img src="https://test.badsender.com/innovations/carrousel/pochette_03@2x.jpg" width="100" height="100" style="margin:0px auto; display:block; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; font-family:'Open Sans', Arial, Helvetica, sans-serif; font-weight:400; color:#FFFFFF; font-size:12px;" class="fallbackfont" border="0" alt="Someday We Will Foresee Obstacles" /></a></td>
                              </tr>
                              <tr>
                                <td><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/54279552" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">Brotherocean</a></p></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/10493790" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">Someday [&hellip;]</a></p></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/391864" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">Ghost Days</a></p></td>
                              </tr>
                              <tr>
                                <td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/1655" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Syd Matters</a></p></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/1655" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Syd Matters</a></p></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/1655" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Syd Matters</a></p></td>
                              </tr>
                              <tr>
                                <td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                      <td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/54279552" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
                                    </tr>
                                  </table></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                      <td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/10493790" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
                                    </tr>
                                  </table></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                      <td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/391864" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
                                    </tr>
                                  </table></td>
                              </tr>
                            </table>
                            <table border="0" cellspacing="0" cellpadding="0" role="presentation">
                              <tr>
                                <td style="line-height:1px; font-size:1px; height:20px;">&nbsp;</td>
                              </tr>
                            </table>
                            <table align="center" border="0" cellspacing="0" cellpadding="0" style="width:340px; margin:0px auto;" role="presentation">
                              <tr>
                                <td style="width:100px;"><a href="https://www.deezer.com/fr/album/10472058" target="_blank"><img src="https://test.badsender.com/innovations/carrousel/pochette_04@2x.jpg" width="100" height="100" style="margin:0px auto; display:block; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; font-family:'Open Sans', Arial, Helvetica, sans-serif; font-weight:400; color:#FFFFFF; font-size:12px;" class="fallbackfont" border="0" alt="A Whisper And A Sigh" /></a></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td style="width:100px;"><a href="https://www.deezer.com/fr/album/66209972" target="_blank"><img src="https://test.badsender.com/innovations/carrousel/pochette_05@2x.jpg" width="100" height="100" style="margin:0px auto; display:block; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; font-family:'Open Sans', Arial, Helvetica, sans-serif; font-weight:400; color:#FFFFFF; font-size:12px;" class="fallbackfont" border="0" alt="Everything Else" /></a></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td style="width:100px;"><a href="https://www.deezer.com/fr/album/96874192" target="_blank"><img src="https://test.badsender.com/innovations/carrousel/pochette_06@2x.jpg" width="100" height="100" style="margin:0px auto; display:block; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; font-family:'Open Sans', Arial, Helvetica, sans-serif; font-weight:400; color:#FFFFFF; font-size:12px;" class="fallbackfont" border="0" alt="Someday We Will Foresee Obstacles" /></a></td>
                              </tr>
                              <tr>
                                <td><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/10472058" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">A Whisper [&hellip;]</a></p></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/66209972" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">Everything Else</a></p></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/96874192" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">Erotic Returns</a></p></td>
                              </tr>
                              <tr>
                                <td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/1655" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Syd Matters</a></p></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/1655" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Syd Matters</a></p></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/17135" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Yeasayer</a></p></td>
                              </tr>
                              <tr>
                                <td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                      <td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/10472058" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
                                    </tr>
                                  </table></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                      <td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/66209972" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
                                    </tr>
                                  </table></td>
                                <td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
                                <td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                      <td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/96874192" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
                                    </tr>
                                  </table></td>
                              </tr>
                            </table>
                          </div>
                          <div class="samsung"> 
                            <!--[if !mso]>
<!-- -->
<div class="interactive" style="mso-hide:all; display:none; max-height:0; overflow:hidden;">
<input type="radio" id="slide1" name="hero" style="display:none; max-height:0; visibility:hidden;">
<input type="radio" id="slide2" name="hero" style="display:none; max-height:0; visibility:hidden;">
<input type="radio" id="slide3" name="hero" style="display:none; max-height:0; visibility:hidden;">
<input type="radio" id="slide4" name="hero" style="display:none; max-height:0; visibility:hidden;">
<div class="pad">
<div class="wrapper">
<img src="https://test.badsender.com/innovations/carrousel/groupe_01@2x.png" id="slide1-img" width="460" height="100" alt="" />
<img src="https://test.badsender.com/innovations/carrousel/groupe_02@2x.png" id="slide2-img" width="460" height="100" alt="" />
<img src="https://test.badsender.com/innovations/carrousel/groupe_03@2x.png" id="slide3-img" width="460" height="100" alt="" />
<img src="https://test.badsender.com/innovations/carrousel/groupe_04@2x.png" id="slide4-img" width="460" height="100" alt="" />
<img src="https://test.badsender.com/innovations/carrousel/static.png" class="static" alt="" />
<label class="button1" for="slide1"></label>
<label class="button2" for="slide2"></label>
<label class="button3" for="slide3"></label>
<label class="button4" for="slide4"></label>
</div>
</div>
<div class="wrapper2">
<table id="slide1-content" align="center" border="0" cellspacing="0" cellpadding="0" style="width:460px; margin:0px auto;">
<tr>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
<td style="width:100px;"><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/54279552" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">Brotherocean</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td style="width:100px;"><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/10493790" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">Someday [&hellip;]</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td style="width:100px;"><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/391864" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">Ghost Days</a></p></td>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
<td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/1655" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Syd Matters</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/1655" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Syd Matters</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/1655" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Syd Matters</a></p></td>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
<td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/54279552" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
</tr>
</table></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/10493790" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
</tr>
</table></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/391864" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
</tr>
</table></td>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
</tr>
</table>
<table id="slide2-content" align="center" border="0" cellspacing="0" cellpadding="0" style="width:460px;">
<tr>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
<td style="width:100px;"><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/10472058" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">A Whisper [&hellip;]</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td style="width:100px;"><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/66209972" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">Everything Else</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td style="width:100px;"><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/96874192" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">Erotic Returns</a></p></td>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
<td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/1655" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Syd Matters</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/1655" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Syd Matters</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/17135" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Yeasayer</a></p></td>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
<td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/10472058" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
</tr>
</table></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/66209972" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
</tr>
</table></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/96874192" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
</tr>
</table></td>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
</tr>
</table>
<table id="slide3-content" align="center" border="0" cellspacing="0" cellpadding="0" style="width:460px;">
<tr>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
<td style="width:100px;"><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/12734032" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">Amen &amp; [&hellip;]</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td style="width:100px;"><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/6156603" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">All Hour [&hellip;]</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td style="width:100px;"><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/85429912" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">Gallipoli</a></p></td>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
<td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/17135" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Yeasayer</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/17135" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Yeasayer</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/3905" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Beirut</a></p></td>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
<td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/12734032" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
</tr>
</table></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/6156603" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
</tr>
</table></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/85429912" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
</tr>
</table></td>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
</tr>
</table>
<table id="slide4-content" align="center" border="0" cellspacing="0" cellpadding="0" style="width:460px;">
<tr>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
<td style="width:100px;"><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/11159982" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">No No No</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td style="width:100px;"><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/14339714" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">The Rip Tide</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td style="width:100px;"><p style="margin:10px 0px 0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:400;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/51306182" target="_blank" style="color:#FFFFFF; text-decoration:none;" class="hovertextdecorationunderline">Gulag Orkestar</a></p></td>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
<td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/3905" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Beirut</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/3905" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Beirut</a></p></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td><p style="margin:0px 0px 10px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:13px; mso-line-height-rule:exactly; line-height:18px; text-align:center; font-weight:300;" class="fallbackfont">Par <a href="https://www.deezer.com/fr/artist/3905" target="_blank" style="color:#A0A0A2; text-decoration:none;" class="hovertextdecorationunderline">Beirut</a></p></td>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
</tr>
<tr>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
<td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/11159982" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
</tr>
</table></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/14339714" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
</tr>
</table></td>
<td style="line-height:1px; font-size:1px; width:20px;">&nbsp;</td>
<td align="center"><table style="margin:0px auto;" align="center" role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border:1px solid #A0A0A2; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:5px;" class="hoverbgcolor02"><p style="margin:0px; font-family:'Open Sans', Arial, Helvetica, sans-serif; color:#A0A0A2; font-size:12px; mso-line-height-rule:exactly; line-height:12px; text-align:center; font-weight:300;" class="fallbackfont"><a href="https://www.deezer.com/fr/album/51306182" target="_blank" style="color:#A0A0A2; text-decoration:none;">&Eacute;couter</a></p></td>
</tr>
</table></td>
<td style="line-height:1px; font-size:1px; width:60px;">&nbsp;</td>
</tr>
</table>
</div>
</div>
<!--<![endif]--> 
                          </div></td>
                        <!-- FIN CARROUSEL --> 
                      </tr>
                    </table></td>
                </tr>
              </table>
              
              <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
          </tr>
        </table>
        
        <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
    </tr>
  </table>
</div>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console