Card by Juanes200122
#e8e8e8
1.container { 2 position: relative; 3 max-width: 500px; 4 width: 100%; 5 background: #282828; 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: rgb(226, 226, 226); 21} 22 23.skill-box .skill-bar { 24 height: 8px; 25 width: 100%; 26 border-radius: 6px; 27 margin-top: 6px; 28 background: rgba(236, 236, 236, 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: rgb(226, 226, 226); 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: 70%; 45 animation-delay: 0.1s; 46} 47 48.skill-per.scss { 49 /*progreso de las diferentes lenguajes*/ 50 width: 80%; 51 animation-delay: 0.1s; 52} 53 54.skill-per.Boostrap { 55 /*progreso de las diferentes lenguajes*/ 56 width: 50%; 57 animation-delay: 0.2s; 58} 59 60@keyframes progress { 61 0% { 62 width: 0; 63 opacity: 1; 64 } 65 66 100% { 67 opacity: 1; 68 } 69} 70 71.skill-per .tooltip { 72 position: absolute; 73 right: -14px; 74 top: -28px; 75 font-size: 9px; 76 font-weight: 500; 77 color: rgb(0, 0, 0); 78 font-weight: bold; 79 padding: 2px 6px; 80 border-radius: 3px; 81 background: rgb(226, 226, 226); 82 z-index: 1; 83} 84 85.tooltip::before { 86 content: ""; 87 position: absolute; 88 left: 50%; 89 bottom: -2px; 90 height: 10px; 91 width: 10px; 92 z-index: -1; 93 background-color: rgb(226, 226, 226); 94 transform: translateX(-50%) rotate(45deg); 95} 96
802 views
Variation of acard
MIT License