Advertisement
izuemis

skill bar

Dec 29th, 2022
2,378
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 0.97 KB | None | 0 0
  1. <html><head>
  2. <meta name="viewport" content="width=device-width, initial-scale=1">
  3.  
  4. <style>
  5.  
  6. * {
  7. box-sizing: border-box;
  8. }
  9.  
  10. p1 {
  11. font-family: PC98;
  12. font-size: 0.75em;
  13. text-align: left !important;
  14. }
  15.  
  16. .cont {
  17. line-height: 0.15;
  18. width: auto;
  19. background-color: #f0f2f0;
  20. border: 1px solid #b0acb0;
  21. border-radius: 20px;
  22. }
  23.  
  24. .skills {
  25. font-family: PC98;
  26. text-align: right;
  27. padding-top: 5px;
  28. padding-bottom: 5px;
  29. padding-right: 10px;
  30. color: #474747;
  31. font-size: 0.75em;
  32. }
  33.  
  34. .html {
  35. width: 80%;
  36. background-color: #fcdef1;
  37. border-radius: 20px;
  38. }
  39.  
  40. .css {
  41. width: 90%;
  42. background-color: #fcdef1;
  43. border-radius: 20px;
  44. }
  45.  
  46. .js {
  47. width: 35%;
  48. background-color: #fcdef1;
  49. border-radius: 20px;
  50. }
  51.  
  52. </style>
  53. </head>
  54. <body>
  55.  
  56. <p1>HTML</p1><div class="cont"><div class="skills html">80%</div></div>
  57.  
  58. <p1>CSS</p1><div class="cont"><div class="skills css">90%</div></div>
  59.  
  60. <p1>JavaScript</p1><div class="cont"><div class="skills js">35%</div></div>
  61.  
  62. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement