lb-dk-2023/assets/scss/components/_skill-section.scss
2023-08-15 17:02:21 +02:00

96 lines
1.7 KiB
SCSS

.skill {
position: relative;
padding: 100px 0 150px 0;
@include desktop {
padding: 100px 0;
}
&__background_shape {
position: absolute;
bottom: 2%;
right: 2%;
height: 300px;
width: 300px;
svg {
width: 100%;
}
@include desktop {
display: none;
}
}
&__background_pattern {
position: absolute;
bottom: 5%;
right: 10%;
height: 100px;
width: 100px;
animation: move_top 3s infinite linear;
img {
height: 100%;
width: 100%;
}
@include desktop {
display: none;
}
}
&__thumb {
position: relative;
@include tablet {
margin-bottom: 30px;
}
&_pattern {
position: absolute;
top: -11%;
left: -17%;
z-index: -1;
height: 150px;
animation: move_top 4s infinite linear;
img {
height: 100%;
width: 100%;
}
}
&_image {
margin-right: 7%;
@include desktop {
margin-right: 0;
}
img {
height: 100%;
width: 100%;
}
}
}
&__progress {
margin-left: 40px;
@include desktop {
margin-left: 0;
margin-top: 30px;
}
&_item {
&.js-animation {
transition: all 0.3s ease;
.progress {
width: 100%;
background: $light;
height: 10px;
border-radius: 5px;
.progress-bar {
border-radius: 5px;
position: relative;
animation: animate-positive 3000ms;
background: $primary;
}
}
}
&:not(:last-child) {
margin-bottom: 30px;
}
}
}
}
@keyframes animate-positive {
0% {
width: 0;
}
}