Skip to content

Commit

Permalink
Merge pull request #25 from iuricode/main
Browse files Browse the repository at this point in the history
👌 style: Alterações de revisão de código
  • Loading branch information
levxyca authored Sep 27, 2023
2 parents 9070da3 + 66e5e93 commit c2b23b9
Show file tree
Hide file tree
Showing 5 changed files with 207 additions and 161 deletions.
88 changes: 65 additions & 23 deletions assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,28 @@ body {
background-color: var(--white);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
padding: 50px;
padding: 40px 24px;
}

::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-thumb {
border-radius: 8px;
background: var(--purple-500);
}

::-webkit-scrollbar-track {
background: var(--gray-100);
}

html {
font-size: 62.5%;
}

input {
font-family: "Roboto", sans-serif;
}

.header {
Expand All @@ -29,11 +50,10 @@ body {
}

.header__subtitle {
font-size: 1.5rem;
font-size: 2rem;
text-align: center;
color: var(--gray-500);
color: var(--black);
font-weight: 400;
max-width: 70%;
}

.main {
Expand All @@ -42,78 +62,100 @@ body {
align-items: center;
flex-direction: column;
flex-wrap: wrap;
max-width: 1440px;
margin: 0 auto;
}

.searchbar {
background-color: var(--gray-100);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
gap: 16px;
border: none;
border-radius: 5px;
border-radius: 4px;
padding: 16px;
margin: 30px 0;
width: 80%;
width: 100%;
}

.cards {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 32px;
margin: 48px 0;
}

.searchbar__icon {
width: 1.2rem;
height: 1.2rem;
width: 24px;
height: 24px;
fill: var(--gray-500);
}

.searchbar__input {
font-family: "Roboto", sans-serif;
border: none;
border-radius: 5px;
border-radius: 4px;
background-color: transparent;
padding: 4px;
flex: 1;
color: var(--purple-500);
font-size: 1rem;
color: var(--black);
font-size: 2rem;
}

.searchbar__input:focus {
outline: none;
}

.card {
width: 300px;
min-height: 200px;
margin: 20px;
padding: 20px;
border-radius: 10px;
width: 20%;
flex-grow: 1;
max-height: 300px;
min-height: 300px;
overflow: auto;
padding: 24px;
border-radius: 8px;
background-color: var(--white);
box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px;
box-shadow: rgba(35, 35, 38, 0.2) 0px 0px 16px;
display: list-item;
list-style-type: none;
}

.card__title {
color: var(--purple-500);
margin-bottom: 16px;
font-size: 2.4rem;
}

.card__description {
color: var(--gray-500);
color: var(--black);
line-height: 160%;
font-size: 1.8rem;
}

.card__content {
margin-top: 16px;
}

.card__code {
padding: 5px;
border-radius: 5px;
padding: 8px;
border-radius: 4px;
color: var(--white);
background-color: var(--purple-500);
font-size: 0.75rem; /* pra caber no card e não quebrar linha */
font-size: 1.4rem; /* pra caber no card e não quebrar linha */
}

@media screen and (max-width: 1200px) {
.card {
width: 40%;
}
}

@media screen and (max-width: 768px) {
.card {
width: 100%;
max-height: 250px;
min-height: 250px;
}
}
20 changes: 10 additions & 10 deletions assets/css/var.css
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
:root {
--light-green: #5e9188;
--dark-green: #3e5954;
--dark-blue: #253342;
--black: #232226;
--white: #ffffff;
--purple-500: #6e6197;
--gray-500: #9698a0;
--gray-300: #cccccc;
--gray-100: #f2f2f2;
}
--light-green: #5e9188;
--dark-green: #3e5954;
--dark-blue: #253342;
--black: #232226;
--white: #ffffff;
--purple-500: #6e6197;
--gray-500: #9698a0;
--gray-300: #cccccc;
--gray-100: #f2f2f2;
}
195 changes: 97 additions & 98 deletions assets/data/cards_pt-br.json
Original file line number Diff line number Diff line change
@@ -1,100 +1,99 @@
{
"cards": [
{
"title": "Variável tipada",
"description": "Uma variável tipada é aquele que possui um tipo de dado associado a ela."
},
{
"title": "Parâmetro",
"description": "Uma parâmetro é uma informação passada para uma função ou método como parte de sua chamada."
},
{
"title": "Parâmetro nomeado",
"description": "É uma forma de passar valores para uma função ou método especificando o nome do parâmetro correspondente."
},
{
"title": "Variável computada",
"description": "É uma variável que não armazena um valor diretamente, ela calcula ou deriva seu valor de outras variáveis ou dados."
},
{
"title": "Ternário",
"description": "Expressão condicional.",
"content": {
"code": "Expressão ? Verdadeiro : Falso;"
}
},
{
"title": "Stateless Widget",
"description": "Um StatelessWidget no Flutter é um componente que não possui estado interno mutável, ideal para partes da interface do usuário que não mudam com o tempo e não dependem de estado"
},
{
"title": "Stateful Widget",
"description": "Um StatefulWidget no Flutter é um componente que possui estado interno mutável, permitindo que ele responda a mudanças de estado e atualize dinamicamente a interface do usuário"
},
{
"title": "Função",
"description": "Uma função é um bloco de código que realiza uma tarefa específica e pode ser chamado a partir de outras partes do programa. Ela ajuda a organizar e reutilizar o código, tornando o software mais modular e legível. As funções recebem entradas (chamadas de argumentos) e podem retornar um resultado (valor de retorno) ou simplesmente executar uma ação."

},
{
"title": "Argumento",
"description": "Um argumento é um valor ou uma informação que você fornece a uma função ou método durante sua chamada. Esses argumentos são usados pela função para realizar uma tarefa específica ou para tomar decisões com base nos valores fornecidos. Em resumo, os argumentos são dados de entrada que permitem que uma função realize seu trabalho e produza um resultado ou execute ações desejadas."
},
{
"title": "Programação orientada a objetos",
"description": "A programação orientada a objetos (POO) é um paradigma de programação que se baseia na ideia de modelar o software em torno de objetos, que são instâncias de classes. Cada objeto contém dados (atributos) e métodos (funções) que operam nesses dados. Isso permite organizar o código de forma mais modular, reutilizável e orientada para objetos do mundo real. POO promove conceitos como encapsulamento, herança e polimorfismo, facilitando a criação de sistemas mais flexíveis, compreensíveis e escaláveis."
},
{
"title": "Classe",
"description": "Uma classe em desenvolvimento de software é um projeto ou um 'modelo' para criar objetos. Ela define os atributos (dados) e os métodos (funções) que os objetos criados a partir dela terão. As classes são como moldes para criar objetos que compartilham características comuns. Elas ajudam a organizar o código, permitindo a reutilização e a abstração de dados e funcionalidades em uma estrutura coerente."
},
{
"title": "Objeto",
"description": "Um objeto em desenvolvimento de software é como um personagem em um videogame. Ele tem características (dados) e pode fazer coisas (métodos). Por exemplo, um objeto 'carro' pode ter cor, velocidade e marca (características) e pode acelerar, frear e virar (ações/métodos). Os objetos são instâncias de classes e permitem organizar o código de forma a representar entidades do mundo real, tornando-o mais compreensível e reutilizável."
},
{
"title": "Encapsulamento",
"description": "O encapsulamento funciona como uma 'caixa mágica' que esconde os detalhes internos de um objeto. Isso significa que os dados e o funcionamento interno de um objeto são mantidos privados e não podem ser acessados diretamente de fora. Em vez disso, o objeto fornece interfaces controladas (métodos públicos) para interagir com ele. Isso ajuda a proteger os dados do objeto e controlar como ele é usado, promovendo a segurança e a organização do código."
},
{
"title": "Herança",
"description": "A herança funciona como uma 'árvore genealógica'. Permite que uma classe (ou objeto) herde características e comportamentos de outra classe pai (ou objeto). Isso significa que a classe filha herda os atributos e métodos da classe pai, economizando tempo e promovendo a reutilização de código. A herança é uma forma de organizar e estruturar o código, criando hierarquias de classes que representam relacionamentos entre objetos do mundo real."
},
{
"title": "Polimorfismo",
"description": "O polimorfismo permite que objetos de diferentes tipos se comportem de maneira semelhante através de uma interface compartilhada."
},
{
"title": "Desenvolvimento Front-end",
"description": "Desenvolvimento front-end é o desenvolvimento da interface gráfica, para que as pessoas usuárias possam visualizar e interagir com o que foi desenvolvido."
},
{
"title": "HTML",
"description": "HTML é uma linguagem de marcação utilizada na construção de páginas na web. Documentos HTML podem ser interpretados por navegadores."
},
{
"title": "CSS",
"description": "Cascading Style Sheets é um mecanismo para adicionar estilos a uma página web como cores, tamanhos, fontes e etc. é possivel ligar o arquivo HTML ao CSS adicionando um link para um arquivo CSS que contém os estilos."
},
{
"title": "JavaScript",
"description": "JavaScript é uma linguagem de programação interpretada estruturada, de script em alto nível com tipagem dinâmica fraca e multiparadigma. Juntamente com HTML e CSS, o JavaScript é uma das três principais tecnologias para criação de sites."
},
{
"title": "jQuery",
"description": "Biblioteca de funções em JavaScript que interagem com o HTML de uma maneira muito mais rápida e simples do que apenas pelo JavaScript."
},
{
"title": "UI Design",
"description": "É o desenho e execução de uma interface para a pessoa usuária. Por exemplo, garantir que um botão vai ser visto e apertado."
},
{
"title": "UX Design",
"description": "É o desenho e execução de uma experiência para a pessoa usuária. Por exemplo, desenhar as ações que farão com a pessoa se sinta bem ao entrar numa página, ou engajado, etc."
},
{
"title": "Frameworks",
"description": "São como coleções de ferramentas, componentes e soluções que você pode encontrar em um mesmo pacote (o framework) que facilitam a criação de aplicações complexas."
}
]
"cards": [
{
"title": "Variável tipada",
"description": "Uma variável tipada é aquele que possui um tipo de dado associado a ela."
},
{
"title": "Parâmetro",
"description": "Uma parâmetro é uma informação passada para uma função ou método como parte de sua chamada."
},
{
"title": "Parâmetro nomeado",
"description": "É uma forma de passar valores para uma função ou método especificando o nome do parâmetro correspondente."
},
{
"title": "Variável computada",
"description": "É uma variável que não armazena um valor diretamente, ela calcula ou deriva seu valor de outras variáveis ou dados."
},
{
"title": "Ternário",
"description": "Expressão condicional.",
"content": {
"code": "Expressão ? Verdadeiro : Falso;"
}
},
{
"title": "Stateless Widget",
"description": "Um StatelessWidget no Flutter é um componente que não possui estado interno mutável, ideal para partes da interface do usuário que não mudam com o tempo e não dependem de estado"
},
{
"title": "Stateful Widget",
"description": "Um StatefulWidget no Flutter é um componente que possui estado interno mutável, permitindo que ele responda a mudanças de estado e atualize dinamicamente a interface do usuário"
},
{
"title": "Função",
"description": "Uma função é um bloco de código que realiza uma tarefa específica e pode ser chamado a partir de outras partes do programa. Ela ajuda a organizar e reutilizar o código, tornando o software mais modular e legível. As funções recebem entradas (chamadas de argumentos) e podem retornar um resultado (valor de retorno) ou simplesmente executar uma ação."
},
{
"title": "Argumento",
"description": "Um argumento é um valor ou uma informação que você fornece a uma função ou método durante sua chamada. Esses argumentos são usados pela função para realizar uma tarefa específica ou para tomar decisões com base nos valores fornecidos. Em resumo, os argumentos são dados de entrada que permitem que uma função realize seu trabalho e produza um resultado ou execute ações desejadas."
},
{
"title": "Programação orientada a objetos",
"description": "A programação orientada a objetos (POO) é um paradigma de programação que se baseia na ideia de modelar o software em torno de objetos, que são instâncias de classes. Cada objeto contém dados (atributos) e métodos (funções) que operam nesses dados. Isso permite organizar o código de forma mais modular, reutilizável e orientada para objetos do mundo real. POO promove conceitos como encapsulamento, herança e polimorfismo, facilitando a criação de sistemas mais flexíveis, compreensíveis e escaláveis."
},
{
"title": "Classe",
"description": "Uma classe em desenvolvimento de software é um projeto ou um 'modelo' para criar objetos. Ela define os atributos (dados) e os métodos (funções) que os objetos criados a partir dela terão. As classes são como moldes para criar objetos que compartilham características comuns. Elas ajudam a organizar o código, permitindo a reutilização e a abstração de dados e funcionalidades em uma estrutura coerente."
},
{
"title": "Objeto",
"description": "Um objeto em desenvolvimento de software é como um personagem em um videogame. Ele tem características (dados) e pode fazer coisas (métodos). Por exemplo, um objeto 'carro' pode ter cor, velocidade e marca (características) e pode acelerar, frear e virar (ações/métodos). Os objetos são instâncias de classes e permitem organizar o código de forma a representar entidades do mundo real, tornando-o mais compreensível e reutilizável."
},
{
"title": "Encapsulamento",
"description": "O encapsulamento funciona como uma 'caixa mágica' que esconde os detalhes internos de um objeto. Isso significa que os dados e o funcionamento interno de um objeto são mantidos privados e não podem ser acessados diretamente de fora. Em vez disso, o objeto fornece interfaces controladas (métodos públicos) para interagir com ele. Isso ajuda a proteger os dados do objeto e controlar como ele é usado, promovendo a segurança e a organização do código."
},
{
"title": "Herança",
"description": "A herança funciona como uma 'árvore genealógica'. Permite que uma classe (ou objeto) herde características e comportamentos de outra classe pai (ou objeto). Isso significa que a classe filha herda os atributos e métodos da classe pai, economizando tempo e promovendo a reutilização de código. A herança é uma forma de organizar e estruturar o código, criando hierarquias de classes que representam relacionamentos entre objetos do mundo real."
},
{
"title": "Polimorfismo",
"description": "O polimorfismo permite que objetos de diferentes tipos se comportem de maneira semelhante através de uma interface compartilhada."
},
{
"title": "Desenvolvimento Front-end",
"description": "Desenvolvimento front-end é o desenvolvimento da interface gráfica, para que as pessoas usuárias possam visualizar e interagir com o que foi desenvolvido."
},
{
"title": "HTML",
"description": "HTML é uma linguagem de marcação utilizada na construção de páginas na web. Documentos HTML podem ser interpretados por navegadores."
},
{
"title": "CSS",
"description": "Cascading Style Sheets é um mecanismo para adicionar estilos a uma página web como cores, tamanhos, fontes e etc. é possivel ligar o arquivo HTML ao CSS adicionando um link para um arquivo CSS que contém os estilos."
},
{
"title": "JavaScript",
"description": "JavaScript é uma linguagem de programação interpretada estruturada, de script em alto nível com tipagem dinâmica fraca e multiparadigma. Juntamente com HTML e CSS, o JavaScript é uma das três principais tecnologias para criação de sites."
},
{
"title": "jQuery",
"description": "Biblioteca de funções em JavaScript que interagem com o HTML de uma maneira muito mais rápida e simples do que apenas pelo JavaScript."
},
{
"title": "UI Design",
"description": "É o desenho e execução de uma interface para a pessoa usuária. Por exemplo, garantir que um botão vai ser visto e apertado."
},
{
"title": "UX Design",
"description": "É o desenho e execução de uma experiência para a pessoa usuária. Por exemplo, desenhar as ações que farão com a pessoa se sinta bem ao entrar numa página, ou engajado, etc."
},
{
"title": "Frameworks",
"description": "São como coleções de ferramentas, componentes e soluções que você pode encontrar em um mesmo pacote (o framework) que facilitam a criação de aplicações complexas."
}
]
}
Loading

0 comments on commit c2b23b9

Please sign in to comment.