2018-11-04, 02:37 PM
i want make like THIS
i got the css
and calling them with this
i have bad english, but i hope u guys know what i mean
i got the css
.team-role
{
display:inline-block;
margin:6px 2px;
padding:0 8px;
border:solid 1px #AAA;
border-radius:2px;font-size:11px;
font-weight:400;
color:#767676;
text-transform:uppercase
}
.team-role.team-role--lead
{
color:#FFF
}
.team-role:not(.team-role--lead)
{
background-color:transparent
}
.team-role--management
{
color:#008a00;
background-color:#008a00;
border-color:#008a00
}
.team-role--development
{
color:#d23b67;
background-color:#d23b67;
border-color:#d23b67
}
.team-role--design
{
color:#657d08;
background-color:#657d08;
border-color:#657d08
}
.team-role--security
{
color:#927878;
background-color:#927878;
border-color:#927878
}
.team-role--devops
{
color:#8967de;
background-color:#8967de;
border-color:#8967de
}
.team-role--support
{
color:#f35858;
background-color:#f35858;
border-color:#f35858
}
.team-role--community
{
color:#2bb7c7;
background-color:#2bb7c7;
border-color:#2bb7c7
}
.team-role--web
{
color:#2ba4eb;
background-color:#2ba4eb;
border-color:#2ba4eb
}
.team-role--editorial
{
color:#62c9a1;
background-color:#62c9a1;
border-color:#62c9a1
}
and calling them with this
<p class="team-role team-role--lead team-role--development">Development</p>
<p class="team-role team-role--standard team-role--security">Security</p>
<p class="team-role team-role--standard team-role--web">Web</p>
<p class="team-role team-role--design" data-role-color="#657d08">Design</p>
<p class="team-role team-role--management" data-role-color="#008a00">Management</p>
etc...
i have bad english, but i hope u guys know what i mean