247 lines
3.7 KiB
SCSS
247 lines
3.7 KiB
SCSS
.profile-back{
|
|
position:relative;
|
|
img{
|
|
width:100%;
|
|
height:25rem;
|
|
object-fit: cover;
|
|
border-radius: 1.25rem;
|
|
@include respond ('phone'){
|
|
height:20rem;
|
|
}
|
|
}
|
|
.social-btn{
|
|
position:absolute;
|
|
bottom: 3rem;
|
|
#{$dlab-pos-right}: 2rem;
|
|
z-index:1;
|
|
.social{
|
|
background:rgba(239, 239, 239, 0.22);
|
|
border:0;
|
|
color: $white;
|
|
margin-#{$dlab-pos-right}:1rem;
|
|
|
|
|
|
}
|
|
.btn{
|
|
&:hover{
|
|
color:$white;
|
|
}
|
|
|
|
&.btn-light{
|
|
&:focus{
|
|
color:$white;
|
|
}
|
|
}
|
|
|
|
}
|
|
@include respond ('tab-port'){
|
|
bottom:unset;
|
|
top:2rem;
|
|
}
|
|
@include respond ('phone'){
|
|
#{$dlab-pos-right}:0;
|
|
padding:0 15px;
|
|
.social{
|
|
margin-#{$dlab-pos-right}:0.2rem;
|
|
margin-bottom:0.5rem;
|
|
}
|
|
}
|
|
.btn.btn-primary{
|
|
@include respond ('phone'){
|
|
margin-bottom:0.5rem;
|
|
}
|
|
}
|
|
|
|
}
|
|
&:after{
|
|
position:absolute;
|
|
content:"";
|
|
height:100%;
|
|
width:100%;
|
|
top:0;
|
|
#{$dlab-pos-left}:0;
|
|
border-radius:1.25rem;
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.57) 100%);
|
|
}
|
|
|
|
}
|
|
.profile-pic{
|
|
margin-top: -9rem;
|
|
position: relative;
|
|
padding-#{$dlab-pos-left}:3rem;
|
|
img{
|
|
height: 11.688rem;
|
|
width: 11.688rem;
|
|
border-radius:1.25rem;
|
|
border:0.5rem solid $white;
|
|
margin-#{$dlab-pos-right}:1.5rem;
|
|
}
|
|
.profile-info2{
|
|
color:$white;
|
|
padding-top: 1rem;
|
|
h2{
|
|
font-size:2rem;
|
|
font-weight:600;
|
|
color:$white;
|
|
@include respond ('phone'){
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
h4{
|
|
font-size:1rem;
|
|
font-weight:500;
|
|
color:rgba($white,.8);
|
|
@include respond ('phone'){
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include respond ('tab-port'){
|
|
margin-top:-8rem;
|
|
align-items:center;
|
|
img{
|
|
height:6.688rem;
|
|
width:6.688rem;
|
|
margin-#{$dlab-pos-right}:1rem;
|
|
border-width:3px;
|
|
}
|
|
.profile-info2{
|
|
padding-top: 0;
|
|
}
|
|
padding-#{$dlab-pos-left}:1rem;
|
|
padding-#{$dlab-pos-right}:1rem;
|
|
}
|
|
@include respond ('phone'){
|
|
margin-top:-6.7rem;
|
|
img {
|
|
height: 5.688rem;
|
|
width: 5.688rem;
|
|
border-width: 2px;
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
.contacts-social{
|
|
span{
|
|
i{
|
|
height: 2.563rem;
|
|
width: 2.563rem;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
border-radius: 2.563rem;
|
|
text-align: center;
|
|
line-height: 2.563rem;
|
|
font-size: 1rem;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
.bg-facebook{
|
|
&.light{
|
|
background:rgba(71,113,213,0.15);
|
|
color: var(--text-dark);
|
|
|
|
&:hover{
|
|
background-color:#3d6adc;
|
|
color:$white;
|
|
|
|
.text-facebook{
|
|
color:$white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bg-linkedin{
|
|
&.light{
|
|
background:rgba(14,121,179,0.15);
|
|
color: var(--text-dark);
|
|
|
|
&:hover{
|
|
background-color:#0073b1;
|
|
color:$white;
|
|
|
|
.text-linkedin{
|
|
color:$white;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.bg-dribble{
|
|
&.light{
|
|
background:rgba(231,85,141,0.15);
|
|
color: var(--text-dark);
|
|
&:hover{
|
|
background-color:#EA4C89;
|
|
color:$white;
|
|
.text-dribble{
|
|
color:$white;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.bg-youtube{
|
|
&.light{
|
|
background:rgba(251,14,14,0.15);
|
|
color: var(--text-dark);
|
|
&:hover{
|
|
background-color:#FF0000;
|
|
color:$white;
|
|
|
|
.text-youtube{
|
|
color:$white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.text-facebook{
|
|
color:#3D6AD6;
|
|
|
|
|
|
}
|
|
.text-linkedin{
|
|
color:#0073B1;
|
|
}
|
|
.text-dribble{
|
|
color:#EA4C89;
|
|
}
|
|
.text-youtube{
|
|
color:#FF0000;
|
|
}
|
|
.text-youtube,
|
|
.text-linkedin,
|
|
.text-facebook,
|
|
.text-dribble{
|
|
position:relative;
|
|
margin-#{$dlab-pos-right}:35px;
|
|
|
|
&:after{
|
|
|
|
position: absolute;
|
|
content: "";
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
top: -7px;
|
|
#{$dlab-pos-left}: 22px;
|
|
width: 1px;
|
|
height: 31px;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.upload{
|
|
a{
|
|
height: 3.313rem;
|
|
width: 3.313rem;
|
|
border-radius: 2.313rem;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
display: block;
|
|
text-align: center;
|
|
line-height: 3.313rem;
|
|
font-size: 1.5rem;
|
|
color: #fff;
|
|
}
|
|
} |