Card by Juanes200122
#e8e8e8
1.container { 2 position: relative; 3 max-width: 500px; 4 width: 100%; 5 background: #ececec; 6 margin: 0 15px; 7 padding: 10px 20px; 8 border-radius: 7px; 9 user-select: none; 10} 11 12.container .skill-box { 13 width: 100%; 14 margin: 25px 0; 15} 16 17.skill-box .title { 18 display: block; 19 font-size: 14px; 20 font-weight: 600; 21 color: #333; 22} 23 24.skill-box .skill-bar { 25 height: 8px; 26 width: 100%; 27 border-radius: 6px; 28 margin-top: 6px; 29 background: rgba(0, 0, 0, 0.1); 30} 31 32.skill-bar .skill-per { 33 position: relative; 34 display: block; 35 height: 100%; 36 width: 90%; 37 border-radius: 6px; 38 background: #000000; 39 animation: progress 0.4s ease-in-out forwards; 40 opacity: 0; 41} 42 43.skill-per.html { 44 /*progreso de las diferentes lenguajes*/ 45 width: 80%; 46 animation-delay: 0.1s; 47} 48 49.skill-per.css { 50 /*progreso de las diferentes lenguajes*/ 51 width: 30%; 52 animation-delay: 0.1s; 53} 54 55.skill-per.javascript { 56 /*progreso de las diferentes lenguajes*/ 57 width: 40%; 58 animation-delay: 0.2s; 59} 60 61.skill-per.nodejs { 62 /*progreso de las diferentes lenguajes*/ 63 width: 70%; 64 animation-delay: 0.3s; 65} 66 67@keyframes progress { 68 0% { 69 width: 0; 70 opacity: 1; 71 } 72 73 100% { 74 opacity: 1; 75 } 76} 77 78.skill-per .tooltip { 79 position: absolute; 80 right: -14px; 81 top: -28px; 82 font-size: 9px; 83 font-weight: 500; 84 color: #fff; 85 padding: 2px 6px; 86 border-radius: 3px; 87 background: #000000; 88 89 z-index: 1; 90} 91 92.tooltip::before { 93 content: ""; 94 position: absolute; 95 left: 50%; 96 bottom: -2px; 97 height: 10px; 98 width: 10px; 99 z-index: -1; 100 background: #000000; 101 transform: translateX(-50%) rotate(45deg); 102} 103
674 views
674 views
MIT License