網站範本

Grayscale

A multipurpose one page Bootstrap theme created by Start Bootstrap

這個範本的介紹目前還沒有繁體中文版本，先以英文顯示。

Landing Page · 免費

開啟線上示範查看原始碼儲存庫

頁面

線上示範的逐頁截圖，在頁面框內捲動即可查看完整頁面。

Grayscale 網站範本，/startbootstrap-grayscale/ 頁面，第 2 部分 — /startbootstrap-grayscale/Grayscale - Start Bootstrap Theme

設計解讀

AI 對這套範本設計的解讀：配色、字體、間距、區塊與標誌性細節。使用範本時，Ottermind 會以它為起點。

這份解讀目前還沒有繁體中文版本，先以英文顯示。

Overall: landing page, minimalist, low density, dark
Palette: background #ffffff; surfaces [#f8f9fa, #000000, #64a19d]; text #000000; muted text #ffffff; primary #64a19d; accents []
Type: headings Varela Round, 500, uppercase; body Nunito, 16px; scale h1 104px / h2 20px / h3 16px
Shape & spacing: button/card radius 6px, no borders, subtle drop shadows, section spacing 80px, content width 1224px
Sections (top to bottom): Hero — full-width grayscale mountain image overlay, centered headline "GRAYSCALE" in large uppercase, subheading in sentence-case, teal CTA button "GET STARTED", navigation bar with logo and links at top-right
Feature — dark background, centered heading "Built with Bootstrap 5", paragraph text below, tablet mockup angled at bottom right showing theme preview
Portfolio — grid of four black-and-white landscape images with alternating text blocks on white or black backgrounds, each with title and description, vertical teal accent line on left of first block
Newsletter — dark background with foggy mountain backdrop, centered email input field and teal "NOTIFY ME!" button, subscription prompt above
Footer — three light cards with icons (address, email, phone), contact details, social icons (Twitter, Facebook, LinkedIn), copyright text centered
Signature details: Monochromatic grayscale imagery throughout
Teal accent color used sparingly for CTAs and highlights
Clean sans-serif typography with contrast between bold headings and soft body text
Floating tablet mockup with transparent screen effect
Minimalist card layout with consistent padding and rounded corners
Subtle gradient overlays on hero and footer sections
Other pages: /about: not shown
/projects: not shown
/contact: not shown

範本資訊

分類: Landing Page
技術: Bootstrap, HTML5
授權: MIT
作者: Start Bootstrap
來源: Start Bootstrap
價格: 免費

bootstrap
bootstrap-4
bootstrap-5
bootstrap-5-template
bootstrap-template
bootstrap-theme
bootstrap4
bootstrap5
bootstrap5-template
css
free
html

原始設計來自 Start Bootstrap，刊登於 Start Bootstrap。Ottermind 不會複製範本程式碼，而是依據需求打造全新的網站。

Ottermind 起步用的需求

它會以草稿形式在 Studio 中開啟，送出前先補充你的品牌、受眾與頁面。

Build a landing page website inspired by the "Grayscale" template. Reference brief: A multipurpose one page Bootstrap theme created by Start Bootstrap Style and features to reflect: bootstrap, bootstrap-4, bootstrap-5, bootstrap-5-template, bootstrap-template, bootstrap-theme. Use original copy and imagery for my brand rather than the reference's placeholder content.