| Server IP : 216.92.14.13 / Your IP : 216.73.217.126 Web Server : Apache System : Linux vps4089.pairvps.com 5.15.0-190-generic #200-Ubuntu SMP Fri Aug 7 15:06:04 UTC 2026 x86_64 User : rmlac2fmr ( 1040637) PHP Version : 8.2.32 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /usr/home/rmlac2fmr/public_html/jn.com/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JBT Talent Travel Team Signature</title>
<style>
body {
margin: 0;
padding: 40px 20px 80px;
background: #f4f3f7;
font-family: 'Manrope', 'Segoe UI', Helvetica, Arial, sans-serif;
color: #24222b;
}
.wrap { max-width: 720px; margin: 0 auto; }
h1 {
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 0.02em;
margin: 0 0 6px;
}
.lede { color: #5d5966; font-size: 0.95rem; line-height: 1.6; margin: 0 0 40px; }
.card {
background: #fff;
border-radius: 10px;
padding: 34px 30px;
margin-bottom: 26px;
box-shadow: 0 2px 14px rgba(36,34,43,0.07);
}
.eyebrow {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: #9b93a8;
margin: 0 0 4px;
}
.vname { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.vnote { font-size: 0.85rem; color: #5d5966; line-height: 1.6; margin: 0 0 26px; }
.stage {
border-top: 1px dashed #ded9e6;
border-bottom: 1px dashed #ded9e6;
padding: 26px 0;
background: #fff;
}
.hint { font-size: 0.75rem; color: #9b93a8; margin: 14px 0 0; }
.notes { font-size: 0.9rem; line-height: 1.75; color: #3c3947; }
.notes strong { color: #24222b; }
.notes li { margin-bottom: 10px; }
</style>
</head>
<body>
<div class="wrap">
<h1>JBT Talent Travel Team, email signature</h1>
<p class="lede">Three layouts below. Everything between the dashed lines is the signature itself. To install, select from just above the logo to just below the phone number, copy, and paste into your signature editor. Copying the rendered version (not the code) is what carries the formatting over.</p>
<div class="card">
<p class="eyebrow">Option one</p>
<p class="vname">Logo left, rule, text right</p>
<p class="vnote">The most compact of the three and the closest match to the site, where the avatar sits left and the copy sits right. Reads well in a desktop inbox. On a narrow phone screen the two columns squeeze but hold.</p>
<div class="stage">
<table cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;font-family:'Manrope','Segoe UI',Helvetica,Arial,sans-serif;">
<tr>
<td valign="middle" style="padding-right:20px;">
<img src="https://jennifernaranjo.com/jbt-signature-logo.png" width="150" alt="Jenn Books Travel" style="display:block;width:150px;height:auto;border:0;">
</td>
<td valign="middle" width="2" bgcolor="#6C4AA6" style="width:2px;background-color:#6C4AA6;font-size:0;line-height:0;"> </td>
<td valign="middle" style="padding-left:20px;">
<div style="font-family:'Manrope','Segoe UI',Helvetica,Arial,sans-serif;font-size:11px;line-height:1.5;letter-spacing:0.22em;text-transform:uppercase;color:#6C4AA6;font-weight:600;">Talent Travel Team</div>
<div style="font-family:'Manrope','Segoe UI',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;color:#24222b;font-weight:700;padding-top:4px;">Jenn N. ~ Amber T. ~ Jeanie L.</div>
<div style="font-family:'Manrope','Segoe UI',Helvetica,Arial,sans-serif;font-size:13px;line-height:1.7;color:#5d5966;padding-top:6px;">
<a href="mailto:talent@jennifernaranjo.com" style="color:#6C4AA6;text-decoration:none;">talent@jennifernaranjo.com</a><br>
<a href="tel:+13234523095" style="color:#5d5966;text-decoration:none;">(323) 452-3095</a>
</div>
</td>
</tr>
</table>
</div>
<p class="hint">Total width around 400px.</p>
</div>
<div class="card">
<p class="eyebrow">Option two</p>
<p class="vname">Logo above, hairline, text below</p>
<p class="vnote">Stacked, so it never breaks no matter how narrow the screen. Since you read mail on the Pixel as much as anywhere, this is the safest of the three. The hairline under the logo picks up the thin caps in BOOKS TRAVEL.</p>
<div class="stage">
<table cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;font-family:'Manrope','Segoe UI',Helvetica,Arial,sans-serif;">
<tr>
<td style="padding-bottom:12px;">
<img src="https://jennifernaranjo.com/jbt-signature-logo.png" width="170" alt="Jenn Books Travel" style="display:block;width:170px;height:auto;border:0;">
</td>
</tr>
<tr>
<td height="2" bgcolor="#6C4AA6" style="height:2px;background-color:#6C4AA6;font-size:0;line-height:0;"> </td>
</tr>
<tr>
<td style="padding-top:12px;">
<div style="font-family:'Manrope','Segoe UI',Helvetica,Arial,sans-serif;font-size:11px;line-height:1.5;letter-spacing:0.22em;text-transform:uppercase;color:#6C4AA6;font-weight:600;">Talent Travel Team</div>
<div style="font-family:'Manrope','Segoe UI',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;color:#24222b;font-weight:700;padding-top:4px;">Jenn N. ~ Amber T. ~ Jeanie L.</div>
<div style="font-family:'Manrope','Segoe UI',Helvetica,Arial,sans-serif;font-size:13px;line-height:1.7;color:#5d5966;padding-top:6px;">
<a href="mailto:talent@jennifernaranjo.com" style="color:#6C4AA6;text-decoration:none;">talent@jennifernaranjo.com</a> · <a href="tel:+13234523095" style="color:#5d5966;text-decoration:none;">(323) 452-3095</a>
</div>
</td>
</tr>
</table>
</div>
<p class="hint">Total width around 340px.</p>
</div>
<div class="card">
<p class="eyebrow">Option three</p>
<p class="vname">Charcoal card</p>
<p class="vnote">The site theme carried straight into the inbox, with the white logo on charcoal. It is the boldest and the one people will remember, though a colored block in a reply chain is a stronger statement than most production emails make. Worth seeing before you rule it out.</p>
<div class="stage">
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#24222B" style="border-collapse:collapse;background-color:#24222B;border-radius:6px;">
<tr>
<td style="padding:20px 24px;">
<table cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td valign="middle" style="padding-right:20px;">
<img src="https://jennifernaranjo.com/jbt-signature-logo-white.png" width="140" alt="Jenn Books Travel" style="display:block;width:140px;height:auto;border:0;">
</td>
<td valign="middle" width="1" bgcolor="#6C4AA6" style="width:1px;background-color:#6C4AA6;font-size:0;line-height:0;"> </td>
<td valign="middle" style="padding-left:20px;">
<div style="font-family:'Manrope','Segoe UI',Helvetica,Arial,sans-serif;font-size:11px;line-height:1.5;letter-spacing:0.22em;text-transform:uppercase;color:#B79BE8;font-weight:600;">Talent Travel Team</div>
<div style="font-family:'Manrope','Segoe UI',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;color:#ffffff;font-weight:700;padding-top:4px;">Jenn N. ~ Amber T. ~ Jeanie L.</div>
<div style="font-family:'Manrope','Segoe UI',Helvetica,Arial,sans-serif;font-size:13px;line-height:1.7;color:#c9c4d4;padding-top:6px;">
<a href="mailto:talent@jennifernaranjo.com" style="color:#B79BE8;text-decoration:none;">talent@jennifernaranjo.com</a><br>
<a href="tel:+13234523095" style="color:#c9c4d4;text-decoration:none;">(323) 452-3095</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<p class="hint">Total width around 440px. Rounded corners will square off in Outlook desktop, which is fine.</p>
</div>
<div class="card">
<p class="eyebrow">Before you install</p>
<div class="notes">
<ul>
<li><strong>The logo needs a home.</strong> Right now all three point at <code>jennifernaranjo.com/jbt-signature-logo.png</code>, which does not exist yet. Export the logo at 340px wide, save it as that filename, FTP it to the root next to your HTML files, and every signature picks it up. Option three also wants <code>jbt-signature-logo-white.png</code> from the white version in your vector kit.</li>
<li><strong>Double resolution.</strong> Export at 340px but display at 170px so it stays crisp on a Pixel and on any retina laptop. The width attributes in the code already handle the downscale.</li>
<li><strong>Dark mode.</strong> Gmail and Outlook both invert backgrounds for some people. The black logo on a light card can vanish. Option three sidesteps this entirely since the card brings its own dark background.</li>
<li><strong>Blocked images.</strong> A fair number of recipients see images off by default. Every option here keeps names, email, and phone as live text, so the signature still works with nothing but the alt text where the logo should be.</li>
</ul>
</div>
</div>
</div>
</body>
</html>