Hugging Face's logo

bosonai
/
higgs-tts-3-4b

Text-to-Speech
Transformers
Safetensors
higgs_multimodal_qwen3
text-generation
speech-generation
voice-agent
expressive-speech
controllable-tts
multilingual-tts
Model card Files
xet
 Community
24

Esi

#19
by Esi212 - opened
Discussion
Esi212

Act as an expert UI/UX Designer and Senior Frontend Developer. I need you to write the complete, ready-to-use HTML, CSS, and JavaScript code for a stunning, modern, and engaging Single-Page Website for a Tattoo Artist/Studio portfolio.

Design System & Theme:

  • Style: Advanced Glassmorphism (frosted glass effect).
  • Theme: Dark mode. The main background should be deep dark (e.g., #0a0a0a) with some subtle, large, blurred glowing colorful orbs (like deep red, purple, or neon blue) in the background so the glass effect is highly visible and visually striking.
  • Typography: Edgy, modern, and elegant sans-serif fonts (import from Google Fonts).
  • UI Elements: Cards, navbar, and form inputs must use the Glassmorphism effect (backdrop-filter: blur(12px), semi-transparent backgrounds like rgba(255, 255, 255, 0.05), and subtle semi-transparent borders 1px solid rgba(255, 255, 255, 0.1)).

Website Sections (Single Page Layout):

  1. Sticky Navbar: Glassmorphism background. Links: Home, Gallery, About, Book Now. Smooth scrolling to sections.
  2. Hero Section:
    • A catchy headline (e.g., "Art that Lasts a Lifetime").
    • A short sub-headline about premium tattoo designs.
    • A primary Call-To-Action (CTA) button ("View Designs") with a glowing neon hover effect.
  3. Gallery / Designs Section:
    • A responsive CSS Grid or Masonry layout.
    • Placeholder image boxes that look like glass frames.
    • Hover effects on images: slight scale-up, glowing shadow, and a transition effect.
  4. About Section: A beautifully designed glass card containing a brief artist bio.
  5. Booking / Contact Section: A simple, elegant form (Name, Email, Idea/Message, and a 'Submit' button) using glassmorphism for the input fields. Include a subtle neon focus effect on inputs.
  6. Footer: Simple copyright and social media icon placeholders.

Technical Requirements:

  • Use pure HTML5, CSS3, and Vanilla JS (for smooth scrolling or simple interactions).
  • Ensure it is 100% Mobile Responsive.
  • Put everything in a single comprehensive code block (or clearly separate HTML, CSS, JS) so I can easily run it.
  • Include comments explaining where I should add my own tattoo images.
  • Focus heavily on the aesthetic, making it look premium, mysterious, and highly engaging.

Sign up or log in to comment