D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
dateitor
/
public_html
/
resources
/
assets
/
scss
/
vcard11
/
Filename :
resume.scss
back
Copy
@import "variables"; .work-history-section, .education-section { .card { background-color: $blue-200; span { background-image: $primary; background-clip: text; -webkit-text-fill-color: transparent; } p { line-height: 2; } .card-btn { background-image: $primary; background-clip: text; -webkit-text-fill-color: transparent; border: $border; padding: 10px 15px; border-radius: 5px; font-size: 14px; } } } .skill-section { .design-skill-section { span { display: block; } .progress { height: auto; display: block; background: transparent; width: 100%; box-sizing: border-box; } .progress [data-progress] { height: 8px; box-shadow: 0 0 1px 1px rgb(255 255 255 / 18%) inset; border-radius: 5px; margin: 5px 0 12px 0; overflow: hidden; } [data-progress]::after { content: ""; display: flex; justify-content: flex-end; align-items: center; background-image: $primary; width: 0; height: 100%; box-sizing: border-box; font-size: 0; color: $white; padding: 0 3px; animation: progress 3s normal forwards; } [data-progress].animate-progress::after { content: attr(data-progress) "%"; width: var(--animate-progress); } @keyframes progress { 0% { width: 0; } } } .devloper-skill-section { .card { background-color: transparent; box-shadow: none; border: 0; } canvas { width: 80px; height: 80px; } .bar { width: 80px; height: 80px; animation: loading-1 1.8s linear forwards; } .card .circle { position: relative; height: 80px; width: 80px; border-radius: 50%; cursor: default; } .card .circle .box, .card .circle .box span { position: absolute; top: 50%; left: 50%; } .card .circle .box { height: 100%; width: 100%; /* background: #fff; */ border-radius: 50%; transform: translate(-50%, -50%) scale(0.8); transition: all 0.2s; } .card .circle .box span, .card .text { color: $white; } .circle .box span { font-size: 18px; font-family: sans-serif; font-weight: 600; transform: translate(-45%, -45%); transition: all 0.1s; } .card .circle:hover .box span { transform: translate(-45%, -45%) scale(1.09); } } }