-
Notifications
You must be signed in to change notification settings - Fork 0
/
templatev2.html
196 lines (174 loc) · 12.1 KB
/
templatev2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<style>
.content {
max-width: 600px;
margin: auto;
}
.body {
width: 80%;
text-align: left;
font-size: 1em;
line-height: 1.6;
margin: 0 auto;
display: block;
}
.divider {
/* background: linear-gradient(-355deg, #0DEFE1 0%, transparent 100%); */
/* gradients don't work on outlook */
background: #0DEFE1;
height: 2.5px;
margin: 10px auto;
filter: drop-shadow(3px 1px 4px #000);
position: relative;
display: block;
width: 80%;
}
a {
color: #0DEFE1;
text-decoration: underline;
}
</style>
<body style="background: #2C2543; margin: 0; padding:0; font-family: 'HK Grotesk', sans-serif; font-weight: 400; color: #91E9EE;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding: 20px;">
<table class="content" width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border: 2px solid #433860; background: #2C2543; color: #91E9EE; border-radius: 8px;">
<!-- Header -->
<tr style="margin: 0px 0; background-image: url('https://raw.githubusercontent.com/nwplus/newsletter-template/main/images/top-green-texture.png'); background-size: auto auto; height: 370px; background-repeat: no-repeat;">
<td style="text-align: center;">
<a href="https://nwplus.io">
<img src="https://raw.githubusercontent.com/nwplus/newsletter-template/main/images/nwLogo.png" />
</a>
</td>
</tr>
<!-- Body -->
<tr>
<td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
<p>Hi there!</p>
<p>IT'S GAME TIME. Make your next move because it's your turn to GO! apply to nwHacks 2024!</p>
</td>
</tr>
<!-- Horizontal line -->
<tr>
<td class="divider"></td>
</tr>
<!-- Landscape image -->
<tr>
<td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
<img src="https://via.placeholder.com/600x200" alt="Landscape Image" style="width: 100%; height: auto; margin-top: 20px;" />
<p>Western Canada’s LARGEST 24-hour hackathon is coming your way on January 20-21, 2024. Piece together a winning strategy as we create, learn, and explore together for the experience of a lifetime.</p>
<p>This is just some more text to fill up the space.</p>
</td>
</tr>
<!-- Rounded corner container with a ribbon -->
<tr>
<td class="body" style="padding: 0px; text-align: left; font-size: 16px; background: #433860; border-radius: 12px;">
<!-- <p style="width: 0; height: 0; border-top: 30px solid #00A399; border-right: 30px solid transparent; position: relative;"></p> -->
<p style="padding: 20px 20px 20px 20px;">Applications are open until December 16, 11:59 PM PST, so be sure to apply early at <a style="color:#0DEFE1;" href="nwhacks.io">nwhacks.io</a>! We hope to see you there ✨</p>
</td>
</tr>
<!-- Hyperlink that looks like a button with rounded corners -->
<tr>
<td class="body" style="text-align: center; padding-top: 20px; padding-bottom: 10px;">
<a href="https://nwplus.io/" style="
display: inline-block;
padding: 12px 35px;
font-size: 1.2em;
color: #ffffff;
background-color: #00A399;
border-radius: 16px;
text-decoration: none;
margin: 25px 0;
">Apply Now</a>
</td>
</tr>
<!-- Hyperlink that looks like a button with rounded corners -->
<tr>
<td class="body" style="text-align: center; padding-top: 5px; padding-bottom: 40px;">
<a href="https://nwplus.io/" style="
display: inline-block;
padding: 12px 35px;
font-size: 1.2em;
color: #ffffff;
background-color: #00A399;
border-radius: 16px;
text-decoration: none;
margin: 5px 10px;
">YouTube</a>
<a href="https://nwplus.io/" style="
display: inline-block;
padding: 12px 35px;
font-size: 1.2em;
color: #ffffff;
background-color: #00A399;
border-radius: 16px;
text-decoration: none;
margin: 5px 10px;
">Spotify</a>
</td>
</tr>
<!-- Horizontal line -->
<tr>
<td class="divider"></td>
</tr>
<tr style="background-image: url('https://raw.githubusercontent.com/nwplus/newsletter-template/main/images/red-texture.png'); background-size: auto auto; height: auto; background-repeat: no-repeat; background-position: left -20px; width: 100%;">
<td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
<h2>HackCamp 2023 Community Spotlights</h2>
<p>Thank you to everyone who made HackCamp 2023 a huge success!</p>
<p>Take a look at our collection of Community Spotlights, where we learned about our participants’ diverse stories and experiences throughout the HackCamp weekend—as 100% first-time hackers! We hope their insights will inspire you to try something new in tech.</p>
<!-- 2 Hyperlinks on separate lines, target=_blank -->
<p><a href="https://example.com/story1" target="_blank" style="color: #7DC5CE; text-decoration: underline;">☝️ Community Spotlight: Hackers & Mentors</a></p>
<p><a href="https://example.com/story2" target="_blank" style="color: #7DC5CE; text-decoration: underline;">☝️ Community Spotlight: AgentHub & Sponsor Prize Winners</a></p>
<!-- One more sentence with a hyperlink in it -->
<p>Lastly, don't forget to check out our <a href="https://example.com/blog" target="_blank" style="color: #7DC5CE; text-decoration: underline;">full HackCamp Recap video</a> on YouTube!</p>
</td>
</tr>
<!-- Horizontal line -->
<tr>
<td class="divider"></td>
</tr>
<tr style="background-image: url('https://raw.githubusercontent.com/nwplus/newsletter-template/main/images/purple-texture.png'); background-size: auto auto; height: auto; background-repeat: no-repeat; background-position: right -80px; width: 100%;">
<td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
<h2>HackCamp 2023 Community Spotlights</h2>
<p>Thank you to everyone who made HackCamp 2023 a huge success!</p>
<p>Take a look at our collection of Community Spotlights, where we learned about our participants’ diverse stories and experiences throughout the HackCamp weekend—as 100% first-time hackers! We hope their insights will inspire you to try something new in tech.</p>
<!-- 2 Hyperlinks on separate lines, target=_blank -->
<p><a href="https://example.com/story1" target="_blank" style="color: #7DC5CE; text-decoration: underline;">☝️ Community Spotlight: Hackers & Mentors</a></p>
<p><a href="https://example.com/story2" target="_blank" style="color: #7DC5CE; text-decoration: underline;">☝️ Community Spotlight: AgentHub & Sponsor Prize Winners</a></p>
<!-- One more sentence with a hyperlink in it -->
<p>Lastly, don't forget to check out our <a href="https://example.com/blog" target="_blank" style="color: #7DC5CE; text-decoration: underline;">full HackCamp Recap video</a> on YouTube!</p>
</td>
</tr>
<!-- Horizontal line -->
<tr>
<td class="divider"></td>
</tr>
<tr>
<td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
<p>Stay tuned to hear more from our nwPlus community! ❤️</p>
<p>If you would like to unsubscribe from our communications, please reply to this email.</p>
<p><a href="mailto:info@nwplus.io" target="_blank" style="color: #0DEFE1; text-decoration: underline;">Contact us</a> or find us on social media for the most up-to-date information.</p>
<p>
<a href="https://nwplus.io/" target="_blank" style="color: #0DEFE1; text-decoration: underline;">Website</a> |
<a href="https://www.instagram.com/nwplusubc/" target="_blank" style="color: #0DEFE1; text-decoration: underline;">Instagram</a> |
<a href="https://www.linkedin.com/company/nwplus/" target="_blank" style="color: #0DEFE1; text-decoration: underline;">LinkedIn</a> |
<a href="https://www.tiktok.com/@nwplusubc" target="_blank" style="color: #0DEFE1; text-decoration: underline;">TikTok</a> |
<a href="https://medium.com/nwplusubc" target="_blank" style="color: #0DEFE1; text-decoration: underline;">Medium</a> |
<a href="https://www.youtube.com/nwplusubc" target="_blank" style="color: #0DEFE1; text-decoration: underline;">YouTube</a>
</p>
</td>
</tr>
<!-- Footer -->
<tr style="background-image: url('https://raw.githubusercontent.com/nwplus/newsletter-template/main/images/bottom-green-texture.png'); background-size: auto auto; background-repeat: no-repeat; background-position: right center;">
<td class="body" style="padding: 40px; text-align: center; font-size: 16px; line-height: 1.6;">
<a href="https://nwplus.io">
<img src="https://raw.githubusercontent.com/nwplus/newsletter-template/main/images/nwLogo.png" />
</a>
<p>nwPlus Marketing</p>
<p><a href="mailto:marketing@nwplus.io" style="color: #0DEFE1; text-decoration: underline;">marketing@nwplus.io</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>