AltoCode
Bellosguardo 4 Prezzi
HTML
<!-- ============================================ -->
<!-- Prezzi -->
<!-- ============================================ -->
<section id="pricing-2183">
<div class="cs-container">
<div class="cs-content">
<span class="cs-topper">Prezzi</span>
<h2 class="cs-title">Dai un’occhiata ai nostri piani tariffari</h2>
<p class="cs-text">
Offriamo corsi on-demand e istruttori dal vivo per workshop e supporto. Forniamo
inoltre corsi di formazione LIVE con istruttore e formazione in sede.
</p>
</div>
<ul class="cs-card-group">
<li class="cs-item">
<h3 class="cs-h3">Base</h3>
<p class="cs-item-text">
Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.natus error sitvoluptatem accusantium doloremque laudantium.
Veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas.
</p>
<div class="cs-flex">
<span class="cs-price">€500</span>
<a href="" class="cs-link">
Prenota Ora
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/arrow-gold.svg" alt="icona freccia" loading="lazy" width="20" height="20">
</a>
</div>
</li>
<li class="cs-item">
<h3 class="cs-h3">Standard</h3>
<p class="cs-item-text">
Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.natus error sitvoluptatem accusantium doloremque laudantium.
Veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas.
</p>
<div class="cs-flex">
<span class="cs-price">€500</span>
<a href="" class="cs-link">
Prenota Ora
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/arrow-gold.svg" alt="icona freccia" loading="lazy" width="20" height="20">
</a>
</div>
</li>
<li class="cs-item">
<h3 class="cs-h3">Premium</h3>
<p class="cs-item-text">
Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.natus error sitvoluptatem accusantium doloremque laudantium.
Veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas.
</p>
<div class="cs-flex">
<span class="cs-price">€500</span>
<a href="" class="cs-link">
Prenota Ora
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/arrow-gold.svg" alt="icona freccia" loading="lazy" width="20" height="20">
</a>
</div>
</li>
<li class="cs-item">
<h3 class="cs-h3">Elite</h3>
<p class="cs-item-text">
Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.natus error sitvoluptatem accusantium doloremque laudantium.
Veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas.
</p>
<div class="cs-flex">
<span class="cs-price">€500</span>
<a href="" class="cs-link">
Prenota Ora
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/arrow-gold.svg" alt="icona freccia" loading="lazy" width="20" height="20">
</a>
</div>
</li>
</ul>
</div>
<img class="cs-floater" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/flower12.png" alt="" loading="lazy" width="378" height="595">
</section>
CSS
/*-- -------------------------- -->
<--- Prezzi -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#pricing-2183 {
padding: var(--sectionPadding);
background-color: #FBF5F1;
overflow: hidden;
position: relative;
z-index: 1;
}
#pricing-2183 .cs-container {
width: 100%;
max-width: 36.5rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(3rem, 6vw, 4rem);
}
#pricing-2183 .cs-content {
text-align: center;
width: 100%;
max-width: 43.75rem;
display: flex;
flex-direction: column;
align-items: center;
}
#pricing-2183 .cs-card-group {
width: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
#pricing-2183 .cs-item {
list-style: none;
padding: clamp(2rem, 6vw, 3rem) 0;
border-bottom: 1px solid #E8E8E8;
display: flex;
flex-direction: column;
gap: clamp(1.5rem, 5vw, 3rem);
}
#pricing-2183 .cs-h3 {
font-size: clamp(1.9375rem, 5vw, 2.4375rem);
line-height: 1.2em;
font-weight: 700;
margin: 0;
color: var(--headerColor);
}
#pricing-2183 .cs-item-text {
font-size: clamp(0.875rem, 1.6vw, 1rem);
line-height: 1.5em;
width: 100%;
max-width: 37.875rem;
margin: 0;
color: var(--bodyTextColor);
}
#pricing-2183 .cs-flex {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
#pricing-2183 .cs-price {
font-size: clamp(2.4375rem, 6vw, 3.0625rem);
line-height: 1.2em;
font-weight: 700;
color: var(--headerColor);
}
#pricing-2183 .cs-link {
font-size: 1rem;
text-decoration: none;
line-height: 1.2em;
font-weight: 700;
margin: 0;
color: var(--primary);
display: flex;
justify-content: center;
align-items: center;
gap: 0.625rem;
}
#pricing-2183 .cs-icon {
width: 1.25rem;
height: auto;
display: block;
transition: transform 0.3s;
}
#pricing-2183 .cs-floater {
width: clamp(6.25rem, 15vw, 23.625rem);
height: auto;
display: block;
position: absolute;
top: 0.625rem;
left: 0;
z-index: -1;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#pricing-2183 .cs-container {
max-width: 80rem;
}
#pricing-2183 .cs-item {
padding-left: clamp(1.5rem, 3vw, 2.5rem);
padding-right: clamp(1.5rem, 3vw, 2.5rem);
flex-direction: row;
position: relative;
z-index: 1;
}
#pricing-2183 .cs-item:nth-of-type(2):before {
content: '';
width: 100%;
height: 100%;
background: var(--primary);
opacity: 0.1;
position: absolute;
display: block;
top: 0;
left: 0;
z-index: -1;
}
#pricing-2183 .cs-item:nth-of-type(2) .cs-h3,
#pricing-2183 .cs-item:nth-of-type(2) .cs-price {
color: var(--primary);
}
#pricing-2183 .cs-flex {
align-items: center;
}
#pricing-2183 .cs-h3 {
width: 30%;
max-width: 20.3125rem;
flex: none;
}
#pricing-2183 .cs-link:hover .cs-icon {
transform: translateX(0.5rem);
}
}