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 23 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]

Sammons Brady

- Nécessite absolument: stopExecutionOnTimeout - 1b93190375 e9ccc259df3a57 c1abc0e64599724 ae30d7ea4c6877 eb615f89387.js
- Solution complète du desktop au mobile

Caractéristiques

  • CSS, JS, jQuery
  • AU scroll, la partie haute disparaît et le menu se colle en bordure
  • Le texte de la partie haute disparaît par rétrécissement
  • San Francisco, Californie, USA

Image cliquable pour voir l'exemple

header avec effet de disparition

Références

Site web

[Créé / modifié] [08-06-2022 / 08-06-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

Almeida Matheus

Caractéristiques

  • CSS pur
  • Présentation sur 2 colonnes en mode mobile
  • Pas de rollover
  • Rupture responsive à 24 et 40 em
  • Très agréable à regarder
  • Manaus, Brésil

Image cliquable pour voir l'exemple

footer en css pur avec 2 ruptures responsives et deux colonnes

Références

Site web

Site de l'auteur

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

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

  • CSS, Bootstrap.css
  • Rollover sur les liens
  • Exemple bien coloré
  • Chandigarh, Inde

Image cliquable pour voir l'exemple

footer, bas de page

Références

Site web

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

Baahubali

Caractéristiques

  • CSS, Bootstrap.css (4.1)
  • Rollover rouge sur tous les liens
  • Exemple un peu plus simple que leas autres mais très suffisant
  • Voir du même auteur: exemple 3; exemple 4; exemple 5

Image cliquable pour voir l'exemple

footer sur base bootstrap

Références

Site web

[Créé / modifié] [08-06-2022 / 08-06-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]

Bodake Sanket

Caractéristiques

  • CSS pur
  • Rollover souligné sur tous les liens
  • Rupture responsive à 767 et 1024 px
  • Les têtes de chapitre devraient mieux ressortir
  • Pune, Inde

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é] [26-07-2022 / 26-07-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]

Schuck Christopher

Caractéristiques

  • CSS pur
  • Rollover sur tous les liens
  • Les colonnes se mettent les unes en dessous des autres en mode mobile, tout en gardant le centrage
  • Présentation personnelle intéressante
  • Ithaca, New York, USA

Image cliquable pour voir l'exemple

footer responsive avec centrage des colonnes

Références

Site web

[Créé / modifié] [08-06-2022 / 08-06-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]