A festive, email-safe holiday sale template in deep green, cream and gold: a full-width header photo, a "Gifts they will actually keep" headline, a gift guide of four image tiles, a dashed limited-time offer block with a bulletproof shop button, and a service strip. It is written without fixed dates, so it can be reused every season.
How it works
The hidden .hse-preheader sets the inbox preview text. The .hse-wrapper table fills the background with dark green, and .hse-container keeps the email at 600 px with max-width; MSO conditional comments add a fixed 600 px table for Outlook on Windows.
The header image .hse-hero-img is a 600 x 300 photo with display:block, width and height. The headline section sits on a solid green cell so the text never depends on a background image, which Outlook would drop. The gift guide is two rows of two .hse-tile cells; each tile is one link that wraps an .hse-tile-img photo and a colored caption bar, alternating green and red. The .hse-offer cell has a gold dashed border, the code and a shop button that uses a VML v:roundrect for Outlook and a padded .hse-btn link elsewhere. The offer runs "for the next 72 hours", so no calendar date goes stale.
Customization
- Replace
#14382d(green),#b3312c(red) and#d4a64a(gold) in the inline styles, and in the VMLfillcolor, to restyle it for another season. - Swap the
.hse-hero-imgphoto for a seasonal image at 1200 x 600 for sharp retina display. - Rename the gift guide categories and links in the
.hse-tilecaptions, for example "For him", "Under $25". - Change the code and percentage in
.hse-offer-bigand the preheader. - Adjust
.hse-titleand.hse-offer-bigsizes in the@mediablock ofstyle.cssfor longer headlines on phones. - Delete the service strip row with the
.hse-perkcells if you do not offer gift wrap or receipts.
Accessibility
Layout tables use role="presentation", and the content has one h1 plus an h2 for the gift guide. Each photo has descriptive alt text, and every tile caption is real text, so the categories stay readable when images are blocked. Cream and white text on dark green and gold on green keep strong contrast. Decorative stars and check marks are plain text characters, not icon fonts.
Usage notes
Targets Outlook 2016+ for Windows, Outlook.com, Gmail web and apps, Apple Mail and iOS Mail. style.css holds only progressive extras: hover states and phone sizing below 480 px, where the tiles stay two-up and the service strip stacks. Inline it in a <style> block of your email head. Photos come from Unsplash; replace them with your own product and campaign images.
