diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 248e99b..1107f88 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,7 +2,7 @@
1. Fork este projeto - Clique em `Fork`
-2. Crie uma nova branch para realizar suas alterações no repositório - Com o Git instalado execute o comanado abaixo no terminal. - [caso não tenha o Git, baixe aqui](https://git-scm.com/downloads) -
+2. Crie uma nova branch para realizar suas alterações no repositório - Com o Git instalado, execute o comando abaixo no terminal. - [caso não tenha o Git, baixe aqui](https://git-scm.com/downloads) -
```sh
git checkout -b nome-da-branch
```
@@ -39,19 +39,19 @@
}
```
- ## Dicas para prenchimento do arquivo `mulheres.json`:
+ ## Dicas para preenchimento do arquivo `mulheres.json`:
- **Como adicionar uma foto?**
Para adicionar uma photo ao seu card, crie uma conta e faça upload do seu avatar no Gravatar - [acesse o site através desse link](https://en.gravatar.com/) - ou use a sua conta já existente.
- **Como preencher os campos de redes sociais?**
- Em *linkedin*, *github*, *twitter* e *fb*: usar apenas o username da url da rede social.
- > Exemplo:
- https://www.facebook.com/foo.bar >> "foo.bar"
- https://br.linkedin.com/in/foob >> "foob"
+ Em *linkedin*, *github*, *twitter* e *fb*, usar apenas o username da url da rede social.
+ > Exemplo:
+ https://www.facebook.com/foo.bar >> "foo.bar"
+ https://br.linkedin.com/in/foob >> "foob"
- **Como preencher o campo "interests"?**
- Evite adicionar muitas tags nesse campo, dependendo da quantidade de caracteres cabem até 7 tags no card da página, mas o ideal seria usar *4* no *máximo*.
+ Evite adicionar muitas tags nesse campo. Dependendo da quantidade de caracteres cabem até 7 tags no card da página, mas o ideal seria usar *4* no *máximo*.
````JSON
/* Exemplo */
{
@@ -66,7 +66,7 @@
````
- **Como preencher os campos que não tenho dados para adicionar?**
- Caso exista algum campo onde você não tenha um valor real para ser preenchido, o mesmo pode ser adicionado o valor `null`, veja o exemplo abaixo de uma palestrante que não possui conta no facebook e twitter:
+ Caso exista algum campo onde você não tenha um valor real para ser preenchido, ao mesmo pode ser adicionado o valor `null`. Veja o exemplo abaixo de uma palestrante que não possui conta no facebook e twitter:
```json
{
"twitter": null,
@@ -84,5 +84,5 @@
git push origin nome-da-branch
```
-7. Envie um pull request para o repositório original, após seu pull request ser aceito seus dados estarão disponíveis no site 💜
+7. Envie um pull request para o repositório original. Após seu pull request ser aceito, seus dados estarão disponíveis no site 💜
diff --git a/README.md b/README.md
index 0025b14..2cb05cc 100644
--- a/README.md
+++ b/README.md
@@ -1,46 +1,73 @@
-# Mulheres Palestrantes
+# Mulheres Palestrantes :woman: :speaker:
-http://insideoutproject.xyz/mulheres-palestrantes/
+
+
+
-## TL;DR
-Listagem de mulheres disponíveis para palestrar em eventos de tecnologia, design, empreendedorismo, entre outros.
-Se você deseja contribuir melhorando o layout ou incluindo você ou outra mulher na lista, basta enviar um pull request :D
+Repositório responsável por listar mulheres disponíveis para realizar palestras em eventos sobre:
-## Versão longa
-Dado o ainda pequeno número de mulheres palestrando em eventos (especialmente de tecnologia) aqui no Brasil, uma planilha foi criada a fim de dar mais visibilidade a essas mulheres e incentivar outras a começar.
+* Tecnologia;
+* Web Design;
+* Programação;
+* Empreendorismo;
+* Entre outros temas relacionados a Tecnologia;
-Este projeto nasceu da tentativa de organizar os dados dessa planilha de forma mais visual, tornando-os de mais fácil acesso, reduzindo duplicidade e facilitando buscas.
+Querem saber quem são elas?! Bastam acessar o site: **http://insideoutproject.xyz/mulheres-palestrantes/**
-Ele foi utilizado no primeiro JS4Girls Rio 2015 para ensino de Git, HTML, CSS e Javascript.
+## Versão Longa: :raising_hand:
-Originalmente em http://github.com/darlenedms/mulheres-palestrantes
+Devido ao pequeno número de mulheres palestrando em eventos (em especial de tecnologia) aqui no Brasil, uma planilha foi criada a fim de dar mais visibilidade a essas mulheres e incentivar outras a começar a realizar palestras.
-## Como contribuir com o projeto?
-Se você deseja contribuir melhorando o layout ou incluindo você ou outra mulher na lista, basta enviar um pull request. :)
+Este projeto nasceu de uma tentativa de organizar os dados dessa planilha de forma mais visual, tornando-os de mais fácil acesso, reduzindo duplicidade e facilitando buscas.
-Para incluir mulheres na lista, basta adicionar uma entrada no arquivo mulheres.json. Os únicos campos obrigatórios são nome e email.
+Ele foi utilizado no primeiro **JS4Girls Rio 2015** para ensino de Git, HTML, CSS e Javascript.
-Existe uma explicação mais detalhada no arquivo [CONTRIBUTING.md](./CONTRIBUTING.md)
+Originalmente em **http://github.com/darlenedms/mulheres-palestrantes**
-Caso você encontre alguma dificuldade ou não tenha muito conhecimento em git, fique livre para abrir um issue pedindo a inclusão ou tirar dúvidas conosco sobre como fazer.
-## Ferramentas e materiais utilizados
+## Como Posso Contribuir com o Projeto?! :star2:
-### Gravatar
-https://en.gravatar.com/site/implement/images/
+Se você deseja contribuir melhorando o layout ou incluindo você ou outra mulher na lista, basta enviar um Pull Request. :)
-### Templates
-pure.js para template
-http://beebole.com/pure/
+Para incluir mulheres na lista, basta adicionar uma entrada no arquivo **mulheres.json**. Os únicos campos obrigatórios são:
-### jQuery para consumir o json
-http://api.jquery.com/jQuery.getJSON/
+* Nome
+* Email
-### Dados convertidos da planilha para json utilizando Mr Data Converter
-https://shancarter.github.io/mr-data-converter/
+Existe uma explicação mais detalhada no arquivo **[CONTRIBUTING.md](./CONTRIBUTING.md)**
-### URLs do Gravatar geradas seguindo os padrões definidos na documentação
-https://br.gravatar.com/site/implement/images/
+Caso você encontre alguma dificuldade ou não tenha muito conhecimento em git, fique livre para abrir um issue pedindo a inclusão ou tirar dúvidas conosco sobre como fazer. :heart_eyes:
+
+
+## Mas... não sei fazer Pull Request... O que faço?! :loudspeaker:
+
+Não tem problema! Bastam abrir uma Issue **[AQUI](https://github.com/darlenedms/mulheres-palestrantes/issues)** com as seguintes informações sua:
+
+* Nome
+* Interesses
+* Localização
+* Foto de Perfil
+* Linkedin
+* GitHub
+* Facebook
+* Twitter
+* Site
+
+Caso, não tenha algum item da lista, basta colocar: **Não Possuo**. Lembrando que, os únicos campos obrigatórios são: **Nome** e **E-mail**!
+
+E vòilá! Tão pronto, estaremos te incluindo no site! :heartpulse:
+
+## Ferramentas e Recursos Utilizados: :fire:
+
+* [Gravatar](https://en.gravatar.com/site/implement/images/)
+
+* [Templates](http://beebole.com/pure/)
+
+* [jQuery para consumir o json](http://api.jquery.com/jQuery.getJSON/)
+
+* [Dados convertidos da planilha para json utilizando Mr Data Converter](https://shancarter.github.io/mr-data-converter/)
+
+* [URLs do Gravatar geradas seguindo os padrões definidos na documentação](https://br.gravatar.com/site/implement/images/)
+
+* [Bootstrap como framework de css](http://getbootstrap.com/)
-### Bootstrap como framework de css
-http://getbootstrap.com/
diff --git a/css/style.css b/css/style.css
index 51d2e0e..2daee18 100644
--- a/css/style.css
+++ b/css/style.css
@@ -5,7 +5,7 @@
font-family: 'Open Sans', sans-serif;
}
-/* Ckasse oara acessibilidade */
+/* Classe oara acessibilidade */
.sr-only {
position: absolute;
width: 1px;
@@ -23,6 +23,7 @@ body {
}
header, footer {
+ animation: 3s power-bg infinite alternate;
background-color: #cc0066;
color: #fff;
}
@@ -37,9 +38,31 @@ header h1 {
text-shadow: 2px 2px #861028;
}
+.logo-css u {
+ color: #fff;
+ text-decoration: none;
+ text-shadow: 2px 2px 10px 2px #edb515;
+}
+
+.logo-css i {
+ color: #edb515;
+}
+
+.logo-css,
+.logo-css u,
+.logo-css i {
+ font-family: 'Codystar', cursive;
+}
+
.contribute {
font-size: 0.9em;
- color: #333;
+ color: #fff;
+ font-weight: 700;
+ text-decoration: none;
+ transition: .3s all;
+}
+.contribute i {
+ font-weight: normal;
}
.contribute:hover {
@@ -96,18 +119,39 @@ header h1 {
width: 270px;
height: 370px;
vertical-align: top;
- overflow: hidden;
position: relative;
+ transition: .3s all;
}
-.card h3 {
+.card:hover {
+ border-radius: 100px 100px .3rem .3rem;
+ animation: none !important;
+ background: #ffdfef;
color: #cc0066;
- overflow: hidden;
- margin: 0.5rem 0;
}
-.card img {
- border-radius: 50%;
+.card:hover img {
+ transform: scale(1.3) translateY(-15px);
+ box-shadow: 0 0 20px 3px #edb515;
+}
+
+.card:nth-of-type(odd) {
+ animation: 2s power-scale-odd infinite alternate;
+}
+
+.card:nth-of-type(even) {
+ animation: 2s power-scale-even infinite alternate;
+}
+
+.card:hover ul.tags li {
+ background: #cc0066;
+ color: #fff;
+}
+
+.card h1 {
+ color: #cc0066;
+ overflow: hidden;
+ margin: 0.5rem 0;
}
.card .location {
@@ -117,6 +161,9 @@ header h1 {
.card .photo {
height: 80px;
width: 80px;
+ border-radius: 50%;
+ transition: .5s all;
+ display: block;
}
footer {
@@ -135,7 +182,17 @@ footer img {
bottom: 20px;
width: 235px;
background: #fff;
- padding-top: 10px;
+ padding: 10px 0;
+}
+
+.after-tags::after {
+ background: #edb515;
+ content: '';
+ width: 100%;
+ height: 5px;
+ display: block;
+ position: absolute;
+ top: 0;
}
.social-media img {
@@ -158,17 +215,68 @@ ul.social-media li a {
color: #333;
}
+ul.social-media i {
+ transition: .3s all;
+}
+
+ul.social-media i:hover {
+ color: #cc0066;
+ transform: scale(1.2);
+}
+
+ul.social-media i.fa-twitter-square:hover {
+ color: #006dbf;
+ text-shadow: 0 1px #fff, 0 2px 10px #006dbf;
+}
+
+ul.social-media i.fa-linkedin-square:hover {
+ color: #0077b5;
+ text-shadow: 0 1px #fff, 0 2px 10px #0077b5;
+}
+
+ul.social-media i.fa-github-square:hover {
+ color: #732a82;
+ text-shadow: 0 1px #fff, 0 2px 10px #732a82;
+}
+
+ul.social-media i.fa-facebook-square:hover {
+ color: #3b5998;
+ text-shadow: 0 1px #fff, 0 2px 10px #3b5998;
+}
+
+ul.social-media i.fa-behance-square:hover {
+ color: #0057ff;
+ text-shadow: 0 1px #fff, 0 2px 10px #0057ff;
+}
+
ul.social-media li.hidden {
visibility: hidden;
display: none;
}
ul.tags {
- max-height: 160px;
+ max-height: 120px;
list-style-type: none;
- padding: 0;
+ padding: 0 0 10px;
margin: 0.5rem;
- overflow: hidden;
+ overflow-y: auto;
+ /*Estilo de scrollbar para Firefox*/
+ scrollbar-width: thin;
+ scrollbar-color: #cc0066 #fff;
+}
+
+ul.tags::-webkit-scrollbar {
+ width: 5px;
+}
+ul.tags::-webkit-scrollbar-track {
+ background: #EBDCE1;
+ border-left: 0 solid #fff;
+ border-right: 5px solid #fff;
+}
+ul.tags::-webkit-scrollbar-thumb {
+ background: #cc0066;
+ border-left: 0 solid #fff;
+ border-right: 5px solid transparent;
}
ul.tags li {
@@ -179,6 +287,7 @@ ul.tags li {
padding: 0.2rem 0.5rem;
margin: 0.2rem;
font-size: 0.8rem;
+ transition: .3s all;
}
.cidade {
@@ -217,3 +326,30 @@ ul.tags li {
margin-bottom: 0.5rem;
}
}
+
+@keyframes power-bg {
+ 0% {
+ filter: brightness(1);
+ }
+ 100% {
+ filter: brightness(3);
+ }
+}
+
+@keyframes power-scale-odd {
+ 0% {
+ transform: scale(1)
+ }
+ 100% {
+ transform: scale(1.05)
+ }
+}
+
+@keyframes power-scale-even {
+ 0% {
+ transform: scale(1.05)
+ }
+ 100% {
+ transform: scale(1)
+ }
+}
\ No newline at end of file
diff --git a/img/logoMP.png b/img/logoMP.png
new file mode 100644
index 0000000..ffeb88b
Binary files /dev/null and b/img/logoMP.png differ
diff --git a/index.html b/index.html
index c29d924..53162a2 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,7 @@
+
@@ -37,8 +38,8 @@
-
+