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