Skip to content

Instantly share code, notes, and snippets.

@kouameYao

kouameYao/email.html

Created August 1, 2024 15:33
Show Gist options
  • Save kouameYao/5b969311e2a8a3c951ec81b6f8b06fa4 to your computer and use it in GitHub Desktop.
Save kouameYao/5b969311e2a8a3c951ec81b6f8b06fa4 to your computer and use it in GitHub Desktop.
Download ZIP
Ask for help
Raw
email.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Newsletter</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding-left: 1.25rem;
margin: 0;
font-size: medium;
}
@media (min-width: 1024px) {
.divider {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.text {
font-size: 1.125rem;
}
}
@media (max-width: 768px) {
.title {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div
class="container"
style="
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.25rem;
"
>
<a href="https://paynah.com" target="_blank"
><img
src="https://paynah-icons.s3.eu-west-2.amazonaws.com/assets-mail/mini-logo.svg"
alt="mini logo paynah"
width="60"
height="60"
style="text-align: center"
/></a>
<div
style="
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 600px;
width: 100%;
"
>
<h2
class="title"
style="
color: #000000;
font-weight: 700;
font-size: 3rem;
line-height: 3rem;
text-align: center;
"
>
Plus que quelques temps avant d’ouvrir les portes de la sérénité
financière !
</h2>
<hr
class="divider"
style="
color: #c6c6c6;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
width: 100%;
"
/>
<p class="text" style="font-weight: 300; line-height: 1.5rem">
Bonjour {{suscriber}},
</p>
<div
class="text"
style="max-width: 500px; font-weight: 300; line-height: 1.5rem"
>
<p>
Paynah est ravie de vous annoncer que vous faites désormais partie
de sa communauté.
</p>
<p>
<strong style="font-weight: 700"
>Vous recevrez bientôt, en avant-première, la clé d’entrée dans
notre univers !</strong
>
</p>
</div>
<p class="text" style="font-weight: 300; line-height: 1.5rem">
Suivez-nous sur nos réseaux sociaux pour ne rien manquer de notre
actualité.
</p>
<div
style="
line-height: 1.5rem;
font-size: 0.875rem;
line-height: 0.025rem;
margin-top: 10px;
margin-bottom: 10px;
"
>
<p>L’équipe</p>
<a href="https://paynah.com" target="_blank">
<img
src="https://paynah-icons.s3.eu-west-2.amazonaws.com/assets-mail/logo.svg"
alt="paynah logo"
width="100"
height="50"
/>
</a>
</div>
<div style="color: #c6c6c6; width: 100%; line-height: 2.5rem">
<div
style="
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
"
>
<a href="http://" target="_blank">
<img
src="https://paynah-icons.s3.eu-west-2.amazonaws.com/assets-mail/facebook.svg"
alt="facebook"
width="25"
height="25"
class="grayscale-filter"
/>
</a>
<a href="https://www.instagram.com/paynah/?hl=en" target="_blank">
<img
src="https://paynah-icons.s3.eu-west-2.amazonaws.com/assets-mail/instagram.svg"
alt="instagram"
width="25"
height="25"
class="grayscale-filter"
/>
</a>
<a
href="https://www.linkedin.com/company/paynahunlock/mycompany/"
target="_blank"
>
<img
src="https://paynah-icons.s3.eu-west-2.amazonaws.com/assets-mail/linkedin.svg"
alt="linkedin"
width="25"
height="25"
class="grayscale-filter"
/>
</a>
<a href="http://" target="_blank">
<img
src="https://paynah-icons.s3.eu-west-2.amazonaws.com/assets-mail/youtube.svg"
alt="youtube"
width="25"
height="25"
class="grayscale-filter"
/>
</a>
</div>
<p
style="
display: flex;
font-size: 0.875rem;
line-height: 0.025rem;
color: #b1b1b1;
margin-top: 0.5rem;
"
>
© 2024 Paynah. Tous droits réservés | Politique de confidentialité.
</p>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment