<article class="card-team">
<div class="card-team__thumbnail">
<div class="inner-box"><img src="https://source.unsplash.com/featured/?man" alt="" /></div>
<div class="inner-box rotated"><img src="https://source.unsplash.com/featured/?women" alt="" /></div>
</div>
<div class="card-team__content">
<h5>Bernard Bouchard</h5>
<h6>Responsable des ventes</h6>
<a href="tel:0033896457654">+33 896 786 765</a><br>
<a href="mailto:spam@xxl-organisation.fr">spam@xxl-organisation.fr</a>
</div>
</article>
<article class="card-team">
<div class="card-team__thumbnail">
<div class="inner-box">{{{card_team.thumbnail}}}</div>
<div class="inner-box rotated">{{{card_team.thumbnail_second}}}</div>
</div>
<div class="card-team__content">
<h5>{{card_team.name}}</h5>
<h6>{{card_team.role}}</h6>
<a href="tel:0033896457654">+33 896 786 765</a><br>
<a href="mailto:spam@xxl-organisation.fr">spam@xxl-organisation.fr</a>
</div>
</article>
{
"card_team": {
"thumbnail": "<img src=\"https://source.unsplash.com/featured/?man\" alt=\"\" />",
"thumbnail_second": "<img src=\"https://source.unsplash.com/featured/?women\" alt=\"\" />",
"name": "Bernard Bouchard",
"role": "Responsable des ventes"
}
}
.card-team {
&__thumbnail {
@include aspect-ratio(1, 1);
overflow: hidden;
max-width: 50%;
margin: 0 auto $margin-m;
> .inner-box {
> img {
width: 100%;
height: auto;
object-fit: cover;
top: 0;
left: 0;
}
border-radius: $border-radius-xl;
overflow: hidden;
transition: .3s ease;
}
.rotated {
transform: rotateY(180deg);
z-index: -1;
}
}
&.display-second {
&:hover {
.inner-box {
transform: rotateY(180deg);
}
.rotated {
transform: rotateY(0);
z-index: 0;
}
}
}
&__content {
text-align: center;
> h5, > h6 {
margin: 0;
font-size: 16px;
@include mediaWQuery($media-query-m) {
font-size: 18px;
}
}
> h5 {
font-size: 18px;
@include mediaWQuery($media-query-m) {
font-size: 20px;
}
}
> h6 {
color: $c-gray-60;
}
> a {
position: relative;
display: inline-block;
font-size: 16px;
font-family: $font-primary;
color: $c-gold-dark;
text-decoration: none;
margin-top: .3rem;
&::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background: $c-gold-light;
bottom: 0;
left: 0;
}
@include mediaWQuery($media-query-m) {
font-size: 18px;
}
}
}
@include mediaWQuery($media-query-s) {
display: flex;
flex-direction: row;
align-items: center;
&__thumbnail {
width: 140px;
max-width: none;
margin: 0 1rem 0 0;
}
&__content {
text-align: left;
}
}
}
There are no notes for this item.