AltoCode
Maccastorna Reversed
HTML
<!-- ============================================ -->
<!-- Side By Side -->
<!-- ============================================ -->
<section id="sbsr-1566">
<div class="cs-container">
<picture class="cs-picture">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/model.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/model.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/model.jpg" alt="modella" width="586" height="752">
</picture>
<div class="cs-content">
<span class="cs-topper">Chi Siamo</span>
<h2 class="cs-title">Un Guardaroba Accessibile che le Donne possono Indossare e Costruire nel Tempo</h2>
<ul class="cs-card-group">
<li class="cs-li">
<picture class="cs-li-picture">
<img class="cs-li-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/price-tag.svg" decoding="async" alt="icona grafica" width="32" height="32" loading="lazy">
</picture>
<div class="cs-flex">
<h3 class="cs-h3">Sconto Membri</h3>
<p class="cs-li-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Ipsum accusantium fuga dolore nulla provident inventore possimus,
incidunt, tenetur voluptate laudantium consequuntur commodi.
</p>
</div>
</li>
<li class="cs-li">
<picture class="cs-li-picture">
<img class="cs-li-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/sheild.svg" decoding="async" alt="icona grafica" width="32" height="32" loading="lazy">
</picture>
<div class="cs-flex">
<h3 class="cs-h3">Pagamento Sicuro</h3>
<p class="cs-li-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Ipsum accusantium fuga dolore nulla provident inventore possimus,
incidunt, tenetur voluptate laudantium consequuntur commodi.
</p>
</div>
</li>
<li class="cs-li">
<picture class="cs-li-picture">
<img class="cs-li-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/bag.svg" decoding="async" alt="icona grafica" width="32" height="32" loading="lazy">
</picture>
<div class="cs-flex">
<h3 class="cs-h3">Acquista in Tutta Sicurezza</h3>
<p class="cs-li-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Ipsum accusantium fuga dolore nulla provident inventore possimus,
incidunt, tenetur voluptate laudantium consequuntur commodi.
</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- ============================================ -->
<!-- Loghi -->
<!-- ============================================ -->
<div id="logos-1566">
<div class="cs-container">
<span class="cs-header">Acquista per Brand</span>
<div class="cs-logo-group">
<picture class="cs-picture">
<img class="cs-logo" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Logos/logo6.png" alt="logo" width="287" height="65" loading="lazy" decoding="async">
</picture>
<picture class="cs-picture">
<img class="cs-logo" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Logos/logo2.png" alt="logo" width="229" height="55" loading="lazy" decoding="async">
</picture>
<picture class="cs-picture">
<img class="cs-logo" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Logos/logo3.png" alt="logo" width="235" height="53" loading="lazy" decoding="async">
</picture>
<picture class="cs-picture">
<img class="cs-logo" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Logos/logo4.png" alt="logo" width="228" height="61" loading="lazy" decoding="async">
</picture>
<picture class="cs-picture">
<img class="cs-logo" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Logos/logo5.png" alt="logo" width="228" height="61" loading="lazy" decoding="async">
</picture>
</div>
</div>
<picture class="cs-background">
<img src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/waves-side.svg" alt="" width="1920" height="300" loading="lazy" decoding="async">
</picture>
</div>
CSS
/*-- -------------------------- -->
<--- Side By Side Reversed -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#sbsr-1566 {
padding: var(--sectionPadding);
position: relative;
z-index: 2;
}
#sbsr-1566 .cs-container {
width: 100%;
max-width: 34.375rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(3rem, 6vw, 4rem);
position: relative;
}
#sbsr-1566 .cs-content {
text-align: left;
width: 100%;
max-width: 39.375rem;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#sbsr-1566 .cs-title {
margin: 0 0 clamp(1.75rem, 3vw, 2.5rem) 0;
}
#sbsr-1566 .cs-text {
margin-bottom: 1rem;
}
#sbsr-1566 .cs-text:last-of-type {
margin-bottom: 2rem;
}
#sbsr-1566 .cs-card-group {
width: 100%;
max-width: 39.375rem;
margin: 0;
padding: 0;
display: flex;
align-items: flex-start;
flex-direction: column;
gap: clamp(1.75rem, 4vw, 2.5rem);
}
#sbsr-1566 .cs-li {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: clamp(1rem, 2.5vw, 1.25rem);
}
#sbsr-1566 .cs-li-picture {
width: clamp(3.75rem, 7vw, 5rem);
height: clamp(3.75rem, 7vw, 5rem);
margin: 0;
border-radius: 50%;
background-color: #fff;
border: 1px solid var(--primary);
box-sizing: border-box;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex: none;
position: relative;
z-index: 1;
}
#sbsr-1566 .cs-li-picture:before {
content: '';
width: 100%;
height: 100%;
background: var(--primary);
opacity: .1;
position: absolute;
display: block;
top: 0;
left: 0;
z-index: -1;
}
#sbsr-1566 .cs-li-icon {
width: clamp(1.5rem, 3vw, 2.25rem);
height: auto;
display: block;
}
#sbsr-1566 .cs-h3 {
font-size: 1.25rem;
line-height: 1.2em;
font-weight: 700;
text-align: left;
margin: 0 0 0.5rem 0;
color: var(--headerColor);
}
#sbsr-1566 .cs-li-text {
font-size: 1rem;
line-height: 1.5em;
text-align: left;
margin: 0;
color: var(--bodyTextColor);
}
#sbsr-1566 .cs-picture {
width: 100%;
max-width: 36.625rem;
height: 100vw;
min-height: 22.5rem;
max-height: 37.5rem;
display: block;
position: relative;
z-index: 1;
}
#sbsr-1566 .cs-picture img {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#sbsr-1566 {
padding-bottom: 0;
}
#sbsr-1566 .cs-container {
max-width: 80rem;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
position: relative;
}
#sbsr-1566 .cs-content {
width: 50%;
padding-bottom: clamp(5rem, 7vw, 7rem);
}
#sbsr-1566 .cs-picture {
height: auto;
min-height: clamp(40rem, 70vw, 47rem);
max-height: 100%;
width: 42%;
margin-bottom: calc(clamp(5rem, 7vw, 7rem)*-1);
order: 2;
}
}
/*-- -------------------------- -->
<--- Loghi -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#logos-1566 {
padding: var(--sectionPadding);
background-color: #1a1a1a;
position: relative;
z-index: 1;
}
#logos-1566 .cs-container {
width: 100%;
max-width: 80rem;
margin: auto;
}
#logos-1566 .cs-header {
font-size: 1.5625rem;
text-align: center;
font-weight: 700;
line-height: 1.2em;
margin: 0;
color: var(--bodyTextColorWhite);
display: block;
}
#logos-1566 .cs-logo-group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
column-gap: 2.5rem;
}
#logos-1566 .cs-picture {
width: clamp(7.5rem, 12vw, 12.25rem);
height: clamp(4.5rem, 12vw, 8.375rem);
display: flex;
justify-content: center;
align-items: center;
}
#logos-1566 .cs-logo {
width: 100%;
height: auto;
margin: 0;
display: block;
object-fit: contain;
}
#logos-1566 .cs-background {
width: 100%;
height: 100%;
max-height: 40.625rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#logos-1566 .cs-background img {
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
left: 0;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#logos-1566 {
padding-top: clamp(10.625rem, 17vw, 12rem);
}
#logos-1566 .cs-logo-group {
justify-content: space-between;
flex-wrap: nowrap;
}
}