A responsive landing page template with a magical/fantasy theme, built with HTML and Tailwind CSS.
- Responsive design for all device sizes
- Fantasy-themed styling with elegant fonts
- Pre-configured Tailwind CSS with custom colors and fonts
- Ready-to-use Google Fonts integration:
- Cinzel (for headings)
- PT Serif (for body text)
- Sigmar (display font)
- Font Awesome icons included via CDN
- Custom color palette:
- dark-blue: #0a0a20
- navy-blue: #0d1933
- Hero section background image setup
No installation required - just copy the HTML file and start building your content within the <body> tags.
- Add your content within the
<body>section - Use the pre-configured Tailwind classes:
- Font families:
font-cinzelorfont-pt-serif - Colors:
bg-dark-blue,text-navy-blue, etc.
- Font families:
- Customize the Tailwind config in the
<script>tag if needed
- Tailwind CSS (included via CDN)
- Font Awesome (included via CDN)
- Google Fonts (included via CDN)
To customize the theme:
- Modify the
tailwind.configobject in the<head>section - Add or change colors in the
colorsobject - Add additional font families as needed
- Update the background image by changing the
hero-patternURL
- The favicon line is currently commented out - uncomment and point to your favicon image
- Background image path is set to "images/background.png" - create this directory and add your image
Free to use for personal and commercial projects. Attribution is appreciated but not required.