Footer in html e css – download gratuito
Sei in cerca di un footer in HTML e CSS gratuito per il tuo sito internet?
Indice dei contenuti
Sei uno sviluppatore o un web designer e cerchi un template footer in HTML e CSS di design, facilmente modificabile per le tue interfacce grafiche?
Un footer è un elemento sempre più importante nelle pagine web: serve per orientarsi nel sito e contiene informazioni e link importanti.
Ho sviluppato due versioni di footer CSS responsive molto versatili che utilizzo per la creazione di siti internet.
Guarda le demo dell’ultima versione pronta per il download gratuito degli HTML footer template e vedi se fanno al caso tuo.
La guida che trovi in questa pagina ti aiuta a modificare e adattare al meglio alle tue creazioni i footer in HTML e CSS. Scarica lo .ZIP con footer di esempio e cambia facilmente colori e font per inserirlo nel layout della tua pagina. Troverai due cartelle con gli HTML footer template.
Cos’è un footer di un sito web? Definizione e significato.
Il footer è il contenuto in fondo alle pagine web e solitamente ricorre uguale in tutto il sito. Spesso si differenzia dal contenuto principale della pagina per un colore di sfondo diverso.
Nel footer sono inseriti di solito:
- breve descrizione aziendale
- i recapiti aziendali come contatti, sede legale, nome dell’attività e partita IVA
- menu alternativo di navigazione
- link all’informativa privacy
- link all’informativa cookie
- link ai social network
- crediti
Footer CSS HTML semplice
Per i piccoli siti spesso è sufficiente una versione semplice e minimal dell’HTML footer CSS, con poche informazioni obbligatorie per legge. Di seguito i codici HTML e CSS necessari per generare il footer.
Codice footer HTML
Il tag footer contiene tutto il codice HTML necessario per la creazione del layout.
<footer>
Your Company Name | Via Roma, 24 - 55045 Pietrasanta (Lucca) ITALIA | C.F. ABC000000000 | P.Iva 000000000
<a class="trans-color-text" href="#">[email protected]</a> |
<span itemprop="telephone"><a href="#">+39 347 58 30 387</a></span>
<br>
<a target="_blank" href="#">privacy</a> |
<a target="_blank" href="#">cookie policy</a>
<div class="social-cont">
<ul class="social-list">
<li><a target="_blank" href="#"><img src="img/facebook-icon.png" title="Facebook" alt="Facebook icon"></a></li>
<li><a target="_blank" href="#"><img src="img/instagram-icon.png" title="Instagram" alt="Instagram icon"></a></li>
<li><a target="_blank" href="#"><img src="img/pinterest-icon.png" title="Pinterest" alt="Pinterest icon"></a></li>
</ul>
<div class="floatstop"></div>
</div>
<!-- /fine social cont -->
<p>Designed by</p>
<div class="credits">
<a target="_blank" href="#"><img width="100" src="img/your-logo.png" title="#" alt="#"></a>
</div>
</footer>Codice CSS
Il CSS del footer è molto semplice e utilizza un’unica media query. Non sono necessari ulteriori breakpoint per adattare il footer responsive a ogni tipo di schermo. Puoi facilmente cambiare font e colori di sfondo, scritte e icone. A fondo pagina puoi inserire il logo di chi ha progettato il sito con eventuale link alla sua pagina.
@charset "utf-8";
/* ------------- reset ---------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
input:focus,
button:focus {
outline: 0;
}
img {
vertical-align: middle;
}
a {
text-decoration: none;
}
p {
margin-bottom: 12px;
}
ul li {
list-style: none;
}
html,
body {
font-family: "Roboto Slab", serif;
color: #666; /* color text */
height: 100%;
width: 100%;
}
h1 {
font-size: 1.5em;
text-align: left;
font-weight: bold;
color: #A24038; /* primary color */
}
/* ----------------- contenitore e contenuto ------------------ */
.contenitore .contenuto {
max-width: 1200px;
margin: auto;
padding: 70px 10px;
}
/* ----------------- footer HTML ----------------- */
footer {
border-top: 1px solid #C99D66; /* primary color */
text-align: center;
padding: 30px 10px;
line-height: 1.6em;
font-size: 0.8em;
background-color: #B3453E; /* primary color */
color: #fff;
}
footer a {
color: #F0776C; /* secondary color */
}
footer a:hover {
color: #FF968C; /* light secondary color */
}
footer .credits {
max-width: 300px;
margin: auto;
}
footer .credits a img {
-o-transition: opacity .2s ease-in;
-ms-transition: opacity .2s ease-in;
-moz-transition: opacity .2s ease-in;
-webkit-transition: opacity .2s ease-in;
transition: opacity .2s ease;
}
footer .credits a img:hover {
opacity: 0.6;
}
footer .social-cont .social-list {
list-style-type: none;
margin: 0 auto;
padding: 10px 0;
}
footer .social-cont .social-list > li {
margin: 8px 8px 8px 0;
display: inline-block;
vertical-align: top;
height: 32px;
width: 32px;
border-radius: 6em;
background-color: #F0776C; /* secondary color */
}
footer .social-cont .social-list li img {
width: 32px;
}
footer .social-cont .social-list > li:hover {
background: #FF968C; /* light secondary color */
}Footer in HTML e CSS con menu di navigazione
La versione più completa del footer in HTML e CSS comprende anche una breve descrizione dell’azienda con il marchio. Questo è utile per comunicare in breve tempo e su tutte le pagine un riassunto dell’attività. Un secondo livello di navigazione nel footer è molto comune nei template moderni; puoi mettere i link delle pagine principali per migliorare l’esperienza di navigazione.
Codice HTML
Il codice HTML del footer è realizzato con tre div che contengono:
- informazioni e logo aziendale
- menu di navigazione
- contatti aziendali e social network
<footer id="footer-large">
<div class="footer-container">
<div class="footer-informazioni">
<div>
<img src="https://www.chefstudio.it/img/your-logo.png" width="170" alt="">
</div>
<p class="margin-bot-15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium eros quam, sit amet vulputate velit elementum ut. Cras sed semper risus. Etiam molestie quam eget diam pharetra, eget semper nisl eleifend. Vivamus quis tellus mollis neque hendrerit consequat ut non dolor. Donec faucibus, nisl in suscipit porttitor, libero libero elementum sapien, eu condimentum velit dui eu erat. Nunc placerat odio et nulla cursus suscipit. Morbi ultricies eleifend dui ut gravida. Proin non mi nisi.</p>
<p>
P.I./C.F. 000000, Registro Imprese di Lucca<br>
Numero REA 00000<br>
Cap. Soc. 10000 € i.v.<br>
<a target="_blank" href="#">Informativa Privacy</a> |
<a target="_blank" href="#">Informativa Cookie</a>
</p>
</div>
<div class="footer-menu">
<div class="menu-footer">
<ul id="menu-menu-footer" class="menu">
<li><a href="#">Homepage</a></li>
<li><a href="#">Prodotti</a></li>
<li><a href="#">Showroom arredamento</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Azienda</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</div>
<!-- Footer menu -->
</div>
<div class="footer-contatti">
<div class="large_txt color-secondary">Contatti</div>
<p>
Tel: +39 0584 000000<br>
Email: <a href="#">[email protected]</a><br>
Indirizzo: via Roma 111, Pietrasanta (LU), Italia.
</p>
<div class="social-cont">
<ul class="social-list">
<li class="trans-color"><a target="_blank" href="#"><img src="https://www.chefstudio.it/img/facebook-icon.png" title="Facebook" alt="Facebook icon"></a></li>
<li class="trans-color"><a target="_blank" href="#"><img src="https://www.chefstudio.it/img/instagram-icon.png" title="Instagram" alt="Instagram icon"></a></li>
<li class="trans-color"><a target="_blank" href="#"><img src="https://www.chefstudio.it/img/pinterest-icon.png" title="Pinterest" alt="Pinterest icon"></a></li>
</ul>
<div class="floatstop"></div>
</div>
<!-- /fine social cont -->
</div>
<div class="floatstop"></div>
<div class="avvertenze-legali">
<p>Informazioni legali | I testi, le informazioni e gli altri dati pubblicati in questo sito nonché i link ad altri siti presenti sul web hanno esclusivamente scopo informativo e non assumono alcun carattere di ufficialità. Non assume alcuna responsabilità per eventuali errori od omissioni di qualsiasi tipo e per qualunque tipo di danno diretto, indiretto o accidentale derivante dalla lettura o dall'impiego delle informazioni pubblicate, o di qualsiasi forma di contenuto presente nel sito o per l'accesso o l'uso del materiale contenuto in altri siti.</p>
</div>
<div class="credits">
<p>Designed by</p>
<div>
<a target="_blank" href="#"><img src="https://www.chefstudio.it/img/your-logo.png" width="100" title="#" alt="#"></a>
</div>
</div>
<!-- /fine description -->
</div>
<!-- /fine footer container -->
</footer>Codice CSS responsive
Nel codice CSS responsive trovi 3 media query per adattarlo al meglio a tutti i dispositivi. I breakpoint sono fissati a 627px e 1280px di larghezza.
Su mobile i div sono ovviamente uno sotto l’altro. Nel media screen da 627px a 1280px i div che contengono il menu e i contatti aziendali sono affiancati e più piccoli del div che contiene le informazioni. Nel media screen desktop i div sono flottanti e sono larghi rispettivamente 50%, 25% e 25% della larghezza del div .footer-container con max-width 1300px.
@charset "utf-8";
/* ------------- reset ---------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
input:focus,
button:focus {
outline: 0;
}
img {
vertical-align: middle;
}
a {
text-decoration: none;
}
p {
margin-bottom: 12px;
}
ul li {
list-style: none;
}
html,
body {
font-family: "Roboto Slab", serif;
color: #666; /* color text */
height: 100%;
width: 100%;
}
h1 {
font-size: 1.5em;
text-align: left;
font-weight: bold;
color: #A24038; /* primary color */
}
/* ----------------- contenitore e contenuto ------------------ */
.contenitore .contenuto {
max-width: 1200px;
margin: auto;
padding: 70px 10px;
}
/* ----------------- footer HTML ----------------- */
#footer-large a {
color: #FF968C; /* secondary color */
}
#footer-large a:hover {
color: #FFADA6; /* light secondary color */
}
#footer-large .credits {
max-width: 300px;
margin: auto;
}
#footer-large .credits a img {
-o-transition: opacity .2s ease-in;
-ms-transition: opacity .2s ease-in;
-moz-transition: opacity .2s ease-in;
-webkit-transition: opacity .2s ease-in;
transition: opacity .2s ease;
}
#footer-large .credits a img:hover {
opacity: 0.6;
}
#footer-large .social-cont .social-list {
list-style-type: none;
margin: 0 auto;
padding: 10px 0;
}
#footer-large .social-cont .social-list > li {
margin: 8px 8px 8px 0;
display: inline-block;
vertical-align: top;
height: 32px;
width: 32px;
border-radius: 6em;
background-color: #F0776C; /* secondary color */
}
#footer-large .social-cont .social-list li img {
width: 32px;
}
#footer-large .social-cont .social-list > li:hover {
background: #FF968C; /* light secondary color */
}
/* ----------------- footer large ------------------ */
#footer-large {
width: 100%;
border-top: 1px solid #FF968C;
padding-top: 20px;
background-color: #B3453E; /* primary color */
color: #fff;
}
#footer-large p {
line-height: normal;
}
#footer-large .footer-informazioni {
padding: 0 0 15px 0;
border-bottom: 1px solid #FF968C;
border-left: 10px solid #B3453E;
border-right: 10px solid #B3453E; /* primary color */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border-top: 1px solid #FF968C;
}
#footer-large .footer-menu {
padding: 15px 0;
border-bottom: 1px solid #FF968C;
border-left: 10px solid #B3453E; /* primary color */
border-right: 10px solid #B3453E; /* primary color */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
line-height: 1.5em;
}
#footer-large .footer-contatti {
padding: 15px 0;
border-left: 10px solid #B3453E; /* primary color */
border-right: 10px solid #B3453E; /* primary color */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.avvertenze-legali p {
font-size: 12px;
line-height: 18px;
margin: 10px 10px 0 10px;
text-align: justify;
border-top: 1px solid #FF968C; /* light secondary color */
padding: 26px 0;
border-bottom: 1px solid #FF968C;
display: inline-block;
}
.credits {
text-align: center;
padding-top: 24px;
padding-bottom: 50px;
font-size: 14px;
}
@media screen and (min-width: 672px) {
#footer-large .footer-informazioni {
padding: 0 0 15px 0;
border-bottom: none;
border-left: 10px solid #B3453E;
border-right: 10px solid #B3453E; /* primary color */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#footer-large {
display: inline-block;
}
#footer-large .footer-menu {
width: 50%;
float: left;
border-bottom: none;
border-top: 1px solid #FF968C;
}
#footer-large .footer-contatti {
width: 50%;
float: left;
border-bottom: none;
border-top: 1px solid #FF968C;
}
}
@media screen and (min-width: 1280px) {
#footer-large {
display: inline-block;
}
#footer-large .footer-container {
max-width: 1300px;
margin: auto;
}
#footer-large .footer-informazioni {
width: 50%;
float: left;
border-bottom: none;
}
#footer-large .footer-menu {
width: 25%;
float: left;
}
#footer-large .footer-contatti {
width: 25%;
float: left;
}
}Link ai social network
I social network sono ormai un mezzo di comunicazione importantissimo nel web e consiglio di inserire i link a ogni piattaforma social che possiede l’azienda direttamente nel footer e nella pagina contatti. Ho predisposto un elenco di icone con alcuni dei maggiori social network. Grazie alle classi .social-cont .social-list puoi aggiungere facilmente altre icone di social a fianco.
Ho utilizzato un’icona bianca in .png; puoi utilizzare un .svg e realizzare nuove interazioni personalizzate più complesse.
Link per Informativa Privacy e Cookie
Sia l’informativa sulla privacy, sia l’informativa sui cookie sono obbligatorie nel footer di ciascun sito web. O meglio, è obbligatorio che siano inserite in un punto facilmente raggiungibile di ogni pagina web, perciò convenzionalmente vengono inserite nel footer. Il layout è predisposto per essere sempre ben visibile e cliccabile.
Inserire un link nel footer al sito dello sviluppatore o del designer?
Non consiglio di mettere in ogni pagina un link che “punta” al sito dello sviluppatore o del designer, potrebbe essere considerato da Google come spam. Suggerisco di creare una pagina credits interna al sito. Nella pagina credits descrivi il tuo lavoro di sviluppatore web e inserisci qui il link tramite un bottone o un link nel paragrafo.
Conclusioni sul mio footer in CSS e HTML
Sono un graphic designer e web designer e mi occupo di User Experience. Questo progetto è stato sviluppato per i miei siti web e reso disponibile in rete con licenza gratuita per scopi commerciali. Puoi vedere i miei lavori sul nostro portfolio di grafica e web. Negli anni ho cercato di migliorare l’esperienza di navigazione degli utenti, migliorando e snellendo il codice HTML5 e CSS e testando i risultati su vari dispositivi e browser. Se hai suggerimenti su come migliorare l’UX e la programmazione del codice scrivimi pure. Se utilizzerai questo codice e presenterai il lavoro nel tuo sito internet sarebbe molto gradito un link a chefstudio.it o a questa pagina =).
Ti potrebbe interessare anche il download del menu in HTML e CSS che ho sviluppato.
