Features & content
Video and text split
Two columns: a heading, short paragraph, three ticked points and a button on the left, an embedded YouTube video on the right.
When to use it
TODO
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- pending
Things worth knowing
- TODO
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Video and text split</title>
<style>
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#14233a;background:#fff}
.split{max-width:1160px;margin:0 auto;padding:76px 24px;display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.eyebrow{margin:0 0 12px;color:#ff5b35;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
h2{margin:0 0 14px;font-size:36px;line-height:1.14;letter-spacing:-.03em}
.lead{margin:0 0 24px;color:#5b6b82;font-size:16px;line-height:1.8}
.checks{display:flex;flex-direction:column;gap:12px;margin:0 0 30px}
.checks > div{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.6;color:#243a56}
.tick{color:#ff5b35;font-size:17px;line-height:1.45;font-weight:700}
.button{display:inline-block;padding:14px 26px;border-radius:9px;background:#14233a;color:#fff;text-decoration:none;font-weight:700;font-size:15px}
.frame{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#14233a;box-shadow:0 22px 50px rgba(20,35,58,.16)}
.frame iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:780px){.split{grid-template-columns:1fr;padding:54px 20px;gap:32px}h2{font-size:28px}.checks{margin-bottom:26px}}
</style>
</head>
<body>
<section class="split">
<div>
<p class="eyebrow">Two-minute workshop tour</p>
<h2>See what a full service covers before you book it</h2>
<p class="lead">Our head mechanic walks a bike through the Brightwheel full service, in the order the work is done, so you know exactly what you are paying for.</p>
<div class="checks">
<div><span class="tick">✓</span><span>Drivetrain stripped, cleaned and re-lubricated</span></div>
<div><span class="tick">✓</span><span>Brakes, gears and wheel bearings adjusted</span></div>
<div><span class="tick">✓</span><span>A written note of anything worn, with prices</span></div>
</div>
<a class="button" href="#book">Book a full service</a>
</div>
<div class="frame">
<iframe src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ" title="Workshop tour video" width="560" height="315" allowfullscreen></iframe>
</div>
</section>
</body>
</html>