Website-Vorlage
Hugo Blox - Tailwind
Create any kind of website with fully customizable widgets - 50+ light/dark color themes, language packs, and widgets included.
Die Beschreibung dieser Vorlage ist noch nicht auf Deutsch verfügbar und wird daher auf Englisch angezeigt.
Landing Page · Portfolio · 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 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
Details zur Vorlage
- Kategorie
- Landing Page, Portfolio, Blog, Agency
- Technologie
- Hugo
- Lizenz
- MIT
- Autor
- George Cushen
- Gelistet auf
- Hugo Themes
- Preis
- Kostenlos
- blog
- company
- dark
- landing
- minimal
- multilingual
- portfolio
Originaldesign von George Cushen, 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 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.
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.
