Modèle de site web
TailBliss
TailBliss is an Hugo Starter with Tailwind CSS 4.1 and Alpine.js with light and dark modes. Submitted for Hacktoberfest 2022.
La description de ce modèle n’est pas encore disponible en français ; elle s’affiche en anglais.
Portfolio · Blog · Gratuit
Pages
Captures de la démo, page par page. Faites défiler une page pour la voir en entier.
Analyse du design
Une lecture par IA du design de ce modèle : couleurs, typographie, espacements, sections et détails marquants. Ottermind en part quand vous utilisez le modèle.
Cette analyse n’est pas encore disponible en français ; elle s’affiche en anglais.
- 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
Détails du modèle
- Catégorie
- Portfolio, Blog, Agency, Starter Kit
- Technologies
- Hugo
- Licence
- Apache-2.0
- Auteur
- Jeremy Nusser
- Publié sur
- Hugo Themes
- Prix
- Gratuit
- blog
- company
- dark
- gallery
- light
- minimal
- personal
- portfolio
- tailwind
Design original de Jeremy Nusser, publié sur Hugo Themes. Ottermind ne copie pas le code du modèle : il crée un nouveau site à partir du brief.
Le brief dont part Ottermind
Il s’ouvre dans Studio comme brouillon — ajoutez votre marque, votre public et vos pages avant l’envoi.
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.
Comment utiliser ce modèle
- 1
Cliquez sur « Utiliser ce modèle » pour l’ouvrir dans Ottermind Studio avec son brief prérempli.
- 2
Ajoutez au brief votre marque, votre public, vos pages et votre contenu.
- 3
Ottermind crée un nouveau site inspiré de ce design — continuez à l’ajuster dans la conversation.
