why my Div and Style is not woking in email template? - html

Question

Here is the link for the code:
https://codepen.io/yahyajapan/pen/bGgyONX
While I was trying to create a mail template I code an internal CSS while did not work.
Then I was about known that I have to code inline styling, in the above code I also started converting internal CSS into inline CSS but what I get is when I send mail, it does not show my divs and styles which does not give me the desired result. Can anyone please help me with this code?
You can look for the desired result by running the above code.
<center class="wrapper" style=" width: 100%;
table-layout: fixed;
background-color: #f6f9fc;
padding: 40px 0;">
<div class="webkit" style=" max-width: 600px;
background-color: white;">
<table class="outer" align="center" style="margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;">
<tr>
<td style="padding: 0;">
<table style="width: 100%; border-spacing: 0; border-spacing: 0;">
<tr>
<td style="padding: 0;">
<div class="email-temp-1">
<!-- <img src="./assets/email1_graphics/email1_graphics/em1_background.png" alt=""> -->
<div class="email-temp-1-body">
<div class="logo-BG">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_header.png" alt="">
<div class="email-temp-1-logo">
<a href="https://kempslunicko.cz/" target="_blank">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_logo.png" alt="">
</a>
</div>
<div class="upper-title">
<p>Rezervační číslo: 11</p>
</div>
<div class="social-icons">
<a href="https://www.facebook.com/kempslunicko/" target="_blank">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_fcb.png" alt="">
</a>
<a href="https://www.instagram.com/kempslunicko/" target="_blank">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_inst.png" alt="">
</a>
<a href="https://wa.me/0420737935777" target="_blank">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_whatsup.png" alt="">
</a>
</div>
</div>
<div class="container">
<div class="em1-mid-heading">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_confirm.png" alt="">
<div>
<h4 style="font-family: oswald-light;">VAŠE REZERVACE BYLA PŘIJATA</h4>
<p style="font-family: oswald-regular; font-size: 12px;">Děkujeme pane/paní Jméno Příjmení <br> za Váš zájem o
pobyt v Kempu Sluníčko.</p>
</div>
</div>
<div class="em1-mid-content" style="display: flex;
justify-content: space-between;
margin-top: 4%;">
<div class="">
<p style="font-family: oswald-bold;">Datum příjezdu: <span>02.07.2021</span></p>
<p style="font-family: oswald-bold; margin-bottom: 1rem;">Datum odjezdu: <span>06.07.2021</span></p>
<p style="font-family: oswald-regular;">Ubytování: Chatka Sluníčko</p>
<p style="font-family: oswald-regular;">Rezervované chatky: 21, 22, 23, 24</p>
<p style="font-family: oswald-regular;">Počet dospělých: 5</p>
<p style="font-family: oswald-regular;">Počet dětí (pod 12 let): 6</p>
<p style="font-family: oswald-regular;">Sleva na ubytování: -10%</p>
</div>
<div class="em1-mid-content-img">
<div>
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_photos.png" alt="">
</div>
</div>
</div>
<div class="em1-lower-heading" style="margin-top:2rem;">
<p style="font-family: oswald-bold; font-size: 13px;">Celková částka včetně slevy: <span>11 331 CZK</span></p>
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_underline.png" alt="">
</div>
<div class="em1-lower-content" style="padding-top: 1rem;">
<p style="font-family: nunito; font-size: 10px;">K dokončení rezervace prosím uhraďte rezervační zálohu</p>
<p style="font-family: nunito; font-size: 10px;"><span style="font-size: 13px;">5 665,5 CZK</span> na číslo bankovního účtu
<span style="font-size: 13px;">2501946055/2010</span> (fio banka)
</p>
<p style="font-family: nunito; font-size: 10px; padding-bottom: .5rem;"><span style="font-size: 13px;">s variabilním číslem: 10</span>, a s
příjmením rezervující osoby v poznámce platby.</p>
<p style="font-family: nunito; font-size: 10px;">Neuhrazením do 5 pracovních dnů tato rezervace propadá.</p>
<p style="font-family: nunito; font-size: 10px; padding-bottom: .5rem;">Doplatek <span style="font-size: 13px;">5 665,5 CZK</span> bude
proveden v hotovosti na recepci při příjezdu.</p>
<p style="font-family: oswald-light; font-size: 12px;">V případě dotazů nás kontakujte.</p>
<p style="font-family: oswald-regular; color: #24b99b; margin-top:2rem;">Těšíme se na Vás!</p>
</div>
</div>
</div>
<div style="position: absolute;
bottom: 0;
left: 0;
right: auto;">
<img src="https://kempslunicko.cz/wp-content/uploads/2021/04/em1_footer.png" alt="">
<p style="font-family: oswald-bold;
position: absolute;
bottom: 5%;
left: 2%;
right: auto;
color: #3b0900;
font-size: 13px;">
KEMP SLUNÍČKO <span style="font-size: 8px;">737 935 777,
www.kempslunicko.cz info#kempslunicko.cz</span></p>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>

Answer 1

Don't struggle with custom css and html for different email clients (each will treat your code differently). Find free or paid email template creator and use it.