AltoCode
Rapolla
HTML
<!-- ============================================ -->
<!-- Footer -->
<!-- ============================================ -->
<footer id="cs-footer-2412">
<div class="cs-container cs-container-top">
<img class="cs-logo" src="https://csimages.lon1.digitaloceanspaces.com/logo/altocode/003.png" alt="logo" loading="lazy" decoding="async" width="210" height="29">
<div class="cs-quick-links">
<h2 class="cs-h2">Links</h2>
<ul class="cs-ul">
<li class="cs-li">
<a class="cs-link" href="/">Home</a>
</li>
<li class="cs-li">
<a class="cs-link" href="">Chi Siamo</a>
</li>
<li class="cs-li">
<a class="cs-link" href="">Servizi</a>
</li>
<li class="cs-li">
<a class="cs-link" href="">FAQ</a>
</li>
<li class="cs-li">
<a class="cs-link" href="">Contatti</a>
</li>
</ul>
</div>
<div class="cs-wrapper">
<div class="cs-subscribe">
<h2 class="cs-header">Iscriviti per ricevere offerte esclusive e consigli</h2>
<form class="cs-form" name="Form iscrizione" method="post">
<input class="cs-input cs-text" type="email" id="cs-subscribe-2412" name="Iscriviti" placeholder="la tua Email">
<button class="cs-button-solid cs-submit" type="submit">
<img class="cs-icon" src="https://nyc3.digitaloceanspaces.com/csimages2/Images/Icons/paperplane.svg" alt="Iscrivi la tua email per registrarti" width="40" height="40" decoding="async" loading="lazy">
</button>
</form>
</div>
<div class="cs-bottom">
<div class="cs-social">
<a href="" class="cs-social-link" target="_blank" rel="noopener" aria-label="visita facebook">
<img class="cs-social-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/face-white1.svg" alt="facebook" loading="lazy" decoding="async" width="12" height="12">
</a>
<a href="" class="cs-social-link" target="_blank" rel="noopener" aria-label="visita twitter">
<img class="cs-social-icon" src="https://nyc3.digitaloceanspaces.com/csimages2/Images/Icons/twitter-x-white.svg" alt="twitter" loading="lazy" decoding="async" width="12" height="12">
</a>
<a href="" class="cs-social-link" target="_blank" rel="noopener" aria-label="visita instagram">
<img class="cs-social-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/instagram.svg" alt="instagram" loading="lazy" decoding="async" width="12" height="12">
</a>
<a href="" class="cs-social-link" target="_blank" rel="noopener" aria-label="visita youtube">
<img class="cs-social-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/youtube.svg" alt="youtube" loading="lazy" decoding="async" width="12" height="12">
</a>
</div>
<div class="cs-legal">
<a href="" class="cs-legal-link cs-link">Termini e condizioni</a>
<span class="cs-divider" aria-hidden="true">|</span>
<a href="" class="cs-legal-link cs-link">Informativa sulla privacy</a>
</div>
</div>
</div>
</div>
<div class="cs-credit">
<span class="cs-ip cs-text">© AltoCode. Tutti i diritti riservati.</span>
</div>
<svg class="cs-curve" aria-hidden="true" width="1920" height="151" viewBox="0 0 1920 151" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="filter0_d_1_72-2412" x="-4" y="0" width="1928" height="151" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_72"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_72" result="shape"/>
</filter>
</defs>
<g filter="url(#filter0_d_1_72)">
<path d="M1920 0H0V143C111.116 97.6666 456.485 7 951 7C1445.52 7 1803.21 97.6666 1920 143V0Z" fill="var(--overlayBG)"/>
</g>
</svg>
</footer>
CSS
/*-- -------------------------- -->
<--- Footer -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#cs-footer-2412 {
--gradientmix: color-mix(in lab, var(--primaryLight), black 49%);
text-align: center;
padding: var(--sectionPadding);
padding-bottom: clamp(2.5rem, 6vw, 3.75rem);
color: var(--bodyTextColorWhite);
background-color: #191005;
overflow: hidden;
position: relative;
z-index: 1;
}
#cs-footer-2412:before {
content: '';
width: 100%;
height: 100%;
background: url(https://nyc3.digitaloceanspaces.com/csimages2/Images/Patterns/noise100.png) repeat 0 0;
opacity: 0.02;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#cs-footer-2412 .cs-container {
width: 100%;
max-width: 80rem;
margin: auto;
}
#cs-footer-2412 .cs-text {
color: inherit;
}
#cs-footer-2412 .cs-logo {
width: 45.125%;
max-width: 13.5rem;
height: auto;
margin: 0 auto 3rem;
display: block;
}
#cs-footer-2412 .cs-link {
font-size: clamp(0.875rem, 1.5vw, 1rem);
line-height: 1.5em;
text-decoration: none;
color: var(--bodyTextColorWhite);
transition: color 0.3s ease;
}
#cs-footer-2412 .cs-link:hover {
color: var(--primaryLight);
}
#cs-footer-2412 .cs-h2 {
font-size: 1.5625rem;
font-weight: 700;
line-height: 1.5em;
margin: 0 0 1rem 0;
color: var(--bodyTextColorWhite);
display: block;
position: relative;
}
#cs-footer-2412 .cs-ul {
max-width: none;
margin: 0;
margin-bottom: clamp(1.5rem, 8vw, 3rem);
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: clamp(1.3125rem, 6.9vw, 3rem);
row-gap: 0.25rem;
}
#cs-footer-2412 .cs-li {
line-height: 1.875rem;
list-style: none;
}
#cs-footer-2412 .cs-wrapper {
max-width: 30.625rem;
margin: 0 auto;
}
#cs-footer-2412 .cs-bottom {
width: 100%;
max-width: 32.625rem;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem;
}
#cs-footer-2412 .cs-header {
font-size: 1.25rem;
text-align: center;
font-weight: 600;
margin: 0;
margin-bottom: 1.5rem;
}
#cs-footer-2412 .cs-form {
margin-bottom: clamp(2rem, 11vw, 2.5rem);
display: flex;
gap: 1rem;
}
#cs-footer-2412 .cs-input {
text-align: left;
background: none;
border: none;
border-bottom: 1px solid #4C4A48;
}
#cs-footer-2412 .cs-submit {
width: 3rem;
height: 3rem;
padding: 0;
background-color: var(--primaryLight);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, var(--gradientmix) 99%);
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, var(--gradientmix) 99%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--gradientmix) 99%);
border: none;
border-radius: 3rem;
-webkit-appearance: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
transition: opacity 0.3s ease;
}
#cs-footer-2412 .cs-submit:focus,
#cs-footer-2412 .cs-submit:hover {
opacity: 0.51;
}
#cs-footer-2412 .cs-icon {
width: 1rem;
height: auto;
}
#cs-footer-2412 .cs-social {
display: flex;
justify-content: center;
gap: 0.5rem;
}
#cs-footer-2412 .cs-social-link {
width: 2rem;
height: 2rem;
border-radius: 2rem;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
}
#cs-footer-2412 .cs-social-link:hover:after {
border-color: var(--primaryLight);
background-color: var(--primaryLight);
}
#cs-footer-2412 .cs-social-link:after {
content: '';
width: 100%;
height: 100%;
border-radius: 2rem;
border: 1px solid var(--bodyTextColorWhite);
background-color: rgba(255, 255, 255, 0);
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
#cs-footer-2412 .cs-legal {
width: auto;
}
#cs-footer-2412 .cs-divider {
margin: 0 1rem;
}
#cs-footer-2412 .cs-credit {
width: 100%;
max-width: 80rem;
margin: auto;
margin-top: clamp(3rem, 4vw, 6.25rem);
padding-top: 1.25rem;
border-top: 1px solid #4C4A48;
display: flex;
justify-content: center;
align-items: center;
}
#cs-footer-2412 .cs-curve {
--overlayBG: #fff;
width: 100%;
height: auto;
position: absolute;
top: -1px;
left: 0;
z-index: 3000;
pointer-events: none;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#cs-footer-2412 .cs-bottom {
justify-content: space-between;
}
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
#cs-footer-2412 {
padding-top: 10rem;
}
#cs-footer-2412 .cs-container {
display: flex;
align-items: stretch;
justify-content: space-around;
}
#cs-footer-2412 .cs-logo {
width: 20%;
margin-left: 0;
align-self: flex-start;
}
#cs-footer-2412 .cs-quick-links {
text-align: left;
width: 15%;
max-width: 32.66666667rem;
margin-right: 4rem;
}
#cs-footer-2412 .cs-ul {
margin: 0;
flex-wrap: nowrap;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
#cs-footer-2412 .cs-wrapper {
width: 52%;
max-width: 32.625rem;
margin-inline: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#cs-footer-2412 .cs-h2,
#cs-footer-2412 .cs-header {
text-align: left;
}
}