HubSpot HTML module
Partner Spotlight: Hop Software
Table-based, inline-styled and mobile responsive. Paste the code into a HubSpot HTML module, then swap the two placeholder image URLs (logo + headshot) for hosted files.
View raw HTML
<!-- ===== PARTNER SPOTLIGHT: HOP SOFTWARE ===== -->
<!-- Fonts: Marcellus (headlines) + Inter (body). Clients that block webfonts fall back to Georgia / Arial. -->
<link href="https://fonts.googleapis.com/css2?family=Marcellus&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<!--[if !mso]><!-->
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Inter:wght@400;600;700&display=swap');
</style>
<!--<![endif]-->
<!-- Preheader (hidden preview text) -->
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:#EFE9D5;">
All the functionality. A fraction of the price. Meet Hop, the PMS built for independent hoteliers. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#EFE9D5;">
<tr>
<td align="center" style="padding:0;">
<!--[if mso]><table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;width:100%;margin:0 auto;background-color:#EFE9D5;font-family:'Inter',Arial,Helvetica,sans-serif;">
<!-- Eyebrow -->
<tr>
<td style="padding:30px 24px 0 24px;">
<span style="display:inline-block;background-color:#B9AE9A;color:#ffffff;font-family:'Inter',Arial,Helvetica,sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:7px 12px;">Partner Spotlight</span>
</td>
</tr>
<!-- Hero card -->
<tr>
<td style="padding:20px 24px 0 24px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td width="100%" class="stack" style="background-color:#282625;padding:28px 24px;vertical-align:middle;">
<img src="https://project--d2766fa6-d1e3-415b-b2b1-9ffaff899431.lovable.app/__l5e/assets-v1/efaee97e-f569-4c90-8680-9a5b02b1851e/hop-logo.png" width="120" alt="Hop Software" style="display:block;border:0;outline:none;height:auto;max-width:120px;margin-bottom:18px;">
<div style="font-family:'Marcellus',Georgia,serif;font-size:21px;line-height:30px;color:#ffffff;padding-bottom:10px;">
Built for hoteliers,<br>by hoteliers.
</div>
<div style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:13px;line-height:20px;color:#B9AE9A;">
Meet <strong style="font-weight:700;"><em style="font-style:italic;">Hop Software</em></strong>, the hospitality management system built for independent hoteliers.
</div>
<div style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:13px;line-height:20px;color:#ffffff;padding-top:12px;">
PMS, commission-free booking engine, guest CRM, payments and events, all in one place.
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- Body copy -->
<tr>
<td style="padding:26px 24px 0 24px;font-family:'Inter',Arial,Helvetica,sans-serif;font-size:15px;line-height:24px;color:#3c3a35;">
<p style="margin:0 0 16px 0;">In today’s competitive hospitality landscape, independent hoteliers can no longer afford to lean on high-commission OTAs and legacy on-site systems to protect their margins, and that is where Hop steps in.</p>
<p style="margin:0;">Its strategic Metadesk integration pushes live rates and availability straight to metasearch channels, so together we help hoteliers cut out the middleman, maximise booking profitability and own the guest relationship from the very first click.</p>
</td>
</tr>
<!-- Quote card -->
<tr>
<td style="padding:24px 24px 0 24px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#282625;border-bottom:4px solid #B9AE9A;">
<tr>
<td style="padding:28px 24px;">
<div style="font-family:'Marcellus',Georgia,serif;font-size:38px;line-height:38px;color:#B9AE9A;padding-bottom:4px;">“</div>
<div style="font-family:'Marcellus',Georgia,serif;font-size:22px;line-height:32px;color:#ffffff;padding-bottom:22px;">
Hoteliers shouldn’t have to choose between the tools they need and the budget they have. That’s the gap we built Hop to close.
</div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #4d4945;width:100%;">
<tr>
<td width="68" style="vertical-align:middle;padding-top:18px;">
<img src="https://project--d2766fa6-d1e3-415b-b2b1-9ffaff899431.lovable.app/__l5e/assets-v1/09835c0e-3d54-45da-9229-f3e248b8681a/sharon-smith.png" width="56" height="56" alt="Sharon Smith" style="display:block;border-radius:50%;border:2px solid #B9AE9A;">
</td>
<td style="vertical-align:middle;padding:18px 0 0 12px;">
<div style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:15px;font-weight:700;color:#ffffff;">Sharon Smith</div>
<div style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:12px;color:#B9AE9A;">Chief Operating Officer, Hop</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Closing + CTA -->
<tr>
<td align="center" style="padding:28px 24px 0 24px;">
<div style="font-family:'Marcellus',Georgia,serif;font-size:22px;line-height:30px;color:#282625;padding-bottom:8px;">See what Hop could do for your property</div>
<div style="font-family:'Inter',Arial,Helvetica,sans-serif;font-size:14px;line-height:22px;color:#5f5c55;padding-bottom:18px;">Arrange a walkthrough with the Hop team, or explore the platform at <a href="https://hopsoftware.com" style="color:#282625;font-weight:600;">hopsoftware.com</a>.</div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="center" bgcolor="#282625" style="border-radius:2px;">
<a href="https://hopsoftware.com" style="display:inline-block;padding:15px 30px;font-family:'Inter',Arial,Helvetica,sans-serif;font-size:15px;font-weight:700;color:#ffffff;text-decoration:none;">Learn more about Hop Software</a>
</td>
</tr>
</table>
</td>
</tr>
<tr><td style="height:38px;line-height:38px;font-size:0;"> </td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table>
<style type="text/css">
@media only screen and (max-width:600px) {
.stack {
display:block !important;
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
margin-bottom:10px !important;
}
.spacer { display:none !important; }
.h1 { font-size:26px !important; line-height:34px !important; }
a[href^="https://hopsoftware.com"] { display:block !important; }
}
</style>