431 lines
11 KiB
SCSS
431 lines
11 KiB
SCSS
|
@use '../utils' as *;
|
||
|
|
|
||
|
|
/*----------------------------------------*/
|
||
|
|
/* 07. TEAM CSS
|
||
|
|
/*----------------------------------------*/
|
||
|
|
|
||
|
|
|
||
|
|
.tp-team {
|
||
|
|
$main: &;
|
||
|
|
|
||
|
|
&__overlay {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
background-image: -moz-linear-gradient(90deg, rgba(0, 5, 14, 0.8) 0%, rgba(0, 5, 14, 0.54) 32%, rgba(0, 5, 14, 0) 100%);
|
||
|
|
background-image: -webkit-linear-gradient(90deg, rgba(0, 5, 14, 0.8) 0%, rgba(0, 5, 14, 0.54) 32%, rgba(0, 5, 14, 0) 100%);
|
||
|
|
background-image: -ms-linear-gradient(90deg, rgba(0, 5, 14, 0.8) 0%, rgba(0, 5, 14, 0.54) 32%, rgba(0, 5, 14, 0) 100%);
|
||
|
|
@include transition(.3s);
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__member {
|
||
|
|
&:hover {
|
||
|
|
& {
|
||
|
|
#{$main} {
|
||
|
|
&__info {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
&__social {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
&__img {
|
||
|
|
& img {
|
||
|
|
transform: scale(1.05, 1.05);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__overlay {
|
||
|
|
&::after {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__img {
|
||
|
|
& img {
|
||
|
|
@include transition(.3s);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__info {
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 10px;
|
||
|
|
z-index: 1;
|
||
|
|
color: var(--tp-common-white);
|
||
|
|
@include transition(.3s)
|
||
|
|
}
|
||
|
|
|
||
|
|
&__name {
|
||
|
|
font-size: 18px;
|
||
|
|
color: var(--tp-common-white);
|
||
|
|
line-height: 1;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__social {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
transform: translateY(100%);
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
z-index: 3;
|
||
|
|
background-color: var(--tp-theme-primary);
|
||
|
|
z-index: 2;
|
||
|
|
padding: 15px 0;
|
||
|
|
opacity: 0;
|
||
|
|
@include transition(.3s);
|
||
|
|
|
||
|
|
& span {
|
||
|
|
margin: 0 5px;
|
||
|
|
|
||
|
|
& a {
|
||
|
|
@include square-btn(40px,$circle:true);
|
||
|
|
display: inline-block;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 36px;
|
||
|
|
color: var(--tp-common-white);
|
||
|
|
border: 2px solid;
|
||
|
|
border-color: rgba($color: #fff, $alpha: .3);
|
||
|
|
&:hover {
|
||
|
|
background-color: var(--tp-common-white);
|
||
|
|
color: var(--tp-theme-primary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tp-team-2 {
|
||
|
|
$main: &;
|
||
|
|
|
||
|
|
&__overlay {
|
||
|
|
&::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
background-image: -moz-linear-gradient(90deg, rgb(0, 5, 14) 0%, rgba(0, 5, 14, 0.68) 32%, rgba(0, 5, 14, 0) 100%);
|
||
|
|
background-image: -webkit-linear-gradient(90deg, rgb(0, 5, 14) 0%, rgba(0, 5, 14, 0.68) 32%, rgba(0, 5, 14, 0) 100%);
|
||
|
|
background-image: -ms-linear-gradient(90deg, rgb(0, 5, 14) 0%, rgba(0, 5, 14, 0.68) 32%, rgba(0, 5, 14, 0) 100%);
|
||
|
|
@include transition(.3s);
|
||
|
|
opacity: 0;
|
||
|
|
border-radius: 6px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__member {
|
||
|
|
&:hover {
|
||
|
|
& {
|
||
|
|
#{$main} {
|
||
|
|
&__social {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
&__img {
|
||
|
|
& img {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__overlay {
|
||
|
|
&::after {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__img {
|
||
|
|
& img {
|
||
|
|
@include transition(.3s);
|
||
|
|
border-radius: 6px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__info {
|
||
|
|
padding-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__name {
|
||
|
|
font-size: 20px;
|
||
|
|
line-height: 1;
|
||
|
|
margin-bottom: 0;
|
||
|
|
|
||
|
|
& a {
|
||
|
|
&:hover {
|
||
|
|
color: var(--tp-theme-primary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__social {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 20px;
|
||
|
|
transform: translateY(100%);
|
||
|
|
width: 100%;
|
||
|
|
left: 25px;
|
||
|
|
z-index: 2;
|
||
|
|
opacity: 0;
|
||
|
|
@include transition(.3s);
|
||
|
|
& span {
|
||
|
|
margin-right: 10px;
|
||
|
|
|
||
|
|
& a {
|
||
|
|
@include square-btn(40px);
|
||
|
|
border-radius: 4px;
|
||
|
|
line-height: 36px;
|
||
|
|
display: inline-block;
|
||
|
|
text-align: center;
|
||
|
|
color: var(--tp-common-white);
|
||
|
|
border: 2px solid;
|
||
|
|
border-color: rgba($color: #fff, $alpha: .1);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: var(--tp-common-white);
|
||
|
|
color: var(--tp-theme-primary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__ratting {
|
||
|
|
color: #faa423;
|
||
|
|
}
|
||
|
|
&__pro{
|
||
|
|
color: var(--tp-text-2);
|
||
|
|
display: inline-block;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.teacher{
|
||
|
|
&__item{
|
||
|
|
@include border-radius(6px);
|
||
|
|
padding: 30px;
|
||
|
|
&:hover{
|
||
|
|
background: var(--tp-common-white);
|
||
|
|
@include box-shadow(0px 30px 40px 0px rgba(1, 11, 60, 0.1));
|
||
|
|
|
||
|
|
& .teacher__thumb{
|
||
|
|
& img{
|
||
|
|
@include transform(scale(1.1));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__content{
|
||
|
|
padding-top: 25px;
|
||
|
|
& span{
|
||
|
|
font-size: 16px;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__title{
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 20px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
&__social{
|
||
|
|
& ul{
|
||
|
|
& li{
|
||
|
|
display: inline-block;
|
||
|
|
margin: 0 5px;
|
||
|
|
& a{
|
||
|
|
display: inline-block;
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
line-height: 36px;
|
||
|
|
font-size: 13px;
|
||
|
|
text-align: center;
|
||
|
|
border: 2px solid red;
|
||
|
|
@include border-radius(4px);
|
||
|
|
color: var(var(--tp-common-black));
|
||
|
|
&:hover{
|
||
|
|
background: var(--tp-theme-primary);
|
||
|
|
color: var(--tp-common-white);
|
||
|
|
border-color: red;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-2{
|
||
|
|
@media #{$sm}{
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
@media #{$xs}{
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
& h4{
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 500;
|
||
|
|
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
& ul{
|
||
|
|
& li{
|
||
|
|
display: inline-block;
|
||
|
|
& a{
|
||
|
|
font-size: 14px;
|
||
|
|
color: #898a93;
|
||
|
|
margin: 2px;
|
||
|
|
&:hover{
|
||
|
|
color: var(--tp-theme-primary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__rating{
|
||
|
|
@media #{$sm}{
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
@media #{$xs}{
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
& span{
|
||
|
|
font-size: 16px;
|
||
|
|
& i{
|
||
|
|
padding-right: 5px;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& h5{
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
& ul{
|
||
|
|
& li{
|
||
|
|
display: inline-block;
|
||
|
|
& a{
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--tp-theme-secondary);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-inner{
|
||
|
|
& p{
|
||
|
|
font-size: 16px;
|
||
|
|
color: var(var(--tp-common-black));
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 0;
|
||
|
|
padding-left: 3px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__info{
|
||
|
|
@media #{$sm}{
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
@media #{$xs}{
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
& h4{
|
||
|
|
font-size: 40px;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
& span{
|
||
|
|
font-size: 16px;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__follow{
|
||
|
|
&-btn{
|
||
|
|
display: inline-block;
|
||
|
|
height: 40px;
|
||
|
|
line-height: 40px;
|
||
|
|
text-align: center;
|
||
|
|
padding: 0 25px;
|
||
|
|
border: 2px solid #eef0f6;
|
||
|
|
@include border-radius(4px);
|
||
|
|
color: var(var(--tp-common-black));
|
||
|
|
font-weight: 16px;
|
||
|
|
font-weight: 500;
|
||
|
|
text-transform: capitalize;
|
||
|
|
background: var(--tp-common-white);
|
||
|
|
&:hover{
|
||
|
|
background-color: var(--tp-theme-primary);
|
||
|
|
color: var(--tp-common-white);
|
||
|
|
border-color: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__top{
|
||
|
|
padding-bottom: 20px;
|
||
|
|
border-bottom: 1px solid #e8eaf0;
|
||
|
|
}
|
||
|
|
&__bio{
|
||
|
|
padding-bottom: 50px;
|
||
|
|
padding-top: 35px;
|
||
|
|
border-bottom: 1px solid #e8eaf0;
|
||
|
|
& h3{
|
||
|
|
font-size: 20px;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
& p{
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 26px;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__courses{
|
||
|
|
& .section__title{
|
||
|
|
font-size: 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__details{
|
||
|
|
&-thumb{
|
||
|
|
& img{
|
||
|
|
@include border-radius(6px);
|
||
|
|
}
|
||
|
|
@media #{$md}{
|
||
|
|
margin-bottom: 50px;
|
||
|
|
}
|
||
|
|
@media #{$sm}{
|
||
|
|
margin-bottom: 50px;
|
||
|
|
}
|
||
|
|
@media #{$xs}{
|
||
|
|
margin-bottom: 50px;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-shape{
|
||
|
|
& img{
|
||
|
|
position: absolute;
|
||
|
|
z-index: -1;
|
||
|
|
width: auto;
|
||
|
|
&.teacher-details-shape-1{
|
||
|
|
right: 0px;
|
||
|
|
bottom: 70px;
|
||
|
|
}
|
||
|
|
&.teacher-details-shape-2{
|
||
|
|
left: -27px;
|
||
|
|
top: 55px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|