One website.
A lot to play with.
A polished front-end starter with beautiful layouts, smart buttons, dark mode, popups, tabs, pricing controls, counters, notifications, mobile navigation and more.
Creative dashboard
A UI people can actually play with
Every card below highlights a useful front-end interaction you can reuse in your own projects.
Automatic theme system
Switch between light and dark mode instantly. The browser remembers the visitor's choice.
Mobile navigation
A clean slide-down menu made for small screens and touch users.
Smart actions
Buttons trigger toasts, modals, counters, copy actions and live state changes.
Scroll animation
Sections reveal smoothly while scrolling without needing any third-party animation library.
Command-style quick menu
Press Ctrl + K to open a keyboard-friendly action menu anywhere on the page.
Tap it. Change it. Try everything.
This part is intentionally interactive so visitors have something fun to do.
Every button should feel alive.
Try the different styles below. They all perform small actions.
Control the number
Change the website color
Pick one of the presets and the whole interface updates instantly.
Need a quick website idea?
Click the button and get a random mini project idea.
Beautiful on a phone, laptop or large display.
The layout uses responsive CSS Grid, flexible spacing and mobile-first controls, so the same page adapts naturally across different devices.
Pictures visitors can play with.
Your images are not just decorations here. Each one has a different interaction, and the fourth frame is ready for img/4.png whenever you add it.
01
Zoom & focus
Visitors can zoom this picture in and out, then open it in a large preview.
02
Change the mood
Let visitors switch this image between original, black & white, warm and vivid looks.
03
Rotate & flip
This picture can rotate left, rotate right or flip horizontally with one tap.
Mini slideshow
Use your fourth picture here, or let this card rotate automatically through the images you already have.
Just place a file named 4.png inside your existing img folder. The fourth frame will use it automatically.
A pricing section that actually switches.
This is front-end only, but the monthly/yearly controls work.
For personal experiments.
- ✓ Responsive layout
- ✓ Basic components
- ✓ Theme support
- ✓ Demo interactions
For bigger creative projects.
- ✓ Everything in Starter
- ✓ More components
- ✓ Priority design kit
- ✓ Advanced UI patterns
For teams building more.
- ✓ Everything in Pro
- ✓ Team workspace
- ✓ Advanced support
- ✓ Design system access
Simple code.
Easy to customize.
Everything here is separated into HTML, CSS and JavaScript files.
Yes. Replace img/logo.svg with your own logo or change the image path in index.html.
Yes. Put your favicon in the img folder and update the favicon link in the page head.
Yes. The layout adapts for phone, tablet, laptop and large desktop screens.
No. This demo uses only plain HTML, CSS and JavaScript.
Turn this demo into your own website.
Replace the brand, colors, text, logo and sections with your real content.