codebadges

Crachás de código

Olá desenvolvedor ... Hora de mostrar seu progresso e conquistas!

Veja CodeBadges em ação

Comece

CDN

 <!-- codeBadges minified CSS -->
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/codemzy/[email protected]/dist/codebadges.min.css " >
<!-- codeBadges minified JavaScript -->
< script src =" https://cdn.jsdelivr.net/gh/codemzy/[email protected]/dist/codebadges.min.js " > </ script >

IMPORTANTE: CodeBadges JS conta com JQuery JS, então você precisa carregar o jQuery JS antes do CodeBadges JS

Uso

Html.

Adicione um único crachá ...

 < div class =" code-badge freecodecamp " > </ div >

Ou uma fileira de crachás ...

 < div align =" center " >
  < div class =" code-badge freecodecamp " > </ div >
  < div class =" code-badge github " > </ div >
  < div class =" code-badge codeschool " > </ div >
  < div class =" code-badge codecademy " > </ div >
  < div class =" code-badge treehouse " > </ div >
  < div class =" code-badge codewars " > </ div >
</ div > 

JavaScript.

Agora ative seus emblemas com uma linha de JS ...

 codeBadges ( "codemzy" ) . freecodecamp ( ) . github ( ) . codeschool ( ) . codecademy ( ) . treehouse ( "ryancarson" ) . codewars ( ) ;

Ative o CodeBadges com o seu principal nome de usuário codeBadges("username") e, em seguida, cadeia nos emblemas que você possui no seu HTML. Tem um nome de usuário diferente para algumas plataformas? Não se preocupe, basta passar esse nome de usuário para a plataforma, por exemplo .github("differentName") .

Personalização

Pequenos emblemas.

 < div class =" code-badge badge-small freecodecamp " > </ div >

Basta adicionar o badge-small de classe aos seus crachás para torná-los menores.

Cores personalizadas.

Tem um esquema de cores rigoroso e quer todos os seus crachás em rosa? Quem sou eu para julgar?!

Adicione suas próprias aulas ...

. code-badge . pink-badge . outer {
  background-color : # DB0A5B ;
}

Em seu próprio CSS, basta adicionar uma classe de crachá de código para .pink-badge como o exemplo acima.

Aplique ao seu HTML ...

 < div class =" code-badge freecodecamp pink-badge " > </ div >

Crachás

Disponível.

• codecademy
• Codeschool
• Codewars
• Freecodecamp
• Github
• casa da árvore

Solicitações.

Quer um novo crachá adicionando? Envie uma solicitação através dos problemas ou envie uma solicitação de tração. Não se esqueça de incluir seu nome de usuário no site solicitado para que ele possa ser apresentado. O site deve ter perfis públicos para que as informações do usuário possam ser solicitadas por meio de uma API ou raspadas de uma página de perfil público.

Licença

A licença do MIT (MIT)

Copyright (C) 2018 Codemzy