added

Festa-Design-Studio · Jun 12, 2024 · 7450c32 · 7450c32
1 parent ce63f81
commit 7450c32
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 6 deletions.
diff --git a/assets/img/email-newsletter-template.png b/assets/img/email-newsletter-template.png
diff --git a/donor-newsletter.html b/donor-newsletter.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Support Ecovisio's Youth Climate Education</title>
+  <style type="text/css">
+    @media screen and (max-width: 600px) {
+      .header, .content, .footer {
+        padding: 10px !important;
+      } 
+    }
+  </style>
+</head>
+
+<body style="margin:0;padding:0;background-color:#F5F5F5;">
+  <table border="0" cellpadding="0" cellspacing="0" width="100%">
+    <tr>
+      <td>
+
+        <!-- Header -->
+        <table class="header" align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse:collapse;background-color:#FFFFFF;padding:20px 40px;">
+          <tr>
+            <td>
+              <img src="http://www.ecovisio.org/logo.png" alt="Ecovisio logo" width="150">
+            </td>
+            <td align="right">
+              <a href="http://www.ecovisio.org" target="_blank" style="font-family:Inter, sans-serif;font-size:14px;color:#333333;">View in Browser</a>
+            </td>
+          </tr>
+        </table>
+
+        <!-- Content -->
+        <table class="content" align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse:collapse;background-color:#FFFFFF;padding:40px;">
+          <tr>
+            <td>
+              <h1 style="font-family:Inter, sans-serif;font-size:24px;color:#192c05;margin-top:0;margin-bottom:20px;">Empower Youth to Take Climate Action</h1>
+              <p style="font-family:Inter, sans-serif;font-size:16px;line-height:1.5;color:#333333;margin-top:0;margin-bottom:20px;">At Ecovisio, we educate, empower and activate students to tackle climate change at the grassroots level. Our programs give youth the knowledge, skills and platforms to develop local climate solutions and advocate for sustainable policies. But we need your help to expand our reach and impact.</p>
+              <p style="text-align:center;margin-top:30px;margin-bottom:30px;">
+                <a href="http://www.ecovisio.org/donate" target="_blank" style="background-color:#192c05;color:#FFFFFF;font-family:Inter, sans-serif;font-size:18px;font-weight:bold;text-decoration:none;padding:15px 30px;display:inline-block;border-radius:5px;">Donate Now</a>
+              </p>
+              <img src="http://www.ecovisio.org/youth-climate-action.jpg" alt="Students engaged in climate education and action" width="520" style="max-width:100%;height:auto;">
+            </td>
+          </tr>
+        </table>
+
+        <!-- Footer -->  
+        <table class="footer" align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse:collapse;background-color:#192c05;color:#FFFFFF;padding:20px 40px;">
+          <tr>
+            <td>
+              <p style="font-family:Inter, sans-serif;font-size:14px;line-height:1.5;margin-top:0;margin-bottom:15px;">Ecovisio<br>123 Green St<br>Anytown, ST 12345</p>
+              <p style="font-family:Inter, sans-serif;font-size:14px;margin-top:0;margin-bottom:15px;">
+                <a href="https://www.facebook.com/ecovisio" target="_blank" style="color:#FFFFFF;margin-right:10px;">Facebook</a>
+                <a href="https://www.twitter.com/ecovisio" target="_blank" style="color:#FFFFFF;margin-right:10px;">Twitter</a>
+                <a href="https://www.instagram.com/ecovisio" target="_blank" style="color:#FFFFFF;">Instagram</a>
+              </p>
+              <p style="font-family:Inter, sans-serif;font-size:14px;margin-top:0;margin-bottom:0;">
+                <a href="http://www.ecovisio.org/unsubscribe" target="_blank" style="color:#FFFFFF;">Unsubscribe</a>
+              </p>
+            </td>
+          </tr>
+        </table>
+
+      </td>
+    </tr>
+  </table>
+</body>
+
+</html>
+
diff --git a/index.html b/index.html
@@ -49,30 +49,30 @@ <h3 class="color-contrast-high font-medium text-md margin-bottom-sm">We design c
     </section>
   </div>
 
-  <section class="padding-y-xs">
+  <section class="padding-y-xs" style="background-color: #e5e5e5;">
     <div class="container">
       <div class="grid gap-lg padding-md">
         <div class="col-4@md">
           <div class="text-component margin-bottom-md">
-            <h4 class="text-md color-contrast-high">Advocacy and campaign email newsletter<span class="color-primary">.</span></h4>
+            <h4 class="text-md color-contrast-higher">Advocacy and campaign email newsletter<span class="color-primary">.</span></h4>
           </div>
-          <div class="border-top">
+          <div class="hover:elevate">
             <a href="campaign.html"><img class="width-100%" src="assets/img/campaign.png" alt="Image placeholder banner"></a>
           </div>
         </div>
         <div class="col-4@md">
           <div class="text-component margin-bottom-md">
-            <h4 class="text-md color-contrast-high">Announcment and volunteer email newsletter<span class="color-primary">.</span></h4>
+            <h4 class="text-md color-contrast-high">Announcement and volunteer email newsletter<span class="color-primary">.</span></h4>
           </div>
-          <div class="border-top">
+          <div class="hover:elevate">
             <a href="#"><img class="width-100%" src="assets/img/Placeholder.svg" alt="Image placeholder banner"></a>
           </div>
         </div>
         <div class="col-4@md">
           <div class="text-component margin-bottom-md">
             <h4 class="text-md color-contrast-high">Donor updates and fundraising email newsletter<span class="color-primary">.</span></h4>
           </div>
-          <div class="border-top">
+          <div class="hover:elevate">
             <a href="#"><img class="width-100%" src="assets/img/Placeholder.svg" alt="Image placeholder banner"></a>
           </div>