-
Notifications
You must be signed in to change notification settings - Fork 0
/
template.html
157 lines (145 loc) · 9.49 KB
/
template.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
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>nwPlus Newsletter Email Template</title>
</head>
<body style="background: #2C2543; margin: 0; padding:0; font-family: 'HK Grotesk', sans-serif; font-size: 24px; font-weight: 400; color: #91E9EE;">
<table style="width: 100%;">
<tr>
<td> </td>
<td style="width: 800px; margin: 0 auto; position: relative; overflow: hidden; border: 2px solid #433860; border-radius: 8px; background: #2C2543;">
<!-- Logo -->
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" 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: 582.63px; background-repeat: no-repeat;">
<tr>
<td style="text-align: center; position: relative; top:-130px;">
<a href="https://nwplus.io">
<img src="https://raw.githubusercontent.com/nwplus/newsletter-template/main/images/nwLogo.png" />
</a>
</td>
</tr>
</table>
<!-- Introduction -->
<table role="presentation" style="position: relative; margin-top:-350px; margin-bottom: -350px; background-image: url('https://raw.githubusercontent.com/nwplus/newsletter-template/main/images/purple-texture.png'); background-size: auto auto; height: 700px; width: 100%; background-repeat: no-repeat; background-position: right center;">
<tr style="width: 80%; margin: 60px auto; display: block;">
<td>
<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>
</table>
<!-- Horizontal line -->
<table role="presentation" style="margin: 0 auto; width:80%;">
<tr style="margin: 10px 0 58px; width:100%;">
<td style="background: linear-gradient(-355deg, #0DEFE1 0%, transparent 100%); height: 2.5px; filter: drop-shadow(3px 1px 4px #000);"></td>
</tr>
</table>
<!-- Main Content -->
<table role="presentation" style="width: 80%; margin: 60px auto; display: block;">
<!-- Landscape image -->
<tr>
<td style="text-align: center;">
<img src="https://via.placeholder.com/600x200" alt="Landscape Image" style="width: 100%; height: auto; margin-top: 20px;" />
</td>
</tr>
<!-- Paragraph description -->
<tr>
<td>
<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 style="position: relative; padding: 20px; background-color: #433860; border-radius: 12px; overflow: hidden;">
<table role="presentation" style="position: absolute; top: 0; left: 0;">
<tr>
<td style="width: 0; height: 0; border-top: 30px solid #00A399; border-right: 30px solid transparent;"></td>
</tr>
</table>
<p>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 style="text-align: center; padding-top: 20px;">
<a href="https://nwplus.io/apply" style="
display: inline-block;
padding: 12px 35px;
font-size: 28px;
color: #ffffff;
background-color: #00A399;
border-radius: 16px;
text-decoration: none;
margin: 25px 0;
">Apply Now</a>
</td>
</tr>
</table>
<!-- Horizontal line -->
<table role="presentation" style="margin: 0 auto; width:80%;">
<tr>
<td style="background: linear-gradient(-355deg, #0DEFE1 0%, transparent 100%); height: 2.5px; filter: drop-shadow(3px 1px 4px #000);"></td>
</tr>
</table>
<table role="presentation" 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%; margin: 60px auto;">
<!-- START MAIN CONTENT AREA -->
<tr style="width: 80%; margin: 0 auto; display: block;">
<td>
<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>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- Horizontal line -->
<table role="presentation" style="margin: 0 auto; width:80%;">
<tr>
<td style="background: linear-gradient(-355deg, #0DEFE1 0%, transparent 100%); height: 2.5px; filter: drop-shadow(3px 1px 4px #000);"></td>
</tr>
</table>
<!-- FOOTER -->
<table role="presentation" style="width: 80%; margin: 0px auto; display: block;">
<tr>
<td>
<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="https://example.com/website" 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://example.com/website" target="_blank" style="color: #0DEFE1; text-decoration: underline;">Website</a> |
<a href="https://instagram.com" target="_blank" style="color: #0DEFE1; text-decoration: underline;">Instagram</a> |
<a href="https://linkedin.com" target="_blank" style="color: #0DEFE1; text-decoration: underline;">LinkedIn</a> |
<a href="https://tiktok.com" target="_blank" style="color: #0DEFE1; text-decoration: underline;">TikTok</a> |
<a href="https://medium.com" target="_blank" style="color: #0DEFE1; text-decoration: underline;">Medium</a> |
<a href="https://youtube.com" target="_blank" style="color: #0DEFE1; text-decoration: underline;">YouTube</a>
</p>
</td>
</tr>
</table>
<!-- Logo -->
<table role="presentation" style="margin-top: 40px; margin-bottom: -200px;" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="text-align: center; background-image: url('https://raw.githubusercontent.com/nwplus/newsletter-template/main/images/bottom-green-texture.png'); background-size: auto auto; height: 450px; background-repeat: no-repeat; background-position: right center; width: 100%; margin: 0px auto; display: block;">
<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>
<!-- <tr style="top: -200px; position: relative; text-align: center; background-image: url('https://raw.githubusercontent.com/nwplus/newsletter-template/main/images/connector.png'); background-size: auto auto; height: 105px; background-repeat: no-repeat; background-position: left center; width: 100%; margin: 0px auto; display: block;"></tr>
<tr style="top: -250px; position: relative; text-align: center; background-image: url('https://raw.githubusercontent.com/nwplus/newsletter-template/main/images/space-nugget.png'); background-size: auto auto; height: 95px; background-repeat: no-repeat; background-position: 140px center; width: 100%; margin: 0px auto; display: block;"></tr> -->
</td>
</tr>
</table>
<!-- FOOTER END -->
</td>
</tr>
</table>
</body>
</html>