Bonjour,
Je souhaites créer une newsletter, le problème c'est qu'une bonne partie de mon css n'est pas pris en compte, aussi j'en profite pour vous demander, comment joindre des images dans une newsletter ?
Ce que je fais
Ma page index.html
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background: #f1f1f1;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
a {
text-decoration: none;
}
/* What it does: A work-around for email clients meddling in triggered links. */
*[x-apple-data-detectors], /* iOS */
.unstyle-auto-detected-links *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* What it does: Prevents Gmail from changing the text color in conversation threads. */
.im {
color: inherit !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display: none !important;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
u ~ div .email-container {
min-width: 320px !important;
}
}
/* iPhone 6, 6S, 7, 8, and X */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
u ~ div .email-container {
min-width: 375px !important;
}
}
/* iPhone 6+, 7+, and 8+ */
@media only screen and (min-device-width: 414px) {
u ~ div .email-container {
min-width: 414px !important;
}
}</style>
<!-- CSS Reset : END --> <!-- Progressive Enhancements : BEGIN -->
<style>.primary{
background: #ff8b00;
}
.bg_white{
background: #ffffff;
}
.bg_light{
background: #ffffff;
}
.bg_black{
background: #000000;
}
.bg_dark{
background: rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
/*BUTTON*/
.btn{
padding: 5px 20px;
display: inline-block;
}
.btn.btn-primary{
border-radius: 5px;
background: #ff8b00;
color: #ffffff;
}
.btn.btn-white{
border-radius: 5px;
background: #ffffff;
color: #000000;
}
.btn.btn-white-outline{
border-radius: 5px;
background: transparent;
border: 1px solid #fff;
color: #fff;
}
.btn.btn-black{
border-radius: 0px;
background: #000;
color: #fff;
}
.btn.btn-black-outline{
border-radius: 0px;
background: transparent;
border: 2px solid #000;
color: #000;
font-weight: 700;
}
.btn.btn-custom{
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Work Sans', sans-serif;
color: #000000;
margin-top: 0;
font-weight: 400;
}
body{
font-family: 'Work Sans', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: rgba(0,0,0,.5);
}
a{
color: #ff8b00;
}
p{
margin-top: 0;
}
table{
}
/*LOGO*/
.logo h1{
margin: 0;
}
.logo h1 a{
color: #000000;
font-size: 20px;
font-weight: 700;
/*text-transform: uppercase;*/
font-family: 'Work Sans', sans-serif;
}
.navigation{
padding: 0;
padding: 1em 0;
/*background: rgba(0,0,0,1);*/
border-top: 1px solid rgba(0,0,0,.05);
border-bottom: 1px solid rgba(0,0,0,.05);
margin-bottom: 0;
}
.navigation li{
list-style: none;
display: inline-block;;
margin-left: 5px;
margin-right: 5px;
font-size: 14px;
font-weight: 500;
}
.navigation li a{
color: rgba(0,0,0,1);
}
/*HERO*/
.hero{
position: relative;
z-index: 0;
}
.hero .overlay{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
width: 100%;
background: #000000;
z-index: -1;
opacity: .2;
}
.hero .text{
color: rgba(255,255,255,.9);
max-width: 50%;
margin: 0 auto 0;
}
.hero .text h2{
color: #fff;
font-size: 34px;
margin-bottom: 0;
font-weight: 400;
line-height: 1.4;
}
.hero .text h2 span{
font-weight: 600;
color: #ff8b00;
}
/*INTRO*/
.intro{
position: relative;
z-index: 0;
}
.intro .text{
color: rgba(0,0,0,.3);
}
.intro .text h2{
color: #000;
font-size: 34px;
margin-bottom: 0;
font-weight: 300;
}
.intro .text h2 span{
font-weight: 600;
color: #ff8b00;
}
/*SERVICES*/
.services{
}
.text-services{
padding: 10px 10px 0;
text-align: center;
}
.text-services h3{
font-size: 18px;
font-weight: 400;
}
.services-list{
margin: 0 0 20px 0;
width: 100%;
}
.services-list img{
float: left;
}
.services-list h3{
margin-top: 0;
margin-bottom: 0;
}
.services-list p{
margin: 0;
}
/*COUNTER*/
.counter{
width: 100%;
position: relative;
z-index: 0;
}
.counter .overlay{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
width: 100%;
background: #000000;
z-index: -1;
opacity: .3;
}
.counter-text{
text-align: center;
}
.counter-text .num{
display: block;
color: #ffffff;
font-size: 34px;
font-weight: 700;
}
.counter-text .name{
display: block;
color: rgba(255,255,255,.9);
font-size: 13px;
}
/*TOPIC*/
.topic{
width: 100%;
display: block;
float: left;
border-bottom: 1px solid rgba(0,0,0,.1);
padding: 1.5em 0;
}
.topic .img{
width: 120px;
float: left;
}
.topic .text{
width: calc(100% - 150px);
padding-left: 20px;
float: left;
}
.topic .text h3{
font-size: 20px;
margin-bottom: 15px;
line-height: 1.2;
}
.topic .text .meta{
margin-bottom: 10px;
}
/*HEADING SECTION*/
.heading-section{
}
.heading-section h2{
color: #000000;
font-size: 28px;
margin-top: 0;
line-height: 1.4;
font-weight: 400;
}
.heading-section .subheading{
margin-bottom: 20px !important;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(0,0,0,.4);
position: relative;
}
.heading-section .subheading::after{
position: absolute;
left: 0;
right: 0;
bottom: -10px;
content: '';
width: 100%;
height: 2px;
background: #213277;
margin: 0 auto;
}
.heading-section-white{
color: rgba(255,255,255,.8);
}
.heading-section-white h2{
font-family:
line-height: 1;
padding-bottom: 0;
}
.heading-section-white h2{
color: #ffffff;
}
.heading-section-white .subheading{
margin-bottom: 0;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,.4);
}
ul.social{
padding: 0;
}
ul.social li{
display: inline-block;
margin-right: 10px;
/*border: 1px solid #ff8b00;*/
padding: 10px;
border-radius: 50%;
background: rgba(0,0,0,.05);
}
/*FOOTER*/
.footer{
border-top: 1px solid rgba(0,0,0,.05);
color: rgba(0,0,0,.5);
}
.footer .heading{
color: #000;
font-size: 20px;
}
.footer ul{
margin: 0;
padding: 0;
}
.footer ul li{
list-style: none;
margin-bottom: 10px;
}
.footer ul li a{
color: rgba(0,0,0,1);
}
@media screen and (max-width: 500px) {
}</style>
<center style="width: 100%; background-color: #f1f1f1;">
<div style="display: none; font-size: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;"> </div>
<div class="email-container" style="max-width: 600px; margin: 0 auto;"><!-- BEGIN BODY -->
<table style="margin: auto;" role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="bg_light" style="padding: .5em 2.5em 1em 2.5em;" valign="top">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="logo" style="text-align: center;">
<img style="width: 100px; max-width: 600px; padding-top: 10px; padding-right: 100%;" src="images/cma.png" alt="">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- end tr -->
<tr>
<td class="hero bg_white" style="background-image: url('mages/bg_it1.jpg'); background-size: cover; height: 400px;" valign="middle">
<div class="overlay"> </div>
<table>
<tbody>
<tr>
<td>
<div class="text" style="padding: 0 4em; text-align: center;">
<h2 style="font-family: 'Nunito', sans-serif;">Direction des Systèmes d'information</h2>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- end tr -->
<tr>
<td class="bg_dark email-section" style="text-align: center;">
<div class="heading-section heading-section-white">
<span class="subheading">BIENVENUE</span>
<h2>NEWSLETTER</h2>
<p>Ici potentiellement, un court texte de présentation afin d'introduire ce que la newsletter va regrouper.</p>
</div>
</td>
</tr>
<!-- end: tr -->
<tr>
<td class="bg_white email-section">
<div class="heading-section" style="text-align: center; padding: 0 30px;">
<h2>La DSI se réorganise !</h2>
</div>
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td style="width: 100%;" valign="top">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="100%">
<div class="topic">
<div class="img">
<img style="width: 50px; max-width: 600px; height: auto; margin: auto; display: block;" src="images/ticket.png" alt="">
</div>
<div class="text">
<h3>Création d’un Pôle Support en charge de :</h3>
<p>Gestion des signalements (incidents et demandes)</p>
<p>Gestion du parc (PC, imprimantes, logiciels, etc.)</p>
<p>Support technique (analyse, qualification et traitement)</p>
</div>
</div>
<div class="topic">
<div class="img">
<img style="width: 50px; max-width: 600px; height: auto; margin: auto; display: block;" src="images/work.png" alt="">
</div>
<div class="text">
<h3>Création d’un Pôle Exploitation/Gestion de Projets en charge de :</h3>
<p>Exploitation : maintien en conditions opérationnelles des outils informatiques (matériels et logiciels)</p>
<p>Gestion de projets : ensemble des activités visant à organiser le bon déroulement des projets et à en atteindre les objectifs</p>
<p>Support technique de niveau 2 (en soutien du Pôle « Support » pour les signalements complexes)</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- end: tr -->
</tbody>
</table>
</td>
</tr>
<!-- end: tr --><!-- end tr -->
<tr>
<td class="bg_light email-section">
<div class="heading-section" style="text-align: center; padding: 0 30px;">
<h2>Comment joindre la DSI ?</h2>
</div>
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td style="width: 100%;" valign="top">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="100%">
<div class="topic">
<div class="img">
<img style="width: 50px; max-width: 600px; height: auto; margin: auto; display: block;" src="images/mail.png" alt="">
</div>
<div class="text">
<h3>Par email</h3>
<p>En écrivant à
<strong>exemple@exemple.fr</strong>.
<br>L’envoi d’un email générera automatiquement un ticket dans GLPI, notre outil de gestion des signalements.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
<strong>Nous vous demandons de bien vouloir nous indiquer, dans votre email, vos coordonnées téléphoniques afin de faciliter l’éventuelle prise de contact du technicien.</strong>
</p>
</div>
</div>
<div class="topic">
<div class="img">
<img style="width: 50px; max-width: 600px; height: auto; margin: auto; display: block;" src="images/combine.png" alt="">
</div>
<div class="text">
<h3>Par téléphone</h3>
<p class="meta">Horaires : 09:30 - 12:30 / 13h30 - 17h00</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- end: tr -->
</tbody>
</table>
</td>
</tr>
<!-- end: tr -->
<tr>
<td class="counter" style="background-image: url('images/bg_it.jpg'); background-size: cover; background-position: center center; padding: 4em 0;" valign="middle">
<div class="overlay"> </div>
<table>
<tbody>
<tr>
<td valign="middle" width="33.333%">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="counter-text">
<span class="num">5</span>
<span class="name">Projet en cours</span>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="middle" width="33.333%">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="counter-text">
<span class="num">423</span>
<span class="name">Un chiffre ajouter ?</span>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="middle" width="33.333%">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="counter-text">
<span class="num">1500</span>
<span class="name">Tickets résolus</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="bg_light email-section">
<div class="heading-section" style="text-align: center; padding: 0 30px;">
<h2>Nos Agents</h2>
<p>Ici sera présent le trombinoscope ainsi qu'une courte déscription des agents</p>
</div>
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td style="padding-top: 20px;" valign="top" width="33.333%">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<img style="width: 80px; max-width: 600px; height: auto; margin: auto; margin-bottom: 20px; display: block; border-radius: 50%;" src="images/person_1.jpg" alt="">
</td>
</tr>
<tr>
<td class="text-testimony" style="text-align: center;">
<h4 class="name">Lorem IPSUM</h4>
<p>Far far away, behind the word mountains</p>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding-top: 20px;" valign="top" width="33.333%">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<img style="width: 80px; max-width: 600px; height: auto; margin: auto; margin-bottom: 20px; display: block; border-radius: 50%;" src="images/person_4.jpg" alt="">
</td>
</tr>
<tr>
<td class="text-testimony" style="text-align: center;">
<h4 class="name">Lorem IPSUM</h4>
<p>Far far away, behind the word mountains</p>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding-top: 20px;" valign="top" width="33.333%">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<img style="width: 80px; max-width: 600px; height: auto; margin: auto; margin-bottom: 20px; display: block; border-radius: 50%;" src="images/person_3.jpg" alt="">
</td>
</tr>
<tr>
<td class="text-testimony" style="text-align: center;">
<h4 class="name">Lorem IPSUM</h4>
<p>Far far away, behind the word mountains</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-top: 20px;" valign="top" width="33.333%">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<img style="width: 80px; max-width: 600px; height: auto; margin: auto; margin-bottom: 20px; display: block; border-radius: 50%;" src="images/person_1.jpg" alt="">
</td>
</tr>
<tr>
<td class="text-testimony" style="text-align: center;">
<h4 class="name">Lorem IPSUM</h4>
<p>Far far away, behind the word mountains</p>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding-top: 20px;" valign="top" width="33.333%">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<img style="width: 80px; max-width: 600px; height: auto; margin: auto; margin-bottom: 20px; display: block; border-radius: 50%;" src="images/person_2.jpg" alt="">
</td>
</tr>
<tr>
<td class="text-testimony" style="text-align: center;">
<h4 class="name">Lorem IPSUM</h4>
<p>Far far away, behind the word mountains</p>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding-top: 20px;" valign="top" width="33.333%">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<img style="width: 80px; max-width: 600px; height: auto; margin: auto; margin-bottom: 20px; display: block; border-radius: 50%;" src="images/person_3.jpg" alt="">
</td>
</tr>
<tr>
<td class="text-testimony" style="text-align: center;">
<h4 class="name">Lorem IPSUM</h4>
<p>Far far away, behind the word mountains</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-top: 20px;" valign="top" width="33.333%">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<img style="width: 80px; max-width: 600px; height: auto; margin: auto; margin-bottom: 20px; display: block; border-radius: 50%;" src="images/person_2.jpg" alt="">
</td>
</tr>
<tr>
<td class="text-testimony" style="text-align: center;">
<h4 class="name">Lorem IPSUM</h4>
<p>Far far away, behind the word mountains</p>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding-top: 20px;" valign="top" width="33.333%">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<img style="width: 80px; max-width: 600px; height: auto; margin: auto; margin-bottom: 20px; display: block; border-radius: 50%;" src="images/person_2.jpg" alt="">
</td>
</tr>
<tr>
<td class="text-testimony" style="text-align: center;">
<h4 class="name">Lorem IPSUM</h4>
<p>Far far away, behind the word mountains</p>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding-top: 20px;" valign="top" width="33.333%">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<img style="width: 80px; max-width: 600px; height: auto; margin: auto; margin-bottom: 20px; display: block; border-radius: 50%;" src="person_3.jpg" alt="">
</td>
</tr>
<tr>
<td class="text-testimony" style="text-align: center;">
<h4 class="name">Lorem IPSUM</h4>
<p>Far far away, behind the word mountains</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-top: 20px;" valign="top" width="33.333%">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<img style="width: 80px; max-width: 600px; height: auto; margin: auto; margin-bottom: 20px; display: block; border-radius: 50%;" src="person_1.jpg" alt="">
</td>
</tr>
<tr>
<td class="text-testimony" style="text-align: center;">
<h4 class="name">RLorem IPSUM</h4>
<p>Far far away, behind the word mountains</p>
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding-top: 20px;" valign="top" width="33.333%">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<img style="width: 80px; max-width: 600px; height: auto; margin: auto; margin-bottom: 20px; display: block; border-radius: 50%;" src="images/person_3.jpg" alt="">
</td>
</tr>
<tr>
<td class="text-testimony" style="text-align: center;">
<h4 class="name">Lorem IPSUM</h4>
<p>Far far away, behind the word mountains</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- end: tr -->
<tr>
<td class="bg_white email-section">
<div class="heading-section" style="text-align: center; padding: 0 30px;">
<h2>Les projets en cours</h2>
</div>
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td style="width: 100%;" valign="top">
<table role="presentation" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="100%">
<div class="topic">
<div class="img">
<img style="width: 50px; max-width: 600px; height: auto; margin: auto; display: block;" src="images/network.png" alt="">
</div>
<div class="text">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="topic">
<div class="img">
<img style="width: 100px; max-width: 600px; height: auto; margin: auto; display: block;" src="images/office.png" alt="">
</div>
<div class="text">
<h3>DLorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="topic">
<div class="img">
<img style="width: 50px; max-width: 600px; height: auto; margin: auto; display: block;" src="images/pc.png" alt="">
</div>
<div class="text">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="topic">
<div class="img">
<img style="width: 50px; max-width: 600px; height: auto; margin: auto; display: block;" src="images/wifi.png" alt="">
</div>
<div class="text">
<h3>Lorem ipsum dolor sit ametI</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="topic">
<div class="img">
<img style="width: 50px; max-width: 600px; height: auto; margin: auto; display: block;" src="images/data.png" alt="">
</div>
<div class="text">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- end: tr -->
</tbody>
</table>
<div class="footeredit"><p class="bg_white">@2020 Lorem ipsum dolor sit amet</p></div>
</td>
</tr>
<!-- end: tr --> <!-- 1 Column Text + Button : END -->
</tbody>
</table>
</div>
</center>
<style>
.footeredit{
background-color: #294d92;
width: 530px;
text-align: center;
}
</style>Ce que j'obtiens
Seul une partie du css est pris en comtpe
2 réponses
Hello,
Tu dois utiliser l'attribut style, donc faire du css inline.
par exemple avec ça
https://www.campaignmonitor.com/resources/tools/css-inliner/
Bon courage.