웹사이트 템플릿

TailBliss

TailBliss is an Hugo Starter with Tailwind CSS 4.1 and Alpine.js with light and dark modes. Submitted for Hacktoberfest 2022.

이 템플릿의 설명은 아직 한국어로 제공되지 않아 영어로 표시됩니다.

Portfolio · Blog · 무료

라이브 데모 열기 소스 저장소 보기

페이지

라이브 데모의 페이지별 스크린샷입니다. 페이지 안에서 스크롤하면 전체를 볼 수 있습니다.

TailBliss 웹사이트 템플릿, / 페이지, 2부분 — /A Hugo theme built with love, using TailwindCSS, Alpine.JS, and Hugo Pipes. Images are optimized for use with Hugo Pipes for WebP format. | TailBliss

디자인 분석

이 템플릿 디자인을 AI가 분석한 내용입니다: 색상, 글꼴, 여백, 섹션, 특징적인 디테일. 템플릿을 사용하면 Ottermind가 여기에서 시작합니다.

이 분석은 아직 한국어로 제공되지 않아 영어로 표시됩니다.

Overall: landing page, modern, minimal, light/dark
Palette: background #f9fafb; surfaces [#e5e7eb, #615fff, #101828, #030712]; text #101828; muted text #6a7282; primary #615fff; accents [#615fff]
Type: headings ui-sans-serif, 800, sentence-case; body ui-sans-serif, 16px; scale h1 60px / h2 36px / h3 24px
Shape & spacing: button/card radius 6px, no borders, subtle shadows, section spacing 80px, content width 1248px
Sections (top to bottom): Header — fixed black nav with white text, logo on left, menu items right, dark mode toggle
Hero — two-column layout, left side has headline "TailBliss", subheading, badges, and description; right side features a rounded card with rocket illustration and brand tagline in purple gradient
Mission — full-width section with astronaut image on left, three-paragraph mission text on right, both sides aligned with dot-pattern overlay
Feature block — centered headline "Just in time for Hacktoberfest with JIT Tailwind" above paragraph text, followed by "Backed by world-renowned investors" with link
Blog preview — gray background, "From the blog" heading in purple, three equal-width cards with titles, excerpts, tags, dates, and metadata
Newsletter — centered blue gradient card with "Stay Up to Date" headline, input field, and "Notify me" button
Footer — dark navy background, centered links, social icons, copyright line with heart emoji
Signature details: Purple gradient hero card with rocket illustration
Dot-pattern overlay behind text blocks
Rounded corners on all cards and buttons
Consistent use of purple accent (#615fff) for headings and CTAs
Floating shadow effect on newsletter card
Minimalist typography with bold headings and clean spacing
Other pages: /about: brief company overview with team photo
/blog: list of posts with featured image, title, excerpt, and date
/contact: form with name, email, message fields and submit button

템플릿 정보

카테고리: Portfolio, Blog, Agency, Starter Kit
기술: Hugo
라이선스: Apache-2.0
제작자: Jeremy Nusser
게시처: Hugo Themes
가격: 무료

blog
company
dark
gallery
light
minimal
personal
portfolio
tailwind

원본 디자인: Jeremy Nusser (Hugo Themes에 게시). Ottermind는 템플릿 코드를 복사하지 않고, 브리프를 바탕으로 새 사이트를 만듭니다.

Ottermind가 시작하는 브리프

Studio에서 초안으로 열립니다. 보내기 전에 브랜드, 대상, 페이지를 추가하세요.

Build a portfolio website inspired by the "TailBliss" template. Reference brief: TailBliss is an Hugo Starter with Tailwind CSS 4.1 and Alpine.js with light and dark modes. Submitted for Hacktoberfest 2022. Style and features to reflect: blog, company, dark, gallery, light, minimal. Use original copy and imagery for my brand rather than the reference's placeholder content.