-
Notifications
You must be signed in to change notification settings - Fork 0
/
final.html
206 lines (190 loc) · 11.9 KB
/
final.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
197
198
199
200
201
202
203
204
205
206
<style>
/* Base styling */
.content {
max-width: 600px;
margin: auto;
}
.body {
width: 80%;
text-align: left;
font-size: 1.4em;
line-height: 1.6;
margin: 0 auto;
display: block;
}
.divider {
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;
}
/* Light mode styling */
@media (prefers-color-scheme: light) {
body {
background: #2C2543;
color: #91E9EE;
}
.content {
border-color: #433860;
background: #2C2543;
color: #91E9EE;
}
}
/* Dark mode styling */
@media (prefers-color-scheme: dark) {
body {
background: #2C2543; /* Explicit dark background */
color: #91E9EE;
}
.content {
border-color: #433860;
background: #2C2543;
color: #91E9EE;
}
}
</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="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" title="nwPlus Website">
<img src="https://raw.githubusercontent.com/nwplus/newsletter-template/main/images/nwLogo.png" alt="nwPlus logo" />
</a>
</td>
</tr>
<!-- Body -->
<tr>
<td class="body" style="padding: 40px; text-align: left;">
<p>Hi there!</p>
<p><strong>IT'S GAME TIME.</strong> Make your next move because it's your turn to GO! apply to <strong>nwHacks 2024!</strong></p>
</td>
</tr>
<!-- Horizontal line -->
<tr>
<td class="divider"></td>
</tr>
<!-- Landscape image -->
<tr>
<td class="body" style="padding: 40px; text-align: left;">
<img src="https://via.placeholder.com/600x200" alt="Landscape showcasing hackathon event" style="width: 100%; height: auto; margin-top: 20px;" />
<p>Western Canada’s <strong>LARGEST 24-hour hackathon</strong> is coming your way on <strong>January 20-21, 2024</strong>. 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; background: #433860; border-radius: 12px;">
<p style="padding: 20px;">Applications are open until <strong>December 16, 11:59 PM PST</strong>, so be sure to apply early at <a href="https://nwhacks.io" title="nwHacks Website" style="color: #0DEFE1;">nwhacks.io</a>! We hope to see you there ✨</p>
</td>
</tr>
<!-- Hyperlink buttons with rounded corners -->
<tr>
<td class="body" style="text-align: center; padding-top: 20px; padding-bottom: 10px;">
<a href="https://nwplus.io/" title="Apply to nwHacks" 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>
<tr>
<td class="body" style="text-align: center; padding-top: 5px; padding-bottom: 40px;">
<a href="https://www.youtube.com/" title="Visit our YouTube" 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://open.spotify.com/" title="Visit our Spotify" 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;">
<h2><strong>HackCamp 2023 Community Spotlights</strong></h2>
<p>Thank you to everyone who made <strong>HackCamp 2023</strong> 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>
<p><a href="https://example.com/story1" target="_blank" title="Hackers & Mentors" style="color: #7DC5CE;">☝️ Community Spotlight: Hackers & Mentors</a></p>
<p><a href="https://example.com/story2" target="_blank" title="AgentHub & Sponsor Prize Winners" style="color: #7DC5CE;">☝️ Community Spotlight: AgentHub & Sponsor Prize Winners</a></p>
<p>Lastly, don't forget to check out our <a href="https://example.com/blog" target="_blank" title="HackCamp Recap Video on YouTube" style="color: #7DC5CE;">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;">
<h2><strong>HackCamp 2023 Community Spotlights</strong></h2>
<p>Thank you to everyone who made <strong>HackCamp 2023</strong> 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>
<p><a href="https://example.com/story1" target="_blank" title="Hackers & Mentors" style="color: #7DC5CE;">☝️ Community Spotlight: Hackers & Mentors</a></p>
<p><a href="https://example.com/story2" target="_blank" title="AgentHub & Sponsor Prize Winners" style="color: #7DC5CE;">☝️ Community Spotlight: AgentHub & Sponsor Prize Winners</a></p>
<p>Lastly, don't forget to check out our <a href="https://example.com/blog" target="_blank" title="HackCamp Recap Video on YouTube" style="color: #7DC5CE;">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;">
<p>Stay tuned to hear more from our <strong>nwPlus community</strong>! ❤️</p>
<p>Click <a href="https://unsubscribe.nwplus.io/{email}" target="_blank" title="Unsubscribe from nwPlus" style="color: #0DEFE1;">here</a> to unsubscribe from our communications.</p>
<p><a href="mailto:[email protected]" target="_blank" title="Email us at nwPlus" style="color: #0DEFE1;">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" title="Visit nwPlus Website" style="color: #0DEFE1;">Website</a> |
<a href="https://www.instagram.com/nwplusubc/" target="_blank" title="nwPlus Instagram" style="color: #0DEFE1;">Instagram</a> |
<a href="https://www.linkedin.com/company/nwplus/" target="_blank" title="nwPlus LinkedIn" style="color: #0DEFE1;">LinkedIn</a> |
<a href="https://www.tiktok.com/@nwplusubc" target="_blank" title="nwPlus TikTok" style="color: #0DEFE1;">TikTok</a> |
<a href="https://medium.com/nwplusubc" target="_blank" title="nwPlus Medium" style="color: #0DEFE1;">Medium</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:[email protected]" style="color: #0DEFE1; text-decoration: underline;">[email protected]</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>