Copy the code from below:
Go to this page: https://www.w3schools.com/tryit/tryit.asp?filename=tryhtml_default
Delete the code from the box on the left and paste the code from below.
Then put your cursor in the box on the right and select all.
Paste that into your Outlook Signature box.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / @font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<!--<![endif]-->
<!-- Web Font / @font-face : END -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for email clients meddling in triggered links. */
*[x-apple-data-detectors], /* iOS */
.x-gmail-data-detectors, /* Gmail */
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
/* Media Queries */
@media screen and (max-width: 600px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Adjust typography on small screens to improve readability */
.email-container p {
font-size: 13px !important;
line-height: 24px !important;
}
}
@media screen and (max-width: 400px) {
.hide{display:none!important;}
.block{display:block!important;}
}
</style>
</head>
<body width="100%" bgcolor="#ffffff" style="margin: 0; mso-line-height-rule: exactly;">
<div style="max-width: 680px; margin: 0;" class="email-container">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="left" width="100%" style="max-width: 680px;" class="email-container">
<!-- 1 Column Text + Button : END -->
<tr>
<td dir="ltr" bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%" style="color:#ffffff;padding: 0 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="660" style="width: 660px;">
<tr>
<td align="center" valign="top" width="660" style="width: 660px;">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="center" style="font-size:0; padding: 0 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="660" style="width: 660px;">
<tr>
<td align="left" valign="center" width="220" style="width: 220px;">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:66.66%; min-width:320px; vertical-align:top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family: 'Poppins', sans-serif; font-size:9.0pt; line-height: 115%; color:#44546a; padding: 10px 10px 0; text-align: left;" class="center-on-narrow">
<p style="Margin-top:0; Margin-bottom:0; font-family: 'Poppins', sans-serif; font-size:9.0pt; line-height: 115%; color:#44546a"><strong>
<!-- Name and Title -->
ellery stuth, major gifts officer
<!-- END Name and Title -->
</strong></p>
<p style="Margin-top:0; Margin-bottom:0; font-family: 'Poppins', sans-serif; font-size:9.0pt; line-height: 115%; color:#5b9bd5">
<!-- Pronouns -->
she/her/ella
<!-- END Pronouns -->
</p>
<p style="Margin-top:0; Margin-bottom:0; font-family: 'Poppins', sans-serif; font-size:9.0pt; line-height: 115%; color:#5b9bd5">
<!-- Address -->
2916 NE Alberta St., Suite D, Portland, OR 97211
<!-- END Address -->
</p>
<p style="Margin-top:0; Margin-bottom:0; font-family: 'Poppins', sans-serif; font-size:9.0pt; line-height: 115%; color:#5b9bd5">
<!-- Phones -->
o: <a style="color:#5b9bd5; text-decoration:none;">503.287.7203</a> c: <a style="color:#5b9bd5; text-decoration:none;">970.379.5350</a>
<!-- END Phones -->
</p>
<p style="Margin-top:0; Margin-bottom:0; font-family: 'Poppins', sans-serif; font-size:9.0pt; line-height: 115%; color:#44546a">
<span class="block">
<a href="http://www.greater-than.org/" style="color:#44546a">www.greater-than.org</a>
</span>
</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="440" style="width: 440px;">
<![endif]-->
<div style="display:inline-block; margin: 20px 0 0 20px; max-width: 200px; min-width:160px; vertical-align:middle; width:100%;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0px;">
<img src="https://romanpdx.com/wp-content/uploads/2020/11/Greater-Than-Logo-300.png" width="142" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 142px; height: auto; background: #fffff; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #ffffff;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
<!-- 1 Column Text -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 15px; text-align: left;">
<span style="font-family:'Poppins', sans-serif; font-weight:600; font-size: 9.0pt; line-height: 10px; color: #ed7d31; ">
<!-- Quote -->
“Philanthropy is commendable, but it must not cause the philanthropist to overlook the circumstances of economic injustice which make philanthropy necessary." - Dr. Martin Luther King Jr.
<!-- END Quote -->
</span> <br />
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Email Body : END -->
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</body>
</html>