-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathannouncement.html
155 lines (141 loc) · 7.31 KB
/
announcement.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FutureSTEMgirls Campaign</title>
<style>
/* Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
/* General styles */
body {
font-family: 'Inter', sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}
h1 {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
}
h2 {
font-size: 20px;
font-weight: 600;
margin-bottom: 16px;
}
a {
color: #de8154;
text-decoration: none;
}
/* Email template styles */
.email-container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
border: 1px solid #e5e5e5;
}
.header {
padding: 20px;
background-color: #f8f9fa;
border-bottom: 1px solid #e5e5e5;
}
.logo {
max-width: 150px;
height: auto;
}
.content {
padding: 20px;
}
.hero-image {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
.cta-button {
display: inline-block;
padding: 10px 20px;
background-color: #de8154;
color: #ffffff;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
}
.footer {
padding: 20px;
background-color: #f8f9fa;
border-top: 1px solid #e5e5e5;
text-align: center;
}
.footer-address {
margin-bottom: 10px;
}
.social-links a {
display: inline-block;
margin: 0 5px;
color: #333;
}
.unsubscribe {
margin-top: 20px;
font-size: 14px;
color: #de8154;
}
</style>
</head>
<body>
<table class="email-container" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- Header -->
<table class="header" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="https://futurestemgirls.org" target="_blank">
<img class="logo" src="https://festa.design/assets/img/future-stem-girls.png" alt="FutureSTEMgirls Logo">
</a>
</td>
<td align="right">
<a href="https://example.com/email-view" target="_blank">View in Browser</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- Content -->
<table class="content" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<h1 style="color: #de8154;">Help Girls Pursue STEM Education</h1>
<img class="hero-image" src="https://festa.design//assets/img/futurestemgirls.jpg" alt="Girl coding on a laptop">
<p>FutureSTEMgirls is an NGO advocating for girls and women to pursue STEM education and career. We are running a campaign to understand motivations and barriers for girls and women in STEM and ICT domains.</p>
<a class="cta-button" href="#" target="_blank">Join the Campaign</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- Footer -->
<table class="footer" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<p class="footer-address">FutureSTEMgirls<br>123 Main Street<br>Anytown, USA 12345</p>
<p>
<span class="social-links">
<a href="https://www.facebook.com/futurestemgirls" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><title>logo-facebook</title><g fill="#212121"><path d="M32,16A16,16,0,1,0,13.5,31.806V20.625H9.438V16H13.5V12.475c0-4.01,2.389-6.225,6.043-6.225a24.644,24.644,0,0,1,3.582.312V10.5H21.107A2.312,2.312,0,0,0,18.5,13v3h4.438l-.71,4.625H18.5V31.806A16,16,0,0,0,32,16Z" fill="#212121"></path></g></svg></a>
<a href="https://www.twitter.com/futurestemgirls" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><title>x</title><g fill="#212121"><polygon points="14.457 20.202 5.876 30 1.123 30 12.237 17.304 14.457 20.202" fill="#212121"></polygon><polygon points="17.051 10.988 24.908 2 29.658 2 19.251 13.902 17.051 10.988" fill="#212121"></polygon><path d="M31.488,30h-9.559L.512,2H10.313L31.488,30Zm-8.248-2.843h2.632L8.883,4.694h-2.824L23.241,27.157Z" fill="#212121"></path></g></svg></a>
<a href="https://www.instagram.com/futurestemgirls" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><title>logo-instagram</title><g fill="#212121"><path d="M16,3.7c4,0,4.48.015,6.061.087a8.293,8.293,0,0,1,2.786.517,4.644,4.644,0,0,1,1.724,1.122,4.644,4.644,0,0,1,1.122,1.724,8.293,8.293,0,0,1,.517,2.786C28.282,11.52,28.3,12,28.3,16s-.015,4.48-.087,6.061a8.293,8.293,0,0,1-.517,2.786,4.97,4.97,0,0,1-2.846,2.846,8.293,8.293,0,0,1-2.786.517c-1.581.072-2.056.087-6.061.087s-4.48-.015-6.061-.087a8.293,8.293,0,0,1-2.786-.517,4.644,4.644,0,0,1-1.724-1.122,4.644,4.644,0,0,1-1.122-1.724,8.293,8.293,0,0,1-.517-2.786C3.718,20.48,3.7,20.005,3.7,16s.015-4.48.087-6.061a8.293,8.293,0,0,1,.517-2.786A4.644,4.644,0,0,1,5.429,5.429,4.644,4.644,0,0,1,7.153,4.307,8.293,8.293,0,0,1,9.939,3.79C11.52,3.718,12,3.7,16,3.7M16,1c-4.074,0-4.585.017-6.184.09a11.044,11.044,0,0,0-3.642.7A7.364,7.364,0,0,0,3.518,3.518,7.364,7.364,0,0,0,1.787,6.174a11.044,11.044,0,0,0-.7,3.642C1.017,11.415,1,11.926,1,16s.017,4.585.09,6.184a11.044,11.044,0,0,0,.7,3.642,7.364,7.364,0,0,0,1.731,2.656,7.364,7.364,0,0,0,2.656,1.731,11.044,11.044,0,0,0,3.642.7c1.6.073,2.11.09,6.184.09s4.585-.017,6.184-.09a11.044,11.044,0,0,0,3.642-.7,7.683,7.683,0,0,0,4.387-4.387,11.044,11.044,0,0,0,.7-3.642c.073-1.6.09-2.11.09-6.184s-.017-4.585-.09-6.184a11.044,11.044,0,0,0-.7-3.642,7.364,7.364,0,0,0-1.731-2.656,7.364,7.364,0,0,0-2.656-1.731,11.044,11.044,0,0,0-3.642-.7C20.585,1.017,20.074,1,16,1Z" fill="#212121"></path><path d="M16,8.3A7.7,7.7,0,1,0,23.7,16,7.7,7.7,0,0,0,16,8.3ZM16,21a5,5,0,1,1,5-5A5,5,0,0,1,16,21Z" fill="#212121"></path><circle cx="24.007" cy="7.993" r="1.8" fill="#212121"></circle></g></svg></a>
</span>
</p>
<p class="unsubscribe"><a href="https://example.com/unsubscribe" target="_blank">Unsubscribe</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>