chore(learn): remove other language curriculum Chinese (#39745)
This commit is contained in:
Randell Dawson
GitHub
@ -1,61 +0,0 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b08
|
||||
title: Create a Media Query
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Criar uma consulta de mídia
|
||||
---
|
||||
|
||||
## Descrição
|
||||
<section id="description"> Media Queries são uma nova técnica introduzida no CSS3 que altera a apresentação do conteúdo com base em diferentes tamanhos de viewport(telas). A janela de visualização é uma área visível de um usuário de uma página da Web e é diferente dependendo do dispositivo usado para acessar o site. Media queries consistem em um tipo de mídia e, se esse tipo de mídia corresponder ao tipo de dispositivo em que o documento é exibido, os estilos serão aplicados. Você pode ter tantos seletores e estilos dentro de sua Media querie quanto desejar. Veja um exemplo de uma Media querie que retorna o conteúdo quando a largura do dispositivo é menor ou igual a 100px: <code>@media (max-width: 100px) { /* CSS Rules */ }</code> e a consulta de mídia a seguir retorna o conteúdo quando o a altura do dispositivo é maior ou igual a 350px: @media <code>@media (min-height: 350px) { /* CSS Rules */ }</code> Lembre-se, o CSS dentro da Media querie é aplicado somente se o tipo de mídia corresponder ao do dispositivo que está sendo usado. </section>
|
||||
|
||||
## Instruções
|
||||
<section id="instructions"> Adicione uma consulta de mídia para que a tag <code>p</code> tenha um <code>font-size</code> de 10px quando a altura do dispositivo for menor ou igual a 800px. </section>
|
||||
|
||||
## Testes
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Declare uma consulta <code>@media</code> para dispositivos com uma <code>height</code> menor ou igual a 800px.
|
||||
testString: assert($("style").text().replace(/\s/g ,'').match(/@media\(max-height:800px\)/g), "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.");
|
||||
- text: Seu elemento <code>p</code> deve ter o <code>font-size</code> da <code>font-size</code> de 10px quando a <code>height</code> do dispositivo for menor ou igual a 800px.
|
||||
testString: assert($("style").text().replace(/\s/g ,'').match(/@media\(max-height:800px\){p{font-size:10px;?}}/g), "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.");
|
||||
- text: Seu elemento <code>p</code> deve ter o inicial<code>font-size</code> da <code>font-size</code> de 20px quando a <code>height</code> do dispositivo for maior a 800px.
|
||||
testString: assert($("style").text().replace(/\s/g ,'').replace(/@media.*}/g, '').match(/p{font-size:20px;?}/g), “Your <code>p</code> element should have an initial <code>font-size</code> of 20px when the device <code>height</code> is more than 800px.");
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Desafio
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Adicione a media querie abaixo */
|
||||
|
||||
</style>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solução
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// Solução necessária
|
||||
```
|
||||
</section>
|
||||
@ -1,57 +0,0 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b09
|
||||
title: Make an Image Responsive
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Faça uma imagem responsiva
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Fazer imagens responsivas com CSS é realmente muito simples. Em vez de aplicar uma largura absoluta a um elemento: <code>img { width: 720px; }</code> Você pode usar: <blockquote> img { <br> max-width: 100%; <br> display: bloco; <br> altura: auto; <br> } </blockquote> A propriedade <code>max-width</code> de 100% dimensiona a imagem para se ajustar à largura do contêiner, mas a imagem não se estende mais do que a largura original. Definir a propriedade de <code>display</code> para bloquear altera a imagem de um elemento in-line (seu padrão) para um elemento de bloco em sua própria linha. A propriedade <code>height</code> do auto mantém a proporção original da imagem. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione regras de estilo para a tag <code>img</code> para torná-lo responsivo ao tamanho de seu contêiner. Ele deve exibir como um elemento de nível de bloco, ele deve caber toda a largura de seu contêiner sem esticar e deve manter sua proporção original. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Sua tag <code>img</code> deve ter uma <code>max-width</code> definida como 100%.
|
||||
testString: 'assert(code.match(/max-width:\s*?100%;/g), "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.");'
|
||||
- text: Sua tag <code>img</code> deve ter um conjunto de <code>display</code> para bloquear.
|
||||
testString: 'assert($("img").css("display") == "block", "Your <code>img</code> tag should have a <code>display</code> set to block.");'
|
||||
- text: Sua tag <code>img</code> deve ter uma <code>height</code> definida como automática.
|
||||
testString: 'assert(code.match(/height:\s*?auto;/g), "Your <code>img</code> tag should have a <code>height</code> set to auto.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,56 +0,0 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0c
|
||||
title: Make Typography Responsive
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Faça tipografia responsiva
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Em vez de usar <code>em</code> ou <code>px</code> para dimensionar texto, você pode usar unidades de viewport para tipografia responsiva. As unidades de viewport, como porcentagens, são unidades relativas, mas são baseadas em itens diferentes. As unidades de viewport são relativas às dimensões da janela de visualização (largura ou altura) de um dispositivo e as porcentagens são relativas ao tamanho do elemento de contêiner pai. As quatro unidades de viewport diferentes são: <ul><li> <code>vw: 10vw</code> seria 10% da largura da janela de visualização. </li><li> <code>vh: 3vh</code> seria 3% da altura da viewport. </li><li> <code>vmin: 70vmin</code> seria 70% da dimensão menor da viewport (altura vs. largura). </li><li> <code>vmax: 100vmax</code> seria 100% da dimensão maior da viewport (altura vs. largura). </li></ul></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Defina a <code>width</code> da tag <code>h2</code> para 80% da largura da viewport e a <code>width</code> do parágrafo como 75% da dimensão menor da viewport. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Sua tag <code>h2</code> deve ter uma <code>width</code> de 80vw.
|
||||
testString: 'assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g), "Your <code>h2</code> tag should have a <code>width</code> of 80vw.");'
|
||||
- text: Sua tag <code>p</code> deve ter uma <code>width</code> de 75vmin.
|
||||
testString: 'assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g), "Your <code>p</code> tag should have a <code>width</code> of 75vmin.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<h2>Importantus Ipsum</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,55 +0,0 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0a
|
||||
title: Use a Retina Image for Higher Resolution Displays
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use uma imagem de retina para exibições de maior resolução
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A maneira mais simples de fazer com que suas imagens apareçam "retina" (e otimizá-las para exibições de retina) é definir seus valores de <code>width</code> e <code>height</code> como apenas metade do que o arquivo original é. Aqui está um exemplo de uma imagem que usa apenas metade da altura e largura originais: <blockquote> <style> <br> img {altura: 250px; largura: 250px; } <br> </ style> <br> <img src = "coolPic500x500" alt = "Uma imagem excelente"> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Defina a <code>width</code> e a <code>height</code> da tag <code>img</code> para metade de seus valores originais. Nesse caso, a <code>height</code> original e a <code>width</code> original são de 200 px. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Sua tag <code>img</code> deve ter uma <code>width</code> de 100 pixels.
|
||||
testString: 'assert($("img").css("width") == "100px", "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.");'
|
||||
- text: Sua tag <code>img</code> deve ter uma <code>height</code> de 100 pixels.
|
||||
testString: 'assert($("img").css("height") == "100px", "Your <code>img</code> tag should have a <code>height</code> of 100 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user