How To

Cara Membuat Skill Bar

Di bawah ini kita akan mempelajari cara membuat bilah keterampilan dengan CSS.

Sebuah “Skill Bar” sering digunakan dalam CV / resume online untuk menampilkan keahlian yang kita miliki, seperti ini:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}

.container {
  width: 100%;
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
}

.html {width: 90%; background-color: #A52A2A;}
.css {width: 80%; background-color: #6495ED;}
.js {width: 65%; background-color: #FFD700;}
.php {width: 70%; background-color: #9400D3;}
</style>
</head>
<body>

<h1>My Skills</h1>
  
  <p> Berikut ini merupakan beberapa keahlian bahasa pemrograman yang saya miliki :  </p><br>
  
<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>

<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>

<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>

<p>PHP</p>
<div class="container">
  <div class="skills php">70%</div>
</div>

</body>
</html>

Cara Membuat Skill Bar

Langkah 1) Tambahkan HTML
Contoh

<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>

<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>

<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>

<p>PHP</p>
<div class="container">
  <div class="skills php">70%</div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Pastikan padding berperilaku seperti yang diharapkan */* {box-sizing:border-box}

/* Container untuk skill bar */.container {
  width: 100%; /* lebar maksimum */  background-color: #ddd; /* Warna background abu */}

.skills {
  text-align: right; /* Teks rata kanan */  padding-top: 10px; /* Tambahkan padding atas */  padding-bottom: 10px; /* Tambahkan padding bawah */  color: white; /* Warna text putih */}

.html {width: 90%; background-color: #A52A2A;}/* Brown */.css {width: 80%; background-color: #6495ED;}/* Cornflower Blue */.js {width: 65%; background-color: #FFD700;}/*  Gold */.php {width: 70%; background-color: #E6E6FA;}/* Dark Violet */

Hanifah Nurbaeti

Share
Tags: CSSHow To