15. Footer e Immagini
Poco prima della parte relativa ai link per le CDN JavaScript, aggiungiamo il codice relativo al footer.
<footer class="bg-dark text-white">
<div class="container">
<p style="font-weight: bold;">Canali Social:</p>
<a style="color: white;" href="Link al Vostro Canale YouTube">
<i class="bi bi-hand-thumbs-up"></i> YouTube</a><br>
<a style="color: white;" href="Link al Vostro Account Twitter">
<i class="bi bi-hand-thumbs-up"></i> Twitter</a><br>
<a style="color: white;" href="Link al Vostro Profilo Facebook">
<i class="bi bi-hand-thumbs-up"></i> Facebook</a><br> <br>
<a style="color: white;" href="#">Torna Su</a><br>
</div>
</footer>Aggiungiamo lo stile del footer e delle immagini al file CSS
Dobbiamo quindi apportare le modifiche adeguate allo stile del footer, mediante CSS:
footer {
padding: 40px;
background-color: #092E20;
text-align: center;
}Aggiungiamo anche una piccola modifica al CSS anche per quanto riguarda le immagini che vengono utilizzate nel sito (quindi richiamate mediante STATIC o semplicemente link di riferimento ad immagini esterne al blog):
img {
max-width: 100%;
height: auto;
display: block;
}Anche se Bootstrap ci fornisce una classe (img-responsive) che ci permette di avere immagini responsive senza dover toccare il foglio di stile, abbiamo optato per questa opzione in modo da facilitare l'inserimento di immagini nei post del nostro blog.
Nella prossima lezione faremo in modo che il footer rimanga posizionato nella parte inferiore delle pagine utilizzando il Grid System di Bootstrap.