XF 2.1 How to embed a html mailing in post

Wilouness

Wilouness

Active member
Hello

I want to display a html code in posts and make it render as it appear in a browser or in newsletter email sent like this one for exemple :
The html code is mine.
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0;">
    <meta name="format-detection" content="telephone=no"/>

    <style>
        /* Reset styles */
        body { margin: 0; padding: 0; min-width: 100%; width: 100% !important; height: 100% !important;}
        body, table, td, div, p, a { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; }
        table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0; }
        img { border: 0; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
        #outlook a { padding: 0; }
        .ReadMsgBody { width: 100%; } .ExternalClass { width: 100%; }
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }

        /* Rounded corners for advanced mail clients only */
        @media all and (min-width: 560px) {
            .container { border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; }
        }

        /* Set color for auto links (addresses, dates, etc.) */
        a, a:hover {
            color: #FFFFFF;
        }
        .footer a, .footer a:hover {
            color: #828999;
        }
    </style>

    <!-- MESSAGE SUBJECT -->
    <title>Salon VTC ONLINE - Septembre 2020</title>

</head>

<!-- BODY -->
<!-- Set message background color (twice) and text color (twice) -->
<body topmargin="0" rightmargin="0" bottommargin="0" leftmargin="0" marginwidth="0" marginheight="0" width="100%" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; width: 100%; height: 100%; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%;
    background-color: #000000;
    color: #FFFFFF;"
      bgcolor="#000000"
      text="#FFFFFF">

<!-- SECTION / BACKGROUND -->
<!-- Set message background color one again -->
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; width: 100%;" class="background"><tr><td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0;"  bgcolor="#000000">

    <!-- WRAPPER -->
    <!-- Set wrapper width (twice) -->
    <table border="0" cellpadding="0" cellspacing="0" align="center"
           width="800" style="border-collapse: collapse; border-spacing: 0; padding: 0; width: inherit; width: 100%;
    max-width: 800px;" class="wrapper">

        <tr>
            <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%;
            padding-top: 50px;
            padding-bottom: 50px;">

                <!-- PREHEADER -->

                <div style="display: none; visibility: hidden; overflow: hidden; opacity: 0; font-size: 1px; line-height: 1px; height: 0; max-height: 0; max-width: 0;
                color: #000000;" class="preheader">Le Salon du VTC en partenariat avec le salon SME vous propose une version 100 % en ligne.</div>

                <!-- LOGO -->

                <a target="_blank" style="text-decoration: none;"
                   href="https://www.salonvtcshop.com/#/"><img border="0" vspace="0" hspace="0"
                                                                          src="https://uberzone.fr/news/salonduvtc2019/edition_online/logo-salon-du-VTC.png"
                                                                          height="100"
                                                                          alt="Logo" title="Logo" style="
                color: #FFFFFF;
                font-size: 10px; margin: 0; padding: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: none; display: block;" /></a>

            </td>
        </tr>

        <!--****************************************************************-->
        <tr>
            <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0;  width: 100%; font-size: 17px; font-weight: 400; line-height: 160%;
            padding-top: 15px; color: #FFFFFF; font-family: sans-serif;" class="paragraph">
                <h1>Le 02 & 03 Septembre 2020</h1>
            </td>
        </tr>

        <tr>
            <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0;  width: 100%; font-size: 17px; font-weight: 400; line-height: 160%;
            padding-top: 15px; color: #FFFFFF; font-family: sans-serif" class="paragraph">
                Le <b>Salon du VTC ONLINE</b> 2/3 septembre 2020 a pour but la rencontre des chauffeurs VTC avec un collectif de professionnel pour mieux préparer le après COVID-19. Le salon du VTC ONLINE est 100%  accessible depuis votre smartphone, une tablette, ou un ordinateur. <br><br>
                Dès réception de votre badge, vos codes d'accès, vous pourrez participer à des visio-conférences, échanger avec l'ensemble des exposants en direct.
            </td>
        </tr>

        <tr>
            <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0;
            padding-top: 50px; padding-bottom: 50px;" class="hero"><a target="_blank" style="text-decoration: none;" href=""><img border="0" vspace="0" hspace="0" src="https://uberzone.fr/news/salonduvtc2019/edition_online/screens.png" width="800" style="
            max-width: 800px;
            color: #FFFFFF; font-size: 13px; margin: 0; padding: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: none; display: block;"/></a></td>
        </tr>

        <tr>
            <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 100%; font-size: 14px; font-weight: 400; line-height: 150%; letter-spacing: 2px;
            padding-top: 27px;
            padding-bottom: 27px;
            background-color: #FFFFFF;
            color: #000000;
            font-family: sans-serif;" class="supheader">
                En partenariat avec
            </td>
        </tr>

        <tr>
            <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%; font-size: 14px; font-weight: 400; line-height: 150%; letter-spacing: 2px;
            padding-top: 27px; padding-bottom: 0; color: #FFFFFF; font-family: sans-serif;" class="supheader">
                <table style="width: 100%; margin-bottom: 50px;">
                    <tr>
                        <td width="20%">
                            <img src="https://uberzone.fr/news/salonduvtc2019/edition_online/logos/cargo-200.png" style="width: 80%; display: block; margin: auto">
                        </td>
                        <td width="20%">
                            <img src="https://uberzone.fr/news/salonduvtc2019/edition_online/logos/foru-200.png" style="width: 80%; display: block; margin: auto">
                        </td>
                        <td width="20%">
                            <img src="https://uberzone.fr/news/salonduvtc2019/edition_online/logos/groupe8-200.png" style="width: 80%; display: block; margin: auto">
                        </td>
                        <td width="20%">
                            <img src="https://uberzone.fr/news/salonduvtc2019/edition_online/logos/uz-200.png" style="width: 80%; display: block; margin: auto">
                        </td>
                        <td width="20%">
                            <img src="https://uberzone.fr/news/salonduvtc2019/edition_online/logos/salonsme-200.png" style="width: 80%; display: block; margin: auto">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <!--****************************************************************-->

        <tr>
            <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 100%; font-size: 14px; font-weight: 400; line-height: 150%; letter-spacing: 2px;
            padding-top: 27px;
            padding-bottom: 27px;
            color: #000000;
            background-color: #FFFFFF;
            font-family: sans-serif;" class="supheader">
                Jeux concours
            </td>
        </tr>

        <!-- SUPHEADER -->

        <tr>
            <td>
                <table style="width: 100%">
                    <tr>
                        <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 50%; padding-top: 25px; padding-bottom: 5px; vertical-align: middle;" class="button">
                            <h4 style="font-family: sans-serif;">Cérémonie prix de la meilleure société VTC 2020</h4>
                            <p style="font-family: sans-serif; width: 100%;">Nous avons à coeur de porter à l'honneur  ces femmes, ces hommes, ces chefs d'entreprise qui tous les jours redouble d'énergie, d'efforts pour exister dans le paysage du transport VTC.</br></br> Nous avons nominé un nombre important de compagnie de transport en les classants par catégorie. Du 2 juin au 15 août 2020 vous pourrez voter, soutenir, l'entreprise de votre choix.</p>
                            <a href="https://joelbroulou.wixsite.com/vtc-ceremonie" target="_blank" style="text-decoration: none;">
                            <table border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 240px; min-width: 120px; border-collapse: collapse; border-spacing: 0; padding: 0;"><tr><td align="center" valign="middle" style="padding: 12px 24px; margin: 0; text-decoration: none; border-collapse: collapse; border-spacing: 0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#44d1ff"><a target="_blank" style="text-decoration: none; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">
                                Inscription
                            </a>
                            </td></tr></table></a>
                        </td>
                        <td style="text-align: center; padding: 20px 0px;">
                            <img src="https://uberzone.fr/news/salonduvtc2019/edition_online/cer.png" style="width: 100%; display: block; margin: auto; max-width: 300px;">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <!-- HEADER -->

        <tr>
            <td>
                <table style="width: 100%">
                    <tr>
                        <td style="text-align: center; padding: 20px 0px;">
                            <img src="https://uberzone.fr/news/salonduvtc2019/edition_online/talisman.png" style="width: 100%; display: block; margin: auto; max-width: 300px;">
                        </td>
                        <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 50%; padding-top: 25px; padding-bottom: 5px; vertical-align: middle;" class="button">
                            <h4 style="font-family: sans-serif;">Gagnez une Talisman !</h4>
                            <p style="font-family: sans-serif; width: 100%;">Le gagnant sera le participant ayant inscrit le plus de chauffeur* à notre Edition Salon du VTC en ligne 2/3 septembre.</br></br> Le nombre d’inscrit doit-être égal ou supérieur à 1 000 inscriptions !</p>
                            <a href="https://joelbroulou.wixsite.com/jeux-salonduvtc" target="_blank" style="text-decoration: none;">
                            <table border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 240px; min-width: 120px; border-collapse: collapse; border-spacing: 0; padding: 0;"><tr><td align="center" valign="middle" style="padding: 12px 24px; margin: 0; text-decoration: none; border-collapse: collapse; border-spacing: 0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#44d1ff"><a target="_blank" style="text-decoration: none; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;">
                                Inscription
                            </a>
                            </td></tr></table></a>
                        </td>

                    </tr>
                </table>
            </td>
        </tr>

        <!-- PARAGRAPH -->

        <tr>
            <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%; font-size: 17px; font-weight: 400; line-height: 160%;
            padding-top: 15px;
            color: #FFFFFF;
            font-family: sans-serif;" class="paragraph">
                Vous trouverez sur notre site internet l’ensemble des informations concernant nos dates de salon.<br>
                Inscription exposant sur <b><a href="https://www.salonvtcshop.com/#/" target="_blank"> www.salonvtcshop.com</a></b>
            </td>
        </tr>

        <!-- BUTTON -->

        <tr>
            <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%;
            padding-top: 25px;
            padding-bottom: 5px;" class="button"><a
                    href="https://www.eventbrite.fr/e/billets-salon-du-vtc-online-101818792750?aff=affiliate3Benchabanehakime" target="_blank" style="text-decoration: none;">
                <table border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 240px; min-width: 120px; border-collapse: collapse; border-spacing: 0; padding: 0;"><tr><td align="center" valign="middle" style="padding: 12px 24px; margin: 0; text-decoration: none; border-collapse: collapse; border-spacing: 0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px;" bgcolor="#44d1ff"><a target="_blank" style="text-decoration: none; color: #FFFFFF; font-family: sans-serif; font-size: 17px; font-weight: 400; line-height: 120%;" href="https://www.eventbrite.fr/e/billets-salon-du-vtc-online-101818792750?aff=affiliate3Benchabanehakime">
                    Billets
                </a>
                </td></tr></table></a>
            </td>
        </tr>

        <!-- LINE -->

        <tr>
            <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%;
            padding-top: 30px;" class="line"><hr
                    color="#565F73" align="center" width="100%" size="1" noshade style="margin: 0; padding: 0;" />
            </td>
        </tr>

        <!-- FOOTER -->

        <tr>
            <td align="center" valign="top" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%; font-size: 13px; font-weight: 400; line-height: 150%;
            padding-top: 10px;
            padding-bottom: 20px;
            color: #828999;
            font-family: sans-serif;" class="footer">
                Vous recevez cet email à ahmed@uberzone.fr car vous faites partie de la communauté Uberzone. En vous inscrivant avec cette adresse mail sur le forum Uberzone, vous avez donné conformément aux règlement du forum, votre autorisation pour que des partenaires comme Cabinet Conseil CC10 puissent vous contacter par voie électronique.
                <a href="[webversion]" style="font-size: 10px; line-height: 20.8px; text-align: center;" target="_blank">visualiser&nbsp;cet email en ligne</a>&nbsp;<span style="font-size:10px">| <a href="[unsub-from-list]" target="_blank">se&nbsp;d&eacute;sabonner de cette liste</a> | <a href="[manage-my-lists]" target="_blank">mes préférences</a></span><br />
                                                            <span style="font-size:10px">&copy; 2020&nbsp;UBERZONE & CC10</span></div>
            </td>
        </tr>

        <!-- End of WRAPPER -->
    </table>

    <!-- End of SECTION / BACKGROUND -->
</td></tr></table>

</body>
</html>


Thanks for help
 
You must log in or register to reply here.

Similar threads

beerForo
  • Question Question
XF 2.3 How to embed a Tenor GIF?
Replies
7
Views
74
beerForo
beerForo
Dkf
  • Question Question
XF 2.2 How do I embed a HTML code from file in a Xenforo page?
Replies
6
Views
976
Mr Lucky
Mr Lucky
AndreaMarucci
  • Question Question
XF 2.0 How to embed a google map
2
Replies
33
Views
4K
haincha
haincha
Michaelb24179
  • Question Question
XF 2.0 All eMail to T-Mobile Spam
Replies
2
Views
1K
Michaelb24179
Michaelb24179
PumpinIron
  • Question Question
XF 2.0 Images from Conversations aren't showing up in emails
Replies
5
Views
2K
bruce linde
B
Back
Top Bottom