Same content, same code, one line different. Have a look on your phone too, it reflows on its own.
Type follows your mockup, so serif headline and a pink button with white text. Worth knowing: your current homepage runs on Roboto, and its buttons are uppercase with black text, so these blocks will read as a deliberate layer on top rather than blend in. That's what the mockup does too, I just want you to see it coming.
Spacing and widths are measured off your live site though, 1170px container and 15px gutters, so it lines up with the sections above and below.
Ready to Begin
Thoughtful guidance. Local expertise. Extraordinary results.
Book a Complimentary Strategy CallReady to Begin
Thoughtful guidance. Local expertise. Extraordinary results.
Book a Complimentary Strategy CallThe dark one is showing a flat charcoal right now because I don't have your photo yet. Send one over and it drops straight in, the dark veil on top is already there so the text stays readable whatever the image looks like.
One small thing to decide: the brief has the line "Thoughtful guidance. Local expertise. Extraordinary results." but the mockup has "Let's create a personalized plan for your real estate goals in Knoxville and beyond." I went with the brief. Say the word and I'll swap it.
Paste this into your homepage content editor and save. If it comes out looking like the version above, we're in good shape. If it comes out as plain unstyled text, your editor is stripping the style block, which is useful for me to know now rather than later. Either way you can delete it straight after, nothing here touches the rest of your page.
To see the white version instead, change cs-cta--dark to cs-cta--light on the first line. That's the only difference between the two.
When you have a photo you want behind it, put its address inside the background-image line. Leave it out and it stays the flat charcoal you see above.