Corporate Real Estate Landing Page for Divi 5: Coastal and Lakeside Brokerage

The layout opens with a split hero: a 16/24 text column paired with a tall 4:5 portrait image that runs to the section edge on desktop. The H1 sits at 64px with a 1.1em line height and text-wrap: balance applied across every section heading, preventing awkward single-word wraps at intermediate viewport widths. Below the headline, a flex row holds the warm-brown primary button (#7d5c2a background, 14px/28px padding) alongside a plain text link, giving visitors two exit paths with distinct visual weight. On phone the columns stack, the image drops below the copy and runs full width at 4:5, and section vertical padding steps down in three explicit breakpoints: 96px desktop, 68px tablet, 44px phone.

The listings section uses a native CSS grid directly on a divi/group module rather than Divi rows. The featured card spans both columns at a 2:1 aspect ratio; the four supporting listing cards use 4:3 images with 6px rounded corners. Each card pairs an H3 address with a small bordered pill that shows type, bedrooms, and asking price in uppercase 12px text, using justify-content: space-between to push the pill to the right of the address on wider viewports. The market stats block immediately below uses the same grid container, this time as a four-up panel separated by 1px hairline borders in #cfdcd8. The large numerals (64px, weight 300, letter-spacing -2px) pull attention without competing with section headings.

The middle sections alternate between #f6f8f7 and #eef3f1 backgrounds to signal transitions without adding new colors. The three-step process section renders large bold numerals (80px, weight 700, letter-spacing -2px) as typographic section markers, with a styled divi/divider line between each step rather than icons or numbered list items. The testimonial section breaks the quiet palette with a full-bleed background image held under a 72% dark-teal gradient overlay (rgba(13,42,40,0.72)) on both gradient stops, reversing the text to #f4f7f5 at 42px. The broker bio that follows uses an unconventional image border-radius: full pill on the top two corners, 32px rounded on the bottom two, a small typographic choice that marks personality within an otherwise restrained system.

Two distinct divi/accordion instances handle different jobs. The differentiators accordion uses a border-bottom-only styling (no outer frame, no background) with four items. The FAQ accordion is a separate module in a centered divi/group at max-width 800px, with a full 1px border, 6px corner radius, and #eef3f1 background on open and closed toggles. The closing CTA section pairs three divi/icon plus divi/text checklist rows (Font Awesome checkmarks at 15px in #0f2b2a) with a self-contained contact form card: #f6f8f7 background, 1px #cfdcd8 border, 48px padding, two fields (Name and Email), and a warm-brown submit button that matches the hero CTA.