Search
A CSS and HTML Only Carousel Slider
Why is it that sliders and carousels need a bunch of javascript and other css files to get them working? I have seen so many complex sliders with a lot of javascript and libraries that may not even b..
section with image to the right text to the left gradient
section with image to the right and text to the left, can be a block on a landing page, easy find and replace the section names with new names to create new class section items. Preview - Full ..
Two Clickable Logo Promo Box Section Foundation
Just a quick clickable two box section with some logos and radial backgrounds, foundation for grid and responsive action. Quick demo:
Inline Contact Form Formatting
Responsive inline contact form generic block, replace with your form code and submit, google recapture etc. Usually used on home page or near footer of page. Stacks the form on mobile screens. ..
Overview full width section in Poppins font with light gray background using foundation
Quick overview full width section code. Lightgray and teal colours on white background.
Social Header Links easy Drop in Code with Font Awesome Icons
Drop in this code in the header of your site to quickly add some social links in your header. Social Icons in Header This version uses foundation for the grid system. But you can swap this grid..
Responsive Friendly Subscribe to our Newsletter Section
Just a nice quick section layout for a newsletter subscribe button and text. You could add this to a home page or just before the footer section of a page. Its also done in foundation gr..
Bootstrap 4.2 Kitchen Sink
Here is the full (almost full) collection of bootstrap elements in this kitchen sink code for bootstrap. Thanks to ycohio for this useful reference.
Fancy up your banner image hero sections using overlay gradients
What is banner image hero sections using overlay gradients? In this code i show how you can add elements to your existing banner images to add an overlay gradient, while still leaving the inner conte..
Why to use a CSS Reset?
What is a CSS Reset? A CSS reset is a statements usually at the top of your style sheet, to reset all the browser defaults so that you can start with a fresh style sheet. Why do i need a CSS R..
Front-End Checklist
The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production. If you want to check your project for the best practi..
simple.css a nice simple and stylish framework replacement
What is simple.css? Simple CSS is a framework that you can just drop into your site, and it styles the actual html elements, so no class names are required for this out of the box, just add the scrip..
Rounded Card Design with Shadow Palette
What is it? a nice rounded card design with a hero image on top, description text, hero title, more links and a shared by text area. Preview a preview of Rounded Card Design with Shadow Palet..
A Collection of Button Hover Over Effects
What is it? A Large collection of buttons with hover over animations and styles. What can i use this for? You can use these to make the buttons on your website or web project more animated Concl..
Amazing Stripe Website Gradient Animation
What is it? An animated background using javascript html and css to achieve. What can i use this for? You could use is on the background in your website, or maybe on a hero type image. ..
Punica pure CSS Framework
Punica CSS is a clean, lightweight, responsive, modern and fully customizable (even class names) pure CSS Framework based on SASS/SCSS with multi-theme support. What is Punica? Pu..
Project Management Dashboard UI Elements
Very slick Project management dashboard, showing some amazing UI Elements. Features Dark and Light Mode Listing Modes, in grid vs list Client Messages Popout section This is all in pure h..
Image slider with multiple controls and mobile swipe control
A snazzy looking image and content slider, with some nice content animations. Using GSAP for the animations, no JQuery required for this slider.
Glassmorphism Creative Cloud App Redesign
A full ui for Creative Cloud redesigned in html css and javascript, amazing work by Aysenur Turk. It even has responsive views, dark and light mode, and the tabs are functional.
Contact Form with Wide Hero Image using Responsive Block CSS and HTML
About this Content Block This is a piece i did a little while ago, but i will re-create it for this post Basically what we are creating here today is a wide and padded section of a home page with ..
Animated Parallax 404 Error Page
Found this awesome animated 404 error page on codepen the other day, crazily awesome animations on this one, just reload the demo page and you can see the animation as it loads in as well.
Random Quote
