Templates gratuits de header et de footer

Présentation

- On a pas toujours ce que l'on veut dans les templates de site web en terme d'en-tête ou de bas de page
- Je commence à rassembler, ici, ce que je trouve de mieux sur le web

Je vous propose 18 solutions au

 

Header - En-tête, haut de page

Bongers Chris

- Du desktop au mobile

Caractéristiques

  • Tailwind.css uniquement
  • Ce header est 'très parfaitement' responsive
  • Épatant pour si peu de code
  • Cape Town, Afrique du Sud

Image cliquable pour voir l'exemple

header avec réduction

Références

Site web

Site de l'auteur

[Créé / modifié] [25-02-2022 / 25-02-2022]

Bowen Blake

- Pour mobile principalement

Caractéristiques

  • CSS, Normalize.css, JS, TweenMax.js
  • Ce header présente une réduction au scroll : Lorsque l'on descend sur la page l'en-tête diminue en hauteur ainsi que le titre. Ce dernier se place juste à côté de l'icône hamburger. Le bandeau haut subsiste de manière fixe.
  • Tous les icône sont uniquement décoratifs
  • Tampa, Floride, USA

Image cliquable pour voir l'exemple

header avec réduction

Références

Site web

[Créé / modifié] [25-02-2022 / 25-02-2022]

Fattah Hafiz

- Pour mobile principalement

Caractéristiques

  • CSS, Normalize.css, JS, jQuery, Velocity.js
  • Beaucoup de dépendances
  • Ce header présente une réduction au scroll : Lorsque l'on descend sur la page l'en-tête diminue en hauteur. Le titre apparaît en mode fondu. Le bandeau haut subsiste de manière fixe fonçant au fur et à mesure du scroll.
  • Jolie proposition
  • Indonésie

Image cliquable pour voir l'exemple

header avec réduction

Références

Site web

[Créé / modifié] [25-02-2022 / 25-02-2022]

Pilande Emmanuel

- Pour mobile principalement

Caractéristiques

  • CSS, Normalize.css, JS, jQuery
  • Ce header présente une réduction au scroll : Lorsque l'on descend sur la page l'en-tête diminue en hauteur. Le titre disparait en fondu. Le bandeau s'affiche de manière fixe tout en perdant son image et en devenant sombre et opaque à 90%.
  • Le système de menu n'est pas actif
  • Pas de gestion 'responsive'
  • Honolulu, Hawaii

Image cliquable pour voir l'exemple

header avec réduction

Références

Site web

[Créé / modifié] [25-02-2022 / 25-02-2022]

Takahashi Keisuke

Caractéristiques

  • CSS pur
  • Ce header disparaît par le haut avec un effet de parallaxe
  • Pas de menu ni de gestion 'responsive' mais ce n'est pas l'objet
  • Tokyo, Japon

Image cliquable pour voir l'exemple

header avec effet de parallaxe

Références

Site web

[Créé / modifié] [25-02-2022 / 25-02-2022]

Verdzadze Irakli

- Véritable page d'accueil

Caractéristiques

  • CSS, JS, jQuery, Bootstrap 3.3.5 (CSS+JS), SmoothScroll.js
  • Réagit au scroll: L'image d'accueil disparaît vers le haut dans un très beau mouvement pour laisser apparaître le premier paragraphe avec transition également
  • Superbes effets
  • Tbilisi, Georgie

Image cliquable pour voir l'exemple

header avec effet de scroll

Références

Site web

[Créé / modifié] [07-05-2022 / 07-05-2022]

 

Footer - Pied, bas de page

Anaya David

Caractéristiques

  • CSS pur
  • Présentation sur 2 colonnes en mode mobile
  • Rollover souligné sur tous les liens
  • Rupture responsive à 768px et 1008px
  • Oakland, Californie, USA

Image cliquable pour voir l'exemple

footer en css pur avec 2 ruptures responsives

Références

Site web

Site de l'auteur

[Créé / modifié] [07-05-2022 / 07-05-2022]

Baahubali

Caractéristiques

Image cliquable pour voir l'exemple

footer, bas de page

Références

Site web

[Créé / modifié] [25-02-2022 / 07-05-2022]

Bagheri Mahmood

Caractéristiques

  • CSS, Bootstrap.css 4.5.3
  • Template de présentation
  • En mode mobile les groupes ne sont pas suffisament distincts
  • Proposition épurée
  • Mashhad, Razavi Khorasan, Iran

Image cliquable pour voir l'exemple

footer responsive en css avec bootstrap

Références

Site web

[Créé / modifié] [07-05-2022 / 07-05-2022]

Chowdhury Feroz Mahmud Zaki

Caractéristiques

  • CSS pur
  • Rollover d'opacité et d'élévation sur les icônes
  • Très bel exemple de footer
  • Rupture responsive à 700px
  • Dhaka, Bangladesh

Image cliquable pour voir l'exemple

footer responsive en css pur

Références

Site web

[Créé / modifié] [07-03-2022 / 07-03-2022]

Duncan Jake

Caractéristiques

  • CSS pur
  • Rollover d'opacité sur les liens
  • Exemple simple mais efficace
  • Ruptures responsives à 1280px, 1139px, 950px, 500px, 340px

Image cliquable pour voir l'exemple

footer responsive en css pur

Références

Site web

[Créé / modifié] [25-02-2022 / 25-02-2022]

Hanif Ammar

Caractéristiques

  • CSS pur
  • Rollover sur tous les liens et icônes
  • Dans le CSS, mettre sous body << font-family: 'Poppins', sans-serif; >>
  • Rupture responsive à 768px et 991px
  • Jakarta, Indonesie

Image cliquable pour voir l'exemple

footer responsive avec rollover sur tous les liens

Références

Site web

[Créé / modifié] [07-03-2022 / 07-03-2022]

Macharia Ian

Caractéristiques

  • CSS pur
  • Sticky footer
  • Rollover sur tous les liens et icônes
  • Bel exemple de footer
  • Rupture responsive à 600px et 1085px
  • Kirinyaga County, Kenya

Image cliquable pour voir l'exemple

sticky footer responsive en css pur

Références

Site web

[Créé / modifié] [07-03-2022 / 07-03-2022]

Patil Vivek

Caractéristiques

  • CSS pur
  • Joli rollover de glissement sur les liens
  • Exemple simple mais efficace
  • Ruptures responsives à 767px et 574px

Image cliquable pour voir l'exemple

joli footer en css pur

Références

Site web

[Créé / modifié] [25-02-2022 / 25-02-2022]

Scanf Code

Caractéristiques

  • CSS, Bootstrap.css
  • Rollover avec changement de couleur sur les liens
  • Ruptures responsives à 767px et 991px

Image cliquable pour voir l'exemple

footer avec Bootstrap.css

Références

Site web

[Créé / modifié] [22-03-2022 / 22-03-2022]

Scanf Code (2)

Caractéristiques

  • CSS, Bootstrap.css
  • Rollover avec changement de couleur sur les liens
  • Formulaire de souscription
  • Ruptures responsives à 768px

Image cliquable pour voir l'exemple

footer avec Bootstrap.css et formulaire de souscription

Références

Site web

[Créé / modifié] [22-03-2022 / 22-03-2022]

Scanf Code (3)

Caractéristiques

  • CSS, Bootstrap.css
  • Rollover avec changement de couleur sur les boutons
  • Formulaire de contact
  • Ruptures responsives Bootstrap

Image cliquable pour voir l'exemple

footer avec Bootstrap.css et formulaire de contact

Références

Site web

[Créé / modifié] [22-03-2022 / 22-03-2022]

Sinyakov Stas

Caractéristiques

  • Tailwind.css
  • Rollover sur tous les liens
  • Les colonnes se transforment en mode mobile dans un système d'accordéon
  • Génial !
  • Voir un autre exemple
  • Enschede, Pays-Bas

Image cliquable pour voir l'exemple

footer avec Bootstrap.css

Références

Site web

[Créé / modifié] [28-04-2022 / 28-04-2022]