Skip to content

Instantly share code, notes, and snippets.

@kingRayhan
Created February 28, 2023 07:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kingRayhan/a899af7a92c9056d443bb16180e7851f to your computer and use it in GitHub Desktop.
Save kingRayhan/a899af7a92c9056d443bb16180e7851f to your computer and use it in GitHub Desktop.
<div
#additionalServices
class="d-none"
>
<div
class="additional_services"
style="background: #f5fbff; background-color: #f5fbff; margin: 0px auto; max-width: 715px"
>
<table
align="center"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="background: #f5fbff; background-color: #f5fbff; width: 100%"
>
<tbody>
<tr>
<td style="direction: ltr; font-size: 0px; padding: 48px 0; padding-top: 0; text-align: center">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:596px;" ><![endif]-->
<div
class="mj-column-px-596 mj-outlook-group-fix"
style="font-size: 0; line-height: 0; text-align: left; display: inline-block; width: 100%; direction: ltr"
>
<!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:middle;width:298px;" ><![endif]-->
<ng-container *ngFor="let serviceGroup of additionalServiceList; let i = index">
<div
class="mj-column-per-50 mj-outlook-group-fix"
style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 50%"
>
<table
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
width="100%"
>
<tbody>
<tr>
<td style="vertical-align: middle; padding-top: 30px">
<table
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style=""
width="100%"
>
<tbody>
<tr>
<td
align="left"
class="uppercase"
style="text-transform: uppercase; font-size: 0px; padding: 0; word-break: break-word"
>
<div
style="font-family: Arial; font-size: 18px; font-weight: 700; line-height: 1; text-align: left; color: #3a494e"
>
{{ serviceGroup?.categoryName }}
</div>
</td>
</tr>
<tr *ngFor="let service of serviceGroup?.services; let j = index">
<td
align="left"
style="font-size: 0px; padding: 0; padding-top: 5px; word-break: break-word"
>
<!--[if mso | IE]><table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
<table
align="left"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="float: none; display: inline-table"
>
<tbody>
<tr>
<td style="padding: 4px; vertical-align: middle">
<table
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="border-radius: 3px; width: 20px"
>
<tbody>
<tr>
<td style="font-size: 0; height: 20px; vertical-align: middle; width: 20px">
<img
height="20"
src="https://redlimecdn.blob.core.windows.net/production/Email_assets/event-invitation-email/chevrons-right.png"
style="border-radius: 3px; display: block"
width="20"
/>
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align: middle">
<span style="color: #333333; font-size: 13px; font-family: Arial; line-height: 22px; text-decoration: none">
{{ service?.name }}
</span>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</ng-container>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
#overheadImg
class="d-none"
>
<div
class="map-overhead-image"
style="margin: 0px auto; max-width: 715px"
>
<table
align="center"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="width: 100%"
>
<tbody>
<tr>
<td style="direction: ltr; font-size: 0px; padding: 20px 0; text-align: center">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:715px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix"
style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%"
>
<table
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="vertical-align: top"
width="100%"
>
<tbody>
<tr>
<td
align="center"
style="font-size: 0px; padding: 0; word-break: break-word"
>
<table
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="border-collapse: collapse; border-spacing: 0px"
>
<tbody>
<tr>
<td style="width: 596px">
<img
height="auto"
[src]="eventRecord.mapUrl"
style="border: 0; display: block; outline: none; text-decoration: none; height: auto; width: 100%; font-size: 13px"
width="596"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
#vendorCategories
class="d-none"
>
<div style="margin: 0px auto; max-width: 715px">
<table
align="center"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="width: 100%"
>
<tbody>
<tr>
<td style="direction: ltr; font-size: 0px; padding: 0; text-align: center">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:596px;" ><![endif]-->
<div
class="mj-column-px-596 mj-outlook-group-fix"
style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%"
>
<table
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="vertical-align: top"
width="100%"
>
<tbody>
<tr>
<td
align="center"
style="font-size: 0px; padding: 0; padding-bottom: 7px; word-break: break-word"
>
<p style="border-top: solid 3px #3a494e; font-size: 1px; margin: 0px auto; width: 118px"></p>
<!--[if mso | IE
]><table
align="center"
border="0"
cellpadding="0"
cellspacing="0"
style="border-top: solid 3px #3a494e; font-size: 1px; margin: 0px auto; width: 118px"
role="presentation"
width="118px"
>
<tr>
<td style="height: 0; line-height: 0">&nbsp;</td>
</tr>
</table><!
[endif]-->
</td>
</tr>
<tr>
<td
align="center"
class="uppercase"
style="text-transform: uppercase; font-size: 0px; padding: 0; word-break: break-word"
>
<div style="font-family: Arial; font-size: 28px; font-weight: 700; line-height: 38px; text-align: center; color: #3a494e">
you’ll find
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<div style="margin: 0px auto; max-width: 715px">
<table
align="center"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="width: 100%"
>
<tbody>
<tr>
<td style="direction: ltr; font-size: 0px; padding: 20px 0; padding-top: 30px; text-align: center">
<div
class="mj-column-px-596 mj-outlook-group-fix"
style="font-size: 0; line-height: 0; text-align: left; display: inline-block; width: 100%; direction: ltr"
>
<ng-container *ngFor="let vendor of eventVendorInfo?.eventVendorRequirements; let i = index">
<div
class="mj-column-per-33-333333333333336 mj-outlook-group-fix"
style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 33%"
>
<table
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="vertical-align: top"
width="100%"
>
<tbody>
<tr>
<td
align="left"
style="font-size: 0px; padding: 0; word-break: break-word"
>
<table
align="left"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="float: none; display: inline-table"
>
<tbody>
<tr>
<td style="padding: 4px; vertical-align: middle">
<table
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="border-radius: 3px; width: 20px"
>
<tbody>
<tr>
<td style="font-size: 0; height: 20px; vertical-align: middle; width: 20px">
<img
height="20"
src="https://redlimecdn.blob.core.windows.net/production/Email_assets/event-invitation-email/chevrons-right.png"
style="border-radius: 3px; display: block"
width="20"
/>
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align: middle">
<span style="color: #333333; font-size: 13px; font-family: Arial; line-height: 22px; text-decoration: none">
{{ vendor.vendorType.name }}{{ i + 1 }}
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</ng-container>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment