chore(learn): remove other language curriculum Chinese (#39745)
This commit is contained in:
Randell Dawson
GitHub
@ -1,150 +0,0 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af1
|
||||
title: Add Flex Superpowers to the Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Adicione Superpotências Flex ao Tweet Incorporado
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> À direita está o tweet incorporado que será usado como exemplo prático. Alguns dos elementos ficariam melhores com um layout diferente. O último desafio demonstrou a <code>display: flex</code> . Aqui você a adicionará a vários componentes no tweet incorporado para começar a ajustar seu posicionamento. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione a propriedade CSS <code>display: flex</code> para todos os itens a seguir - observe que os seletores já estão configurados no CSS:
|
||||
<code>header</code>, <code>.profile-name</code> do cabeçalho, <code>.follow-btn</code> do cabeçalho, <code>h3</code> e <code>h4</code> do cabeçalho, <code>footer</code>, e <code>.stats</code> do rodapé. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu <code>header</code> deve ter uma propriedade de <code>display</code> definida como flexível.
|
||||
testString: 'assert($("header").css("display") == "flex", "Your <code>header</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Seu <code>footer</code> deve ter uma propriedade de <code>display</code> configurada para flexionar.
|
||||
testString: 'assert($("footer").css("display") == "flex", "Your <code>footer</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Seu <code>h3</code> deve ter uma propriedade de <code>display</code> configurada para flexionar.
|
||||
testString: 'assert($("h3").css("display") == "flex", "Your <code>h3</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Seu <code>h4</code> deve ter uma propriedade de <code>display</code> configurada para flexionar.
|
||||
testString: 'assert($("h4").css("display") == "flex", "Your <code>h4</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Seu <code>.profile-name</code> deve ter uma propriedade de <code>display</code> configurada como flex.
|
||||
testString: 'assert($(".profile-name").css("display") == "flex", "Your <code>.profile-name</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Seu <code>.follow-btn</code> deve ter uma propriedade de <code>display</code> configurada para flexionar.
|
||||
testString: 'assert($(".follow-btn").css("display") == "flex", "Your <code>.follow-btn</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Seus <code>.stats</code> devem ter uma propriedade de <code>display</code> configurada para flexionar.
|
||||
testString: 'assert($(".stats").css("display") == "flex", "Your <code>.stats</code> should have a <code>display</code> property set to flex.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header {
|
||||
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer {
|
||||
|
||||
}
|
||||
footer .stats {
|
||||
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,73 +0,0 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af8
|
||||
title: Align Elements Using the align-items Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Alinhar elementos usando a propriedade align-items
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A propriedade <code>align-items</code> é semelhante a <code>justify-content</code> . Lembre-se de que a propriedade <code>justify-content</code> alinha os itens flexíveis ao longo do eixo principal. Para linhas, o eixo principal é uma linha horizontal e, para colunas, é uma linha vertical. Os contêineres flexíveis também possuem um <strong>eixo cruzado</strong> que é o oposto do eixo principal. Para linhas, o eixo cruzado é vertical e para colunas, o eixo cruzado é horizontal. O CSS oferece a propriedade <code>align-items</code> para alinhar itens flexíveis ao longo do eixo cruzado. Para uma linha, ele informa ao CSS como empurrar os itens da linha inteira para cima ou para baixo no contêiner. E para uma coluna, como empurrar todos os itens para a esquerda ou para a direita dentro do contêiner. Os diferentes valores disponíveis para <code>align-items</code> incluem: <ul><li> <code>flex-start</code> : alinha os itens ao início do contêiner flexível. Para linhas, isso alinha os itens ao topo do contêiner. Para colunas, isso alinha os itens à esquerda do contêiner. </li><li> <code>flex-end</code> : alinha os itens ao final do contêiner flexível. Para linhas, isso alinha os itens à parte inferior do contêiner. Para colunas, isso alinha os itens à direita do contêiner. </li><li> <code>center</code> : alinha os itens ao centro. Para linhas, alinha verticalmente os itens (espaço igual acima e abaixo dos itens). Para colunas, isso as alinha horizontalmente (espaço igual à esquerda e à direita dos itens). </li><li> <code>stretch</code> : estica os itens para encher o contêiner flexível. Por exemplo, itens de linha são esticados para preencher o contêiner flexível de cima para baixo. </li><li> <code>baseline</code> : alinha os itens às suas linhas de base. A linha de base é um conceito de texto, pense nisso como a linha em que as letras ficam em cima. </li></ul></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Um exemplo ajuda a mostrar essa propriedade em ação. Adicione a propriedade CSS <code>align-items</code> ao elemento <code>#box-container</code> e atribua a ele um valor de *center*.
|
||||
<br> <strong>Bônus</strong> <br> Tente as outras opções para a propriedade <code>align-items</code> no editor de código para ver suas diferenças. Mas note que um valor de *center* é o único que passará este desafio. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O elemento <code>#box-container</code> deve ter uma propriedade <code>align-items</code> definida como um valor de center.'
|
||||
testString: 'assert($("#box-container").css("align-items") == "center", "The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 200px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 200px;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"><p>Hello</p></div>
|
||||
<div id="box-2"><p>Goodbye</p></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,75 +0,0 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af6
|
||||
title: Align Elements Using the justify-content Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Alinhar elementos usando a propriedade justify-content
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Às vezes, os itens flexíveis dentro de um contêiner flexível não preenchem todo o espaço no contêiner. É comum querer dizer ao CSS como alinhar e espaçar os itens flexíveis de uma determinada maneira. Felizmente, a propriedade <code>justify-content</code> possui várias opções para fazer isso. Mas primeiro, há alguma terminologia importante para entender antes de rever essas opções.
|
||||
<a href="https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg" target="_blank">Aqui está uma imagem útil mostrando uma linha para ilustrar os conceitos abaixo.</a>
|
||||
Lembre-se de que definir um contêiner flexível como uma linha coloca os itens flexíveis lado a lado da esquerda para a direita. Um contêiner flexível definido como uma coluna coloca os itens flexíveis em uma pilha vertical de cima para baixo. Para cada um, a direção em que os itens flexíveis são organizados é chamada de <strong>eixo principal</strong> . Para uma linha, esta é uma linha horizontal que corta cada item. E para uma coluna, o eixo principal é uma linha vertical que passa através dos itens.
|
||||
Existem várias opções de como espaçar os itens flexíveis ao longo da linha que é o eixo principal. Um dos mais usados é a <code>justify-content: center;</code> , que alinha todos os itens flexíveis ao centro dentro do contêiner flexível. Outras opções incluem: <ul><li> <code>flex-start</code> : alinha os itens ao início do contêiner flexível. Para uma linha, isso empurra os itens para a esquerda do contêiner. Para uma coluna, isso empurra os itens para o topo do contêiner. </li><li> <code>flex-end</code> : alinha os itens ao final do contêiner flexível. Para uma linha, isso empurra os itens para a direita do contêiner. Para uma coluna, isso empurra os itens para o fundo do contêiner. </li><li> <code>space-between</code> : alinha itens ao centro do eixo principal, com espaço extra colocado entre os itens. O primeiro e o último item são empurrados para a borda do contêiner flexível. Por exemplo, em uma linha, o primeiro item está contra o lado esquerdo do contêiner, o último item está contra o lado direito do contêiner e, em seguida, os outros itens entre eles são espaçados uniformemente. </li><li> <code>space-around</code> : semelhante ao <code>space-between</code> mas o primeiro e último itens não estão encostados às bordas do contêiner, o espaço é distribuído em torno de todos os itens </li></ul></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Um exemplo ajuda a mostrar essa propriedade em ação. Adicione a propriedade CSS <code>justify-content</code> ao elemento <code>#box-container</code> e atribua a ela um valor de *center*. <strong>Bônus</strong> <br> Experimente as outras opções na propriedade <code>justify-content</code> no editor de código para ver suas diferenças. Mas note que um valor de *center* é o único que passará este desafio. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O elemento <code>#box-container</code> deve ter uma propriedade <code>justify-content</code> definida como um valor de center.'
|
||||
testString: 'assert($("#box-container").css("justify-content") == "center", "The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,136 +0,0 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af5
|
||||
title: Apply the flex-direction Property to Create a Column in the Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Aplicar a propriedade flex-direction para criar uma coluna no Tweet Embed
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O <code>header</code> e <code>footer</code> incorporados pelo tweet usavam a propriedade <code>flex-direction</code> anteriormente com um valor de linha. Da mesma forma, os itens dentro do elemento <code>.profile-name</code> funcionariam bem empilhados como uma coluna. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione o <code>flex-direction</code> propriedade CSS ao elemento <code>.profile-name</code> do cabeçalho e defina o valor como column. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O elemento <code>.profile-name</code> deve ter uma propriedade de <code>flex-direction</code> definida como column.
|
||||
testString: 'assert($(".profile-name").css("flex-direction") == "column", "The <code>.profile-name</code> element should have a <code>flex-direction</code> property set to column.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header, footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,141 +0,0 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af3
|
||||
title: Apply the flex-direction Property to Create Rows in the Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Aplicar a propriedade flex-direction para criar linhas no Tweet Incorporar
|
||||
---
|
||||
|
||||
## Descrição
|
||||
<section id="description"> O <code>header</code> e o <code>footer</code> do exemplo de incorporação de tweets possuem itens-filhos que poderiam ser organizados como linhas usando a propriedade <code>flex-direction</code> . Isso informa ao CSS que alinhe os filhos horizontalmente. </section>
|
||||
|
||||
## Instruções
|
||||
<section id="instructions"> Adicione a propriedade CSS <code>flex-direction</code> ao <code>header</code> e ao <code>footer</code> e defina o valor como *row*. </section>
|
||||
|
||||
## Testes
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O <code>header</code> deve ter uma propriedade de <code>flex-direction</code> definida como linha.
|
||||
testString: 'assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g), "The <code>header</code> should have a <code>flex-direction</code> property set to row.");'
|
||||
- text: O <code>footer</code> deve ter uma propriedade de <code>flex-direction</code> definida para linha.
|
||||
testString: 'assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g), "The <code>footer</code> should have a <code>flex-direction</code> property set to row.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Desafio Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solução
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// Solução necessária
|
||||
```
|
||||
</section>
|
||||
@ -1,73 +0,0 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af0
|
||||
title: 'Use display: flex to Position Two Boxes'
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Use display: flex para posicionar duas caixas'
|
||||
---
|
||||
|
||||
## Descrição
|
||||
<section id="description"> Esta seção usa estilos de desafio alternados para mostrar como usar o CSS para posicionar elementos de maneira flexível. Primeiro, um desafio explicará a teoria, então um desafio prático usando um simples componente de tweet aplicará o conceito de flexbox.
|
||||
Colocando a propriedade CSS <code>display: flex;</code> em um elemento permite que você use outras propriedades flex para criar uma página responsiva. </section>
|
||||
|
||||
## Instruções
|
||||
<section id="instructions"> Adicione a propriedade CSS <code>display</code> ao <code>#box-container</code> e defina seu valor como *flex*. </section>
|
||||
|
||||
## Testes
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-container</code> deve ter a propriedade de <code>display</code> configurada para um valor de flex.'
|
||||
testString: 'assert($("#box-container").css("display") == "flex", "<code>#box-container</code> should have the <code>display</code> property set to a value of flex.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Desafio Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
}
|
||||
</style>
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solução
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,139 +0,0 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af9
|
||||
title: Use the align-items Property in the Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a propriedade de itens de alinhamento no Tweet Incorporar
|
||||
---
|
||||
|
||||
## Descrição
|
||||
<section id="description"> O último desafio apresentou a propriedade <code>align-items</code> e deu um exemplo. Essa propriedade pode ser aplicada a alguns elementos de incorporação do tweet para alinhar os itens flexíveis dentro deles. </section>
|
||||
|
||||
## Instruções
|
||||
<section id="instructions"> Adicione a propriedade CSS <code>align-items</code> ao elemento <code>.follow-btn</code> do cabeçalho. Defina o valor para <code>center</code>. </section>
|
||||
|
||||
## Testes
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O elemento <code>.follow-btn</code> deve ter a propriedade <code>align-items</code> definida como um valor de center.
|
||||
testString: 'assert($(".follow-btn").css("align-items") == "center", "The <code>.follow-btn</code> element should have the <code>align-items</code> property set to a value of center.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Desafio Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header, footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Soluções
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,75 +0,0 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b00
|
||||
title: Use the align-self Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a propriedade align-self
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A última propriedade dos itens flexíveis é o <code>align-self</code> . Essa propriedade permite ajustar o alinhamento de cada item individualmente, em vez de configurá-los todos de uma vez. Isso é útil, pois outras técnicas comuns de ajuste que usam as propriedades CSS <code>float</code> , <code>clear</code> e <code>vertical-align</code> não funcionam em itens flexíveis.
|
||||
<code>align-self</code> aceita os mesmos valores que <code>align-items</code> e substituirá qualquer valor definido pela propriedade <code>align-items</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione a propriedade CSS <code>align-self</code> a ambos <code>#box-1</code> e <code>#box-2</code> . Dê ao <code>#box-1</code> um valor de <code>center</code> e dê ao <code>#box-2</code> um valor de <code>flex-end</code>. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O elemento <code>#box-1</code> deve ter a propriedade <code>align-self</code> definida como um valor de center.'
|
||||
testString: 'assert($("#box-1").css("align-self") == "center", "The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of center.");'
|
||||
- text: 'O elemento <code>#box-2</code> deve ter a propriedade <code>align-self</code> definida como um valor de flex-end.'
|
||||
testString: 'assert($("#box-2").css("align-self") == "flex-end", "The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of flex-end.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,78 +0,0 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afd
|
||||
title: Use the flex-basis Property to Set the Initial Size of an Item
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a propriedade de base flexível para definir o tamanho inicial de um item
|
||||
---
|
||||
|
||||
## Descrição
|
||||
<section id="description"> A propriedade <code>flex-basis</code> especifica o tamanho inicial do item antes que o CSS faça ajustes com <code>flex-shrink</code> ou <code>flex-grow</code> .
|
||||
As unidades usadas pela propriedade <code>flex-basis</code> são as mesmas que outras propriedades de tamanho ( <code>px</code> , <code>em</code> , <code>%</code> , etc.). O valor <code>auto</code> dimensiona itens com base no conteúdo. </section>
|
||||
|
||||
## Instruções
|
||||
<section id="instructions"> Defina o tamanho inicial das caixas usando <code>flex-basis</code> . Adicione a propriedade CSS <code>flex-basis</code> a ambos <code>#box-1</code> e <code>#box-2</code> . Dê <code>#box-1</code> um valor de <code>10em</code> e <code>#box-2</code> um valor de <code>20em</code> . </section>
|
||||
|
||||
## Testes
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O elemento <code>#box-1</code> deve ter uma propriedade de <code>flex-basis</code> .'
|
||||
testString: 'assert($("#box-1").css("flex-basis") != "auto", "The <code>#box-1</code> element should have a <code>flex-basis</code> property.");'
|
||||
- text: 'O elemento <code>#box-1</code> deve ter um valor de <code>flex-basis</code> de <code>10em</code> .'
|
||||
testString: 'assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g), "The <code>#box-1</code> element should have a <code>flex-basis</code> value of <code>10em</code>.");'
|
||||
- text: 'O elemento <code>#box-2</code> deve ter a propriedade de <code>flex-basis</code> .'
|
||||
testString: 'assert($("#box-2").css("flex-basis") != "auto", "The <code>#box-2</code> element should have the <code>flex-basis</code> property.");'
|
||||
- text: 'O elemento <code>#box-2</code> deve ter um valor de <code>flex-basis</code> de <code>20em</code> .'
|
||||
testString: 'assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g), "The <code>#box-2</code> element should have a <code>flex-basis</code> value of <code>20em</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Desafio Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solução
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,71 +0,0 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af4
|
||||
title: Use the flex-direction Property to Make a Column
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a propriedade flex-direction para criar uma coluna
|
||||
---
|
||||
|
||||
## Descrição
|
||||
<section id="description"> Os dois últimos desafios usaram a propriedade <code>flex-direction</code> definida como <code>row</code> (linha). Essa propriedade também pode criar uma coluna empilhando verticalmente os filhos de um contêiner flexível. </section>
|
||||
|
||||
## Instruções
|
||||
<section id="instructions"> Adicione a propriedade CSS<code>flex-direction</code> ao elemento <code>#box-container</code> e atribua a ela um valor de <code>column</code>. </section>
|
||||
|
||||
## Testes
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O elemento <code>#box-container</code> deve ter uma propriedade de <code>flex-direction</code> definida como coluna.'
|
||||
testString: 'assert($("#box-container").css("flex-direction") == "column", "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to column.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Desafio Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solução
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,71 +0,0 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af2
|
||||
title: Use the flex-direction Property to Make a Row
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a propriedade flex-direction para criar uma linha
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Adicionando <code>display: flex</code> para um elemento o transforma em um contêiner flexível. Isso torna possível alinhar quaisquer filhos desse elemento em linhas ou colunas. Você faz isso adicionando a propriedade <code>flex-direction</code> ao item pai e configurando-o para linha ou coluna. A criação de uma linha alinhará os filhos horizontalmente e a criação de uma coluna alinhará os filhos verticalmente. Outras opções para <code>flex-direction</code> são reversão de linha e reversão de coluna. <strong>Nota</strong> <br> O valor padrão da propriedade <code>flex-direction</code> é row. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione o <code>flex-direction</code> propriedade CSS ao elemento <code>#box-container</code> e atribua a ele um valor de reversão de linha. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O elemento <code>#box-container</code> deve ter uma propriedade de <code>flex-direction</code> definida como reversão de linha.'
|
||||
testString: 'assert($("#box-container").css("flex-direction") == "row-reverse", "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row-reverse.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,74 +0,0 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afc
|
||||
title: Use the flex-grow Property to Expand Items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a propriedade flex-grow para expandir itens
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O oposto de <code>flex-shrink</code> é a propriedade <code>flex-grow</code> . Lembre-se de que <code>flex-shrink</code> controla o tamanho dos itens quando o contêiner encolhe. A propriedade <code>flex-grow</code> controla o tamanho dos itens quando o contêiner pai se expande.
|
||||
Usando um exemplo semelhante do último desafio, se um item tiver um valor de <code>flex-grow</code> igual a 1 e o outro tiver um valor de <code>flex-grow</code> igual a 3, aquele com o valor de 3 crescerá três vezes mais que o outro. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione a propriedade CSS <code>flex-grow</code> a ambos <code>#box-1</code> e <code>#box-2</code> . Dê a <code>#box-1</code> um valor de 1 e a <code>#box-2</code> um valor de 2. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O elemento <code>#box-1</code> deve ter a propriedade <code>flex-grow</code> definida como um valor de 1.'
|
||||
testString: 'assert($("#box-1").css("flex-grow") == "1", "The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of 1.");'
|
||||
- text: 'O elemento <code>#box-2</code> deve ter a propriedade <code>flex-grow</code> definida como um valor de 2.'
|
||||
testString: 'assert($("#box-2").css("flex-grow") == "2", "The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of 2.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,77 +0,0 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afe
|
||||
title: Use the flex Shorthand Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a propriedade flexível de taquigrafia
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Existe um atalho disponível para definir várias propriedades *flex* de uma só vez. As propriedades <code>flex-grow</code> , <code>flex-shrink</code> e <code>flex-basis</code> podem ser definidas todas juntas usando a propriedade <code>flex</code> .
|
||||
Por exemplo, <code>flex: 1 0 10px;</code> irá definir o item para <code>flex-grow: 1;</code> <code>flex-shrink: 0;</code> e <code>flex-basis: 10px;</code> .
|
||||
As configurações padrão da propriedade são <code>flex: 0 1 auto;</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione a propriedade CSS <code>flex</code> a ambos <code>#box-1</code> e <code>#box-2</code> . Dê a <code>#box-1</code> os valores para que sua <code>flex-grow</code> seja 2, sua <code>flex-shrink</code> seja 2 e sua <code>flex-basis</code> seja 150px. Dê a <code>#box-2</code> os valores para que sua <code>flex-grow</code> seja 1, sua <code>flex-shrink</code> seja 1 e sua <code>flex-basis</code> seja 150px.
|
||||
Esses valores farão com que <code>#box-1</code> cresça para preencher o espaço extra com o dobro da taxa de <code>#box-2</code> quando o container for maior que 300px e encolherá com o dobro da taxa de <code>#box-2</code> quando o container for menor que 300px. 300px é o tamanho combinado dos valores de <code>flex-basis</code> das duas caixas. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O elemento <code>#box-1</code> deve ter a propriedade <code>flex</code> definida como um valor de 2 2 150px.'
|
||||
testString: 'assert($("#box-1").css("flex-grow") == "2" && $("#box-1").css("flex-shrink") == "2" && $("#box-1").css("flex-basis") == "150px", "The <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.");'
|
||||
- text: 'O elemento <code>#box-2</code> deve ter a propriedade <code>flex</code> definida como um valor de 1 1 150px.'
|
||||
testString: 'assert($("#box-2").css("flex-grow") == "1" && $("#box-2").css("flex-shrink") == "1" && $("#box-2").css("flex-basis") == "150px", "The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.");'
|
||||
- text: 'Seu código deve usar a propriedade <code>flex</code> para <code>#box-1</code> e <code>#box-2</code> .'
|
||||
testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, "Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,76 +0,0 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afb
|
||||
title: Use the flex-shrink Property to Shrink Items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a propriedade flex-shrink para reduzir os itens
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Até agora, todas as propriedades nos desafios se aplicam ao contêiner flex (pai dos itens flex). No entanto, existem várias propriedades úteis para os itens flex.
|
||||
A primeira é a propriedade <code>flex-shrink</code> . Quando usado, permite que um item encolha se o contêiner flexível for muito pequeno. Os itens diminuem quando a largura do contêiner pai é menor que as larguras combinadas de todos os itens flexíveis dentro dele.
|
||||
A propriedade <code>flex-shrink</code> recebe números como valores. Quanto maior o número, mais ele será reduzido em comparação com os outros itens no contêiner. Por exemplo, se um item tiver um valor <code>flex-shrink</code> de 1 e o outro tiver um valor <code>flex-shrink</code> de 3, aquele com o valor de 3 diminuirá três vezes mais do que o outro. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione a propriedade CSS <code>flex-shrink</code> a ambos <code>#box-1</code> e <code>#box-2</code> . Dê a <code>#box-1</code> um valor de 1 e a <code>#box-2</code> um valor de 2. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O elemento <code>#box-1</code> deve ter a propriedade <code>flex-shrink</code> definida com um valor de 1.'
|
||||
testString: 'assert($("#box-1").css("flex-shrink") == "1", "The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.");'
|
||||
- text: 'O elemento <code>#box-2</code> deve ter a propriedade <code>flex-shrink</code> definida com um valor de 2.'
|
||||
testString: 'assert($("#box-2").css("flex-shrink") == "2", "The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,98 +0,0 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afa
|
||||
title: Use the flex-wrap Property to Wrap a Row or Column
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a propriedade flex-wrap para agrupar uma linha ou coluna
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Flexbox CSS tem um recurso para dividir itens flexíveis em várias linhas (ou colunas). Por padrão, um contêiner flexível acomodará todos os itens flexíveis juntos. Por exemplo, uma <code>row</code> (linha) estará toda em uma linha.
|
||||
No entanto, usando a propriedade <code>flex-wrap</code> , faz com que o CSS agrupe os itens. Isso significa que itens extras são movidos para uma nova linha ou coluna. O ponto onde haverá a quebra depende do tamanho dos itens e do tamanho do contêiner.
|
||||
CSS também tem opções para a direção do agrupamento: <ul><li> <code>nowrap</code> : esta é a configuração padrão e não agrupa os itens. </li><li> <code>wrap</code> : agrupa os itens da esquerda para a direita, se estiverem em uma linha ou de cima para baixo, se estiverem em uma coluna. </li><li> <code>wrap-reverse</code> : agrupa os itens de baixo para cima, se estiverem em uma linha, ou da direita para a esquerda, se estiverem em uma coluna. </li></ul></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> O layout atual tem muitas caixas para uma só linha. Adicione a propriedade CSS <code>flex-wrap</code> ao elemento <code>#box-container</code> e atribua a ela um valor de <code>wrap</code>. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O elemento <code>#box-container</code> deve ter a propriedade <code>flex-wrap</code> definida como um valor de wrap.'
|
||||
testString: 'assert($("#box-container").css("flex-wrap") == "wrap", "The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-3 {
|
||||
background-color: violet;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-4 {
|
||||
background-color: yellow;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-5 {
|
||||
background-color: green;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-6 {
|
||||
background-color: black;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
<div id="box-3"></div>
|
||||
<div id="box-4"></div>
|
||||
<div id="box-5"></div>
|
||||
<div id="box-6"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,137 +0,0 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af7
|
||||
title: Use the justify-content Property in the Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a propriedade justify-content no Tweet Incorporar
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O último desafio mostrou um exemplo da propriedade <code>justify-content</code> . Para a incorporação do tweet, essa propriedade pode ser aplicada para alinhar os itens no elemento <code>.profile-name</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione a propriedade CSS <code>justify-content</code> ao elemento <code>.profile-name</code> do cabeçalho e defina o valor para qualquer uma das opções do último desafio. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O elemento <code>.profile-name</code> deve ter a propriedade <code>justify-content</code> definida para qualquer um desses valores: center, flex-start, flex-end, espaço-entre ou espaço-around.'
|
||||
testString: 'assert(code.match(/header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around|space-evenly)\s*;/g), "The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, space-around, or space-evenly.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header, footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,74 +0,0 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512aff
|
||||
title: Use the order Property to Rearrange Items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A propriedade <code>order</code> é usada para informar ao CSS a ordem de como os itens flexíveis aparecem no contêiner flexível. Por padrão, os itens aparecerão na mesma ordem em que aparecem no HTML de origem. A propriedade aceita números como valores e números negativos podem ser usados. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione a propriedade CSS <code>order</code> a ambos <code>#box-1</code> e <code>#box-2</code> . Dê a <code>#box-1</code> um valor de 2 e dê a <code>#box-2</code> um valor de 1. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O elemento <code>#box-1</code> deve ter a propriedade <code>order</code> configurada para um valor de 2.'
|
||||
testString: 'assert($("#box-1").css("order") == "2", "The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.");'
|
||||
- text: 'O elemento <code>#box-2</code> deve ter a propriedade <code>order</code> configurada para um valor de 1.'
|
||||
testString: 'assert($("#box-2").css("order") == "1", "The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user