|
.about { |
|
$cubic: cubic-bezier(0.64, 0.01, 0.07, 1.65); |
|
$transition: 0.6s $cubic; |
|
$size: 40px; |
|
position: fixed; |
|
z-index: 10; |
|
bottom: 10px; |
|
right: 10px; |
|
width: $size; |
|
height: $size; |
|
display: flex; |
|
justify-content: flex-end; |
|
align-items: flex-end; |
|
transition: all 0.2s ease; |
|
|
|
.bg_links { |
|
width: $size; |
|
height: $size; |
|
border-radius: 100%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
background-color: rgba(#fff, 0.2); |
|
border-radius: 100%; |
|
backdrop-filter: blur(5px); |
|
position: absolute; |
|
} |
|
|
|
.logo { |
|
width: $size; |
|
height: $size; |
|
z-index: 9; |
|
background-image: url(https://rafaelalucas91.github.io/assets/codepen/logo_white.svg); |
|
background-size: 50%; |
|
background-repeat: no-repeat; |
|
background-position: 10px 7px; |
|
opacity: 0.9; |
|
transition: all 1s 0.2s ease; |
|
bottom: 0; |
|
right: 0; |
|
} |
|
|
|
.social { |
|
opacity: 0; |
|
right: 0; |
|
bottom: 0; |
|
|
|
.icon { |
|
width: 100%; |
|
height: 100%; |
|
background-size: 20px; |
|
background-repeat: no-repeat; |
|
background-position: center; |
|
background-color: transparent; |
|
display: flex; |
|
transition: all 0.2s ease, background-color 0.4s ease; |
|
opacity: 0; |
|
border-radius: 100%; |
|
} |
|
|
|
&.portfolio { |
|
transition: all 0.8s ease; |
|
|
|
.icon { |
|
background-image: url(https://rafaelalucas91.github.io/assets/codepen/link.svg); |
|
} |
|
} |
|
|
|
&.dribbble { |
|
transition: all 0.3s ease; |
|
.icon { |
|
background-image: url(https://rafaelalucas91.github.io/assets/codepen/dribbble.svg); |
|
} |
|
} |
|
|
|
&.linkedin { |
|
transition: all 0.8s ease; |
|
.icon { |
|
background-image: url(https://rafaelalucas91.github.io/assets/codepen/linkedin.svg); |
|
} |
|
} |
|
} |
|
|
|
&:hover { |
|
width: 105px; |
|
height: 105px; |
|
transition: all $transition; |
|
|
|
.logo { |
|
opacity: 1; |
|
transition: all 0.6s ease; |
|
} |
|
|
|
.social { |
|
opacity: 1; |
|
|
|
.icon { |
|
opacity: 0.9; |
|
} |
|
|
|
&:hover { |
|
background-size: 28px; |
|
.icon { |
|
background-size: 65%; |
|
opacity: 1; |
|
} |
|
} |
|
|
|
&.portfolio { |
|
right: 0; |
|
bottom: calc(100% - 40px); |
|
transition: all 0.3s 0s $cubic; |
|
.icon { |
|
&:hover { |
|
background-color: #698fb7; |
|
} |
|
} |
|
} |
|
|
|
&.dribbble { |
|
bottom: 45%; |
|
right: 45%; |
|
transition: all 0.3s 0.15s $cubic; |
|
.icon { |
|
&:hover { |
|
background-color: #ea4c89; |
|
} |
|
} |
|
} |
|
|
|
&.linkedin { |
|
bottom: 0; |
|
right: calc(100% - 40px); |
|
transition: all 0.3s 0.25s $cubic; |
|
.icon { |
|
&:hover { |
|
background-color: #0077b5; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i|IBM+Plex+Sans+Condensed:400,400i|IBM+Plex+Sans:100,100i,400,400i,700,700i|IBM+Plex+Serif:400,400i"); |
|
|
|
$text: #686868; |
|
$m01: #667eea; /* main 1*/ |
|
$m02: #764ba2; /* main 2*/ |
|
$n01: #f5f7fa; /* neutral 1*/ |
|
$n02: #c3cfe2; /* neutral 2*/ |
|
|
|
body { |
|
background-color: #2e2e2e; |
|
font-family: "IBM Plex Sans", sans-serif; |
|
margin:0; |
|
} |
|
|
|
#wrapper { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
width: 100%; |
|
} |
|
|
|
.content { |
|
max-width: 600px; |
|
width: 100%; |
|
min-width: 260px; |
|
margin: 0 5%; |
|
margin-top: 10%; |
|
transition: 0.3s ease; |
|
|
|
@media screen and (max-width: 512px) { |
|
margin: 0 4%; |
|
margin-top: 5%; |
|
} |
|
} |
|
|
|
/* Tabs menu */ |
|
|
|
.tabs { |
|
margin: 0; |
|
background-image: linear-gradient(135deg, $n01 0%, $n02 100%); |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
height: 80px; |
|
border-radius: 2px 2px 0px 0px; |
|
|
|
@media screen and (max-width: 512px) { |
|
height: 40px; |
|
} |
|
} |
|
|
|
/* Tab Links */ |
|
|
|
.tablinks { |
|
background: transparent; |
|
background-image: linear-gradient(90deg, transparent 70%, rgba(255, 255, 255, 0.2) 100%); |
|
border: none; |
|
outline: none; |
|
cursor: pointer; |
|
width: 25%; /*change depending on the number of tabs*/ |
|
height: 80px; |
|
position: relative; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
font-size: 16px; |
|
font-family: "IBM Plex Sans", sans-serif; |
|
overflow: hidden; |
|
transition: 0.3s ease; |
|
|
|
@media screen and (max-width: 512px) { |
|
height: 40px; |
|
font-size: 12px; |
|
} |
|
} |
|
|
|
.tablinks:before /* Gradient */ { |
|
background-image: linear-gradient(135deg, $m01 0%, $m02 100%); |
|
content: ""; |
|
width: 100%; |
|
height: 0px; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
transition: 0.3s ease-in-out; |
|
z-index: 2; |
|
} |
|
|
|
|
|
/*tab buttons hover*/ |
|
|
|
.tablinks:hover::before { |
|
height: 100%; |
|
z-index: 2; |
|
bottom: 0; |
|
|
|
@media screen and (max-width: 512px) { |
|
height: 0; |
|
} |
|
} |
|
|
|
|
|
/* Tab active */ |
|
|
|
.tablinks.active { |
|
background-color: white; |
|
z-index: 0; |
|
border-right: 0px; |
|
border-left: 0px; |
|
height: 110px; |
|
bottom: 0px; |
|
overflow: hidden; |
|
|
|
@media screen and (max-width: 512px) { |
|
height: 60px; |
|
} |
|
} |
|
|
|
.tablinks.active:before /* Gradient */ { |
|
content: ""; |
|
width: 100%; |
|
height: 5px; |
|
top: 0; |
|
left: 0; |
|
} |
|
|
|
/* Tabs text */ |
|
|
|
.tablinks.active p, |
|
.tablinks.active:hover p { |
|
opacity: 1; |
|
background: -webkit-linear-gradient(135deg, $m01 0%, $m02 100%); |
|
-webkit-background-clip: text; |
|
-webkit-text-fill-color: transparent; |
|
} |
|
|
|
.tablinks p { |
|
opacity: 0.6; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
z-index: 2; |
|
transition: 0.5s ease; |
|
padding: 0; |
|
margin: 0; |
|
color: $text; |
|
backface-visibility: hidden; |
|
font-weight: 400; |
|
} |
|
|
|
.tablinks:hover p { |
|
color: white; |
|
opacity: 1; |
|
|
|
@media screen and (max-width: 512px) { |
|
color: $text; |
|
opacity: 0.6; |
|
} |
|
} |
|
|
|
|
|
/* Tabs text bigger */ |
|
|
|
.tablinks p:before { |
|
content: attr(data-title); |
|
position: absolute; |
|
height: auto; |
|
width: auto; |
|
color: white; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
opacity: 0.1; |
|
font-size: 40px; |
|
transition: 1s ease-out; |
|
z-index: -1; |
|
font-weight: 600; |
|
top: 110%; |
|
|
|
@media screen and (max-width: 512px) { |
|
display: none; |
|
} |
|
} |
|
|
|
.tablinks:hover p:before { |
|
opacity: 0.1; |
|
font-size: 40px; |
|
top: -80%; |
|
} |
|
|
|
|
|
/* tab content */ |
|
|
|
.wrapper_tabcontent { |
|
background-color: white; |
|
margin-top: 0px; |
|
z-index: -3; |
|
position: relative; |
|
opacity: 1; |
|
padding: 40px 60px; |
|
overflow: hidden; |
|
transition: all 1s ease; |
|
top: 0; |
|
} |
|
|
|
.tabcontent { |
|
display: none; |
|
min-height: 180px; |
|
|
|
} |
|
|
|
@keyframes tabEffect { |
|
from { |
|
top: -40px; |
|
} |
|
to { |
|
top: 0px; |
|
} |
|
} |
|
|
|
.tabcontent.active { |
|
|
|
transition: all 1s ease; |
|
display: block; |
|
} |
|
|
|
/* Tab content line */ |
|
.wrapper_tabcontent:after { |
|
content: ""; |
|
height: 5px; |
|
width: 100%; |
|
position: absolute; |
|
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
left: 0; |
|
bottom: 0; |
|
z-index: -2; |
|
transition: all 1s ease; |
|
} |
|
|
|
/* Title */ |
|
.tabcontent h3 { |
|
font-size: 40px; |
|
top: 75px; |
|
transform: rotate(90deg); |
|
position: absolute; |
|
left: -90px; |
|
opacity: 0.1; |
|
width: 200px; |
|
height: 60px; |
|
background: -webkit-linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
-webkit-background-clip: text; |
|
-webkit-text-fill-color: transparent; |
|
padding: 0; |
|
animation: city 1s ease; |
|
|
|
@media screen and (max-width: 512px) { |
|
top: 65px; |
|
} |
|
} |
|
|
|
@keyframes city { |
|
from { |
|
left: -150px; |
|
} |
|
to { |
|
left: -90px; |
|
} |
|
} |
|
|
|
/* Text*/ |
|
.tabcontent p { |
|
color: $text; |
|
margin: 0; |
|
padding: 0; |
|
line-height: 28px; |
|
font-weight: 100; |
|
transition: all 1s ease; |
|
animation: fadeEffect 0.6s ease; |
|
width: 100%; |
|
font-size: 16px; |
|
font-family: "IBM Plex Sans", sans-serif; |
|
|
|
@media screen and (max-width: 512px) { |
|
font-size: 14px; |
|
line-height: 26px; |
|
} |
|
} |
|
|
|
@keyframes fadeEffect { |
|
from { |
|
opacity: 0; |
|
margin-left: 30px; |
|
} |
|
to { |
|
opacity: 1; |
|
margin-left: 0; |
|
} |
|
} |