AltoCode
Isasca Tripla

HTML
<!-- ============================================ -->
<!-- Side By Side Tripla -->
<!-- ============================================ -->
<section id="RTsbs-1594">
<div class="cs-container">
<div class="cs-image-group">
<picture class="cs-picture cs-picture1">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/models1.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/models1.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/models1.jpg" alt="modelle" width="413" height="500">
</picture>
<picture class="cs-picture cs-picture2">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/shoes2.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/shoes2.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/shoes2.jpg" alt="accessori" width="413" height="280">
</picture>
</div>
<div class="cs-content">
<span class="cs-topper">Chi Siamo</span>
<h2 class="cs-title">Un Guardaroba Accessibile che le Donne Possono Indossare</h2>
<p class="cs-text">
Immergiti nell’esaltante mondo della pesca con AltoWearing, un brand di abbigliamento
dinamico ed energico, pensato esclusivamente per chi vive per l’adrenalina della cattura.
Per i pescatori appassionati che sentono il battito accelerare al minimo
strattone sulla lenza, AltoWearing cattura l’essenza di quel momento mozzafiato
in cui pesce e pescatore si sfidano in una danza intensa di abilità e strategia.
</p>
<a href="" class="cs-button-solid">Scopri di Più</a>
</div>
</div>
</section>
<!-- ============================================ -->
<!-- Side By Side 2° -->
<!-- ============================================ -->
<section id="RTsbsr-1594">
<div class="cs-container">
<div class="cs-image-group">
<picture class="cs-picture cs-picture1">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/models1.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/models1.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/models1.jpg" alt="modelle" width="413" height="500">
</picture>
<picture class="cs-picture cs-picture2">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/shoes2.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/shoes2.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/shoes2.jpg" alt="accessori" width="413" height="280">
</picture>
</div>
<div class="cs-content">
<span class="cs-topper">Chi Siamo</span>
<h2 class="cs-title">Un Guardaroba Accessibile che le Donne Possono Indossare</h2>
<p class="cs-text">
Immergiti nell’esaltante mondo della pesca con AltoWearing, un brand di abbigliamento
dinamico ed energico, pensato esclusivamente per chi vive per l’adrenalina della cattura.
Per i pescatori appassionati che sentono il battito accelerare al minimo
strattone sulla lenza, AltoWearing cattura l’essenza di quel momento mozzafiato
in cui pesce e pescatore si sfidano in una danza intensa di abilità e strategia.
</p>
<a href="" class="cs-button-solid">Scopri di Più</a>
</div>
</div>
</section>
<!-- ============================================ -->
<!-- Side By Side 3° -->
<!-- ============================================ -->
<section id="RTsbst-1594">
<div class="cs-container">
<div class="cs-image-group">
<picture class="cs-picture cs-picture1">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/models1.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/models1.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/models1.jpg" alt="modelle" width="413" height="500">
</picture>
<picture class="cs-picture cs-picture2">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/shoes2.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/shoes2.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/ecommerce/shoes2.jpg" alt="accessori" width="413" height="280">
</picture>
</div>
<div class="cs-content">
<span class="cs-topper">Chi Siamo</span>
<h2 class="cs-title">Un Guardaroba Accessibile che le Donne Possono Indossare</h2>
<p class="cs-text">
Immergiti nell’esaltante mondo della pesca con AltoWearing, un brand di abbigliamento
dinamico ed energico, pensato esclusivamente per chi vive per l’adrenalina della cattura.
Per i pescatori appassionati che sentono il battito accelerare al minimo
strattone sulla lenza, AltoWearing cattura l’essenza di quel momento mozzafiato
in cui pesce e pescatore si sfidano in una danza intensa di abilità e strategia.
</p>
<a href="" class="cs-button-solid">Scopri di Più</a>
</div>
</div>
</section>
CSS
/*-- -------------------------- -->
<--- Side By Side -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#RTsbs-1594,
#RTsbsr-1594,
#RTsbst-1594 {
padding: var(--sectionPadding);
}
#RTsbs-1594 .cs-container,
#RTsbsr-1594 .cs-container,
#RTsbst-1594 .cs-container {
width: 100%;
max-width: 34.375rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(3rem, 6vw, 4rem);
}
#RTsbs-1594 .cs-content,
#RTsbsr-1594 .cs-content,
#RTsbst-1594 .cs-content {
text-align: left;
width: 100%;
max-width: 36.625rem;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#RTsbs-1594 .cs-text,
#RTsbsr-1594 .cs-text,
#RTsbst-1594 .cs-text {
margin-bottom: 1rem;
}
#RTsbs-1594 .cs-text:last-of-type,
#RTsbsr-1594 .cs-text:last-of-type,
#RTsbst-1594 .cs-text:last-of-type {
margin-bottom: 2rem;
}
#RTsbs-1594 .cs-button-solid,
#RTsbsr-1594 .cs-button-solid,
#RTsbst-1594 .cs-button-solid {
font-size: 1rem;
line-height: clamp(2.875rem, 5.5vw, 3.5rem);
text-decoration: none;
font-weight: 700;
text-align: center;
margin: 0;
color: #fff;
min-width: 9.375rem;
padding: 0 3rem;
background-color: var(--primary);
display: inline-block;
position: relative;
z-index: 1;
box-sizing: border-box;
}
#RTsbs-1594 .cs-button-solid:before,
#RTsbsr-1594 .cs-button-solid:before,
#RTsbst-1594 .cs-button-solid:before {
content: '';
position: absolute;
height: 100%;
width: 0%;
background: #000;
opacity: 1;
top: 0;
left: 0;
z-index: -1;
transition: width .3s;
}
#RTsbs-1594 .cs-button-solid:hover:before,
#RTsbsr-1594 .cs-button-solid:hover:before,
#RTsbst-1594 .cs-button-solid:hover:before {
width: 100%;
}
#RTsbs-1594 .cs-image-group,
#RTsbsr-1594 .cs-image-group,
#RTsbst-1594 .cs-image-group {
font-size: min(1.959vw, .745em);
width: 39.375em;
min-height: 39.25em;
display: block;
position: relative;
z-index: 1;
}
#RTsbs-1594 .cs-picture,
#RTsbsr-1594 .cs-picture,
#RTsbst-1594 .cs-picture {
position: absolute;
}
#RTsbs-1594 .cs-picture img,
#RTsbsr-1594 .cs-picture img,
#RTsbst-1594 .cs-picture img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
#RTsbs-1594 .cs-picture1,
#RTsbsr-1594 .cs-picture1,
#RTsbst-1594 .cs-picture1 {
width: 25.8125em;
height: 79.617834%;
top: 0;
left: 0;
z-index: -1;
}
#RTsbs-1594 .cs-picture2,
#RTsbsr-1594 .cs-picture2,
#RTsbst-1594 .cs-picture2 {
width: 25.8125em;
height: 44.585987%;
bottom: 0;
right: 0;
z-index: 10;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#RTsbs-1594 .cs-container,
#RTsbsr-1594 .cs-container,
#RTsbst-1594 .cs-container {
max-width: 80rem;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
}
#RTsbs-1594 .cs-content,
#RTsbsr-1594 .cs-content,
#RTsbst-1594 .cs-content {
padding: 3.75rem 0;
align-self: center;
}
#RTsbs-1594 .cs-image-group,
#RTsbsr-1594 .cs-image-group,
#RTsbst-1594 .cs-image-group {
font-size: min(1.2vw, 1em);
flex: none;
}
}
/*-- -------------------------- -->
<--- Side By Side Reversed -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#RTsbsr-1594 {
background-color: #f7f7f7;
}
#RTsbsr-1594 .cs-picture1 {
left: auto;
right: 0;
}
#RTsbsr-1594 .cs-picture2 {
right: auto;
left: 0;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#RTsbsr-1594 .cs-image-group {
order: 2;
}
}