239 lines
6.6 KiB
SCSS
239 lines
6.6 KiB
SCSS
.team-profile{
|
|
background: hsl(220, 75%, 98%);
|
|
.single-profile{
|
|
|
|
// front
|
|
.single-profile-front{
|
|
|
|
// hover effect
|
|
position: relative;
|
|
top: 0;
|
|
backface-visibility: hidden;
|
|
transition: transform 0.5s linear;
|
|
transform: perspective(600px) rotateY(0deg);
|
|
// hover effect End
|
|
|
|
.profile-img{
|
|
overflow: hidden;
|
|
& img{
|
|
width: 100%;
|
|
margin-bottom: 30px;
|
|
@include transition(.4s);
|
|
border-bottom: 7px solid transparent;
|
|
transform:scale(1);
|
|
&:hover{
|
|
border-bottom: 7px solid $theme_color;
|
|
transform:scale(1.1) ;
|
|
-webkit-transform:scale(1.1);
|
|
-moz-transform:scale(1.1);
|
|
-ms-transform:scale(1.1);
|
|
-o-transform:scale(1.1);
|
|
}
|
|
}
|
|
}
|
|
.profile-caption{
|
|
overflow: hidden;
|
|
h4{
|
|
& a{
|
|
color: $heading-color;
|
|
font-size:25px;
|
|
font-weight: 600;
|
|
margin-bottom: 23px;
|
|
display: block;
|
|
&:hover{
|
|
color: $theme_color;
|
|
}
|
|
}
|
|
}
|
|
p{
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
// Back
|
|
.single-profile-back{
|
|
border: 4px solid $theme_color;
|
|
padding: 31px 32px 48px 52px;
|
|
@media #{$lg}{
|
|
padding: 20px;
|
|
}
|
|
@media #{$md}{
|
|
padding: 20px;
|
|
}
|
|
@media #{$xs}{
|
|
padding: 20px;
|
|
}
|
|
|
|
background: #fff;
|
|
overflow: hidden;
|
|
top: 0;
|
|
|
|
// hover effect
|
|
position: absolute;
|
|
transform: perspective(600px) rotateY(180deg);
|
|
backface-visibility: hidden;
|
|
overflow: hidden;
|
|
transition: transform 0.5s linear;
|
|
// hover effect End
|
|
|
|
|
|
& h2{
|
|
color: $heading-color;
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
line-height:1.3;
|
|
margin-bottom: 30px;
|
|
position: relative;
|
|
display: block;
|
|
padding-bottom: 29px;
|
|
&::before{
|
|
content: "";
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 4px;
|
|
background:$theme_color;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
& p{
|
|
margin-bottom:30px;
|
|
}
|
|
& a{
|
|
color: $heading-color;
|
|
&:hover{
|
|
color: $theme_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
//Last
|
|
.single-profile-front-last{
|
|
// hover effect End
|
|
position: absolute;
|
|
transform: perspective(600px) rotateY(180deg);
|
|
backface-visibility: hidden;
|
|
overflow: hidden;
|
|
transition: transform 0.5s linear;
|
|
|
|
.profile-img{
|
|
overflow: hidden;
|
|
& img{
|
|
width: 100%;
|
|
margin-bottom: 30px;
|
|
@include transition(.4s);
|
|
border-bottom: 7px solid transparent;
|
|
transform:scale(1);
|
|
&:hover{
|
|
border-bottom: 7px solid $theme_color;
|
|
transform:scale(1.1) ;
|
|
-webkit-transform:scale(1.1);
|
|
-moz-transform:scale(1.1);
|
|
-ms-transform:scale(1.1);
|
|
-o-transform:scale(1.1);
|
|
}
|
|
}
|
|
}
|
|
.profile-caption{
|
|
overflow: hidden;
|
|
h4{
|
|
& a{
|
|
color: $heading-color;
|
|
font-size:25px;
|
|
font-weight: 600;
|
|
margin-bottom: 23px;
|
|
display: block;
|
|
&:hover{
|
|
color: $theme_color;
|
|
}
|
|
}
|
|
}
|
|
p{
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
// Back
|
|
.single-profile-back-last{
|
|
border: 4px solid $theme_color;
|
|
padding: 31px 32px 48px 52px;
|
|
|
|
@media #{$lg}{
|
|
padding: 20px;
|
|
}
|
|
@media #{$xs}{
|
|
padding: 20px;
|
|
}
|
|
background: #fff;
|
|
overflow: hidden;
|
|
top: 0;
|
|
|
|
// hover effect
|
|
position: relative;
|
|
top: 0;
|
|
backface-visibility: hidden;
|
|
transition: transform 0.5s linear;
|
|
transform: perspective(600px) rotateY(0deg);
|
|
// hover effect End
|
|
|
|
|
|
& h2{
|
|
color: $heading-color;
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
line-height:1.3;
|
|
margin-bottom: 30px;
|
|
position: relative;
|
|
display: block;
|
|
padding-bottom: 29px;
|
|
&::before{
|
|
content: "";
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 4px;
|
|
background:$theme_color;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
& p{
|
|
margin-bottom:30px;
|
|
|
|
@media #{$lg}{
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
& a{
|
|
color: $heading-color;
|
|
&:hover{
|
|
color: $theme_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// First tow card
|
|
.single-profile:hover .single-profile-front{
|
|
transform: perspective(600px) rotateY(-180deg);
|
|
|
|
}
|
|
.single-profile:hover .single-profile-back{
|
|
transform: perspective(600px) rotateY(0deg);
|
|
}
|
|
|
|
|
|
// Last card.
|
|
.single-profile:hover .single-profile-front-last{
|
|
transform: perspective(600px) rotateY(0deg);
|
|
|
|
}
|
|
.single-profile:hover .single-profile-back-last{
|
|
transform: perspective(600px) rotateY(-180deg);
|
|
}
|