AltoCode
Barile
HTML
<!-- ============================================ -->
<!-- Footer -->
<!-- ============================================ -->
<footer id="footer-2395">
<div class="cs-container">
<div class="cs-logo-group">
<a href="" class="cs-logo" aria-label="back to 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-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="cs-contact-info">
<span class="cs-header">Contatti</span>
<a href="tel:+391234567890" class="cs-contact-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/phone-w.svg" alt="icona telefono" width="24" height="24" loading="lazy" decoding="async">
+39 123 456 7890
</a>
<a href="mailto:info@email.com" class="cs-contact-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/mail-w.svg" alt="icona posta" width="24" height="24" loading="lazy" decoding="async">
info@email.com
</a>
<a href="" class="cs-contact-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/pin-w.svg" alt="icona indirizzo" width="24" height="24" loading="lazy" decoding="async">
Via Barile 123, Italia
</a>
</div>
<div class="cs-social">
<a href="" class="cs-social-link" aria-label="visita facebook">
<img class="cs-social-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/face-w.svg" alt="icona social" width="12" height="12" loading="lazy" decoding="async">
</a>
<a href="" class="cs-social-link" aria-label="visita twitter">
<img class="cs-social-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/x-w.svg" alt="icona social" width="12" height="12" loading="lazy" decoding="async">
</a>
<a href="" class="cs-social-link" aria-label="visita instagram">
<img class="cs-social-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/insta-w.svg" alt="icona social" width="12" height="12" loading="lazy" decoding="async">
</a>
<a href="" class="cs-social-link" aria-label="visita youtube">
<img class="cs-social-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/you-w.svg" alt="icona social" width="12" height="12" loading="lazy" decoding="async">
</a>
</div>
</div>
<div class="cs-service-group">
<span class="cs-header">Servizi</span>
<ul class="cs-ul">
<li class="cs-li"><a href="" class="cs-link">Terapia per la crescita personale</a></li>
<li class="cs-li"><a href="" class="cs-link">Consulenza focalizzata sulla relazione</a></li>
<li class="cs-li"><a href="" class="cs-link">Terapia di integrazione corpo e mente</a></li>
<li class="cs-li"><a href="" class="cs-link">Gestione consapevole dello stress</a></li>
<li class="cs-li"><a href="" class="cs-link">Consulenze di abbinamento terapeutico</a></li>
<li class="cs-li"><a href="" class="cs-link">Supporto per il recupero dal trauma</a></li>
<li class="cs-li"><a href="" class="cs-link">Coaching per le transizioni di vita</a></li>
<li class="cs-li"><a href="" class="cs-link">Ricostruzione dell’autostima</a></li>
</ul>
<div class="cs-terms">
<a href="" class="cs-link">Termini e condizioni</a>
<a href="" class="cs-link">Informativa sulla privacy</a>
<a href="" class="cs-link">Cancellazione</a>
</div>
<span class="cs-copyright">
© Copyright - <a href="" class="cs-link">AltoCode</a>
</span>
</div>
</div>
<img class="cs-floater" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/flower-svg.svg" alt="" loading="lazy" decoding="async" width="635" height="728">
</footer>
CSS
/*-- -------------------------- -->
<--- Footer -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
#footer-2395 {
padding: var(--sectionPadding);
background-color: #08101A;
overflow: hidden;
position: relative;
z-index: 1;
}
#footer-2395 .cs-container {
width: 100%;
max-width: 36.5rem;
margin: auto;
display: flex;
flex-direction: column;
}
#footer-2395 .cs-logo {
width: 90%;
max-width: 20.0625rem;
height: auto;
margin-bottom: 1rem;
display: block;
}
#footer-2395 .cs-logo img {
width: 100%;
height: auto;
}
#footer-2395 .cs-text {
text-align: inherit;
margin: 0 0 clamp(2rem, 5vw, 2.5rem);
color: #E8EBEF;
}
#footer-2395 .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-2395 .cs-header {
font-size: 1.25rem;
line-height: 1.2em;
font-weight: 700;
margin-bottom: 1rem;
color: #fff;
display: block;
}
#footer-2395 .cs-contact-link {
font-size: 1rem;
line-height: 1.5em;
text-align: inherit;
text-decoration: none;
margin: 0;
color: #E8EBEF;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0.5rem;
transition: color 0.3s;
}
#footer-2395 .cs-contact-link:hover {
color: var(--primary);
}
#footer-2395 .cs-icon {
width: 1.5rem;
height: auto;
display: block;
}
#footer-2395 .cs-social {
margin-top: clamp(1.5rem, 5vw, 2rem);
display: flex;
justify-content: flex-start;
align-items: stretch;
gap: 0.5rem;
}
#footer-2395 .cs-social-link {
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 1px solid #D2D8DF;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s, border-color 0.3s;
}
#footer-2395 .cs-social-link:hover {
background-color: var(--primary);
border-color: var(--primary);
}
#footer-2395 .cs-social-icon {
width: 0.75rem;
height: auto;
display: block;
}
#footer-2395 .cs-service-group {
margin-top: 3rem;
padding-top: 3rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
flex-direction: column;
}
#footer-2395 .cs-service-group .cs-header {
margin-bottom: 1.5rem;
}
#footer-2395 .cs-ul {
margin: 0 0 4rem;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
#footer-2395 .cs-li {
list-style: none;
grid-column: span 2;
}
#footer-2395 .cs-link,
#footer-2395 .cs-copyright {
font-size: 1rem;
text-decoration: none;
line-height: 1.5em;
margin: 0;
color: #E8EBEF;
display: block;
}
#footer-2395 .cs-link {
transition: color 0.3s;
}
#footer-2395 .cs-link:hover {
color: var(--primary);
}
#footer-2395 .cs-terms {
margin-bottom: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
#footer-2395 .cs-terms .cs-link {
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
#footer-2395 .cs-terms .cs-link:after {
content: '';
width: 4px;
height: 4px;
margin-left: 1rem;
background: #fff;
border-radius: 50%;
opacity: 1;
display: block;
}
#footer-2395 .cs-terms .cs-link:last-of-type:after {
display: none;
}
#footer-2395 .cs-copyright {
display: flex;
align-items: center;
gap: 0.5rem;
}
#footer-2395 .cs-floater {
width: clamp(31.25rem, 50vw, 39.6875rem);
height: auto;
filter: blur(180px);
opacity: 0.44;
position: absolute;
bottom: -1.25rem;
right: -15rem;
z-index: -2;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 700px) {
#footer-2395 .cs-ul {
column-gap: 4rem;
}
#footer-2395 .cs-li {
grid-column: span 1;
}
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
#footer-2395 .cs-container {
max-width: 80rem;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
column-gap: clamp(3rem, 3.8vw, 4rem);
}
#footer-2395 .cs-logo-group {
width: 33%;
max-width: 24.125rem;
flex: none;
}
#footer-2395 .cs-service-group {
width: 100%;
max-width: 42rem;
height: auto;
margin: 0;
padding-top: 0;
padding-left: clamp(3rem, 5.8vw, 4rem);
border: none;
border-left: 1px solid rgba(255, 255, 255, 0.12);
}
#footer-2395 .cs-terms {
margin-top: auto;
}
#footer-2395 .cs-floater {
bottom: -13.75rem;
}
}
/* Large Desktop - 1800px */
@media only screen and (min-width: 1800px) {
#footer-2395 .cs-floater {
margin-left: 21.875rem;
right: auto;
left: 50%;
}
}