Card by ahmed150up
#e8e8e8
1.card { 2 width: 300px; 3 background-color: #fff; 4 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 5 border-radius: 10px; 6 overflow: hidden; 7} 8 9.header { 10 background-color: #333; 11 color: #fff; 12 padding: 20px; 13 text-align: center; 14 font-size: 18px; 15} 16 17.body { 18 padding: 20px; 19} 20 21.skill { 22 display: flex; 23 align-items: center; 24 margin-bottom: 20px; 25} 26 27.skill-name { 28 width: 120px; 29 font-size: 16px; 30} 31 32.skill-level { 33 width: 160px; 34 height: 10px; 35 background-color: #eee; 36 border-radius: 10px; 37 overflow: hidden; 38 margin-left: 20px; 39} 40 41.skill-percent { 42 background-color: #333; 43 height: 100%; 44} 45 46.skill-percent-number { 47 margin-left: 20px; 48 font-size: 16px; 49} 50
10K views
10K views
Variations
1 MIT License