AltoCode
Bella
HTML
<!-- ============================================ -->
<!-- Footer -->
<!-- ============================================ -->
<footer id="cs-footer-1339">
<div class="cs-container">
<div class="cs-logo-group">
<h2 class="cs-title">Ottieni Soluzioni Finanziarie che Hanno Davvero Senso</h2>
<div class="cs-social">
<a class="cs-social-link" aria-label="visita facebook profile" href="">
<img class="cs-social-img" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/facebook-1a.svg" alt="icona facebook" width="11" height="11">
</a>
<a class="cs-social-link" aria-label="visita twitter profile" href="">
<img class="cs-social-img" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/twitter-1a.svg" alt="icona twitter" width="6" height="11">
</a>
<a class="cs-social-link" aria-label="visita instagram profile" href="">
<img class="cs-social-img" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/instagram-1a.svg" alt="icona instagram" width="11" height="11">
</a>
<a class="cs-social-link" aria-label="visita youtube profile" href="">
<img class="cs-social-img" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/youtube-1a.svg" alt="icona instagram" width="11" height="11">
</a>
</div>
</div>
<div class="cs-ul-wrapper">
<span class="cs-header">Links</span>
<ul class="cs-ul">
<li class="cs-li">
<a class="cs-link" href="">Servizi</a>
</li>
<li class="cs-li">
<a class="cs-link" href="">Progetti</a>
</li>
<li class="cs-li">
<a class="cs-link" href="">Su di Noi</a>
</li>
</ul>
</div>
<div class="cs-ul-wrapper">
<span class="cs-header">Contatti</span>
<ul class="cs-ul">
<li class="cs-li">
<a class="cs-link" href="tel:+391234567890">
<img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/phone-white.svg" alt="icona telefono" width="24" height="24">
+39 123 456 7890
</a>
</li>
<li class="cs-li">
<a class="cs-link" href="mailto:info@esempio.com">
<img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/email-white.svg" alt=" icona posta" width="24" height="24">
info@esempio.com
</a>
</li>
<li class="cs-li">
<a class="cs-link" href="" target="_blank">
<img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/pin-white.svg" alt="icona indirizzo" width="24" height="24">
Via Bella 123, Italia 12345
</a>
</li>
</ul>
</div>
</div>
<div class="cs-bottom">
<span class="cs-credit">
© Copyright <a href="" class="cs-credit-link" target="_blank">AltoCode</a>
</span>
<div class="cs-bottom-links">
<a href="" class="cs-bottom-link">Privacy Policy</a>
<a href="" class="cs-bottom-link">Termini & Condizioni</a>
</div>
</div>
</footer>
CSS
/*-- -------------------------- -->
<--- Footer -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#cs-footer-1339 {
padding: var(--sectionPadding);
padding-bottom: clamp(1.875rem, 5vw, 3.125rem);
background-color: #1a1a1a;
position: relative;
}
#cs-footer-1339 .cs-container {
width: 100%;
max-width: 80rem;
margin: auto;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
column-gap: 3rem;
row-gap: 2.5rem;
}
#cs-footer-1339 .cs-logo-group {
width: 100%;
position: relative;
}
#cs-footer-1339 .cs-title {
font-size: var(--headerFontSize);
font-weight: 900;
line-height: 1.2em;
text-align: inherit;
max-width: 43.75rem;
margin: 0 0 1rem 0;
color: var(--headerColor);
position: relative;
}
#cs-footer-1339 .cs-title {
margin: 0 0 2rem 0;
max-width: 23ch;
color: var(--bodyTextColorWhite);
}
#cs-footer-1339 .cs-social {
display: inline-flex;
justify-content: flex-start;
gap: 0.5rem;
}
#cs-footer-1339 .cs-social-link {
width: 2rem;
height: 2rem;
background-color: #484848;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
transition:
transform 0.3s,
background-color 0.3s;
}
#cs-footer-1339 .cs-social-link:hover {
background-color: var(--primaryLight);
transform: translateY(-0.1875rem);
}
#cs-footer-1339 .cs-social-link:hover .cs-social-img {
filter: grayscale(1) brightness(100%);
}
#cs-footer-1339 .cs-social-img {
height: 0.75rem;
filter: grayscale(1) brightness(630%);
width: auto;
display: block;
}
#cs-footer-1339 .cs-header {
font-size: 1.25rem;
line-height: 1.5em;
font-weight: 700;
margin: 0 0 1.5rem 0;
color: #fff;
display: block;
position: relative;
}
#cs-footer-1339 .cs-ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
#cs-footer-1339 .cs-li {
list-style: none;
}
#cs-footer-1339 .cs-link {
font-size: clamp(0.875rem, 1.5vw, 1rem);
text-decoration: none;
line-height: 1.5em;
text-align: left;
color: var(--bodyTextColorWhite);
display: inline-flex;
align-items: flex-start;
gap: 0.5rem;
transition: color 0.3s;
}
#cs-footer-1339 .cs-link:hover {
color: var(--primaryLight);
}
#cs-footer-1339 .cs-icon {
width: 1.25rem;
height: auto;
margin-right: 0.125rem;
display: block;
}
#cs-footer-1339 .cs-bottom {
text-align: center;
width: 100%;
max-width: 80rem;
margin: clamp(1.75rem, 7vw, 4rem) auto 0;
padding-top: clamp(1.75rem, 3vw, 2.5rem);
border-top: 1px solid #484848;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
}
#cs-footer-1339 .cs-credit,
#cs-footer-1339 .cs-bottom-link,
#cs-footer-1339 .cs-credit-link {
font-size: clamp(0.875rem, 1.5vw, 1rem);
line-height: 1.5em;
text-decoration: none;
width: auto;
margin: 0;
color: #bababa;
display: inline-block;
position: relative;
transition: color 0.3s;
}
#cs-footer-1339 .cs-credit {
width: 100%;
}
#cs-footer-1339 .cs-credit-link {
font-size: clamp(0.875rem, 1.5vw, 1rem);
line-height: 1.5em;
text-decoration: none;
width: auto;
margin: 0;
color: #bababa;
display: inline-block;
position: relative;
}
#cs-footer-1339 .cs-credit-link:hover {
color: var(--primary);
}
#cs-footer-1339 .cs-bottom-links {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#cs-footer-1339 .cs-bottom-link {
display: flex;
align-items: center;
}
#cs-footer-1339 .cs-bottom-link:hover {
color: var(--primary);
}
#cs-footer-1339 .cs-bottom-link:last-of-type:before {
content: "";
width: 1px;
height: 0.875rem;
margin: 0 0.75rem;
background: currentColor;
opacity: 1;
display: block;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#cs-footer-1339 .cs-container {
max-width: 80rem;
column-gap: clamp(3rem, 8vw, 7.5rem);
flex-wrap: nowrap;
}
#cs-footer-1339 .cs-logo-group {
width: 45%;
max-width: 38.875rem;
margin-right: auto;
}
#cs-footer-1339 .cs-bottom {
justify-content: space-between;
flex-wrap: nowrap;
}
#cs-footer-1339 .cs-credit {
text-align: left;
}
#cs-footer-1339 .cs-bottom-links {
justify-content: flex-end;
}
}