110 lines
2.6 KiB
SCSS
110 lines
2.6 KiB
SCSS
/*==========================================================================
|
|
Experience CSS
|
|
==========================================================================*/
|
|
.experience__area {
|
|
position: relative;
|
|
z-index: 1;
|
|
background: var(--color-6);
|
|
overflow: hidden;
|
|
&-shape {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
}
|
|
&-image {
|
|
position: relative;
|
|
display: flex;
|
|
gap: 30px;
|
|
&-shape {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0%;
|
|
}
|
|
}
|
|
&-right {
|
|
margin-left: 95px;
|
|
&-title {
|
|
h2 {
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
.btn-two {
|
|
background: var(--color-6);
|
|
margin-top: 50px;
|
|
color: var(--text-heading-color);
|
|
&:hover {
|
|
color: var(--text-white);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.skill__area {
|
|
&-item {
|
|
margin-bottom: 20px;
|
|
&:last-child {
|
|
margin: 0;
|
|
}
|
|
.text-two {
|
|
font-weight: 700;
|
|
}
|
|
&-content {
|
|
position: relative;
|
|
}
|
|
&-count {
|
|
position: absolute;
|
|
top: -35px;
|
|
right: 0;
|
|
}
|
|
&-inner {
|
|
width: 100%;
|
|
height: 8px;
|
|
position: relative;
|
|
background: var(--border-color-2);
|
|
margin-top: 10px;
|
|
.skillbar-bar {
|
|
height: 8px;
|
|
position: absolute;
|
|
width: 0;
|
|
background: var(--primary-color-1);
|
|
transition: all 3.5s ease-out 0s;
|
|
clip-path: polygon(0 0, 100% 0%, 98% 100%, 0% 100%);
|
|
top: 0;
|
|
border-radius: 0;
|
|
}
|
|
.skillbar-title {
|
|
height: 8px;
|
|
background: var(--primary-color-1);
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
.skillbar-percent {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 1399px) {
|
|
.experience__area {
|
|
&-right {
|
|
margin-left: 30px;
|
|
&-title {
|
|
margin-bottom: 35px;
|
|
h2 {
|
|
margin-bottom: 23px;
|
|
}
|
|
}
|
|
.btn-two {
|
|
margin-top: 45px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 1199px) {
|
|
.experience__area {
|
|
&-right {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
} |