AltoCode
Stroppo Reversed
HTML
<!-- ============================================ -->
<!-- Side By Side Reversed -->
<!-- ============================================ -->
<section id="sbsr-1983">
<div class="cs-container">
<div class="cs-content">
<span class="cs-topper">Cura Dentale per Tutti</span>
<h2 class="cs-title">Sorrisi più Luminosi e Sani sono la Nostra Passione</h2>
<p class="cs-text">
Orci eu lobortis elementum nibh tellus. Vulputate eu scelerisque felis
imperdiet proin fermentum leo vel. Luctus accumsan tortor posuere ac
ut consequat semper. Et pharetra pharetra massa massa ultricies mi quis.
</p>
<ul class="cs-ul">
<li class="cs-li">
<img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/teal-check.svg" alt="" width="20" height="20">
Il nostro obiettivo è il tuo benessere generale.
</li>
<li class="cs-li">
<img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/teal-check.svg" alt="" width="20" height="20">
Forniamo cure dentali di alta qualità.
</li>
<li class="cs-li">
<img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/teal-check.svg" alt="" width="20" height="20">
Terapie innovative e dentisti qualificati.
</li>
</ul>
<a href="" class="cs-button-solid">Inizia Ora</a>
</div>
<div class="cs-image-group">
<picture class="cs-picture">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/smile1.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/smile1.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/smile1.jpg" alt="sorriso" width="547" height="180">
</picture>
<picture class="cs-picture">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/smile2.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/smile2.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/smile2.jpg" alt="sorriso" width="547" height="180">
</picture>
<picture class="cs-picture">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/smile3.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/smile3.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/smile3.jpg" alt="sorriso" width="547" height="180">
</picture>
</div>
</div>
</section>
CSS
/*-- -------------------------- -->
<--- Side By Side Reversed -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#sbsr-1983 {
padding: var(--sectionPadding);
overflow: hidden;
position: relative;
z-index: 1;
}
#sbsr-1983:before {
content: '';
width: 100%;
height: 100%;
background-color: var(--primary);
opacity: 0.05;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#sbsr-1983 .cs-container {
width: 100%;
max-width: 44rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(3rem, 6vw, 4rem);
position: relative;
z-index: 1;
}
#sbsr-1983 .cs-content {
text-align: left;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#sbsr-1983 .cs-text {
margin-bottom: 1.5rem;
}
#sbsr-1983 .cs-ul {
margin: 0 0 2rem 0;
padding-left: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
#sbsr-1983 .cs-li {
font-size: 1rem;
line-height: 1.5em;
list-style: none;
margin: 0;
color: var(--bodyTextColor);
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0.75rem;
position: relative;
}
#sbsr-1983 .cs-icon {
width: 1.25rem;
height: auto;
display: block;
}
#sbsr-1983 .cs-button-solid {
font-size: 1rem;
font-weight: 700;
line-height: clamp(2.875rem, 5.5vw, 3.5rem);
text-decoration: none;
margin: 0;
padding: 0 clamp(2rem, 4vw, 3rem);
background-color: var(--primary);
overflow: hidden;
color: #fff;
border-radius: 0.5rem;
display: inline-block;
position: relative;
z-index: 1;
transition: color 0.3s;
}
#sbsr-1983 .cs-button-solid:before {
content: "";
width: 0%;
height: 100%;
background: #1a1a1a;
opacity: 1;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: width 0.3s;
}
#sbsr-1983 .cs-button-solid:hover {
color: #fff;
}
#sbsr-1983 .cs-button-solid:hover:before {
width: 100%;
}
#sbsr-1983 .cs-image-group {
font-size: min(2.7vw, 1rem);
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: stretch;
order: -1;
row-gap: 1em;
}
#sbsr-1983 .cs-picture {
width: 90%;
height: 11.25em;
box-sizing: border-box;
background-color: #DAB692;
overflow: hidden;
border-radius: 1rem;
grid-column: span 12;
display: block;
z-index: 2;
}
#sbsr-1983 .cs-picture:nth-of-type(even) {
margin-left: auto;
}
#sbsr-1983 .cs-picture:hover img {
transform: scale(1.1);
}
#sbsr-1983 .cs-picture img {
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
left: 0;
transition: transform 0.7s;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#sbsr-1983 .cs-container {
max-width: 80rem;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}
#sbsr-1983 .cs-content {
width: 43vw;
max-width: 39.375rem;
padding: 4rem 0;
align-self: center;
}
#sbsr-1983 .cs-image-group {
width: 47vw;
height: 100%;
min-height: 35.75rem;
max-width: 35.125rem;
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
#sbsr-1983 .cs-picture {
height: auto;
}
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
#sbsr-1983 .cs-content {
width: 100%;
}
}