Como usar um codigo do CODEPEN em javascript?

[Mbhvirtual 0]

Ola pessoal, Tem um código no Codepen que eu gostaria de usar. É um elemento com javascript. Estou tentanto colocalo-lo em funcionamento mas não consigo. Alguém sabe se para este código tem alguma particularidade em ser usado?

Nao estou entendendo porque no css tem algum elementos que o sublime nao esta reconhecendo.

Nao consigo mesmo por a funcionar no meu pc.

alguem pode me ajudar?

este e o codigo:

http://codepen.io/manussakis/pen/mEAfa

 

E alguem sabe se os codigos da codepen são livres de direitos autorais?

[William Bruno 1501]

Foi usado SaSS e jQuery.

você precisa importar essas duas coisas para usar o código.

[Mbhvirtual 0]

obrigado pela resposta @Willian, entao pode me orientar com essas coisas colega? importo de onde e pra onde o sass, JQuery ja tenho.

pode me ajudar?

obrigado

[William Bruno 1501]

Ok.. mais fácil, use o compilado:

 

.click-counter {
  background-color: #eee;
  width: 50px;
  height: 50px;
}

.all {
  width: 80%;
  max-width: 80%;
  margin: 0 auto;
  padding: 0;
  height: 80%;
  *zoom: 1;
  width: 100%;
  max-width: 100%;
  height: 100%;
}
.all:before, .all:after {
  content: " ";
  display: table;
}
.all:after {
  clear: both;
}
.all .container {
  width: 80%;
  max-width: 80%;
  margin: 0 auto;
  padding: 0;
  height: 80%;
  *zoom: 1;
}
.all .container:before, .all .container:after {
  content: " ";
  display: table;
}
.all .container:after {
  clear: both;
}
.all .container .box {
  font-family: 'Montserrat', sans-serif;
  font-size: 2em;
  color: #15f000;
  border: 2px solid #285678;
  text-align: center;
  z-index: 10;
  cursor: pointer;
  display: inline;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  clear: none;
  position: absolute;
}
.all .container .box:before {
  display: inline-block;
  height: 100%;
  content: '';
  zoom: 1;
  vertical-align: middle;
}
.all .container .box.box-last {
  z-index: 0;
  cursor: auto;
  border: none;
  color: transparent;
}

ai vc não precisa fazer o SaSS rodar ai.

[Mbhvirtual 0]

Willian deu certo :) muito obrigado mesmo...

Tenho agora aqui uma questão, estou tentando fazer algumas modificações neste codigo e nao consigo. Eu queria que no fundo dos numeros (cada quadrado) tivesse um background de uma imagem.

Olha minha ideia. Todos os quadrados juntos formariam uma unica imagem (como um quebra-cabeças). Num editor de imagem eu iria dividir a imagem grande em 15 partes (o numero de quadrados que há no codigo) então para cada numero teria um background (ou imagem) de uma parte da imagem grande. A intenção seria a pessoa conseguir por na sequencia os numeros e montar a imagem grande. É possível neste codigo amigo?

Obrigado pela força ate agora!

[Mbhvirtual 0]

como este aqui Willian

 

http://codepen.io/Hassani/pen/ApmJf

[William Bruno 1501]

Sim, é possível.

 

Porém, é quase mais simples vc começar um do zero, do que adaptar esse que já existe.