8pt

Houtu Creative Studio Home

A white home page for a creative studio: split pill navigation, a hero of drifting rendered spheres, a big self-introduction, a hover work grid of two large and three small pieces, a services index with hover image swaps, tagged article cards, a split brief form, a pill-link footer and a mirrored outline wordmark to close.

Templates · Portfolio•10 sections

Full-page preview

Overview

A complete single-file page to start from. Structure, copy slots and responsive layout are all in place; copy the prompt to your model and it rewrites the copy, colors and images for your brand.

Where to use it

DesignWork室, 自由职业者和PersonalPortfolio网站.

Install

With Builder, fetch the full page source with the 8pt CLI or call it directly from an editor connected to 8pt MCP.

$ npm i -g @8pt-dev/cli && 8pt template houtu-studio-home

mcp › Use 8pt MCP to call get_template("houtu-studio-home")

Code

Single-file HTML + CSS, no build step.

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>厚土 · 为真实世界品牌而造的创意工作室</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fragment+Mono&family=Inter+Tight:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@400;600&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<style>
:root{--bg:#FFFFFF;--fg:#000000;--card:#F2F2EF;--line:#E5E5E5;--accent:#EBFF00;--muted:#9A9A9A;--dim:#D6D5D3;--field:#F7F7F7;--r:6px;--pad:14px;
--sans:"Inter Tight","Noto Sans SC",system-ui,sans-serif;--mono:"Fragment Mono","Noto Sans SC",ui-monospace,monospace;--serif:"Noto Serif SC",Georgia,serif}
…

Subscribe to Builder to see the full source.See pricing

Matching theme

Houtu Daylight

Matching icons · 10

houtu-arrow-right houtu-arrow-up-right houtu-board houtu-camera houtu-close houtu-mail houtu-menu houtu-pin houtu-play houtu-send

View all in the icon library

Included components

Orbit Sphere Marquee

Chrome Outline Wordmark

Split Enquiry Form

Hover Service Index

Tagged Journal Cards

Hover Reveal Work Grid

Pill Link Footer

More templates

View all

Suiyun Global Network Platform Home

Developer tools home

Niancheng AI App Builder Home

AI generation platform home

Zhiheng AI Research Company Home

AI product home

Moge Team AI Workspace Website

SaaS landing page

Lingye Design Prompt Library Home

AI product home

Chaoyin Lead-Gen Agent Website

AI product home

Suitie Mac Clipboard History Website

Mac app landing page

Chengbang App Market Intelligence Home

SaaS landing page

Yanbai Independent Designer Portfolio

Portfolio

Banshi Design Reference Library Website

SaaS landing page

Qishu Agent Tool Platform Home

Developer tools home

Ranzhen AI Video Studio Home

AI generation platform home

Nook Mac App Website

Mac app landing page