<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="dark only">
<meta name="supported-color-schemes" content="dark only">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Karma:wght@300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<title>Challenge #1 (Hover)</title>
<!--[if mso]>
<style type="text/css">
table {
border-collapse: collapse;
border: 0;
border-spacing: 0;
margin: 0;
}
div,
td {
padding: 0;
}
div {
margin: 0 !important;
}
</style>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style type="text/css">
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
font-family: Karma;
}
img {
-ms-interpolation-mode: bicubic;
}
/* @import url(https://fonts.googleapis.com/css2?family=Karma:wght@300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap); */
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
.button:hover {
background-color: #b45e78 !important;
border-top: 20px solid #b45e78 !important;
border-right: 40px solid #b45e78 !important;
border-bottom: 20px solid #b45e78 !important;
border-left: 40px solid #b45e78 !important;
color: white !important;
}
/* @media screen and (max-width: 350px) {
.three-col .column {
max-width: 100% !important;
}
}
@media screen and (min-width: 351px) and (max-width: 460px) {
.three-col .column {
max-width: 50% !important;
}
}
@media screen and (max-width: 460px) {
.two-col .column {
max-width: 100% !important;
}
.two-col img {
width: 100% !important;
}
}
@media screen and (min-width: 461px) {
.three-col .column {
max-width: 33.3% !important;
}
.two-col .column {
max-width: 50% !important;
}
.sidebar .small {
max-width: 16% !important;
}
.sidebar .large {
max-width: 84% !important;
}
} */
</style>
</head>
<body style="margin:0; padding: 0; word-spacing:normal; background-color:#f2f2f2;">
<!-- Preheader white space hack -->
<div style="display: none; max-height: 0px; overflow: hidden;">
͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌
</div>
<!-- OUTER WRAPPER - Wraught Iron -->
<div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color: #2e2e2e;">
<table role="presentation" style="width: 100%; border: 0; border-spacing: 0; background-image: url(https://imgur.com/bqiasuo.png); background-repeat: repeat; background-attachment: fixed;
background-position: center; background-color:#2e2e2e" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<!-- STRUCTURED OUTER CONTAINER -->
<!--[if mso]>
<table role="presentation" align="center" style="width:600px;">
<tr>
<td>
<![endif]-->
<div class="outer" style="max-width:600px;">
<!-- Padding -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#2e2e2e" align="center" style="padding: 40px 10px 0px 10px; background-image: url(https://imgur.com/bqiasuo.png); background-repeat: repeat; background-attachment: fixed;
background-position: center;">
<!-- Content -->
<table role="presentation" style="width: 100%; border:0;border-spacing:0;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width=270px style="padding: 16px"></td>
<td align="right" valign="top" style="padding: 10px 20px 40px 0px;">
<a href="https://github.com/AFvisions" target="_blank">
<img alt="github" src="https://i.imgur.com/JHnPDHd.png" width="24" style="display: block; width: 24px;" border="0">
</a>
</td>
<td align="right" valign="top" style="padding: 10px 20px 40px 0px;">
<a href="https://x.com/afvisions" target="_blank">
<img alt="twitter" src="https://i.imgur.com/kpAjjkg.png" width="24" style="display: block; width: 24px;" border="0">
</a>
</td>
<td align="right" valign="top" style="padding: 10px 20px 40px 0px;">
<a href="https://www.linkedin.com/in/andrewfumagalli/" target="_blank">
<img alt="linkedin" src="https://i.imgur.com/EBghu4W.png" width="24" style="display: block; width: 24px;" border="0">
</a>
</td>
</tr>
</table>
<!-- HEADER -->
<table role="presentation" style="width:100%;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#ffffff" align="center" valign="center" style="padding: 20px; border-radius: 10px 0px 0px 0px;">
</td>
<td bgcolor="#ffffff" align="center" valign="center" style="padding-top: 30px; font-family: 'Karma', Georgia, serif; color:#222222" ;>
<h1>A link to my portfolio!<h1></h1>
</td>
<td bgcolor="#ffffff" align="center" valign="center" style="padding: 20px; border-radius: 0px 10px 0px 0px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!-- OUTER WRAPPER -->
<div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<table role="presentation" style="width: 100%; border: 0; border-spacing: 0; background-color: #c7c7c7;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<!-- STRUCTURED OUTER CONTAINER -->
<!--[if mso]>
<table role="presentation" align="center" style="width:600px;">
<tr>
<td>
<![endif]-->
<div class="outer" style="max-width:600px;">
<!--[if mso]>
<table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="600" mso-padding-alt="0 10 0 10">
<tr>
<td>
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="padding: 0px 10px 0px 10px;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<!-- COPY -->
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 10px 20px 40px 30px;"">
<p
style=" margin: 0; color: #222222; font-family: 'Roboto' , Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
Hello,<br>
This was my first hand coded email for a client from 2022. I've adjusted
it to reflect my personal brand,
and of course added a <span style="color: #b45e78;"><em><strong> cool
</strong></em></span> hover effect in the CTA.</em>
</p>
<p style="margin: 0; padding: 30px 0px 0px 0px; color: #222222; font-family: 'Roboto' , Arial,
sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
I'm using a hybrid layout and UX Design techniques to create
an accessible and user-focused template.
</p>
</td>
<!-- BUTTON MODULE -->
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 30px 10px 60px 10px;">
<!-- BORDER-BASED BUTTON -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a class="button" href="https://www.afvisions.com" target="_blank" style="font-size: 18px; font-family: sans-serif; color: #ffffff; text-decoration: none; border-radius:
8px; -webkit-border-radius: 8px; background-color: #567A75; border-top: 20px solid #567A75; border-bottom: 20px solid #567A75; border-right: 40px solid #567A75; border-left: 40px solid #567A75; display: inline-block;">
View Portfolio</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!-- OUTER WRAPPER - Forest Green-->
<div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#324744;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%; border: 0; border-spacing: 0; background-color:#324744;" align="center">
<tr>
<td align="center">
<!-- STRUCTURED OUTER CONTAINER -->
<!--[if mso]>
<table role="presentation" align="center" style="width:600px;">
<tr>
<td>
<![endif]-->
<div class="outer" style="max-width:600px;">
<!-- Padding -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#324744" align="center" style="padding: 0px 10px 0px 10px;">
<!-- Content -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 0px 30px;">
<p style="margin: 0; color: #222222; font-family: 'Roboto' , Arial,
sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
“Go Straight To The Seat Of Intelligence–Your Own, The World’s, Your
Neighbors."
</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="border-radius: 0px 0px 10px 10px; padding: 10px 30px 30px 30px;">
<p style="margin: 0; color: #222222; font-family: 'Roboto' , Arial,
sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
- Marcus Aurelius</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
<table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="100%">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" bgcolor="#324744">
<tr>
<td style="padding-top: 60px" align="center">
<a href="https://www.afvisions.com" border="0"><img src="https://imgur.com/EKa27YC.png" alt="www.AFvisions.com" width="100" style="height: auto;"></a>
</td>
</tr>
<tr>
<td style="padding: 30px 0 0 0 " align="center">
<p style="margin: 0; color: #c7c7c7; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 18px;">
<a style="color: #ffffff" href="*|UNSUB|*">Unsubscribe</a> from
this
list <a style="color: #ffffff; margin: 0; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 18px;" href="*|UPDATE_PROFILE|*">or update your email preferences</a><br><br>
13359 N Hwy 183 #406-1349<br>
Austin, TX 78750<br>
<br>
<span class="copyright" style="font-family: Helvetica, Arial, sans-serif;">©</span> 2024
AFvisions<br>
</p>
</td>
</tr>
<tr>
<td style="padding: 30px 34px 60px 34px ;" align="left">
</td>
</tr>
<tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</body>
</html>
!
