Modèle de site web

Hugo Blox - Tailwind

Create any kind of website with fully customizable widgets - 50+ light/dark color themes, language packs, and widgets included.

La description de ce modèle n’est pas encore disponible en français ; elle s’affiche en anglais.

Landing Page · Portfolio · Gratuit

Hugo Blox - Tailwind

Pages

Captures de la démo, page par page. Faites défiler une page pour la voir en entier.

/Home | Beacon
Modèle de site Hugo Blox - Tailwind, page /, partie 1Modèle de site Hugo Blox - Tailwind, page /, partie 2Modèle de site Hugo Blox - Tailwind, page /, partie 3Modèle de site Hugo Blox - Tailwind, page /, partie 4Modèle de site Hugo Blox - Tailwind, page /, partie 5Modèle de site Hugo Blox - Tailwind, page /, partie 6
/blog/Blog | Beacon
Modèle de site Hugo Blox - Tailwind, page /blog/, partie 1Modèle de site Hugo Blox - Tailwind, page /blog/, partie 2Modèle de site Hugo Blox - Tailwind, page /blog/, partie 3
/changelog/Changelog | Beacon
Modèle de site Hugo Blox - Tailwind, page /changelog/, partie 1

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 and clean, medium density, light/dark

Palette

background #ffffff; surfaces [#f1f5f9, #0a0e27, #111827, #eef2ff]; text #111827; muted text #4b5563; primary #4f39f6; accents [#155dfc]

Type

headings Montserrat, 700, title case; body Poppins, 18px; scale h1 60px / h2 36px / h3 18px

Shape & spacing

button/card radius 9999px, no borders, subtle shadows, section spacing 80px, content width 768px

Sections (top to bottom)
  • Header — fixed navigation bar with logo, menu items, search, and user icon, white background
  • Hero — full-width gradient background from dark blue to black, centered headline, subheadline, two CTA buttons, rating badge, and logo row
  • Stats — three-column layout on white background with large numbers in purple, descriptive text below
  • Features — two-column layout with left-side large card and right-side smaller cards, white background
  • Comparison table — four-column comparison grid with highlighted column, light gray background
  • Pricing — three-column pricing cards with toggle switch above, white background
  • Product section — image on left, text and CTA on right, light gray background
  • Testimonial section — image on right, text and bullet points on left, light gray background
Signature details
  • Gradient hero background with deep blue to black transition
  • Rounded pill-shaped buttons with sharp corners (9999px radius)
  • Purple accent color used consistently for CTAs and highlights
  • Minimalist card design with soft shadows and no borders
  • Consistent use of Poppins and Montserrat typefaces
  • Clean spacing with generous padding and consistent rhythm
Other pages
  • /blog/: vertical list of blog posts with featured images, tags, author, date, read time, and "Read more" links
  • /changelog/: simple list of version updates with dates, titles, descriptions, and "Read more" links, footer with logo, social icons, and site navigation

Détails du modèle

Catégorie
Landing Page, Portfolio, Blog, Agency
Technologies
Hugo
Licence
MIT
Auteur
George Cushen
Publié sur
Hugo Themes
Prix
Gratuit
  • blog
  • company
  • dark
  • landing
  • minimal
  • multilingual
  • portfolio

Design original de George Cushen, 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 landing page website inspired by the "Hugo Blox" template. Reference brief: Create any kind of website with fully customizable widgets - 50+ light/dark color themes, language packs, and widgets included. Style and features to reflect: blog, company, dark, landing, minimal, multilingual. Use original copy and imagery for my brand rather than the reference's placeholder content.

Comment utiliser ce modèle

  1. 1

    Cliquez sur « Utiliser ce modèle » pour l’ouvrir dans Ottermind Studio avec son brief prérempli.

  2. 2

    Ajoutez au brief votre marque, votre public, vos pages et votre contenu.

  3. 3

    Ottermind crée un nouveau site inspiré de ce design — continuez à l’ajuster dans la conversation.