AltoCode
Ruoti
HTML
<!-- ============================================ -->
<!-- Footer -->
<!-- ============================================ -->
<footer id="cs-footer-1862">
<div class="cs-container">
<div class="cs-top">
<div class="cs-flex">
<a href="" class="cs-logo">
<img src="https://csimages.lon1.digitaloceanspaces.com/logo/altocode/002.png" alt="logo" loading="lazy" decoding="async" width="210" height="29">
</a>
<ul class="cs-social">
<li class="cs-social-li">
<a href="" class="cs-social-link" rel="noopener" target="_blank" aria-label="visita facebook">
<img class="cs-social-icon cs-default" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/grey-facebook.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" rel="noopener" target="_blank" aria-label="visita linkedin">
<img class="cs-social-icon cs-default" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/grey-linkedin.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" rel="noopener" target="_blank" aria-label="visita instagram">
<img class="cs-social-icon cs-default" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/instagram-derm-footer.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" rel="noopener" target="_blank" aria-label="visita tiktok">
<img class="cs-social-icon cs-default" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/grey-tiktok.svg" alt="icona social" loading="lazy" decoding="async" width="24" height="24">
</a>
</li>
</ul>
</div>
<ul class="cs-ul cs-contact-ul">
<li class="cs-li">
<span class="cs-header">Contatti</span>
</li>
<li class="cs-li">
<a href="" class="cs-link" target="_blank" rel="noopener">
Via Ruoti 123, Italia 12345
</a>
</li>
<li class="cs-li">
<a href="mailto:info@esempio.com" class="cs-link">
info@esempio.com
</a>
</li>
</ul>
<ul class="cs-ul">
<li class="cs-li">
<span class="cs-header">Orari di Apertura</span>
</li>
<li class="cs-li">
Dal lunedì al venerdì
</li>
<li class="cs-li">
9:00 - 17:00
</li>
</ul>
</div>
<div class="cs-bottom">
<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">Chi siamo</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">FAQ</a>
</li>
<li class="cs-nav-li">
<a href="" class="cs-nav-link">Blog</a>
</li>
</ul>
<span class="cs-copyright">
© Copyright - <a href="" class="cs-copyright-link">AltoCode</a>
</span>
</div>
</div>
</footer>
CSS
/*-- -------------------------- -->
<--- Footer -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#cs-footer-1862 {
padding: var(--sectionPadding);
padding-bottom: 2.5rem;
background-color: #F6EDDF;
}
#cs-footer-1862 .cs-container {
width: 100%;
max-width: 80rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
#cs-footer-1862 .cs-top {
width: 100%;
margin-bottom: clamp(3rem, 6vw, 4rem);
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
column-gap: clamp(4rem, 9vw, 6.25rem);
row-gap: 2rem;
}
#cs-footer-1862 .cs-flex {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(2rem, 4vw, 3rem);
}
#cs-footer-1862 .cs-logo {
width: 100%;
max-width: 19.8125rem;
height: auto;
}
#cs-footer-1862 .cs-logo img {
width: 100%;
height: auto;
}
#cs-footer-1862 .cs-social {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
#cs-footer-1862 .cs-social-li {
list-style: none;
}
#cs-footer-1862 .cs-social-link {
width: 2.5rem;
height: auto;
padding: 0.75rem;
background-color: #DED1BD;
border-radius: 2rem;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s;
}
#cs-footer-1862 .cs-social-link:hover {
background-color: var(--primary);
}
#cs-footer-1862 .cs-social-link:hover .cs-social-icon {
filter: grayscale(1) brightness(1000%);
}
#cs-footer-1862 .cs-social-icon {
width: 1rem;
height: 1rem;
display: block;
}
#cs-footer-1862 .cs-ul {
width: auto;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
#cs-footer-1862 .cs-contact-ul {
width: 100%;
max-width: 100%;
gap: 0.5rem;
}
#cs-footer-1862 .cs-li {
list-style: none;
margin: 0;
display: block;
}
#cs-footer-1862 .cs-header {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2em;
margin: 0 0 clamp(1rem, 3.5vw, 1.5rem) 0;
color: var(--headerColor);
display: block;
}
#cs-footer-1862 .cs-link,
#cs-footer-1862 .cs-li {
font-size: 1rem;
line-height: 1.5em;
text-decoration: none;
margin: 0;
color: var(--bodyTextColor);
display: block;
position: relative;
z-index: 1;
}
#cs-footer-1862 .cs-link:hover:before {
width: 100%;
}
#cs-footer-1862 .cs-link:before {
content: "";
width: 0%;
height: 1px;
background: currentColor;
opacity: 1;
display: block;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.3s;
}
#cs-footer-1862 .cs-bottom {
width: 100%;
margin: 0;
padding: clamp(1.25rem, 5vw, 2.5rem) 0 0 0;
border-top: 1px solid #DED1BD;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
}
#cs-footer-1862 .cs-nav {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
column-gap: clamp(1.25rem, 5.3vw, 2.5rem);
}
#cs-footer-1862 .cs-nav-li {
list-style: none;
}
#cs-footer-1862 .cs-nav-link {
font-size: clamp(0.875rem, 1.5vw, 1rem);
line-height: 1.5em;
text-decoration: none;
margin: 0;
color: var(--bodyTextColor);
position: relative;
}
#cs-footer-1862 .cs-nav-link:hover {
color: #8F5B34;
}
#cs-footer-1862 .cs-nav-link:hover:before {
width: 100%;
}
#cs-footer-1862 .cs-nav-link:before {
content: "";
width: 0%;
height: 1px;
background: currentColor;
opacity: 1;
display: block;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.3s;
}
#cs-footer-1862 .cs-copyright {
font-size: clamp(0.875rem, 1.5vw, 1rem);
line-height: 1.5em;
text-align: center;
margin: 0;
color: var(--bodyTextColor);
}
#cs-footer-1862 .cs-copyright-link {
font-size: inherit;
line-height: inherit;
text-decoration: none;
margin: 0;
color: inherit;
display: inline-block;
}
#cs-footer-1862 .cs-copyright-link:hover {
text-decoration: underline;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#cs-footer-1862 .cs-flex {
width: auto;
margin-right: auto;
}
#cs-footer-1862 .cs-contact-ul {
width: clamp(9.5rem, 25vw, 25.75rem);
}
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
#cs-footer-1862 .cs-bottom {
flex-direction: row;
}
#cs-footer-1862 .cs-copyright {
text-align: right;
}
}