Web sitesi şablonu

Hugo Blox - Tailwind

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

Bu şablonun açıklaması henüz Türkçe olarak mevcut değil, bu yüzden İngilizce gösteriliyor.

Landing Page · Portfolio · Ücretsiz

Hugo Blox - Tailwind

Sayfalar

Canlı demonun sayfa sayfa ekran görüntüleri. Tamamını görmek için sayfanın içinde kaydırın.

/Home | Beacon
Hugo Blox - Tailwind web sitesi şablonu, / sayfası, bölüm 1Hugo Blox - Tailwind web sitesi şablonu, / sayfası, bölüm 2Hugo Blox - Tailwind web sitesi şablonu, / sayfası, bölüm 3Hugo Blox - Tailwind web sitesi şablonu, / sayfası, bölüm 4Hugo Blox - Tailwind web sitesi şablonu, / sayfası, bölüm 5Hugo Blox - Tailwind web sitesi şablonu, / sayfası, bölüm 6
/blog/Blog | Beacon
Hugo Blox - Tailwind web sitesi şablonu, /blog/ sayfası, bölüm 1Hugo Blox - Tailwind web sitesi şablonu, /blog/ sayfası, bölüm 2Hugo Blox - Tailwind web sitesi şablonu, /blog/ sayfası, bölüm 3
/changelog/Changelog | Beacon
Hugo Blox - Tailwind web sitesi şablonu, /changelog/ sayfası, bölüm 1

Tasarım analizi

Bu şablonun tasarımının yapay zekâ ile okunması: renkler, yazı tipleri, boşluklar, bölümler ve öne çıkan ayrıntılar. Şablonu kullandığınızda Ottermind buradan başlar.

Bu analiz henüz Türkçe olarak mevcut değil, bu yüzden İngilizce gösteriliyor.

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

Şablon ayrıntıları

Kategori
Landing Page, Portfolio, Blog, Agency
Teknoloji
Hugo
Lisans
MIT
Yazar
George Cushen
Yayınlandığı yer
Hugo Themes
Fiyat
Ücretsiz
  • blog
  • company
  • dark
  • landing
  • minimal
  • multilingual
  • portfolio

Orijinal tasarım: George Cushen, Hugo Themes üzerinde yayınlandı. Ottermind şablonun kodunu kopyalamaz; brife göre yeni bir site oluşturur.

Ottermind’in başladığı brif

Studio’da taslak olarak açılır; göndermeden önce markanızı, hedef kitlenizi ve sayfalarınızı ekleyin.

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.

Bu şablon nasıl kullanılır

  1. 1

    Brifi doldurulmuş şekilde Ottermind Studio’da açmak için “Bu şablonu kullan”a tıklayın.

  2. 2

    Brife markanızı, hedef kitlenizi, sayfalarınızı ve içeriğinizi ekleyin.

  3. 3

    Ottermind bu tasarımdan ilham alan yeni bir site oluşturur; sohbette düzenlemeye devam edin.