FileMaster
Search
Toggle Dark Mode
Home
/
.
/
backup
/
adm
/
scss
/
pages
Edit File: _my-profile.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; right: 2rem; z-index:1; .social{ background:rgba(239, 239, 239, 0.22); border:0; margin-right:1rem; } .btn{ font-size:1.125rem; font-weight:600; &:hover{ color:$white; } &.btn-light{ &:focus{ color:$white; } } } @include respond ('laptop'){ .btn{ font-size:0.7rem; } } @include respond ('tab-port'){ bottom:unset; top:3rem; } @include respond ('phone'){ right:0; padding:0 15px; .social{ margin-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; left:0; border-radius:1.25rem; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+39,000000+86&0.7+18,0.5+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 18%, rgba(0,0,0,0.65) 39%, rgba(0,0,0,0.53) 86%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 18%,rgba(0,0,0,0.65) 39%,rgba(0,0,0,0.53) 86%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0.7) 18%,rgba(0,0,0,0.65) 39%,rgba(0,0,0,0.53) 86%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */ } } .profile-pic{ margin-top: -9rem; position: relative; padding-left:6rem; img{ height:13.688rem; width:13.688rem; border-radius:1.25rem; border:0.5rem solid $white; margin-right:2rem; } .profile-info2{ color:$white; h2{ font-size:2.5rem; font-weight:600; color:$white; } h4{ font-size:1.5rem; font-weight:500; color:#B1C1C8; } } @include respond ('laptop'){ img{ height:7.688rem; width:7.688rem; } h2{ font-size:1.5rem!important; } h4{ font-size:1rem!important; } margin-top:-6rem; padding-left:1rem; } @include respond ('tab-port'){ margin-top:-8rem; align-items:center; img{ height:6.688rem; width:6.688rem; margin-right:1rem; border-width:3px; } h4{ font-size:0.7rem!important; } padding-left:1rem; padding-right:1rem; } } .contacts-social{ span{ i{ height:3.563rem; width:3.563rem; background:var(--primary); color:$white; border-radius:3.563rem; text-align: center; line-height: 3.563rem; font-size: 1.5rem; display: block; } } } .bg-facebook{ &.light{ background:rgba(71,113,213,0.15); &:hover{ background-color:#3d6adc; color:$white; .text-facebook{ color:$white; } } } } .bg-linkedin{ &.light{ background:rgba(14,121,179,0.15); &:hover{ background-color:#0073b1; color:$white; .text-linkedin{ color:$white; } } } } .bg-dribble{ &.light{ background:rgba(231,85,141,0.15); &:hover{ background-color:#EA4C89; color:$white; .text-dribble{ color:$white; } } } } .bg-youtube{ &.light{ background:rgba(251,14,14,0.15); &: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-right:35px; &:after{ position: absolute; content: ""; background-color: rgba(255, 255, 255, 0.7); top: -7px; left: 22px; width: 1px; height: 31px; } } .upload{ a{ height:4.313rem; width:4.313rem; border-radius:4.313rem; background:rgba(255,255,255,0.20); display: block; text-align: center; line-height: 4.313rem; font-size: 2rem; color: $white; } }
Save
Back