Powerline.css

• A quick way to create powerline like effect.
• It's super simple and super easy to use.
• Author: @vivekascoder

---

How to Use??

• Start with downloading powerline.css.
• Add it to your main html file.
• Take a look at below to understand how to write HTML for it.

...
<div class="powerline">
    <span class="powerline__component">🐧 Home</span>
    <span class="powerline__component">Payment</span>
    <span class="powerline__component">Verification</span>
    <span class="powerline__component">~</span>
</div>
...

How to change colors of component??

• Open powerline.css.
• And change the component color CSS variables, as indicated below:

...
:root{
    --component-0-color: #bd93f9;
    --component-1-color: #8be9fd;
    --component-2-color: #6272a4;
    --component-3-color: #50fa7b;
    --component-4-color: #ffb86c;
    --component-5-color: #ff79c6;
    --component-6-color: yellow;
    --component-7-color: #ff5555;
    --component-8-color: #f8f8f2;
    --component-9-color: royalblue;
}
...

Total Components??

• There are total 10 components well in the next version we'll create it a bit dynamic to make as much as you want.
• The screenshot below represents all the 4 colors.

Thanks for visiting this page, {*_*}/