Website-Vorlage
TailBliss
TailBliss is an Hugo Starter with Tailwind CSS 4.1 and Alpine.js with light and dark modes. Submitted for Hacktoberfest 2022.
Die Beschreibung dieser Vorlage ist noch nicht auf Deutsch verfügbar und wird daher auf Englisch angezeigt.
Portfolio · Blog · Kostenlos
Seiten
Screenshots der Live-Demo, Seite für Seite. Scrollen Sie innerhalb einer Seite, um sie ganz zu sehen.
Design-Analyse
Eine KI-Auswertung des Designs dieser Vorlage: Farben, Typografie, Abstände, Abschnitte und markante Details. Ottermind startet damit, wenn Sie die Vorlage verwenden.
Diese Analyse ist noch nicht auf Deutsch verfügbar und wird daher auf Englisch angezeigt.
- 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
Details zur Vorlage
- Kategorie
- Portfolio, Blog, Agency, Starter Kit
- Technologie
- Hugo
- Lizenz
- Apache-2.0
- Autor
- Jeremy Nusser
- Gelistet auf
- Hugo Themes
- Preis
- Kostenlos
- blog
- company
- dark
- gallery
- light
- minimal
- personal
- portfolio
- tailwind
Originaldesign von Jeremy Nusser, gelistet auf Hugo Themes. Ottermind kopiert nicht den Code der Vorlage, sondern erstellt aus dem Briefing eine neue Website.
Das Briefing, mit dem Ottermind startet
Es öffnet sich in Studio als Entwurf – ergänzen Sie Marke, Zielgruppe und Seiten, bevor Sie es senden.
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.
So verwenden Sie diese Vorlage
- 1
Klicken Sie auf „Diese Vorlage verwenden“, um sie mit ausgefülltem Briefing in Ottermind Studio zu öffnen.
- 2
Ergänzen Sie das Briefing um Marke, Zielgruppe, Seiten und Inhalte.
- 3
Ottermind erstellt eine neue Website, inspiriert von diesem Design – im Chat verfeinern Sie sie weiter.
