<!--
Inspired by @adamwathan's tweet:
https://twitter.com/adamwathan/status/1062745150080741376
Illustration: "Quitting time" on https://undraw.co/
Icons: http://www.zondicons.com/
Logo font: Pacifico
Maizzle.js source file:
https://github.com/maizzle/remix/blob/master/src/templates/9-cya-quitting-app.njk
Don't have a decent font installed to recreate the quote, so it's not retina 😩
-->
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>Cya!, the app for quitters</title>
<!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"><!--<![endif]-->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<style>
table {border-collapse: collapse;}
td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
</style>
<![endif]-->
<style>
.hover-bg-indigo-700:hover {
background-color: #4c51bf !important;
}
.hover-text-gray-800:hover {
color: #2d3748 !important;
}
@media screen {
img {
max-width: 100%;
}
td,
th {
box-sizing: border-box;
}
u~div .wrapper {
min-width: 100vw;
}
a[x-apple-data-detectors] {
color: inherit;
text-decoration: none;
}
.all-font-sans {
font-family: -apple-system, "Segoe UI", sans-serif !important;
}
}
@media (max-width: 600px) {
.sm-block {
display: block !important;
}
.sm-hidden {
display: none !important;
}
.sm-h-12 {
height: 12px !important;
}
.sm-h-32 {
height: 32px !important;
}
.sm-leading-48 {
line-height: 48px !important;
}
.sm-p-16 {
padding: 16px !important;
}
.sm-px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.sm-py-32 {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.sm-pl-12 {
padding-left: 12px !important;
}
.sm-pb-16 {
padding-bottom: 16px !important;
}
.sm-text-base {
font-size: 16px !important;
}
.sm-text-xl {
font-size: 20px !important;
}
.sm-text-5xl {
font-size: 48px !important;
}
.sm-w-full {
width: 100% !important;
}
}
</style>
<style>
@media screen {
.font-pacifico {
font-family: 'Pacifico', cursive;
}
}
@media (max-width: 600px) {
.sm-bg-quote {
background-image: url('https://res.cloudinary.com/maizzle/image/upload/v1542277275/remix/cya/quote-1x-gaaah.jpg');
background-repeat: no-repeat;
background-size: 77px;
}
}
</style>
</head>
<body style="box-sizing: border-box; margin: 0; padding: 0; width: 100%; word-break: break-word; -webkit-font-smoothing: antialiased;">
<div style="display: none; line-height: 0; font-size: 0;">A fictional app demo UI by @adamwathan for @VueToronto 2018</div>
<table class="wrapper all-font-sans" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center" class="sm-p-16" style="padding-top: 40px; padding-bottom: 40px;" width="100%">
<table class="sm-w-full" width="600" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td width="50%">
<h1 class="font-pacifico" style="margin: 0; color: #667eea; font-size: 36px;">Cya!</h1>
</td>
<td align="right" width="50%">
<table cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td style="padding-right: 16px;">
<a href="https://example.com" class="hover-text-gray-800" style="color: #718096; font-size: 18px; text-decoration: none;">Login</a>
</td>
<td>
<a href="https://example.com" class="hover-text-gray-800" style="color: #718096; font-size: 18px; text-decoration: none;">Sign up</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="sm-py-32" style="padding-bottom: 40px; padding-top: 80px; text-align: center;" align="center">
<h2 class="sm-text-5xl sm-leading-48" style="font-family: -apple-system, 'Segoe UI', sans-serif; line-height: 64px; margin: 0; color: #000000; font-size: 56px;">Quitting your job, <br class="sm-hidden"><span style="color: #667eea;">made easy.</span></h2>
</td>
</tr>
<tr>
<td style="padding-bottom: 40px;">
<a href="https://example.com" style="text-decoration: none;">
<img src="https://res.cloudinary.com/maizzle/image/upload/v1542274232/remix/cya/cya-quitting-time.jpg" width="600" alt="Quitting Time by Katerina Limpitsouni on undraw.co" style="border: 0; line-height: 100%; vertical-align: middle;">
</a>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="sm-block sm-w-full sm-pb-16" style="vertical-align: top;" width="16.66667%" valign="top">
<img src="https://res.cloudinary.com/maizzle/image/upload/v1542276127/remix/cya/cog.png" width="54" style="border: 0; line-height: 100%; vertical-align: middle;">
</td>
<td class="sm-block sm-w-full" width="83.33333%">
<h3 style="line-height: 100%; margin: 0; margin-bottom: 16px; color: #000000; font-size: 28px;">Fully automated</h3>
<p style="line-height: 28px; margin: 0; color: #718096; font-size: 18px;">Simply give us your boss's email address and we'll handle the rest. We'll even clean out your desk so you can avoid awkward confrontation.</p>
</td>
</tr>
<tr>
<td colspan="2" class="sm-h-32" height="48"></td>
</tr>
<tr>
<td class="sm-block sm-w-full sm-pb-16" style="vertical-align: top;" width="16.66667%" valign="top">
<img src="https://res.cloudinary.com/maizzle/image/upload/v1542276127/remix/cya/lock.png" width="54" style="border: 0; line-height: 100%; vertical-align: middle;">
</td>
<td class="sm-block sm-w-full" width="83.33333%">
<h3 style="line-height: 100%; margin: 0; margin-bottom: 16px; color: #000000; font-size: 28px;">Totally anonymous</h3>
<p style="line-height: 28px; margin: 0; color: #718096; font-size: 18px;">Your boss will never find out that you're the person who quite. Well until you stop showing up for work, then they'll know.</p>
</td>
</tr>
<tr>
<td colspan="2" class="sm-h-32" height="48"></td>
</tr>
<tr>
<td class="sm-block sm-w-full sm-pb-16" style="vertical-align: top;" width="16.66667%" valign="top">
<img src="https://res.cloudinary.com/maizzle/image/upload/v1542276127/remix/cya/currency-dollar.png" width="54" style="border: 0; line-height: 100%; vertical-align: middle;">
</td>
<td class="sm-block sm-w-full" width="83.33333%">
<h3 style="line-height: 100%; margin: 0; margin-bottom: 16px; color: #000000; font-size: 28px;">Free for quitters</h3>
<p style="line-height: 28px; margin: 0; color: #718096; font-size: 18px;">We send the bill to your next employer, not to you.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="sm-w-full" width="700" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="sm-h-32" colspan="2" height="48"></td>
</tr>
<tr>
<td class="sm-hidden" width="77" style="vertical-align: top;" valign="top">
<img src="https://res.cloudinary.com/maizzle/image/upload/v1542277275/remix/cya/quote-1x-gaaah.jpg" width="77" style="border: 0; line-height: 100%; vertical-align: middle;">
</td>
<td class="sm-bg-quote" width="623" style="padding-left: 16px; padding-right: 16px; padding-top: 20px; padding-bottom: 20px; vertical-align: top;" valign="top">
<p class="sm-text-xl" style="font-family: Constantia, Georgia, serif; margin: 0; color: #3c366b; font-size: 28px; font-style: italic;">I couldn't believe how easy it was. One minute my boss was handling me an Angular 1 project to maintain, and a few clicks later I was free!</p>
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="sm-h-12" colspan="2" height="24"></td>
</tr>
<tr>
<td class="sm-block sm-w-full" width="77">
<img src="https://res.cloudinary.com/maizzle/image/upload/v1542280425/remix/cya/aw.jpg" width="60" style="border: 0; line-height: 100%; vertical-align: middle; border-radius: 9999px;">
</td>
<td class="sm-pl-12">
<h6 class="sm-text-base" style="font-weight: 600; margin: 0; color: #667eea; font-size: 18px;">Adam Wathan</h6>
<p class="sm-text-base" style="margin: 0; color: #718096; font-size: 18px;">Now unemployed software developer</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="sm-px-0 sm-py-32" colspan="2" style="padding-left: 48px; padding-right: 48px; padding-top: 64px; padding-bottom: 64px;">
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<th class="hover-bg-indigo-700" style="mso-padding-alt: 24px 48px; border-radius: 4px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);" bgcolor="#5a67d8">
<a href="https://example.com" class="sm-text-xl" style="display: block; font-weight: 600; line-height: 100%; padding-top: 24px; padding-bottom: 24px; padding-left: 48px; padding-right: 48px; color: #ffffff; font-size: 24px; text-decoration: none;">Sign up and quit today</a>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
!
