Skip to content

Commit

Permalink
feat (components): events (#36)
Browse files Browse the repository at this point in the history 
* feat new affiliate event template

* feat new affiliate event template v2

* feat new affiliate event template v3

* feat new event list template

* new event component

* new event component

* new version event component sides swapped

* update to event componentv2

* update to event componentv2

* update event componentv2 added calendar icons

* moved social icons to left

* new componenet multiple event list

* updated multiple event list component

* update add skinny version and divider

* update to event list component

* update event list component

* new file newsletter with 2 versions of events

* update to events on newsletter

* update event list newsletter border radius

* update event list newsletter border radius

* new ver single event, new ver multiple events x2

* spacing adjustments to event

* extra versions deleted, final components updated and moved

* file names chaged to naming convention

---------

Co-authored-by: ashley burrous <[email protected]>
  • Loading branch information
@rachelruby
rachelruby and ashley burrous authored Sep 13, 2023
1 parent 3b6eed4 commit 06b275d
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 0 deletions.
89 changes: 89 additions & 0 deletions src/_includes/components/newsletter-event.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!-- calendar icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- calendar icons -->
<style>
@media screen and (max-width: 480px) {
.stack1 {
display: block !important;
width: 100% !important;
padding: 40px 30px 0 0 !important;
}
.stack2 {
display: block !important;
width: 100% !important;
padding: 0 10px 10px 10px !important;
}
.image1 {
display: none !important;
}
.image2 {
display: inline !important;
}
}
</style>

<!-- EVENTS -->
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" class="emailwrapto100pc" width="600">
<tbody>
<tr>
<td align="center" style="border-radius: 3px; vertical-align: middle; text-align: center; background-color: #66b4db;">
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" class="emailwrapto100pc" width="600">
<tbody>
<tr>
<!-- LEFT -->
<td class="stack1" width="240" style="color: #3c3532; font-family: Arial, 'Helvetica Neue', sans-serif; font-size: 16px; line-height: 22px; padding: 15px 10px 10px 5px; display: inline-block;">
<table align="center" role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="image1" style="display: none;">
<a href="{affiliate_website}"><img src="https://media.sailthru.com/64p/1k3/9/r/5d8e778dd2054.jpg" alt="Lady Liberty." border="0" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"/></a>
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0; display: block;">
<p><strong><span style="font-size: 1.2em;">Bill Of Rights Dinner</span></strong><br />
Thursday, September 15<br />
5:30 p.m EDT<br />
Westin Copley Place Hotel</p>
<table role="presentation" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#D73A45" style="border-radius: 3px;">
<a role="button" class="button-text" href="{affiliate_website}" style="border-radius: 3px; font-family: Arial, sans-serif; color: #ffffff; padding: 10px; border: 1px solid #d73a45; display: inline-block;font-size:20px;font-weight:bold;text-align:center;text-decoration:none;text-transform: uppercase;">RSVP NOW</a>
</td>
</tr>
</table>
<!-- *** SNIPPET FOR THIRD-PARTY DISCLAIMER LINKS *** -->
<p style="font-size: 14px;margin:15px 10px 0 10px;"><em>Please note: This link will take you to a third-party website, xyz.com.</em></p>
</td>
</tr>
</tbody>
</table>
</td>
<!-- END LEFT -->
<!-- RIGHT -->
<td class="stack2" width="240" align="center" style="padding: 25px 10px 0 20px;display: inline-block;vertical-align: middle;">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="image2" style="display: inline;">
<a href="{affiliate_website}"><img src="https://media.sailthru.com/64p/1k3/9/r/5d8e778dd2054.jpg" alt="Lady Liberty." border="0" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic;"/></a>
</td>
</tr>
<tr>
<td>
<p align="center" style="font-size: 14px;padding: 10px 10px 0;">Add to your Calendar:</p>
<p align="center" style="font-family: Helvetica, Arial, sans-serif; color: #0055aa; font-size: 14px;margin-top: -10px; padding-bottom: 10px;">
<a rel="noopener" href="https://www.codexworld.com/newyork_event.ics" style="color: #0055aa; text-decoration: underline;"><i class="fa-brands fa-apple" style="font-size:14px"></i> Apple</a> | <a rel="noopener" href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=My Event&details=Event description text&dates=20220305T103000/20220305T184500&location=New York City" style="color: #0055aa; text-decoration: underline;"><i class="fa-brands fa-google"></i> Google</a> | <a rel="noopener" href="https://outlook.office.com/calendar/0/deeplink/compose?subject=My Event&body=Event description text&startdt=2022-03-05T10:30:00+00:00&enddt=2022-03-05T18:45:00+00:00&location=New York City&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent" style="color: #0055aa; text-decoration: underline;"><i class="fa-brands fa-microsoft"></i> Outlook</a>
</p>
</td>
</tr>
</table>
</td>
<!-- END RIGHT -->
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- EVENTS -->
39 changes: 39 additions & 0 deletions src/_includes/components/newsletter-multiple-event.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!-- MULTIPLE EVENTS -->
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" class="emailwrapto100pc" width="600">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size:16px; color:#2a2a2a;" bgcolor="#f2f2f2">
<table role="presentation" bgcolor="#b2cce5" width="100%" border="1" cellspacing="0" cellpadding="0" style="background-color:#b2cce5; border-radius: 3px; border-collapse: separate;" align="right">
<tbody>
<tr>
<th align="center" style="padding: 8px 0 0 0;">Event</th>
<th align="center" style="padding: 8px 0 0 0;">Date</th>
<th align="center" style="padding: 8px 0 0 0;">Location</th>
</tr>
<tr>
<td align="center" style="padding: 5px;"><a href="">Trans Resistance Festival</a></td>
<td align="center" style="padding: 5px;"><a href="">Sat., Jun. 3,<br /> 11 a.m. &ndash; 5 p.m.</a></td>
<td align="center" style="padding: 5px;"><a href="">Stony Brook Station</a></td>
</tr>
<tr>
<td align="center" style="padding: 5px;"><a href="">Boston Pride for the People Parade</a></td>
<td align="center" style="padding: 5px;"><a href="">Sat., Jun. 10,<br /> 10 a.m. &ndash; 8 p.m.</a></td>
<td align="center" style="padding: 5px;"><a href="">Copley Square</a></td>
</tr>
<tr>
<td align="center" style="padding: 5px;"><a href="">Action Team Media Crew Training</a></td>
<td align="center" style="padding: 5px;"><a href="">Wed., Aug. 16,<br /> 5:30 &ndash; 7:30 p.m.</a></td>
<td align="center" style="padding: 5px;"><a href="">Center Plaza</a></td>
</tr>
<tr>
<td align="center" style="padding: 0 0 6px 0;"><a href="">Bill of Rights Dinner</a></td>
<td align="center" style="padding: 0 0 6px 0;"><a href="">Fri., Sep. 22,<br /> 5:30 p.m.</a></td>
<td align="center" style="padding: 0 0 6px 0;"><a href="">Omni Boston Hotel</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- MULTIPLE EVENTS -->

0 comments on commit 06b275d

Please sign in to comment.