2.9K views
CSSAdd prefixes
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
HTML
1<div class="card"> 2 <div class="header">My Skills</div> 3 <div class="body"> 4 <div class="skill"> 5 <div class="skill-name">HTML</div> 6 <div class="skill-level"> 7 <div class="skill-percent" style="width: 90%"></div> 8 </div> 9 <div class="skill-percent-number">90%</div> 10 </div> 11 <div class="skill"> 12 <div class="skill-name">CSS</div> 13 <div class="skill-level"> 14 <div class="skill-percent" style="width: 80%"></div> 15 </div> 16 <div class="skill-percent-number">80%</div> 17 </div> 18 <div class="skill"> 19 <div class="skill-name">JavaScript</div> 20 <div class="skill-level"> 21 <div class="skill-percent" style="width: 75%"></div> 22 </div> 23 <div class="skill-percent-number">75%</div> 24 </div> 25 </div> 26</div> 27