My skills

<!DOCTYPE html>
<html lang="en">
<head>
<script>console.clear();</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
box-sizing:border-box;
font-size: 62.5%;
}

*,:after,:before {
box-sizing:inherit
}

body {
font-family:system-ui,-apple-system,BlinkMacSystemFont;
font-size:1.3rem
}

.box {
max-width:100%;
margin-left:auto;
margin-right:auto;
padding-left:1.5rem;
padding-right:1.5rem;
overflow:auto;
transition:padding .4s ease-in-out, max-width .4s ease-in-out
}

@media (min-width: 320px) {
.box {
max-width:320px
}
}

@media (min-width: 480px) {
.box {
max-width:480px
}
}

@media (min-width: 640px) {
.box {
max-width:640px;
padding-left:1.5rem;
padding-right:1.5rem
}
}

@media (min-width: 768px) {
.box {
max-width:768px;
padding-left:2rem;
padding-right:2rem
}
}

@media (min-width: 1024px) {
.box {
max-width:1024px;
padding-left:2.5rem;
padding-right:2.5rem
}
}

@media (min-width: 1280px) {
.box {
max-width:1280px
}
}

@media (min-width: 1536px) {
.box {
max-width:1536px
}
}

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

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

.html {
width:90%;
background-color:#4CAF50
}

.css {
width:80%;
background-color:#2196F3
}

.js {
width:65%;
background-color:#f44336
}

.php {
width:60%;
background-color:gray
}
</style>
<title>Skill Bar</title>
</head>
<body>

<div class="box">
<h1>My Skills</h1>

<p>HTML</p>
<div class="box-content">
  <div class="skills html">90%</div>
</div>

<p>CSS</p>
<div class="box-content">
  <div class="skills css">80%</div>
</div>

<p>JavaScript</p>
<div class="box-content">
  <div class="skills js">65%</div>
</div>

<p>PHP</p>
<div class="box-content">
  <div class="skills php">60%</div>
</div>
</div>

</body>
</html>
Post Navigation
