قالب موقع ويب

TailBliss

TailBliss is an Hugo Starter with Tailwind CSS 4.1 and Alpine.js with light and dark modes. Submitted for Hacktoberfest 2022.

وصف هذا القالب غير متوفر بالعربية بعد، لذلك يظهر بالإنجليزية.

Portfolio · Blog · مجاني

فتح العرض المباشر عرض مستودع الشيفرة

الصفحات

لقطات من العرض المباشر، صفحة تلو الأخرى. مرّر داخل الصفحة لرؤيتها كاملة.

قالب الموقع TailBliss، صفحة /، الجزء 1 — /A Hugo theme built with love, using TailwindCSS, Alpine.JS, and Hugo Pipes. Images are optimized for use with Hugo Pipes for WebP format. | TailBliss

قالب الموقع TailBliss، صفحة /، الجزء 2 — /A Hugo theme built with love, using TailwindCSS, Alpine.JS, and Hugo Pipes. Images are optimized for use with Hugo Pipes for WebP format. | TailBliss

تحليل التصميم

قراءة بالذكاء الاصطناعي لتصميم هذا القالب: الألوان والخطوط والمسافات والأقسام والتفاصيل المميزة. يبدأ منها Ottermind عند استخدام القالب.

هذا التحليل غير متوفر بالعربية بعد، لذلك يظهر بالإنجليزية.

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

تفاصيل القالب

الفئة: Portfolio, Blog, Agency, Starter Kit
التقنيات: Hugo
الترخيص: Apache-2.0
المؤلف: Jeremy Nusser
منشور على: Hugo Themes
السعر: مجاني

blog
company
dark
gallery
light
minimal
personal
portfolio
tailwind

التصميم الأصلي من Jeremy Nusser، منشور على Hugo Themes. لا ينسخ Ottermind شيفرة القالب، بل ينشئ موقعًا جديدًا انطلاقًا من الموجز.

الموجز الذي يبدأ منه Ottermind

يُفتح في Studio كمسودة؛ أضف علامتك التجارية وجمهورك وصفحاتك قبل الإرسال.

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.