HTML · CSS · JAVASCRIPT
Preview three free HTML, CSS, and JavaScript UI templates, then download the source code. Add a carousel or social buttons to an existing website; these downloads are reusable UI pieces, not complete website themes.
Explore and save
Show resources in a responsive carousel with native scrolling, keyboard navigation, category filters, and a temporary favorites filter. Customize the cards and links in index.html; keep script.js for the interactive controls.
Original design, illustrations, and code by Lienzo. Read the guide. MIT license included.
Reflection and lift
Add five social links with a CSS glass effect, reflections, and lift on hover or keyboard focus. Change destinations and accessible labels in index.html, then adjust colors and spacing in styles.css.
Adaptation and guide: Lienzo. Read the guide. MIT license included.
Color and depth
Give three social links color and depth with layered CSS hover effects. Edit each destination and label in index.html; adjust the --tile color and .layers rules in styles.css to fit your brand.
Adaptation and guide: Lienzo. Read the guide. MIT license included.
Each ZIP includes the complete code, local fonts, an English README, and licenses. No package installation required.
Start with the complete downloaded folder. Open index.html in a modern browser and compare the standalone demo with your intended layout before copying individual files.
Replace the sample cards, category labels, images, and destinations in index.html. Copy the carousel markup, its CSS, and the related JavaScript together. Keep the arrows, visible keyboard focus, and position indicator when changing the layout. Demo favorites reset on reload; they are not an account or saved collection.
Set your profile URLs and update each link's accessible name. The button effects use HTML and CSS; the included JavaScript switches the standalone demo's theme. For glass buttons, adjust the .glass rules. For layered buttons, edit --tile and the .layers rules. Keep reduced-motion support and focus styles.
The demo includes its own page layout. Copy the required variables and component rules, then scope global body and element selectors to your own container to avoid overriding your website. Keep font and asset paths correct relative to the CSS file. Test narrow screens, keyboard navigation, both themes, and your final link destinations.
Each ZIP includes an English README.md and license notices. Keep the MIT and font notices when redistributing code. For a custom palette, try the CSS gradient generator; for another treatment, browse the CSS button examples.
The buttons use local SVG icons instead of Font Awesome, with accessible names, visible keyboard focus, and reduced-motion styles. File paths and HTML structure have been corrected. Lienzo built the carousel with native scrolling, keyboard navigation, previous/next buttons, a position indicator, and a favorites filter.
The included code is distributed under MIT, with the notices preserved in each ZIP. Fonts have their own OFL licenses. Read those files and keep the required notices when redistributing. Social platform logos and the sample logo retain their trademark rights.
These are standalone HTML, CSS, and JavaScript files. Open the demo directly or integrate the code into your project. In React, adapt attributes to JSX and manage event listeners through the component lifecycle. In WordPress, use an area that allows custom HTML, CSS, and scripts. The ZIP is not an installable WordPress theme.