Footer with navigation menu

by Andrea Biagi

HTML

<div class="contenitore">

	<div class="contenuto">
		<h1>Chef's Footer v1.0 - Scorri la pagina </h1>
		<p>Footer in puro html e css sviluppato da <a target="_blank" href="https://www.chefstudio.it/"> Chef Studio</a>.<br/>
		Leggi la <a target="_blank" href="https://www.chefstudio.it/https://www.chefstudio.it/footer-html-css-download.html">guida</a> per maggiori informazioni.<br/><br/>
			<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Licenza Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Footer Html e CSS</span> di <a xmlns:cc="http://creativecommons.org/ns#" href="https://www.chefstudio.it" property="cc:attributionName" rel="cc:attributionURL">Andrea Biagi</a> è distribuito con Licenza <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribuzione 4.0 Internazionale</a>.
			<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="https://www.chefstudio.it/footer-html-css-download.html" rel="dct:source">https://www.chefstudio.it/footer-html-css-download.html</a>.
		<br />
		Link alla <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/deed.it">licenza</a>
		</p>
		<p>
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. Vivamus tincidunt nunc eu ullamcorper gravida. Sed elit lectus, hendrerit id aliquam id, efficitur in ante. Ut cursus, urna vel ultrices mattis, sem erat aliquet enim, nec finibus libero felis...

CSS

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;
	padding-bottom: 70px;
}

/* -----------------footer html-----------------*/

#footer-large a{
	color:#FF968C; /* seconday color*/
}

#footer-large a:hover{
	color:#FFADA6; /* light seconday color*/	
}

#footer-large .credits {
	max-width:300px;
	margin:auto;
}

#footer-large .credits a img {
  -o-transition: opacity .2 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...