Html templates with header and footer

Open Source CSS Headers and Footers (Free Code + Demos)

Enjoy this 100% free and open source collection of HTML/CSS header and footer code examples. The list includes both fixed and sticky CSS headers.

1. Skewed CSS Header

2. Curve CSS Header

3. Non Rectangular CSS Headers With Inline SVG

4. Header Image Parallax Scrolling Effect With CSS

Create a parallax scrolling effect using CSS background-image position. This script works when the header image is positioned at the top of the page. A step by step guide at https://webmadewell.com/header-image-parallax-scrolling-effect-with-css By webmadewell.com

5. Hover Effect For Headers

Featuring the most amazing things you can find on earth. Scroll may be a bit janky due to CSS Scroll Snap — not as smooth as I’d thought it’d be but still awesome. Images from pexels.com.

6. Fixed Angled Header Using A CSS Pseudo-Element

This pen shows how CSS pseudo-elements and transforms can be used to create a fixed, angled header with an image background.

7. Curve SVG Background Animation

8. Header For Landing Page Using Clip Path.

9. Software Company Header/About

10. Flexbox Full Hero With Button

11. 🌈 Sexy Animated Rainbow Waves Header

12. Sticky Header On Scroll

13. Sticky Headers Be Sticky

14. Footer With CSS Grid

15. Animated Footer Toggle

16. Animated Mobile Footer Menu

Animated mobile footer menu to display 2-3 main actions a user can take on a mobile device. Shows up at 767px (for bootstrap users) Original image: https://500px.com/photo/142564117/nightfall-over-eidfjord-by-peter-lloyd

17. Flexbox Sticky Footer Example

18. CSS Animated Header

19. Slanted Div, Fixed Header

Skewed divs and parallax effect created by fixed header. Simple layout and instructions for modification in the JS!

20. Fixed Disappearing Scrolling Header

21. Multi-layered Parallax Illustration

22. Hero Idea

23. Headings/Hero Image Typography Playground

Explanation is at the top of CSS file. Just some typefaces, helper classes and few presets for easily testing headings typography.

24. Hero Zoom On Scroll

25. Neat Parallax Hero Effect

26. CSS Parallax Header Image

27. Hero Image Showcase

28. Flexbox Hero Header

29. Simple Parallax Header With Blur

30. Hero OnScroll

31. Fullscreen Header + Background Color Cycle

32. Continuous Scrolling Background Of Sticky Header

Fixed the header after scrolling and move the background until the end of the document. WATCH FULLSCREEN FOR BETTER EXPERIENCE Take a look at the photo on top during scrolling 🙂

33. Responsive Scrolling Sticky Header

Using element queries to power a layout with a cover image and a nav that sticks to the top of the page on scroll with the following query: @element ‘html, body’ and (min-scroll-y: 100vh) < header < position: fixed; top: 0; background: white; box-shadow: rgba(0,0,0,.05) .

34. Scroll Header

35. Responsive Scroll Header

I was inspired by the header on brainpickings.org. I like the way it uses the full size on page load and almost immediately after the user starts scrolling it shrinks down to a resonable size.

36. Header Fade

37. Fixed Header Scroll Effect And Smart Nav For One-Page Sites

Rudimentary combination of jquery fixed header on scroll and nav active section class effect «Fixed Header On Scroll Effect» forked from sayed rafeeq’s Pen FIXED HEADER — ON SCROLL EFFECT. «Scroll Active 2» forked from Xabi’s Pen Scroll active 2. Forked from sayed rafeeq’s Pen FIXED HE.

38. Auto Hide Sticky Header

39. Sticky Header CSS Transition

40. Top Sliding Nav

Hidden nav that slides in from the top once the page is scrolled. Update: Added Active state to current navigation section. Changed each of the

41. Responsive Sticky Header Navigation

42. Fixed Header (Quick Hack)

The header is not fixed with a solid background color and there is a fixed div at the top that is small. Then there is a div that is not fixed within the header with the title. Simply wanted to try and prototype the idea. Works in a decent hack-ish sort of way.

43. Sticky Header Visual Trick

44. React Video Header

45. Video Header

46. Hero Video

A pen that shows how to create a hero with a background video. A few things to note . » I’m using jQuery to populate the content only to make the HTML look cleaner for reviewing the code. » I’m using CSS animation to fade in the entire body. » I’m using CSS transformations to scale .

47. Fullscreen Background Video With Mix-Blend-Mode Overlay Text

Shows full-screen video with effective, legible text overlay using mix-blend-mode, inspired by work at Everlane. Full explanatory article. Video by Maximilian Kempe, licensed under Creative Commons. Freeware Moderne Sans font by Marius Kempken.

48. Video Header Animation

Animation was customized used Adobe After Effects and rendered to be compatible across all browsers with .ogv and .webm files. Does not operate in mobile (intentionally). Bootstrap framework for HTML is used, no javascript needed. Click on ‘Live View’ under ‘Change View’ to see full header.

49. Responsive Video Header With Gradient

This is the 404 error page for a project I’m working on. I was working on figuring out how the responsive background video here.

50. Parallax Footer (Website Fixed Footer)

I was playing around with website footers at work and wanted to get a little creative, I came across this pen (http://codepen.io/hudsonmarinho/pen/FHGeK) and decided to see if I could simplify/improve on it. Started as PureCSS but in order to make the height of the footer modify the margi.

51. Footer With Conent Scale

52. Social Media Footer

53. Simple Fixed Footer

54. Simple Slide-out Footer

Just stumbled across this and loved the effect; the markup and styling were a bit much for my liking, so I found an easier way. main position: (not static) z-index: 1 margin-bottom: (footer height) footer position: fixed (and stick it to the bottom) height: (. )

55. Fixed Footer

56. Pure CSS Classy Footer

57. Beautiful Aurora Footer Lights

58. Responsive New York Header

59. Hero Section Pure TailwindCSS 2nd

60. Footer Example 4

61. Complex Header / Subgrid // CSS Grid

Created this complex header using subgrid, a specification of CSS Grid Layout. It’s not mobile friendly but to get a sense of the power of subgrid, try moving an element to a new place in the HTML (while retaining the same 3rd level of position in the hierarchy). The HTML can be optimized .

62. Animated Background Header

This is a pretty simple effect to achieve for any header or content areas. This effect is particularly great for space-inspired content or perhaps networks/networking. This is a Codrops creation that I’m currently playing with. Pretty neat. Be sure to check out the original here

Источник

HTML Templates

These HTML templates are all free for you to download and use however you wish. Most of these are HTML5 templates. The HTML5 templates use elements that were introduced in HTML5 such as , , , , etc.

Layout Templates

These HTML templates provide you with a basic layout, so that you can add your own look and feel. All templates employ «equal height columns», which means that any smaller columns dynamically expand their height to match the highest column. In other words, it looks nicer :).

3 Column Layout

3 Column Layout, 2 Right Menus

2 Column, Left Menu with Header & Footer

2 Column, Right Menu with Header & Footer

More Layout Templates »

HTML5 «Frames» Templates

These templates use HTML5 and CSS to acheive the functionality of frames, without using frames.

HTML5 «Frames» — 2 Column, Left Menu

Left and right columns scroll independently of each other. This template is a «liquid layout», so it expands and contracts as you change your browser size.

HTML5 «Frames» — 2 Column, Right Menu

Left and right columns scroll independently of each other. This template is a «liquid layout», so it expands and contracts as you change your browser size.

2 Rows, 2 Columns, A

Header frame and a left navigation frame. Header frame overlaps the left frame. Enable/disable scrolling as required. This template is a «liquid layout», so it expands and contracts as you change your browser size.

2 Rows, 2 Columns, D

Footer frame and a left navigation frame. Left frame overlaps the footer frame. Enable/disable scrolling as required. This template is a «liquid layout», so it expands and contracts as you change your browser size.

More Frames Templates »

CSS Templates

These templates have had some basic styles added using CSS. The different colors allow you to get an idea of how each template looks under different colors.

Fixed Width 1, Red

This HTML template is a fixed-width template (the content area remains the fixed width). However, both the feature band and footer band expand the full width of the browser. The template has a «red» theme.

Fixed Width 1, Green

This HTML template is a fixed-width template (the content area remains the fixed width). However, both the feature band and footer band expand the full width of the browser. The template has a «green» theme.

Fixed Width 2, Blue

This HTML template is a fixed-width template (the content area remains the fixed width). The template has a light-gray background (although you can change this to any color you like). The template has a «blue» theme.

Fixed Width 2, Orange

This HTML template is a fixed-width template (the content area remains the fixed width). The template has a light-gray background (although you can change this to any color you like). The template has an «orange» theme.

More CSS Templates »

Specialized HTML Templates

These templates come with their own look and feel and images to provide a specialized look. Simply add content and publish!

Источник