diff --git a/README.md b/README.md index ace5347..600d8bb 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,7 @@ | Captain America Animation | https://jonathanallisson.github.io/Captain/ | | Plane Animation | https://jonathanallisson.github.io/plane/ | | Isometric social media icon | https://lavishbansal17.github.io/Isometric-social-media-icon/ | +| Skill Bar | https://lavishbansal17.github.io/Skill-Bar/ | - -- ![Project Intro Gif](./Gif.gif) diff --git a/Skill Bar/image.jpg b/Skill Bar/image.jpg new file mode 100644 index 0000000..f35d926 Binary files /dev/null and b/Skill Bar/image.jpg differ diff --git a/Skill Bar/index.html b/Skill Bar/index.html new file mode 100644 index 0000000..38e3b6d --- /dev/null +++ b/Skill Bar/index.html @@ -0,0 +1,47 @@ + + + + + + + Skill Bar + + + +
+

Skill Bar Design

+
+ HTML +
+
+
+ 95% +
+
+ CSS +
+
+
+ 85% +
+
+ Javascript +
+
+
+ 75% +
+
+ + + diff --git a/Skill Bar/readme.md b/Skill Bar/readme.md new file mode 100644 index 0000000..b6613a7 --- /dev/null +++ b/Skill Bar/readme.md @@ -0,0 +1,2 @@ +# Skill Bar + \ No newline at end of file diff --git a/Skill Bar/style.css b/Skill Bar/style.css new file mode 100644 index 0000000..a559f38 --- /dev/null +++ b/Skill Bar/style.css @@ -0,0 +1,106 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #2e2e2e; +} +.container { + position: relative; + width: 500px; +} +.container h2 { + color: #fff; +} +.container .skills { + position: relative; + display: flex; + margin: 20px 0; + padding: 24px 10px 18px; + background: linear-gradient(#616161 0%, #333 10%, #222); + border-radius: 8px; + overflow: hidden; + border: 2px solid #000; + transition: 0.5s; +} +.container:hover .skills { + opacity: 0.05; +} +.container .skills:hover { + opacity: 1; +} +.container .skills:before { + content: ""; + position: relative; + top: 0; + left: 0; + width: 100%; + height: 50%; + background: rgba(255, 255, 255, 0.1); + z-index: 10; +} +.container .skills .Name { + position: relative; + width: 110px; + text-align: right; + color: #fff; + margin-top: -2px; + text-transform: uppercase; +} +.container .skills .value { + position: relative; + width: 40px; + text-align: left; + color: #fff; + margin-top: -2px; + text-transform: uppercase; +} +.container .skills .percent { + position: relative; + width: calc(400% - 150px); + height: 20px; + margin: 0 10px; + border-radius: 10px; + background: #151515; + box-shadow: inset 0 0 10px #000; + overflow: hidden; +} +.container .skills .percent .progress { + position: absolute; + top: 0; + left: 0; + width: 70%; + height: 100%; + border-radius: 10px; + background: #fff; + box-shadow: inset 0 0 2px #000; + animation: animate 4s ease-in-out forwards; +} +@keyframes animate { + from { + width: 0; + } +} +.container .skills:nth-child(2) .percent .progress { + background: linear-gradient(45deg, #1fe6ff, #673ab7); +} +.container .skills:nth-child(3) .percent .progress { + background: linear-gradient(45deg, #3bc0ff, #33ff00); +} +.container .skills:nth-child(4) .percent .progress { + background: linear-gradient(45deg, #ffee54, #ff00ca); +} +footer { + position: relative; + color: yellow; + top: 19rem; + right: 53rem; +} +footer a { + color: white; +}