Website kits
Creative agency home page
Dark agency home page with a statement hero, four project cards, services, a studio intro, process steps, a client quote, studio numbers and a brief CTA.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The front page of a small design and web studio, built for the prospective client who gives you about a minute before deciding whether to look at the work. The hero says in one sentence what you make and for whom, with no image competing with it, and the two buttons split visitors into those ready to brief you and those who want proof first. Four selected projects come straight after, because for a studio the work is the argument. Services, the studio itself and the four-stage process then answer what exactly a client would be buying and from whom. A client quote and four studio numbers add evidence before the closing brief prompt. Replace the project cards first with real work you have permission to show, and choose projects that resemble the clients you want next rather than simply your favorites. Change every number in the band to your own, and delete any you cannot back up.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 25
- Container (grid, 2 columns) × 1
- Container (grid, 4 columns) × 3
- Container (grid) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 19
- Heading × 10
- Button × 5
- Image Box × 4
- Icon Box × 4
- Image × 1
- Testimonial × 1
- Counter × 4
Things worth knowing
- The four project cards each hold one image, one heading and one paragraph, so they convert to Image Box widgets with the 440px cover crop carried over. The image slots arrive empty; pick your project images from the Media Library after import.
- The four service cards convert to Icon Box widgets with an arrow icon, and the four studio numbers convert to Counter widgets (12, 140 with a + suffix, 61 with %, 48 with h) with their labels as the counter titles.
- The client quote is a figure with a blockquote and a caption, so it becomes a Testimonial widget with Hana Brooks as the name and “Founder, Fernhill Coffee Roasters” as the job title.
- The near-black page background is set on the outermost Container and the graphite bands on their own sections, so the page stays dark on a theme with a white body. The process steps are plain Containers with a Text Editor number, a Heading and a Text Editor.
- Every grid stacks to one column below 780px, and the hero headline drops from 96px to 48px on phones through the Heading’s mobile font size.
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>Lowtide Studio — brand and web design studio</title>
<style>
body{margin:0;font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;color:#f2efe9;background:#0e0e10}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:96px 0;background:#0e0e10}
h1,h2,h3{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;color:#f2efe9;font-weight:700}
h1{font-size:96px;line-height:.98;letter-spacing:-.045em;margin:0 0 32px;max-width:1040px}
h2{font-size:52px;line-height:1.04;letter-spacing:-.035em;margin:0 0 18px}
h3{font-size:22px;line-height:1.25;letter-spacing:-.01em;margin:0 0 8px}
p{font-size:17px;line-height:1.7;color:#a3a1a8;margin:0 0 18px}
.eyebrow{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ff4d8d;margin:0 0 20px}
.accent{color:#ff4d8d}
.button{display:inline-block;padding:16px 28px;border-radius:999px;background:#ff4d8d;color:#0e0e10;text-decoration:none;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-weight:700;font-size:16px}
.ghost{display:inline-block;padding:15px 27px;border-radius:999px;border:1px solid #f2efe9;color:#f2efe9;text-decoration:none;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-weight:700;font-size:16px}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.hero{padding:112px 0 96px;border-bottom:1px solid #2a2a31}
.hero .lead{max-width:620px;font-size:20px;line-height:1.6;color:#f2efe9;margin:0 0 36px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin:0 0 44px}
.head > div{max-width:640px}
.head p{margin:0}
.work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
.case img{width:100%;height:440px;object-fit:cover;border-radius:4px;display:block;margin:0 0 20px;background:#18181c}
.case h3{font-size:26px}
.case p{font-size:16px;margin:0}
.graphite{background:#18181c}
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.service{padding:30px 26px;border:1px solid #2a2a31;border-radius:4px;background:#0e0e10}
.service-icon{display:inline-block;color:#ff4d8d;font-size:26px;line-height:1;margin:0 0 22px}
.service p{font-size:16px;margin:0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.studio-img{width:100%;height:520px;object-fit:cover;border-radius:4px;display:block;background:#18181c}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:8px}
.step{border-top:2px solid #ff4d8d;padding-top:22px}
.num{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:15px;font-weight:700;color:#ff4d8d;margin:0 0 14px}
.step p{font-size:16px;margin:0}
.quote{margin:0;max-width:960px}
.quote blockquote{margin:0 0 28px;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:38px;line-height:1.22;letter-spacing:-.025em;color:#f2efe9}
.quote figcaption{font-size:16px;color:#a3a1a8}
.quote cite{font-style:normal;font-weight:700;color:#f2efe9}
.numbers{padding:72px 0;border-top:1px solid #2a2a31;border-bottom:1px solid #2a2a31}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.stat-num{font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:64px;font-weight:700;letter-spacing:-.04em;line-height:1;color:#f2efe9;margin:0 0 12px}
.stat-label{font-size:16px;line-height:1.5;color:#a3a1a8;margin:0}
.cta{padding:120px 0}
.cta h2{font-size:72px;line-height:1;letter-spacing:-.045em;max-width:900px;margin:0 0 24px}
.cta p{max-width:560px;margin:0 0 34px}
@media(max-width:780px){
section{padding:64px 0}
.wrap{padding:0 16px}
.hero{padding:64px 0 56px}
h1{font-size:48px;line-height:1.02;margin:0 0 24px}
h2{font-size:34px}
.hero .lead{font-size:18px}
.head{flex-direction:column;align-items:flex-start;gap:20px}
.work,.services,.split,.steps,.stats{grid-template-columns:minmax(0,1fr);gap:28px}
.case img{height:300px}
.studio-img{height:300px}
.quote blockquote{font-size:26px}
.stat-num{font-size:48px}
.numbers{padding:56px 0}
.cta{padding:72px 0}
.cta h2{font-size:42px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<p class="eyebrow">Brand and web design studio · Easthaven</p>
<h1>We design brands and websites for teams who have outgrown their first ones.</h1>
<p class="lead">Lowtide is a studio of twelve designers, developers and writers. We take on a handful of projects at a time and the people you meet in the first call are the people who do the work.</p>
<div class="actions">
<a class="button" href="/contact/">Start a project</a>
<a class="ghost" href="/work/">See our work</a>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<div>
<p class="eyebrow">Selected work</p>
<h2>Recent projects</h2>
<p>A few things we have shipped in the last two years, from a full rebrand to a booking app.</p>
</div>
<a class="ghost" href="/work/">All case studies</a>
</div>
<div class="work">
<article class="case">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/agency/work-coffee-brand.jpg" width="1200" height="1200" alt="Blank coffee bags, cups and cards in coral and cream laid out on a dark stone surface">
<h3>Fernhill Coffee Roasters</h3>
<p>Brand identity, packaging and an online shop for a regional roaster.</p>
</article>
<article class="case">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/agency/work-web-laptop.jpg" width="1200" height="1200" alt="Laptop on a dark desk showing a website layout made of colored blocks and photos">
<h3>Marrow Architects</h3>
<p>A portfolio website the partners update themselves, built on WordPress.</p>
</article>
<article class="case">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/agency/work-app-phones.jpg" width="1200" height="1200" alt="Two smartphones on a dark surface showing a booking app interface in soft colors">
<h3>Kindred Physio</h3>
<p>Product design for a booking app used across six clinics.</p>
</article>
<article class="case">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/agency/work-print-objects.jpg" width="1200" height="1200" alt="Stack of blank printed booklets and tote bags in deep green and pink under directional light">
<h3>Saltmarsh Film Festival</h3>
<p>Festival identity, printed program and a content plan for three weeks of screenings.</p>
</article>
</div>
</div>
</section>
<section class="graphite">
<div class="wrap">
<div class="head">
<div>
<p class="eyebrow">What we do</p>
<h2>Four kinds of work, often in one project</h2>
</div>
<a class="ghost" href="/services/">Services and prices</a>
</div>
<div class="services">
<div class="service"><span class="service-icon">→</span><h3>Brand identity</h3><p>Naming help, logo, type, color and the guidelines your team will actually open.</p></div>
<div class="service"><span class="service-icon">→</span><h3>Websites</h3><p>Design and build on WordPress or Webflow, handed over with training, not a lock-in.</p></div>
<div class="service"><span class="service-icon">→</span><h3>Product design</h3><p>Research, flows and interface design for apps and software, ready for your developers.</p></div>
<div class="service"><span class="service-icon">→</span><h3>Content</h3><p>Copywriting, photography direction and launch content so the new site is not empty.</p></div>
</div>
</div>
</section>
<section id="studio">
<div class="wrap split">
<img class="studio-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/agency/studio-space.jpg" width="1000" height="1250" alt="Small design studio in the evening with long shared desks, monitors and pinned-up color studies">
<div>
<p class="eyebrow">The studio</p>
<h2>Twelve people, one room, no account managers</h2>
<p>We work from a converted print shop on Foundry Lane. Every project has a lead designer who stays on it from the first workshop to launch day, and you will have their direct email.</p>
<p>We keep the studio small on purpose, so we say no to more projects than we take on.</p>
</div>
</div>
</section>
<section class="graphite">
<div class="wrap">
<div class="head">
<div>
<p class="eyebrow">How a project runs</p>
<h2>Four stages, with a review at the end of each</h2>
</div>
</div>
<div class="steps">
<div class="step"><p class="num">01</p><h3>Discovery</h3><p>Two workshops with your team, interviews with a few customers and a written brief we both sign off.</p></div>
<div class="step"><p class="num">02</p><h3>Direction</h3><p>Two or three routes shown as real pages and objects, not mood boards. You pick one to develop.</p></div>
<div class="step"><p class="num">03</p><h3>Design and build</h3><p>Weekly check-ins and a shared link where you can see the work as it grows.</p></div>
<div class="step"><p class="num">04</p><h3>Launch and handover</h3><p>Go-live, a training session for your team and thirty days of fixes included.</p></div>
</div>
</div>
</section>
<section>
<div class="wrap">
<figure class="quote">
<blockquote>“They asked better questions about our business in the first workshop than we had asked ourselves in a year. The new site went live on the date they gave us in week one.”</blockquote>
<figcaption><cite>Hana Brooks</cite> — Founder, Fernhill Coffee Roasters</figcaption>
</figure>
</div>
</section>
<section class="numbers">
<div class="wrap stats">
<div><p class="stat-num">12</p><p class="stat-label">designers, developers and writers</p></div>
<div><p class="stat-num">140+</p><p class="stat-label">projects shipped since 2017</p></div>
<div><p class="stat-num">61%</p><p class="stat-label">of clients return for a second project</p></div>
<div><p class="stat-num">48h</p><p class="stat-label">to reply to every project brief</p></div>
</div>
</section>
<section class="cta">
<div class="wrap">
<p class="eyebrow">Now booking projects for next quarter</p>
<h2>Have a project in mind? <span class="accent">Tell us about it.</span></h2>
<p>Send a short brief with your goals, timeline and budget range. We reply within two working days, either with questions or with a time for a call.</p>
<a class="button" href="/contact/">Start a project</a>
</div>
</section>
</body>
</html>
