AltoCode
Tito
HTML
<!-- ============================================ -->
<!-- Footer -->
<!-- ============================================ -->
<footer id="footer-1240">
<div class="cs-container">
<div class="cs-top">
<div class="cs-logo-group">
<a href="" class="cs-logo" aria-label="torna in home">
<img src="https://csimages.lon1.digitaloceanspaces.com/logo/altocode/003.png" alt="logo" loading="lazy" decoding="async" width="210" height="29">
</a>
<p class="cs-logo-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="cs-social">
<a href="" class="cs-social-link" aria-label="visita facebook">
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m11.476 8.885.414-2.73H9.297v-1.77c0-.748.361-1.476 1.523-1.476H12V.584S10.93.4 9.907.4C7.77.4 6.374 1.708 6.374 4.075v2.08H4v2.73h2.374v6.6a9.309 9.309 0 0 0 2.923 0v-6.6h2.179Z" fill="#BABABA"/></svg>
</a>
<a href="" class="cs-social-link" aria-label="visita twitter">
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.038 4.787c.006.141.006.275.006.416.006 4.269-3.13 9.197-8.865 9.197A8.64 8.64 0 0 1 .4 12.947a6.116 6.116 0 0 0 4.612-1.344c-1.334-.025-2.507-.928-2.914-2.246.469.096.95.077 1.407-.058-1.45-.294-2.494-1.619-2.5-3.161v-.039c.432.25.92.39 1.414.403-1.365-.947-1.79-2.835-.963-4.313 1.586 2.022 3.92 3.245 6.427 3.379a3.32 3.32 0 0 1 .901-3.091 3.05 3.05 0 0 1 4.414.14c.698-.14 1.371-.409 1.982-.787a3.237 3.237 0 0 1-1.37 1.786 6.242 6.242 0 0 0 1.79-.506 6.51 6.51 0 0 1-1.562 1.677Z" fill="#bababa"/></svg>
</a>
<a href="" class="cs-social-link" aria-label="visita instagram">
<svg width="800" height="800" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.996.008C8.738.008 8.33.022 7.05.08 5.773.138 4.901.341 4.138.638A5.88 5.88 0 0 0 2.013 2.02 5.88 5.88 0 0 0 .63 4.146c-.297.763-.5 1.635-.558 2.912C.014 8.338 0 8.746 0 12.004s.014 3.667.072 4.946C.13 18.227.333 19.1.63 19.862a5.88 5.88 0 0 0 1.383 2.125 5.881 5.881 0 0 0 2.125 1.384c.763.296 1.635.499 2.912.557 1.28.058 1.688.072 4.946.072s3.667-.014 4.946-.072c1.277-.058 2.15-.261 2.912-.558a5.882 5.882 0 0 0 2.125-1.383 5.88 5.88 0 0 0 1.384-2.125c.296-.763.499-1.635.557-2.912.059-1.28.072-1.688.072-4.946s-.013-3.666-.072-4.946c-.058-1.277-.26-2.149-.557-2.912a5.881 5.881 0 0 0-1.384-2.125A5.881 5.881 0 0 0 19.854.638C19.091.34 18.22.138 16.942.08c-1.28-.058-1.688-.072-4.946-.072ZM7.997 12.004a3.999 3.999 0 1 0 7.998 0 3.999 3.999 0 0 0-7.998 0Zm-2.161 0a6.16 6.16 0 1 1 12.32 0 6.16 6.16 0 0 1-12.32 0ZM18.4 7.04a1.44 1.44 0 1 0 0-2.88 1.44 1.44 0 0 0 0 2.88Z" fill="#bababa"/></svg>
</a>
<a href="" class="cs-social-link" aria-label="visita youtube">
<svg width="800" height="800" viewBox="0 -3 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7.988 9.586V3.974c1.993.938 3.536 1.843 5.36 2.82-1.505.834-3.367 1.77-5.36 2.792m11.103-8.403c-.344-.453-.93-.805-1.553-.922-1.833-.348-13.267-.349-15.099 0-.5.094-.945.32-1.328.673C-.5 2.429.005 10.452.393 11.75c.164.562.375.968.64 1.235.343.352.812.594 1.351.703 1.51.312 9.284.486 15.122.047a2.62 2.62 0 0 0 1.39-.712c1.49-1.49 1.388-9.962.195-11.841" fill="#bababa" fill-rule="evenodd"/></svg>
</a>
</div>
</div>
<div class="cs-contact-group">
<span class="cs-header">Info Contatti</span>
<div class="cs-contact-info">
<a href="" class="cs-contact-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Footer-Icons/clock-1a.svg" alt="icona orologio" width="20" height="20" loading="lazy" decoding="async">
8:00 – 17:30
</a>
<a href="" class="cs-contact-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Footer-Icons/clock-1a.svg" alt="icona orologio" width="20" height="20" loading="lazy" decoding="async">
da Lunedì a Sabato
</a>
<a href="" class="cs-contact-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Footer-Icons/mail-1a.svg" alt="icona posta" width="20" height="20" loading="lazy" decoding="async">
info@esempio.com
</a>
<a href="" class="cs-contact-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Footer-Icons/pin-1a.svg" alt="icona indirizzo" width="20" height="20" loading="lazy" decoding="async">
Via Tito 123, Italia
</a>
</div>
</div>
<div class="cs-gallery-group">
<span class="cs-header">Gallery</span>
<div class="cs-gallery">
<picture class="cs-picture">
<img class="cs-img" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-1.jpg" alt="persone" width="102" height="102" loading="lazy" decoding="async">
</picture>
<picture class="cs-picture">
<img class="cs-img" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-2.jpg" alt="persone" width="102" height="102" loading="lazy" decoding="async">
</picture>
<picture class="cs-picture">
<img class="cs-img" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-3.jpg" alt="persone" width="102" height="102" loading="lazy" decoding="async">
</picture>
<picture class="cs-picture">
<img class="cs-img" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-4.jpg" alt="persone" width="102" height="102" loading="lazy" decoding="async">
</picture>
<picture class="cs-picture">
<img class="cs-img" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-5.jpg" alt="persone" width="102" height="102" loading="lazy" decoding="async">
</picture>
<picture class="cs-picture">
<img class="cs-img" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-6.jpg" alt="persone" width="102" height="102" loading="lazy" decoding="async">
</picture>
<picture class="cs-picture">
<img class="cs-img" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-1.jpg" alt="persone" width="102" height="102" loading="lazy" decoding="async">
</picture>
<picture class="cs-picture">
<img class="cs-img" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-2.jpg" alt="persone" width="102" height="102" loading="lazy" decoding="async">
</picture>
</div>
</div>
</div>
<div class="cs-bottom">
<ul class="cs-ul">
<li class="cs-li">
<a href="" class="cs-li-link">Home</a>
</li>
<li class="cs-li">
<a href="" class="cs-li-link">Servizi</a>
</li>
<li class="cs-li">
<a href="" class="cs-li-link">Chi Siamo</a>
</li>
<li class="cs-li">
<a href="" class="cs-li-link">Team</a>
</li>
<li class="cs-li">
<a href="" class="cs-li-link">Progetti</a>
</li>
<li class="cs-li">
<a href="" class="cs-li-link">FAQ</a>
</li>
</ul>
<span class="cs-credit">
© Copyright - <a href="" class="cs-credit-link">AltoCode</a>
</span>
</div>
</div>
</footer>
CSS
/*-- -------------------------- -->
<--- Footer -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#footer-1240 {
padding: var(--sectionPadding);
box-sizing: border-box;
background-color: #1a1a1a;
}
#footer-1240 .cs-container {
width: 100%;
max-width: 80rem;
margin: auto;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(2.5rem, 6vw, 4rem);
}
#footer-1240 .cs-top {
width: 100%;
display: contents;
}
#footer-1240 .cs-logo-group {
text-align: left;
max-width: 27.125rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(1.25rem, 3vw, 1.5rem);
}
#footer-1240 .cs-logo {
width: 12.5rem;
height: auto;
}
#footer-1240 .cs-logo img {
width: 100%;
height: auto;
}
#footer-1240 .cs-logo-text {
font-size: clamp(0.875rem, 1.5vw, 1rem);
line-height: 1.5em;
text-align: inherit;
margin: 0;
color: var(--bodyTextColorWhite);
opacity: 0.8;
}
#footer-1240 .cs-social {
border: 1px solid #484848;
display: flex;
justify-content: center;
align-items: stretch;
}
#footer-1240 .cs-social-link {
width: 3.75rem;
height: 3.75rem;
border-right: 1px solid #484848;
display: flex;
justify-content: center;
align-items: center;
}
#footer-1240 .cs-social-link:last-of-type {
border: none;
}
#footer-1240 .cs-social-link:hover svg path {
fill: var(--primary);
}
#footer-1240 .cs-social-link svg {
width: 1rem;
height: auto;
}
#footer-1240 .cs-social-link svg path {
transition: fill 0.3s;
}
#footer-1240 .cs-contact-group,
#footer-1240 .cs-gallery-group {
text-align: left;
width: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
}
#footer-1240 .cs-header {
font-size: 1.25rem;
line-height: 1.2em;
font-weight: 700;
text-align: inherit;
color: var(--bodyTextColorWhite);
}
#footer-1240 .cs-contact-info {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(0.5rem, 1.5vw, 0.75rem);
}
#footer-1240 .cs-contact-link {
font-size: clamp(0.875rem, 1.5vw, 1rem);
line-height: 1.5em;
text-align: inherit;
text-decoration: none;
margin: 0;
color: var(--bodyTextColorWhite);
opacity: 0.8;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0.5rem;
transition: color 0.3s;
}
#footer-1240 .cs-contact-link:hover {
color: var(--primary);
}
#footer-1240 .cs-icon {
filter: grayscale(1) brightness(1000%);
opacity: 0.7;
}
#footer-1240 .cs-gallery {
width: 100%;
max-width: 21.875rem;
display: grid;
align-items: center;
gap: 0.5rem;
grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr));
grid-template-rows: repeat(auto-fit, minmax(4.75rem, 1fr));
}
#footer-1240 .cs-picture {
width: 100%;
height: 100%;
aspect-ratio: 1;
display: block;
grid-column: span 1;
position: relative;
}
#footer-1240 .cs-picture img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
#footer-1240 .cs-bottom {
width: 100%;
}
#footer-1240 .cs-ul {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(1.5rem, 4vw, 2.5rem);
}
#footer-1240 .cs-li {
list-style: none;
font-size: clamp(0.875rem, 1.5vw, 1rem);
line-height: 1.5em;
margin: 0;
opacity: 0.8;
}
#footer-1240 .cs-li-link {
text-decoration: none;
color: var(--bodyTextColorWhite);
transition: color 0.3s;
}
#footer-1240 .cs-li-link:hover {
color: var(--primary);
}
#footer-1240 .cs-credit {
font-size: clamp(0.875rem, 1.5vw, 1rem);
line-height: 1.5em;
text-align: center;
margin: 0;
margin-top: clamp(1rem, 4vw, 2.5rem);
padding-top: clamp(1rem, 4vw, 2.5rem);
border-top: 1px solid rgba(255, 255, 255, 0.3);
color: var(--bodyTextColorWhite);
opacity: 0.8;
display: block;
}
#footer-1240 .cs-credit-link {
font-size: inherit;
line-height: inherit;
text-decoration: none;
color: inherit;
transition: color 0.3s;
}
#footer-1240 .cs-credit-link:hover {
color: var(--primary);
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#footer-1240 .cs-logo-group {
width: 33.5%;
}
#footer-1240 .cs-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 3rem;
}
#footer-1240 .cs-gallery-group {
width: 27%;
}
#footer-1240 .cs-gallery {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
}
}