AltoCode
Calvello
HTML
<!-- ============================================ -->
<!-- Footer -->
<!-- ============================================ -->
<footer id="cs-footer-710">
<div class="cs-container">
<div class="cs-top">
<div class="cs-logo-wrapper">
<a href="" class="cs-logo">
<img src="https://csimages.lon1.digitaloceanspaces.com/logo/altocode/003.png" alt="logo" loading="lazy" decoding="async" width="210" height="29">
</a>
</div>
<ul class="cs-ul">
<li class="cs-li">
<span class="cs-header">Links</span>
</li>
<li class="cs-li">
<a href="" class="cs-link">Servizi</a>
</li>
<li class="cs-li">
<a href="" class="cs-link">Contattaci</a>
</li>
<li class="cs-li">
<a href="" class="cs-link">FAQ</a>
</li>
</ul>
<ul class="cs-ul">
<li class="cs-li">
<span class="cs-header">Links</span>
</li>
<li class="cs-li">
<a href="" class="cs-link">Blog</a>
</li>
<li class="cs-li">
<a href="" class="cs-link">Progetti</a>
</li>
<li class="cs-li">
<a href="" class="cs-link">Chi Siamo</a>
</li>
<li class="cs-li">
<a href="" class="cs-link">Testimonianze</a>
</li>
</ul>
<ul class="cs-ul cs-contact-ul">
<li class="cs-li">
<span class="cs-header">Contatti</span>
</li>
<li class="cs-li">
<a href="tel:+391234567890" class="cs-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Fphone-stroke.svg" alt="icona telefono" loading="lazy" decoding="async" width="24" height="24">
+39 123 456 7890
</a>
</li>
<li class="cs-li">
<a href="mailto:info@esempio.com" class="cs-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Fmail-stroke.svg" alt="icona posta" loading="lazy" decoding="async" width="24" height="24">
info@esempio.com
</a>
</li>
<li class="cs-li">
<a href="" class="cs-link" target="_blank" rel="noopener">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Fpin-stroke.svg" alt="icona indirizzo" loading="lazy" decoding="async" width="24" height="24">
Via Calvello 123, Italia 12345
</a>
</li>
</ul>
</div>
<div class="cs-middle">
<ul class="cs-nav">
<li class="cs-nav-li">
<a href="" class="cs-nav-link">Home</a>
</li>
<li class="cs-nav-li">
<a href="" class="cs-nav-link">Servizi</a>
</li>
<li class="cs-nav-li">
<a href="" class="cs-nav-link">Chi Siamo</a>
</li>
<li class="cs-nav-li">
<a href="" class="cs-nav-link">Blog</a>
</li>
<li class="cs-nav-li">
<a href="" class="cs-nav-link">Progetti</a>
</li>
<li class="cs-nav-li">
<a href="" class="cs-nav-link">FAQ</a>
</li>
</ul>
<ul class="cs-social">
<li class="cs-social-li">
<a href="" class="cs-social-link" aria-label="visita facebook" target="_blank" rel="noopener">
<img class="cs-social-icon cs-default" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Ffacebook.svg" alt="icona social" loading="lazy" decoding="async" width="24" height="24">
<img class="cs-social-icon cs-hover" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Ffacebook-green.svg" alt="icona social" loading="lazy" decoding="async" width="24" height="24">
</a>
</li>
<li class="cs-social-li">
<a href="" class="cs-social-link" aria-label="visita twitter" target="_blank" rel="noopener">
<img class="cs-social-icon cs-default" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Ftwitter.svg" alt="icona social" loading="lazy" decoding="async" width="24" height="24">
<img class="cs-social-icon cs-hover" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Ftwitter-green.svg" alt="icona social" loading="lazy" decoding="async" width="24" height="24">
</a>
</li>
<li class="cs-social-li">
<a href="" class="cs-social-link" aria-label="visita instagram" target="_blank" rel="noopener">
<img class="cs-social-icon cs-default" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Finstagram.svg" alt="icona social" loading="lazy" decoding="async" width="24" height="24">
<img class="cs-social-icon cs-hover" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Finstagram-green2.svg" alt="icona social" loading="lazy" decoding="async" width="24" height="24">
</a>
</li>
<li class="cs-social-li">
<a href="" class="cs-social-link" aria-label="visita youtube" target="_blank" rel="noopener">
<img class="cs-social-icon cs-default" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Fyoutube.svg" alt="icona social" loading="lazy" decoding="async" width="24" height="24">
<img class="cs-social-icon cs-hover" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Fyoutube-green.svg" alt="icona social" loading="lazy" decoding="async" width="24" height="24">
</a>
</li>
</ul>
</div>
<div class="cs-bottom">
<span class="cs-copyright">
© Copyright - <a href="" class="cs-copyright-link" target="_blank" rel="noopener">AltoCode</a>
</span>
</div>
</div>
<img class="cs-graphic" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Ffooter-waves.svg" alt="" loading="lazy" decoding="async" width="1920" height="616">
</footer>
CSS
/*-- -------------------------- -->
<--- Footer -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#cs-footer-710 {
padding: var(--sectionPadding);
padding-bottom: 3.125rem;
background-color: var(--primary);
position: relative;
z-index: 1;
}
#cs-footer-710 .cs-container {
width: 100%;
max-width: 80rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
#cs-footer-710 .cs-logo-wrapper {
width: 100%;
}
#cs-footer-710 .cs-logo {
width: 100%;
max-width: 13.125rem;
height: auto;
margin-right: auto;
display: block;
}
#cs-footer-710 .cs-logo img {
width: 100%;
height: auto;
}
#cs-footer-710 .cs-top {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
column-gap: clamp(4rem, 9vw, 6.25rem);
row-gap: 2rem;
}
#cs-footer-710 .cs-ul {
margin: 0;
padding: 0;
width: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
flex: none;
}
#cs-footer-710 .cs-contact-ul {
width: 100%;
max-width: 100%;
gap: 0.75rem;
}
#cs-footer-710 .cs-contact-ul .cs-link:hover {
text-decoration: underline;
}
#cs-footer-710 .cs-contact-ul .cs-link:before {
display: none;
}
#cs-footer-710 .cs-li {
list-style: none;
margin: 0;
display: block;
}
#cs-footer-710 .cs-header {
font-size: 1rem;
line-height: 1.2em;
font-weight: 700;
margin: 0 0 1.5rem 0;
color: #fff;
display: block;
}
#cs-footer-710 .cs-link {
font-size: clamp(0.875rem, 1.5vw, 1rem);
line-height: 1.5em;
text-decoration: none;
margin: 0;
color: #fff;
display: flex;
justify-content: flex-start;
align-items: flex-start;
position: relative;
}
#cs-footer-710 .cs-link:hover:before {
width: 100%;
}
#cs-footer-710 .cs-link:before {
content: "";
width: 0%;
height: 1px;
background: currentColor;
opacity: 1;
position: absolute;
display: block;
bottom: 0;
left: 0;
transition: width 0.3s;
}
#cs-footer-710 .cs-block {
display: block;
}
#cs-footer-710 .cs-icon {
width: 1.5rem;
height: auto;
margin: -0.0625rem 0.75rem 0 0;
}
#cs-footer-710 .cs-middle {
width: 100%;
max-width: 28.125rem;
margin: clamp(3.75rem, 8vw, 6.25rem) 0 0 0;
padding-bottom: clamp(1.25rem, 5vw, 2.5rem);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
#cs-footer-710 .cs-nav {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
column-gap: 2.5rem;
row-gap: 0.5rem;
}
#cs-footer-710 .cs-nav-li {
list-style: none;
}
#cs-footer-710 .cs-nav-link {
font-size: clamp(0.875rem, 1.5vw, 1rem);
line-height: 1.5em;
text-decoration: none;
margin: 0;
color: var(--bodyTextColorWhite);
position: relative;
}
#cs-footer-710 .cs-nav-link:hover:before {
width: 100%;
}
#cs-footer-710 .cs-nav-link:before {
content: "";
width: 0%;
height: 1px;
background: currentColor;
opacity: 1;
position: absolute;
display: block;
bottom: 0;
left: 0;
transition: width 0.3s;
}
#cs-footer-710 .cs-social {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
#cs-footer-710 .cs-social-li {
list-style: none;
}
#cs-footer-710 .cs-social-link {
width: 2rem;
height: 2rem;
background-color: transparent;
border: 1px solid #f6e5db;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s;
}
#cs-footer-710 .cs-social-link:hover {
background-color: #f6e5db;
}
#cs-footer-710 .cs-social-link:hover .cs-default {
display: none;
}
#cs-footer-710 .cs-social-link:hover .cs-hover {
display: block;
}
#cs-footer-710 .cs-social-icon {
width: 0.75rem;
height: auto;
display: block;
}
#cs-footer-710 .cs-hover {
display: none;
}
#cs-footer-710 .cs-bottom {
width: 100%;
margin: 0;
padding: clamp(1.25rem, 5vw, 2.5rem) 0 0 0;
border-top: 1px solid rgba(186, 186, 186, 0.2);
display: flex;
justify-content: center;
align-items: center;
}
#cs-footer-710 .cs-copyright {
font-size: clamp(0.875rem, 1.5vw, 1rem);
line-height: 1.5em;
text-align: center;
width: 70%;
margin: 0;
color: var(--bodyTextColorWhite);
display: block;
}
#cs-footer-710 .cs-copyright-link {
font-size: inherit;
line-height: inherit;
text-decoration: none;
margin: 0;
color: inherit;
display: inline-block;
}
#cs-footer-710 .cs-copyright-link:hover {
text-decoration: underline;
}
#cs-footer-710 .cs-graphic {
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
position: absolute;
z-index: -1;
}
}
/* 600px */
@media only screen and (min-width: 37.5rem) {
#cs-footer-710 .cs-top {
justify-content: flex-end;
}
#cs-footer-710 .cs-ul {
width: auto;
}
#cs-footer-710 .cs-contact-ul {
width: 15rem;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#cs-footer-710 .cs-top {
flex-wrap: nowrap;
}
#cs-footer-710 .cs-logo-wrapper {
width: auto;
margin-right: auto;
}
#cs-footer-710 .cs-middle {
max-width: 100%;
}
}
/* Desktop 1024px */
@media only screen and (min-width: 64rem) {
#cs-footer-710 .cs-middle {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}