chore(learn): remove other language curriculum Chinese (#39745)
This commit is contained in:
Randell Dawson
GitHub
@@ -1,94 +0,0 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abe
|
||||
title: Add a box-shadow to a Card-like Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Adicionar uma sombra de caixa a um elemento semelhante ao cartão
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A propriedade <code>box-shadow</code> aplica uma ou mais sombras a um elemento. A propriedade <code>box-shadow</code> toma valores para <code>offset-x</code> (até onde empurrar a sombra horizontalmente a partir do elemento), <code>offset-y</code> (até onde empurrar a sombra verticalmente a partir do elemento), <code>blur-radius</code> , <code>spread-radius</code> e uma cor valor, nessa ordem. Os valores de <code>spread-radius</code> e <code>blur-radius</code> <code>spread-radius</code> são opcionais. Aqui está um exemplo do CSS para criar várias sombras com algum desfoque, em cores pretas quase transparentes: <blockquote> box-shadow: 0 10px 20px rgba (0,0,0,0.19), 0 6px 6px rgba (0,0,0,0.23); </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> O elemento agora tem um id de <code>thumbnail</code> . Com esse seletor, use os valores CSS acima para colocar uma <code>box-shadow</code> no cartão. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve adicionar uma propriedade de <code>box-shadow</code> para o ID da <code>thumbnail</code> .
|
||||
testString: 'assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), "Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.");'
|
||||
- text: Você deve usar o CSS fornecido para o valor de <code>box-shadow</code> da <code>box-shadow</code> .
|
||||
testString: 'assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\),\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), "You should use the given CSS for the <code>box-shadow</code> value.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,93 +0,0 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abc
|
||||
title: Adjust the background-color Property of Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Ajustar a propriedade de cor de fundo do texto
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Em vez de ajustar o fundo geral ou a cor do texto para tornar o primeiro plano facilmente legível, você pode adicionar uma <code>background-color</code> ao elemento que contém o texto que deseja enfatizar. Este desafio usa <code>rgba()</code> vez de códigos <code>hex</code> ou <code>rgb()</code> normal <code>rgb()</code> . <blockquote> rgba significa: <br> r = vermelho <br> g = verde <br> b = azul <br> a = alfa / nível de opacidade </blockquote> Os valores RGB podem variar de 0 a 255. O valor alfa pode variar de 1, que é totalmente opaco ou cor sólida, a 0, que é totalmente transparente ou claro. <code>rgba()</code> é ótimo para usar neste caso, pois permite ajustar a opacidade. Isso significa que você não precisa bloquear completamente o plano de fundo. Você usará <code>background-color: rgba(45, 45, 45, 0.1)</code> para este desafio. Ele produz uma cor cinza escura que é quase transparente, dado o baixo valor de opacidade de 0,1. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Para tornar o texto mais destacado, ajuste a <code>background-color</code> de fundo do elemento <code>h4</code> ao valor <code>rgba()</code> fornecido. Também para o <code>h4</code> , remova a propriedade <code>height</code> e adicione <code>padding</code> de 10px. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Seu código deve adicionar uma propriedade de <code>background-color</code> ao elemento <code>h4</code> definido como <code>rgba(45, 45, 45, 0.1)</code> .'
|
||||
testString: 'assert(code.match(/background-color:\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\)/gi), "Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.");'
|
||||
- text: Seu código deve adicionar uma propriedade de <code>padding</code> ao elemento <code>h4</code> e configurá-lo para 10 pixels.
|
||||
testString: 'assert($("h4").css("padding-top") == "10px" && $("h4").css("padding-right") == "10px" && $("h4").css("padding-bottom") == "10px" && $("h4").css("padding-left") == "10px", "Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.");'
|
||||
- text: A propriedade <code>height</code> no elemento <code>h4</code> deve ser removida.
|
||||
testString: 'assert(!($("h4").css("height") == "25px"), "The <code>height</code> property on the <code>h4</code> element should be removed.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,92 +0,0 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad3
|
||||
title: Adjust the Color of Various Elements to Complementary Colors
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Ajuste a cor de vários elementos para cores complementares
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O desafio Complementary Colours mostrou que cores opostas na roda de cores podem fazer a outra parecer mais vibrante quando colocadas lado a lado. No entanto, o forte contraste visual pode ser chocante se for usado em excesso em um site e, às vezes, dificultar a leitura do texto se ele for colocado em um plano de fundo de cores complementares. Na prática, uma das cores geralmente é dominante e o complemento é usado para chamar a atenção visual para determinado conteúdo da página. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Esta página usará um tom de cerceta ( <code>#09A7A1</code> ) como a cor dominante, e seu complemento laranja ( <code>#FF790E</code> ) para destacar visualmente os botões de inscrição. Altere a <code>background-color</code> de segundo plano do <code>header</code> e do <code>footer</code> de preto para a cor da cerceta. Em seguida, altere a <code>color</code> texto <code>h2</code> para marcar também. Finalmente, mude a <code>background-color</code> de fundo do <code>button</code> para a cor laranja. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O elemento de <code>header</code> deve ter uma <code>background-color</code> de <code>background-color</code> de # 09A7A1.'
|
||||
testString: 'assert($("header").css("background-color") == "rgb(9, 167, 161)", "The <code>header</code> element should have a <code>background-color</code> of #09A7A1.");'
|
||||
- text: 'O elemento de <code>footer</code> deve ter uma <code>background-color</code> de <code>background-color</code> de # 09A7A1.'
|
||||
testString: 'assert($("footer").css("background-color") == "rgb(9, 167, 161)", "The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.");'
|
||||
- text: 'O elemento <code>h2</code> deve ter uma <code>color</code> de # 09A7A1.'
|
||||
testString: 'assert($("h2").css("color") == "rgb(9, 167, 161)", "The <code>h2</code> element should have a <code>color</code> of #09A7A1.");'
|
||||
- text: 'O elemento de <code>button</code> deve ter uma <code>background-color</code> de <code>background-color</code> de # FF790E.'
|
||||
testString: 'assert($("button").css("background-color") == "rgb(255, 121, 14)", "The <code>button</code> element should have a <code>background-color</code> of #FF790E.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
header {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 0.25em;
|
||||
}
|
||||
h2 {
|
||||
color: black;
|
||||
}
|
||||
button {
|
||||
background-color: white;
|
||||
}
|
||||
footer {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Machine Learning in the Kitchen</h2>
|
||||
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Bisection Vegetable Chopping</h2>
|
||||
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
</main>
|
||||
<br>
|
||||
<footer>© 2018 FCC Kitchen</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,83 +0,0 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab5
|
||||
title: Adjust the Height of an Element Using the height Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Ajustar a altura de um elemento usando a propriedade height
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode especificar a altura de um elemento usando a propriedade <code>height</code> em CSS, semelhante à propriedade <code>width</code> . Aqui está um exemplo que muda a altura de uma imagem para 20px: <blockquote> img { <br> height: 20px; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione uma propriedade <code>height</code> à tag <code>h4</code> e defina-a para 25px. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve alterar a propriedade de <code>height</code> <code>h4</code> para um valor de 25 pixels.
|
||||
testString: 'assert($("h4").css("height") == "25px", "Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,59 +0,0 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac8
|
||||
title: Adjust the Hover State of an Anchor Tag
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Ajustar o estado de foco de uma marca de âncora
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Este desafio vai tocar no uso de pseudo-classes. Uma pseudo-classe é uma palavra-chave que pode ser adicionada aos seletores para selecionar um estado específico do elemento. Por exemplo, o estilo de uma marca de âncora pode ser alterado para seu estado de foco usando o seletor de <code>:hover</code> . Aqui está o CSS para mudar a <code>color</code> da tag âncora para vermelho durante o estado de foco: <blockquote> a: hover { <br> color: red; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> O editor de código tem uma regra CSS para estilizar todos <code>a</code> preto tags. Adicionar uma regra para que quando o usuário passa sobre a <code>a</code> tag, a <code>color</code> é azul. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'A <code>color</code> tag de âncora deve permanecer em preto, basta adicionar regras CSS para o estado <code>:hover</code> .'
|
||||
testString: 'assert($("a").css("color") == "rgb(0, 0, 0)", "The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.");'
|
||||
- text: A tag de âncora deve ter uma <code>color</code> azul ao passar o mouse.
|
||||
testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), "The anchor tag should have a <code>color</code> of blue on hover.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,85 +0,0 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad4
|
||||
title: Adjust the Hue of a Color
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Ajustar o tom de uma cor
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> As cores têm várias características, incluindo tonalidade, saturação e luminosidade. O CSS3 introduziu a propriedade <code>hsl()</code> como uma maneira alternativa de escolher uma cor, declarando diretamente essas características. <b>O tom</b> é o que as pessoas geralmente pensam como "cor". Se você imaginar um espectro de cores começando com vermelho à esquerda, passando pelo verde no meio e azul à direita, o matiz é onde uma cor se encaixa nessa linha. Em <code>hsl()</code> , o matiz usa um conceito de roda de cores em vez do espectro, onde o ângulo da cor no círculo é dado como um valor entre 0 e 360. A <b>saturação</b> é a quantidade de cinza em uma cor. Uma cor totalmente saturada não tem cinza, e uma cor minimamente saturada é quase completamente cinza. Isso é dado como uma porcentagem com 100% sendo totalmente saturado. <b>Leveza</b> é a quantidade de branco ou preto em uma cor. É dada uma porcentagem variando de 0% (preto) a 100% (branco), onde 50% é a cor normal. Aqui estão alguns exemplos do uso de <code>hsl()</code> com cores de saturação normais e totalmente saturadas: <table class="table table-striped"><thead><tr><th> Cor </th><th> HSL </th></tr></thead><tbody><tr><td> vermelho </td><td> hsl (0, 100%, 50%) </td></tr><tr><td> amarelo </td><td> hsl (60, 100%, 50%) </td></tr><tr><td> verde </td><td> hsl (120, 100%, 50%) </td></tr><tr><td> ciano </td><td> hsl (180, 100%, 50%) </td></tr><tr><td> azul </td><td> hsl (240, 100%, 50%) </td></tr><tr><td> magenta </td><td> hsl (300, 100%, 50%) </td></tr></tbody></table></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Altere a <code>background-color</code> de <code>background-color</code> de cada elemento <code>div</code> base nos nomes de classe ( <code>green</code> , <code>cyan</code> ou <code>blue</code> ) usando <code>hsl()</code> . Todos os três devem ter saturação completa e leveza normal. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve usar a propriedade <code>hsl()</code> para declarar a cor verde.
|
||||
testString: 'assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color green.");'
|
||||
- text: Seu código deve usar a propriedade <code>hsl()</code> para declarar a cor ciano.
|
||||
testString: 'assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color cyan.");'
|
||||
- text: Seu código deve usar a propriedade <code>hsl()</code> para declarar a cor azul.
|
||||
testString: 'assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), "Your code should use the <code>hsl()</code> property to declare the color blue.");'
|
||||
- text: O elemento <code>div</code> com a classe <code>green</code> deve ter uma <code>background-color</code> de fundo verde.
|
||||
testString: 'assert($(".green").css("background-color") == "rgb(0, 255, 0)", "The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.");'
|
||||
- text: O elemento <code>div</code> com classe <code>cyan</code> deve ter uma <code>background-color</code> de <code>background-color</code> de ciano.
|
||||
testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.");'
|
||||
- text: O elemento <code>div</code> com a classe <code>blue</code> deve ter uma <code>background-color</code> de fundo azul.
|
||||
testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="green"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="blue"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,89 +0,0 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abd
|
||||
title: Adjust the Size of a Header Versus a Paragraph Tag
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Ajustar o tamanho de um cabeçalho versus uma tag de parágrafo
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O tamanho da fonte das tags de cabeçalho ( <code>h1</code> a <code>h6</code> ) geralmente deve ser maior que o tamanho da fonte das tags de parágrafo. Isso torna mais fácil para o usuário entender visualmente o layout e o nível de importância de tudo na página. Você usa a propriedade <code>font-size</code> para ajustar o tamanho do texto em um elemento. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Para tornar o título significativamente maior que o parágrafo, altere o <code>font-size</code> da <code>font-size</code> da marca <code>h4</code> para 27 pixels. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve adicionar uma propriedade de <code>font-size</code> ao elemento <code>h4</code> definido como 27 pixels.
|
||||
testString: 'assert($("h4").css("font-size") == "27px", "Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,89 +0,0 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad5
|
||||
title: Adjust the Tone of a Color
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Ajustar o tom de uma cor
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A opção <code>hsl()</code> no CSS também facilita o ajuste do tom de uma cor. Misturar branco com um tom puro cria um tom dessa cor, e adicionar preto fará sombra. Alternativamente, um tom é produzido pela adição de cinza ou por tingimento e sombreamento. Lembre-se de que 's' e 'l' de <code>hsl()</code> significam saturação e luminosidade, respectivamente. O percentual de saturação altera a quantidade de cinza e o percentual de luminosidade determina o quanto branco ou preto está na cor. Isso é útil quando você tem um matiz de base que você gosta, mas precisa de variações diferentes dele. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> A barra de navegação neste site atualmente herda sua <code>background-color</code> de <code>background-color</code> do elemento de <code>header</code> . Começando com essa cor como base, adicione uma <code>background-color</code> ao elemento de <code>nav</code> para que ele use o mesmo matiz ciano, mas tenha 80% de saturação e 25% de valores de luminosidade para alterar seu tom e tom. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O elemento <code>nav</code> deve ter uma <code>background-color</code> de <code>background-color</code> do tom ciano ajustado usando a propriedade <code>hsl()</code> .
|
||||
testString: 'assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), "The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
header {
|
||||
background-color: hsl(180, 90%, 35%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-indent: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Classes</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,82 +0,0 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab4
|
||||
title: Adjust the Width of an Element Using the width Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Ajustar a largura de um elemento usando a propriedade width
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode especificar a largura de um elemento usando a propriedade <code>width</code> em CSS. Os valores podem ser dados em unidades de tamanho relativo (como em), unidades de tamanho absoluto (como px) ou como uma porcentagem de seu elemento pai contendo. Veja um exemplo que altera a largura de uma imagem para 220px: <blockquote> img { <br> width: 220px; <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione uma propriedade <code>width</code> ao cartão inteiro e defina-o para um valor absoluto de 245px. Use a classe <code>fullCard</code> para selecionar o elemento. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve alterar a propriedade <code>width</code> do cartão para 245 pixels usando o seletor de classe <code>fullCard</code> .
|
||||
testString: 'assert(code.match(/.fullCard\s*{[\s\S][^}]*\n*^\s*width\s*:\s*245px\s*;/gm), "Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,100 +0,0 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae5
|
||||
title: Animate Elements at Variable Rates
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Elementos animados em taxas variáveis
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Há várias maneiras de alterar as taxas de animação de elementos animados de maneira semelhante. Até agora, isso foi alcançado aplicando uma propriedade de <code>animation-iteration-count</code> e definindo regras <code>@keyframes</code> . Para ilustrar, a animação à direita consiste em duas "estrelas", cada uma diminuindo de tamanho e opacidade na marca de 20% na regra <code>@keyframes</code> , que cria a animação de brilho. Você pode alterar a regra <code>@keyframes</code> de um dos elementos para que as estrelas brilhem em taxas diferentes. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Altere a taxa de animação do elemento com o nome da classe de <code>star-1</code> alterando sua regra <code>@keyframes</code> para 50%. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: A regra <code>@keyframes</code> para a classe <code>star-1</code> deve ser de 50%.
|
||||
testString: 'assert(code.match(/twinkle-1\s*?{\s*?50%/g), "The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-name: twinkle-1;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-name: twinkle-2;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
@keyframes twinkle-1 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle-2 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,81 +0,0 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae3
|
||||
title: Animate Elements Continually Using an Infinite Animation Count
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Animar elementos continuamente usando uma contagem de animação infinita
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Os desafios anteriores cobriam como usar algumas das propriedades de animação e a regra <code>@keyframes</code> . Outra propriedade de animação é a <code>animation-iteration-count</code> , que permite controlar quantas vezes você deseja percorrer a animação. Aqui está um exemplo: <code>animation-iteration-count: 3;</code> Nesse caso, a animação será interrompida após a execução 3 vezes, mas é possível fazer a animação ser executada continuamente definindo esse valor como infinito. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Para manter a bola quicando à direita em um loop contínuo, altere a propriedade <code>animation-iteration-count</code> para infinita. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: A propriedade <code>animation-iteration-count</code> deve ter um valor infinito.
|
||||
testString: 'assert($("#ball").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property should have a value of infinite.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
#ball {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: bounce;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: 3;
|
||||
}
|
||||
|
||||
@keyframes bounce{
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
top: 249px;
|
||||
width: 130px;
|
||||
height: 70px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,105 +0,0 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae6
|
||||
title: Animate Multiple Elements at Variable Rates
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Animar vários elementos a taxas variáveis
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> No desafio anterior, você alterou as taxas de animação para dois elementos animados semelhantes, alterando suas regras <code>@keyframes</code> . Você pode atingir o mesmo objetivo manipulando a <code>animation-duration</code> da <code>animation-duration</code> de vários elementos. Na animação em execução no editor de código, há três "estrelas" no céu que piscam na mesma taxa em um loop contínuo. Para fazê-los brilhar em taxas diferentes, você pode definir a propriedade de <code>animation-duration</code> da <code>animation-duration</code> com valores diferentes para cada elemento. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Defina a <code>animation-duration</code> da <code>animation-duration</code> dos elementos com as classes <code>star-1</code> , <code>star-2</code> e <code>star-3</code> a 1s, 0.9s e 1.1s, respectivamente. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: A propriedade de <code>animation-duration</code> para a estrela com classe <code>star-1</code> deve permanecer em 1s.
|
||||
testString: 'assert($(".star-1").css("animation-duration") == "1s", "The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.");'
|
||||
- text: 'A propriedade de <code>animation-duration</code> para a estrela com classe de <code>star-2</code> deve ser 0,9s.'
|
||||
testString: 'assert($(".star-2").css("animation-duration") == "0.9s", "The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.");'
|
||||
- text: A propriedade de <code>animation-duration</code> para a estrela com classe <code>star-3</code> deve ser 1.1s.
|
||||
testString: 'assert($(".star-3").css("animation-duration") == "1.1s", "The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
margin-top: 10%;
|
||||
margin-left: 50%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
<div class="star-3 stars"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,57 +0,0 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad0
|
||||
title: Center an Element Horizontally Using the margin Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Centralizar um elemento horizontalmente usando a propriedade de margem
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Outra técnica de posicionamento é centralizar um elemento de bloco horizontalmente. Uma maneira de fazer isso é definir sua <code>margin</code> para um valor de auto. Este método também funciona para imagens. As imagens são elementos embutidos por padrão, mas podem ser alteradas para elementos de bloco quando você define a propriedade de <code>display</code> para bloquear. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Centralize o <code>div</code> na página adicionando uma propriedade de <code>margin</code> com um valor de auto. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O <code>div</code> deve ter uma <code>margin</code> definida como auto.
|
||||
testString: 'assert(code.match(/margin:\s*?auto;/g), "The <code>div</code> should have a <code>margin</code> set to auto.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,61 +0,0 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512ac9
|
||||
title: Change an Element's Relative Position
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Alterar a posição relativa de um elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O CSS trata cada elemento HTML como sua própria caixa, que geralmente é chamada de <code>CSS Box Model</code> do <code>CSS Box Model</code> . Os itens no nível do bloco iniciam automaticamente em uma nova linha (pense em cabeçalhos, parágrafos e divs) enquanto os itens sequenciais ficam no conteúdo ao redor (como imagens ou vãos). O layout padrão dos elementos dessa maneira é chamado de <code>normal flow</code> de um documento, mas o CSS oferece a propriedade position para substituí-lo. Quando a posição de um elemento é definida como <code>relative</code> , ele permite especificar como o CSS deve movê-lo em <i>relação</i> à sua posição atual no fluxo normal da página. Ele é emparelhado com as propriedades de deslocamento de CSS da <code>left</code> ou <code>right</code> e <code>top</code> ou <code>bottom</code> . Eles dizem quantos pixels, porcentagens ou ems para mover o item para <i>longe</i> de onde ele está normalmente posicionado. O exemplo a seguir move o parágrafo a 10 pixels da parte inferior: <blockquote> p { <br> position: relative; <br> bottom: 10px; <br> } </blockquote> Alterar a posição de um elemento para relativo não o remove do fluxo normal - outros elementos em torno dele ainda se comportam como se esse item estivesse em sua posição padrão. <strong>Nota</strong> <br> O posicionamento oferece muita flexibilidade e poder sobre o layout visual de uma página. É bom lembrar que, independentemente da posição dos elementos, a marcação HTML subjacente deve ser organizada e fazer sentido quando lida de cima para baixo. É assim que os usuários com deficiências visuais (que dependem de dispositivos de assistência, como leitores de tela) acessam seu conteúdo. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Altere a <code>position</code> do <code>h2</code> para <code>relative</code> e use um deslocamento de CSS para afastá-lo 15 pixels da parte <code>top</code> de onde ele se encontra no fluxo normal. Observe que não há impacto nas posições dos elementos h1 e p circundantes. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O elemento <code>h2</code> deve ter uma propriedade de <code>position</code> definida como <code>relative</code> .
|
||||
testString: 'assert($("h2").css("position") == "relative", "The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.");'
|
||||
- text: Seu código deve usar um deslocamento CSS para posicionar o <code>h2</code> 15px de forma relativamente longe do <code>top</code> de onde ele normalmente fica.
|
||||
testString: 'assert($("h2").css("top") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,89 +0,0 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae7
|
||||
title: Change Animation Timing with Keywords
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Alterar o tempo de animação com palavras-chave
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Em animações CSS, a propriedade <code>animation-timing-function</code> controla a rapidez com que um elemento animado é modificado ao longo da duração da animação. Se a animação for um carro passando do ponto A para o ponto B em um determinado momento (sua <code>animation-duration</code> ), a <code>animation-timing-function</code> diz como o carro acelera e desacelera ao longo do percurso da unidade. Há várias palavras-chave predefinidas disponíveis para opções populares. Por exemplo, o valor padrão é a <code>ease</code> , que começa devagar, acelera no meio e, em seguida, desacelera no final. Outras opções incluem a <code>ease-out</code> , que é rápida no começo, depois desacelera, <code>ease-in</code> , que é lenta no começo, depois acelera no final, ou <code>linear</code> , o que aplica uma velocidade de animação constante. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Para os elementos com id de <code>ball1</code> e <code>ball2</code> , adicione uma propriedade de <code>animation-timing-function</code> a cada um e defina <code>#ball1</code> como <code>linear</code> e <code>#ball2</code> para <code>ease-out</code> . Observe a diferença entre como os elementos se movem durante a animação, mas terminam juntos, pois eles compartilham a mesma <code>animation-duration</code> de <code>animation-duration</code> de 2 segundos. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O valor da propriedade <code>animation-timing-function</code> para o elemento com o id <code>ball1</code> deve ser linear.
|
||||
testString: 'assert($("#ball1").css("animation-timing-function") == "linear", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.");'
|
||||
- text: O valor da propriedade <code>animation-timing-function</code> para o elemento com o id <code>ball2</code> deve ser facilitado.
|
||||
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left:27%;
|
||||
|
||||
}
|
||||
#ball2 {
|
||||
left:56%;
|
||||
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,71 +0,0 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512acf
|
||||
title: Change the Position of Overlapping Elements with the z-index Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Alterar a posição dos elementos sobrepostos com a propriedade z-index
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Quando os elementos são posicionados para se sobreporem, o elemento vindo posteriormente na marcação HTML aparecerá, por padrão, no topo dos outros elementos. No entanto, a propriedade <code>z-index</code> pode especificar a ordem de como os elementos são empilhados uns sobre os outros. Ele deve ser um número inteiro (ou seja, um número inteiro e não um decimal), e valores mais altos para a propriedade <code>z-index</code> de um elemento o movem mais alto na pilha do que aqueles com valores mais baixos. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione uma propriedade <code>z-index</code> ao elemento com o nome da <code>first</code> classe (o retângulo vermelho) e defina-o como um valor de 2, de forma que cubra o outro elemento (retângulo azul). </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O elemento com classe <code>first</code> deve ter um valor de <code>z-index</code> de 2.
|
||||
testString: 'assert($(".first").css("z-index") == "2", "The element with class <code>first</code> should have a <code>z-index</code> value of 2.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 60%;
|
||||
height: 200px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.second {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,61 +0,0 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad6
|
||||
title: Create a Gradual CSS Linear Gradient
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Criar um gradiente linear de CSS gradual
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A aplicação de uma cor nos elementos HTML não se limita a um matiz plano. O CSS fornece a capacidade de usar transições de cores, também conhecidas como gradientes, em elementos. Isso é acessado através da função <code>linear-gradient()</code> da propriedade <code>background</code> . Aqui está a sintaxe geral: <code>background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);</code> O primeiro argumento especifica a direção a partir da qual a transição de cor começa - pode ser declarada como um grau, em que 90deg faz um gradiente vertical e 45deg é inclinado como uma barra invertida. Os argumentos a seguir especificam a ordem das cores usadas no gradiente. Exemplo: <code>background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));</code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use um <code>linear-gradient()</code> para o <code>background</code> do elemento <code>div</code> e defina-o a partir de uma direção de 35 graus para alterar a cor de <code>#CCFFFF</code> para <code>#FFCCCC</code> . <strong>Nota</strong> <br> Embora existam outras maneiras de especificar um valor de cor, como <code>rgb()</code> ou <code>hsl()</code> , use valores hexadecimais para esse desafio. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O elemento <code>div</code> deve ter um <code>background</code> <code>linear-gradient</code> com a direção e as cores especificadas.
|
||||
testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), "The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
div{
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50px auto;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,70 +0,0 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512add
|
||||
title: Create a Graphic Using CSS
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Crie um gráfico usando CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Ao manipular diferentes seletores e propriedades, você pode criar formas interessantes. Um dos mais fáceis de tentar é uma forma de lua crescente. Para este desafio, você precisa trabalhar com a propriedade <code>box-shadow</code> que define a sombra de um elemento, juntamente com a propriedade <code>border-radius</code> que controla a redondeza dos cantos do elemento. Você criará um objeto redondo e transparente com uma sombra nítida ligeiramente deslocada para o lado - a sombra será a forma da lua que você vê. Para criar um objeto redondo, a propriedade <code>border-radius</code> deve ser definida para um valor de 50%. Você pode lembrar de um desafio anterior que a propriedade <code>box-shadow</code> usa valores para <code>offset-x</code> , <code>offset-y</code> , <code>blur-radius</code> <code>spread-radius</code> , <code>blur-radius</code> <code>spread-radius</code> e um valor de cor nessa ordem. Os valores de <code>spread-radius</code> e <code>blur-radius</code> <code>spread-radius</code> são opcionais. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Manipule o elemento quadrado no editor para criar a forma da lua. Primeiro, altere a <code>background-color</code> para transparente e defina a propriedade <code>border-radius</code> para 50% para criar a forma circular. Finalmente, altere a propriedade <code>box-shadow</code> para definir o <code>offset-x</code> como 25px, o <code>offset-y</code> como 10px, <code>blur-radius</code> como 0, <code>spread-radius</code> como 0 e cor como azul. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O valor da propriedade <code>background-color</code> deve ser definido como <code>transparent</code> .
|
||||
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the <code>background-color</code> property should be set to <code>transparent</code>.");'
|
||||
- text: O valor da propriedade <code>border-radius</code> deve ser definido como <code>50%</code> .
|
||||
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the <code>border-radius</code> property should be set to <code>50%</code>.");'
|
||||
- text: 'O valor da propriedade <code>box-shadow</code> deve ser definido como 25px para <code>offset-x</code> , 10px para <code>offset-y</code> , 0 para <code>blur-radius</code> , 0 para <code>spread-radius</code> e finalmente blue para a cor.'
|
||||
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), "The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.center
|
||||
{
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
border-radius: 0px;
|
||||
box-shadow: 25px 10px 10px 10px green;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="center"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,89 +0,0 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abb
|
||||
title: Create a Horizontal Line Using the hr Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Criar uma linha horizontal usando o elemento hr
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode usar a tag <code>hr</code> para adicionar uma linha horizontal na largura de seu elemento contido. Isso pode ser usado para definir uma alteração no tópico ou para separar visualmente grupos de conteúdo. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione uma tag <code>hr</code> abaixo do <code>h4</code> que contém o título do cartão. <strong>Nota</strong> <br> Em HTML, <code>hr</code> é uma tag de fechamento automático e, portanto, não precisa de uma tag de fechamento separada. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve adicionar uma tag <code>hr</code> à marcação.
|
||||
testString: 'assert($("hr").length == 1, "Your code should add an <code>hr</code> tag to the markup.");'
|
||||
- text: A tag <code>hr</code> deve estar entre o título e o parágrafo.
|
||||
testString: 'assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi), "The <code>hr</code> tag should come between the title and the paragraph.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s>Alphabet</h4>
|
||||
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,89 +0,0 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512ade
|
||||
title: Create a More Complex Shape Using CSS and HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Crie uma forma mais complexa usando CSS e HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">Uma das formas mais populares do mundo é a forma do coração, e neste desafio você criará um usando CSS puro. Mas primeiro, você precisa entender os pseudo-elementos <code>::before</code> e <code>::after</code>. Esses pseudo-elementos são usados para adicionar algo antes ou depois de um elemento selecionado. No exemplo a seguir, um pseudoelemento <code>::before</code> é usado para adicionar um retângulo a um elemento com o <code>heart</code> da classe: <blockquote> .heart :: before {<br> content: "";<br> background-color: yellow;<br> border-radius: 25%;<br> position: absolute;<br> height: 50px;<br> width: 70px;<br> top: -50px;<br> left: 5px;<br>}</blockquote> Para que os pseudo-elementos <code>::before</code> e <code>::after</code> funcionem corretamente, eles devem ter uma propriedade de <code>content</code> definida. Essa propriedade geralmente é usada para adicionar itens como uma foto ou texto ao elemento selecionado. Quando os pseudoelementos <code>::before</code> e <code>::after</code> são usados para criar formas, a propriedade <code>content</code> ainda é necessária, mas é definida como uma string vazia. No exemplo acima, o elemento com a classe <code>heart</code> possui um pseudoelemento <code>::before</code> que produz um retângulo amarelo com <code>height</code> e <code>width</code> de 50px e 70px, respectivamente. Este retângulo tem cantos arredondados devido ao seu raio de 25% e está posicionado absolutamente a 5px da <code>left</code> e 50px acima da <code>top</code> do elemento. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Transforme o elemento na tela em um coração. No <code>heart::after</code> selector, mude a <code>background-color</code> para pink e o <code>border-radius</code> para 50%. Em seguida, segmente o elemento com o <code>heart</code> da classe (apenas <code>heart</code> ) e preencha a propriedade <code>transform</code> . Use a função <code>rotate()</code> com -45 graus. ( <code>rotate()</code> funciona da mesma forma que <code>skewX()</code> e <code>skewY()</code> ). Finalmente, no <code>heart::before</code> selector, defina sua propriedade <code>content</code> para uma string vazia. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'A propriedade <code>background-color</code> do <code>heart::after</code> selector deve ser rosa.'
|
||||
testString: 'assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), "The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.");'
|
||||
- text: 'O <code>border-radius</code> de <code>border-radius</code> do <code>heart::after</code> seletor deve ser de 50%.'
|
||||
testString: 'assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, "The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.");'
|
||||
- text: A propriedade <code>transform</code> para a classe <code>heart</code> deve usar uma função <code>rotate()</code> definida como -45 graus.
|
||||
testString: 'assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.");'
|
||||
- text: 'O <code>content</code> do <code>heart::before</code> selector deve ser uma string vazia.'
|
||||
testString: 'assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|")\1\s*?;/gi), "The <code>content</code> of the <code>heart::before</code> selector should be an empty string.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: ;
|
||||
}
|
||||
.heart::after {
|
||||
background-color: blue;
|
||||
content: "";
|
||||
border-radius: 25%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart::before {
|
||||
content: ;
|
||||
background-color: pink;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
<div class = "heart"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,87 +0,0 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae1
|
||||
title: Create Movement Using CSS Animation
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Criar movimento usando animação CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Quando os elementos têm uma <code>position</code> especificada, como <code>fixed</code> ou <code>relative</code> , as propriedades de deslocamento de CSS <code>right</code> , <code>left</code> , <code>top</code> e <code>bottom</code> podem ser usadas em regras de animação para criar movimento. Conforme mostrado no exemplo abaixo, você pode empurrar o item para baixo e depois para cima definindo a propriedade <code>top</code> do quadro-chave de <code>50%</code> para 50px, mas definindo-o como 0px para o primeiro ( <code>0%</code> ) e o último ( <code>100%</code> ) quadro-chave. <blockquote> @keyframes rainbow {<br> 0% {<br> background-color: blue;<br> top: 0px;<br> }<br> 50% {<br> background-color: green;<br> top: 50px;<br> }<br> 100% {<br> background-color: yellow;<br> top: 0px;<br> }<br>}</blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione um movimento horizontal à animação <code>div</code> . Usando a propriedade offset <code>left</code> , adicione à regra <code>@keyframes</code> para que o arco-íris comece em 0 pixels a <code>0%</code> , <code>@keyframes</code> para 25 pixels em <code>50%</code> e termine em -25 pixels em <code>100%</code> . Não substitua a propriedade <code>top</code> no editor - a animação deve ter movimento vertical e horizontal. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: A regra <code>@keyframes</code> para <code>0%</code> deve usar o deslocamento <code>left</code> de 0px.
|
||||
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi), "The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.");'
|
||||
- text: A regra <code>@keyframes</code> para <code>50%</code> deve usar o deslocamento <code>left</code> de 25px.
|
||||
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.");'
|
||||
- text: A regra <code>@keyframes</code> para <code>100%</code> deve usar o deslocamento <code>left</code> de -25px.
|
||||
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi), "The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="rect"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,53 +0,0 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad8
|
||||
title: Create Texture by Adding a Subtle Pattern as a Background Image
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Criar textura adicionando um padrão sutil como imagem de plano de fundo
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Uma maneira de adicionar textura e interesse a um plano de fundo e destacá-lo é adicionar um padrão sutil. A chave é o equilíbrio, já que você não quer que o fundo se destaque muito e tire o primeiro plano. A propriedade <code>background</code> suporta a função <code>url()</code> para vincular a uma imagem da textura ou padrão escolhido. O endereço do link é colocado entre aspas entre parênteses. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Usando o url de <code>https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png</code> , defina o <code>background</code> de toda a página com o seletor de <code>body</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu elemento <code>body</code> deve ter uma propriedade <code>background</code> definida como <code>url()</code> com o link fornecido.
|
||||
testString: 'assert(code.match(/background:\s*?url\(\s*("|"|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi), "Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,83 +0,0 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab3
|
||||
title: Create Visual Balance Using the text-align Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Criar equilíbrio visual usando a propriedade text-align
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Esta seção do currículo se concentra no design visual aplicado. O primeiro grupo de desafios baseia-se no layout do cartão para mostrar vários princípios fundamentais. O texto geralmente é uma grande parte do conteúdo da web. CSS tem várias opções de como alinhá-lo com a propriedade <code>text-align</code> . <code>text-align: justify;</code> faz com que todas as linhas de texto, exceto a última linha, atendam às bordas esquerda e direita da caixa de linha. <code>text-align: center;</code> centraliza o texto <code>text-align: right;</code> alinhar à direita o texto E <code>text-align: left;</code> (o padrão) alinha à esquerda o texto. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Alinhe o texto da tag <code>h4</code> , que diz "Google", ao centro. Em seguida, justifique a tag de parágrafo que contém informações sobre como o Google foi fundado. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve usar a propriedade text-align na tag <code>h4</code> para configurá-lo para o centro.
|
||||
testString: 'assert($("h4").css("text-align") == "center", "Your code should use the text-align property on the <code>h4</code> tag to set it to center.");'
|
||||
- text: Seu código deve usar a propriedade text-align na tag <code>p</code> para configurá-lo para justificar.
|
||||
testString: 'assert($("p").css("text-align") == "justify", "Your code should use the text-align property on the <code>p</code> tag to set it to justify.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
|
||||
}
|
||||
p {
|
||||
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
.fullCard {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,76 +0,0 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae2
|
||||
title: Create Visual Direction by Fading an Element from Left to Right
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Criar direção visual desvanecendo um elemento da esquerda para a direita
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Para este desafio, você mudará a <code>opacity</code> de um elemento animado para que ele se desvanece gradualmente ao atingir o lado direito da tela. Na animação exibida, o elemento redondo com o fundo gradiente se move para a direita pela marca de 50% da animação, conforme a regra <code>@keyframes</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Segmente o elemento com o id da <code>ball</code> e adicione a propriedade de <code>opacity</code> definida como 0.1 a <code>50%</code> , para que o elemento se desvanece à medida que se desloca para a direita. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: A regra de <code>keyframes</code> para o desvanecimento deve definir a propriedade de <code>opacity</code> como 0.1 em 50%.
|
||||
testString: 'assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi), "The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
#ball {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 50px auto;
|
||||
position: fixed;
|
||||
left: 20%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: fade;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
50% {
|
||||
left: 60%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="ball"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,93 +0,0 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512abf
|
||||
title: Decrease the Opacity of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Diminuir a opacidade de um elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A propriedade de <code>opacity</code> no CSS é usada para ajustar a opacidade ou, inversamente, a transparência de um item. <blockquote> Um valor de 1 é opaco, o que não é transparente. <br> Um valor de 0,5 é metade transparente. <br> Um valor de 0 é completamente transparente. </blockquote> O valor fornecido será aplicado ao elemento inteiro, seja uma imagem com alguma transparência ou as cores de primeiro plano e plano de fundo para um bloco de texto. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Defina a <code>opacity</code> das tags de âncora como 0.7 usando a classe de <code>links</code> para selecioná-las. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Seu código deve definir a propriedade de <code>opacity</code> como 0.7 nas tags de âncora, selecionando a classe de <code>links</code> .'
|
||||
testString: 'assert.approximately(parseFloat($(".links").css("opacity")), 0.7, 0.1, "Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,68 +0,0 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad1
|
||||
title: Learn about Complementary Colors
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Saiba mais sobre cores complementares
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A teoria da cor e seu impacto no design é um tópico profundo e apenas os aspectos básicos são abordados nos desafios a seguir. Em um site, a cor pode chamar a atenção para o conteúdo, evocar emoções ou criar harmonia visual. Usar diferentes combinações de cores pode realmente mudar a aparência de um site, e muito pensamento pode ser usado para escolher uma paleta de cores que funcione com seu conteúdo. A roda de cores é uma ferramenta útil para visualizar como as cores se relacionam umas com as outras - é um círculo onde tons semelhantes são vizinhos e tons diferentes são mais distantes. Quando duas cores estão opostas uma à outra na roda, elas são chamadas de cores complementares. Eles têm a característica de que, se forem combinados, "cancelam" um ao outro e criam uma cor cinza. No entanto, quando colocadas lado a lado, essas cores parecem mais vibrantes e produzem um forte contraste visual. Alguns exemplos de cores complementares com seus códigos hexadecimais são: <blockquote> vermelho (# FF0000) e ciano (# 00FFFF) <br> verde (# 00FF00) e magenta (# FF00FF) <br> azul (# 0000FF) e amarelo (# FFFF00) </blockquote> Isso é diferente do modelo de cores RYB desatualizado que muitos de nós aprendemos na escola, que tem cores primárias e complementares diferentes. A moderna teoria de cores usa o modelo RGB aditivo (como na tela de um computador) e o modelo CMY (K) subtrativo (como na impressão). Leia <a href="https://en.wikipedia.org/wiki/Color_model" target="_blank">aqui</a> para mais informações sobre este assunto complexo. Existem muitas ferramentas de coleta de cores disponíveis on-line que têm a opção de encontrar o complemento de uma cor. <strong>Nota</strong> <br> Para todos os desafios de cores: O uso de cores pode ser uma maneira poderosa de adicionar interesse visual a uma página. No entanto, a cor sozinha não deve ser usada como a única maneira de transmitir informações importantes porque os usuários com deficiências visuais podem não entender esse conteúdo. Essa questão será abordada com mais detalhes nos desafios da acessibilidade aplicada. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Altere a propriedade <code>background-color</code> das classes <code>blue</code> e <code>yellow</code> para suas respectivas cores. Observe como as cores parecem diferentes uma ao lado da outra em relação ao fundo branco. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O elemento <code>div</code> com a classe <code>blue</code> deve ter uma <code>background-color</code> de fundo azul.
|
||||
testString: 'assert($(".blue").css("background-color") == "rgb(0, 0, 255)", "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.");'
|
||||
- text: O elemento <code>div</code> com a classe <code>yellow</code> deve ter uma <code>background-color</code> de <code>background-color</code> de amarelo.
|
||||
testString: 'assert($(".yellow").css("background-color") == "rgb(255, 255, 0)", "The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.blue {
|
||||
background-color: #000000;
|
||||
}
|
||||
.yellow {
|
||||
background-color: #000000;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="blue"></div>
|
||||
<div class="yellow"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,79 +0,0 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad2
|
||||
title: Learn about Tertiary Colors
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Aprenda sobre cores terciárias
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Monitores de computador e telas de dispositivos criam cores diferentes combinando quantidades de luz vermelha, verde e azul. Isso é conhecido como o modelo de cores aditivo RGB na teoria moderna de cores. Vermelho (R), verde (G) e azul (B) são chamados de cores primárias. A mistura de duas cores primárias cria as cores secundárias ciano (G + B), magenta (R + B) e amarelo (R + G). Você viu essas cores no desafio Complementary Colours. Essas cores secundárias são o complemento da cor primária não usada em sua criação e são opostas à cor primária na roda de cores. Por exemplo, a magenta é feita com vermelho e azul e é o complemento para verde. Cores terciárias são o resultado da combinação de uma cor primária com um de seus vizinhos de cor secundária. Por exemplo, vermelho (primário) e amarelo (secundário) fazem laranja. Isso adiciona mais seis cores a uma roda de cores simples para um total de doze. Existem vários métodos de seleção de cores diferentes que resultam em uma combinação harmoniosa no design. Um exemplo que pode usar cores terciárias é chamado de esquema de cores complementar dividido. Esse esquema começa com uma cor base e, em seguida, emparelha-o com as duas cores adjacentes ao seu complemento. As três cores fornecem contraste visual forte em um design, mas são mais sutis do que usar duas cores complementares. Aqui estão três cores criadas usando o esquema de complemento de divisão: <table class="table table-striped"><thead><tr><th> Cor </th><th> Código hexadecimal </th></tr></thead><thead></thead><tbody><tr><td> laranja </td><td> # FF7D00 </td></tr><tr><td> ciano </td><td> # 00FFFF </td></tr><tr><td> framboesa </td><td> # FF007D </td></tr></tbody></table></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Altere a propriedade <code>background-color</code> das classes <code>orange</code> , <code>cyan</code> e <code>raspberry</code> para suas respectivas cores. Certifique-se de usar os códigos hexadecimais como laranja e framboesa não são nomes de cores reconhecidas pelo navegador. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O elemento <code>div</code> com classe <code>orange</code> deve ter uma <code>background-color</code> de fundo laranja.
|
||||
testString: 'assert($(".orange").css("background-color") == "rgb(255, 125, 0)", "The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.");'
|
||||
- text: O elemento <code>div</code> com classe <code>cyan</code> deve ter uma <code>background-color</code> de <code>background-color</code> de ciano.
|
||||
testString: 'assert($(".cyan").css("background-color") == "rgb(0, 255, 255)", "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.");'
|
||||
- text: O elemento <code>div</code> com <code>raspberry</code> classe deve ter uma <code>background-color</code> de <code>background-color</code> de framboesa.
|
||||
testString: 'assert($(".raspberry").css("background-color") == "rgb(255, 0, 125)", "The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.raspberry {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="orange"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="raspberry"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,89 +0,0 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae8
|
||||
title: Learn How Bezier Curves Work
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Saiba como funcionam as curvas de Bezier
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O último desafio introduziu a propriedade <code>animation-timing-function</code> e algumas palavras-chave que alteram a velocidade de uma animação ao longo de sua duração. CSS oferece uma opção diferente de palavras-chave que fornece um controle ainda melhor sobre como a animação se desenrola, através do uso de curvas de Bezier. Nas animações CSS, as curvas de Bezier são usadas com a função <code>cubic-bezier</code> . A forma da curva representa como a animação se desenrola. A curva vive em um sistema de coordenadas 1 por 1. O eixo X deste sistema de coordenadas é a duração da animação (pense nela como uma escala de tempo) e o eixo Y é a alteração na animação. A função <code>cubic-bezier</code> consiste em quatro pontos principais que se situam nesta grade de 1 por 1: <code>p0</code> , <code>p1</code> , <code>p2</code> e <code>p3</code> . <code>p0</code> e <code>p3</code> são definidos para você - são os pontos inicial e final que estão sempre localizados respectivamente na origem (0, 0) e (1, 1). Você define os valores x e y para os outros dois pontos e, onde você os coloca na grade, determina a forma da curva a ser seguida pela animação. Isso é feito em CSS declarando os valores xey dos pontos "âncora" <code>p1</code> e <code>p2</code> no formato: <code>(x1, y1, x2, y2)</code> . Juntando tudo, aqui está um exemplo de uma curva de Bezier no código CSS: <code>animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);</code> No exemplo acima, os valores x e y são equivalentes para cada ponto (x1 = 0,25 = y1 e x2 = 0,75 = y2), que, se você se lembrar da classe de geometria, resultará em uma linha que se estende da origem para o ponto (1 1). Essa animação é uma mudança linear de um elemento durante o comprimento de uma animação e é o mesmo que usar a palavra-chave <code>linear</code> . Em outras palavras, muda a uma velocidade constante. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Para o elemento com o id de <code>ball1</code> , altere o valor da propriedade <code>animation-timing-function</code> de <code>linear</code> para seu valor de função <code>cubic-bezier</code> equivalente. Use os valores de pontos fornecidos no exemplo acima. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O valor da propriedade <code>animation-timing-function</code> para o elemento com o id <code>ball1</code> deve ser a função linear-equivalente-bezier linear.
|
||||
testString: 'assert($("#ball1").css("animation-timing-function") == "cubic-bezier(0.25, 0.25, 0.75, 0.75)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.");'
|
||||
- text: O valor da propriedade <code>animation-timing-function</code> para o elemento com o id <code>ball2</code> não deve ser alterado.
|
||||
testString: 'assert($("#ball2").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left: 27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#ball2 {
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,77 +0,0 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512adf
|
||||
title: Learn How the CSS @keyframes and animation Properties Work
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Saiba como funcionam as propriedades CSS @keyframes e animação
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Para animar um elemento, você precisa saber sobre as propriedades da animação e a regra <code>@keyframes</code> . As propriedades de animação controlam como a animação deve se comportar e a regra <code>@keyframes</code> controla o que acontece durante a animação. Existem oito propriedades de animação no total. Este desafio irá mantê-lo simples e cobrir os dois mais importantes em primeiro lugar: <code>animation-name</code> define o nome da animação, que é posteriormente usado por <code>@keyframes</code> para dizer ao CSS quais regras vão com quais animações. <code>animation-duration</code> define o período de tempo para a animação. <code>@keyframes</code> é como especificar exatamente o que acontece dentro da animação ao longo da duração. Isso é feito fornecendo propriedades CSS para "quadros" específicos durante a animação, com porcentagens variando de 0% a 100%. Se você comparar isso com um filme, as propriedades CSS para 0% são como o elemento é exibido na cena de abertura. As propriedades CSS para 100% são como o elemento aparece no final, logo antes da rolagem dos créditos. Em seguida, o CSS aplica a mágica para fazer a transição do elemento durante a duração determinada para representar a cena. Aqui está um exemplo para ilustrar o uso de <code>@keyframes</code> e as propriedades da animação: <blockquote>#anim {<br> animation-name: colorful;<br> animation-duration: 3s;<br>}<br>@keyframes colorful {<br> 0% {<br> background-color: blue;<br> }<br> 100% {<br> background-color: yellow;<br> }<br>}</blockquote> Para o elemento com o <code>anim</code> id, o trecho de código acima define o <code>animation-name</code> da <code>animation-name</code> para <code>colorful</code> e define a <code>animation-duration</code> da <code>animation-duration</code> como 3 segundos. Em seguida, a regra <code>@keyframes</code> vinculada às propriedades de animação com o nome <code>colorful</code> . Ele define a cor para azul no início da animação (0%), que passará para amarelo no final da animação (100%). Você não está limitado a apenas transições de início e fim, você pode definir propriedades para o elemento para qualquer porcentagem entre 0% e 100%. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Crie uma animação para o elemento com o id <code>rect</code> , definindo o <code>animation-name</code> da <code>animation-name</code> como rainbow e a <code>animation-duration</code> da <code>animation-duration</code> como 4 segundos. Em seguida, declare uma regra <code>@keyframes</code> e defina a <code>background-color</code> no início da animação ( <code>0%</code> ) como azul, o meio da animação ( <code>50%</code> ) como verde e o final da animação ( <code>100%</code> ) como amarelo. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O elemento com o id de <code>rect</code> deve ter uma propriedade de <code>animation-name</code> com um valor de arco-íris.
|
||||
testString: 'assert($("#rect").css("animation-name") == "rainbow", "The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.");'
|
||||
- text: O elemento com id de <code>rect</code> deve ter uma propriedade de <code>animation-duration</code> com um valor de 4s.
|
||||
testString: 'assert($("#rect").css("animation-duration") == "4s", "The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.");'
|
||||
- text: A regra <code>@keyframes</code> deve usar o <code>animation-name</code> da <code>animation-name</code> do arco <code>animation-name</code> íris.
|
||||
testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), "The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.");'
|
||||
- text: A regra <code>@keyframes</code> para arco-íris deve usar uma <code>background-color</code> de fundo azul em 0%.
|
||||
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.");'
|
||||
- text: A regra <code>@keyframes</code> para arco-íris deve usar uma <code>background-color</code> de fundo verde em 50%.
|
||||
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.");'
|
||||
- text: A regra <code>@keyframes</code> para arco-íris deve usar uma <code>background-color</code> de <code>background-color</code> de amarelo em 100%.
|
||||
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#rect {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,72 +0,0 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acb
|
||||
title: Lock an Element to its Parent with Absolute Positioning
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Bloqueie um Elemento ao seu Pai com Posicionamento Absoluto
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A próxima opção para a propriedade CSS <code>position</code> é <code>absolute</code> , que bloqueia o elemento no lugar em relação ao seu contentor pai. Ao contrário da posição <code>relative</code> , isso remove o elemento do fluxo normal do documento, portanto, os itens adjacentes ignoram-no. As propriedades de deslocamento CSS (superior ou inferior e esquerda ou direita) são usadas para ajustar a posição. Uma nuance no posicionamento absoluto é que ele vai bloquear o elemento em relação ao seu antepassado mais próximo <em>posicionado.</em> Se você esquecer de adicionar uma regra de posição ao item pai (isso geralmente é feito usando <code>position: relative;</code> ), o navegador irá continuar a procurar a ligação e, por fim, irá assumir o padrão da tag body. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Bloqueie o elemento <code>#searchbar</code> no canto superior direito do seu pai <code>section</code> , declarando sua <code>position</code> como <code>absolute</code> . Dê-lhe compensações <code>top</code> e <code>right</code> de 50 pixels cada. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O elemento <code>#searchbar</code> deve ter uma <code>position</code> definida como <code>absolute</code> .'
|
||||
testString: 'assert($("#searchbar").css("position") == "absolute", "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.");'
|
||||
- text: 'Seu código deve usar o deslocamento CSS <code>top</code> de 50 pixels no elemento <code>#searchbar</code> .'
|
||||
testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
|
||||
- text: 'Seu código deve usar o deslocamento CSS <code>right</code> de 50 pixels no elemento <code>#searchbar</code> .'
|
||||
testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#searchbar {
|
||||
|
||||
|
||||
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>Welcome!</h1>
|
||||
<section>
|
||||
<form id="searchbar">
|
||||
<label for="search">Search:</label>
|
||||
<input type="search" id="search" name="search">
|
||||
<input type="submit" name="submit" value="Go!">
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,84 +0,0 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acc
|
||||
title: Lock an Element to the Browser Window with Fixed Positioning
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Bloquear um elemento para a janela do navegador com posicionamento fixo
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O próximo esquema de layout que o CSS oferece é a posição <code>fixed</code> , que é um tipo de posicionamento absoluto que bloqueia um elemento relativo à janela do navegador. Semelhante ao posicionamento absoluto, é usado com as propriedades de deslocamento CSS e também remove o elemento do fluxo normal do documento. Outros itens não mais "percebem" onde estão posicionados, o que pode exigir alguns ajustes de layout em outro lugar. Uma diferença fundamental entre as posições <code>fixed</code> e <code>absolute</code> é que um elemento com uma posição fixa não se move quando o usuário rola. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> A barra de navegação no código é rotulada com um id de <code>navbar</code> . Altere sua <code>position</code> para <code>fixed</code> e compense 0 pixels a partir da <code>top</code> e 0 pixels a partir da <code>left</code> . Observe o (falta de) impacto na posição <code>h1</code> , ele não foi empurrado para baixo para acomodar a barra de navegação e precisaria ser ajustado separadamente. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O elemento <code>#navbar</code> deve ter uma <code>position</code> definida como <code>fixed</code> .'
|
||||
testString: 'assert($("#navbar").css("position") == "fixed", "The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.");'
|
||||
- text: 'Seu código deve usar o deslocamento CSS <code>top</code> de 0 pixels no elemento <code>#navbar</code> .'
|
||||
testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
|
||||
- text: 'Seu código deve usar o deslocamento CSS <code>left</code> de 0 pixels no elemento <code>#navbar</code> .'
|
||||
testString: 'assert($("#navbar").css("left") == "0px", "Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#navbar {
|
||||
|
||||
|
||||
|
||||
width: 100%;
|
||||
background-color: #767676;
|
||||
}
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
<nav id="navbar">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,119 +0,0 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae4
|
||||
title: Make a CSS Heartbeat using an Infinite Animation Count
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Faça um Heartbeat CSS usando uma Contagem de Animação Infinita
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Aqui está mais um exemplo de animação contínua com a propriedade <code>animation-iteration-count</code> que usa o coração que você projetou em um desafio anterior. A animação de um segundo de duração da pulsação consiste em duas partes animadas. Os elementos de <code>heart</code> (incluindo <code>:before</code> e <code>:after</code> peças) são animados para alterar o tamanho usando a propriedade <code>transform</code> , e o <code>div</code> fundo é animado para alterar sua cor usando a propriedade <code>background</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Mantenha o coração batendo adicionando a propriedade <code>animation-iteration-count</code> para as classes <code>back</code> e <code>heart</code> e definindo o valor como infinito. O <code>heart:before</code> e <code>heart:after</code> seletores não precisarem de nenhuma propriedade de animação. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: A propriedade <code>animation-iteration-count</code> da classe <code>heart</code> deve ter um valor infinito.
|
||||
testString: 'assert($(".heart").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.");'
|
||||
- text: A propriedade <code>animation-iteration-count</code> para a classe <code>back</code> deve ter um valor infinito.
|
||||
testString: 'assert($(".back").css("animation-iteration-count") == "infinite", "The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
animation-name: backdiv;
|
||||
animation-duration: 1s;
|
||||
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
animation-name: beat;
|
||||
animation-duration: 1s;
|
||||
|
||||
}
|
||||
.heart:after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart:before {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@keyframes backdiv {
|
||||
50% {
|
||||
background: #ffe6f2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
0% {
|
||||
transform: scale(1) rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.6) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="back"></div>
|
||||
<div class="heart"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,84 +0,0 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512aea
|
||||
title: Make Motion More Natural Using a Bezier Curve
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Torne o movimento mais natural usando uma curva Bezier
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Este desafio anima um elemento para replicar o movimento de uma bola que está sendo malabarizada. Desafios anteriores cobriram os <code>linear</code> e <code>ease-out</code> curvas de Bezier cúbicos, no entanto não representa o movimento malabarismo com precisão. Você precisa personalizar uma curva de Bezier para isso. A <code>animation-timing-function</code> faz um loop automaticamente em cada quadro-chave quando a <code>animation-iteration-count</code> é definida como infinita. Como existe um conjunto de regras de quadros-chave no meio da duração da animação (a <code>50%</code> ), isso resulta em duas progressões de animação idênticas no movimento para cima e para baixo da bola. A seguinte curva cúbica de Bezier simula um movimento de malabarismo: <code>cubic-bezier(0.3, 0.4, 0.5, 1.6);</code> Observe que o valor de y2 é maior que 1. Embora a curva cúbica de Bezier seja mapeada em um sistema de coordenadas 1 por 1 e só possa aceitar valores x de 0 a 1, o valor y pode ser definido como números maiores que um. Isso resulta em um movimento de salto que é ideal para simular a bola de malabarismo. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Altere o valor da <code>animation-timing-function</code> de <code>animation-timing-function</code> do elemento com o ID de <code>green</code> para uma função de <code>cubic-bezier</code> com os valores x1, y1, x2, y2 definidos respectivamente para 0,311, 0,441, 0,444, 1,649. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O valor da propriedade <code>animation-timing-function</code> para o elemento com o ID <code>green</code> deve ser uma função <code>cubic-bezier</code> com valores x1, y1, x2, y2, conforme especificado.'
|
||||
testString: 'assert($("#green").css("animation-timing-function") == "cubic-bezier(0.311, 0.441, 0.444, 1.649)", "The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 60%;
|
||||
animation-name: jump;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 25%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 50%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
#green {
|
||||
background: green;
|
||||
left: 75%;
|
||||
animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1);
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
50% {
|
||||
top: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="red"></div>
|
||||
<div class="balls" id="blue"></div>
|
||||
<div class="balls" id="green"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,69 +0,0 @@
|
||||
---
|
||||
id: 58a7a6ebf9a6318348e2d5aa
|
||||
title: Modify Fill Mode of an Animation
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Modificar o modo de preenchimento de uma animação
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Isso é ótimo, mas não funciona direito ainda. Observe como a animação é redefinida após a passagem de <code>500ms</code> , fazendo com que o botão retorne à cor original. Você quer que o botão fique em destaque. Isso pode ser feito configurando a propriedade <code>animation-fill-mode</code> como <code>forwards</code> . O <code>animation-fill-mode</code> especifica o estilo aplicado a um elemento quando a animação termina. Você pode configurá-lo assim: <code>animation-fill-mode: forwards;</code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Defina a propriedade de <code>animation-fill-mode</code> do <code>button:hover</code> para <code>forwards</code> para que o botão permaneça realçado quando um usuário passar por cima dele. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>button:hover</code> deve ter uma propriedade de <code>animation-fill-mode</code> com um valor de <code>forwards</code> .'
|
||||
testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), "<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
/* add your code below this line */
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,64 +0,0 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512aca
|
||||
title: Move a Relatively Positioned Element with CSS Offsets
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Mover um Elemento Posicionado Relativamente com Deslocamentos CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Os deslocamentos de CSS de <code>top</code> ou de <code>bottom</code> e à <code>left</code> ou à <code>right</code> informam ao navegador a distância para compensar um item em relação ao local em que ele ficaria no fluxo normal do documento. Você está deslocando um elemento para longe de um determinado ponto, o que afasta o elemento do lado referenciado (efetivamente, na direção oposta). Como você viu no último desafio, usar o deslocamento superior moveu o <code>h2</code> para baixo. Da mesma forma, usar um deslocamento à esquerda move um item para a direita. <h2> Instruções </h2><section id="instructions"> Use deslocamentos CSS para mover os <code>h2</code> 15 pixels para a direita e 10 pixels para cima. </section><h2> Testes </h2><section id="tests"><pre> <code class="language-yml">tests: - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");' - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.' testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'</code> </pre></section><h2> Semente do Desafio </h2><section id="challengeSeed"><div id="html-seed"><pre> <code class="language-html"><head> <style> h2 { position: relative; } </style> </head> <body> <h1>On Being Well-Positioned</h1> <h2>Move me!</h2> <p>I still think the h2 is where it normally sits.</p> </body></code> </pre></div></section><h2> Solução </h2><section id="solution"><pre> <code class="language-js">// solution required</code> </pre></section></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use deslocamentos CSS para mover os <code>h2</code> 15 pixels para a direita e 10 pixels para cima. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Seu código deve usar um deslocamento CSS para posicionar relativamente o <code>h2</code> 10px para cima. Em outras palavras, movê-lo 10px longe da <code>bottom</code> de onde normalmente se senta.'
|
||||
testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");'
|
||||
- text: 'Seu código deve usar um deslocamento CSS para posicionar o <code>h2</code> 15px de maneira relativamente à direita. Em outras palavras, mova-o a 15px da <code>left</code> de onde normalmente fica.'
|
||||
testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,79 +0,0 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ace
|
||||
title: Push Elements Left or Right with the float Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Empurre os elementos para a esquerda ou para a direita com a propriedade float
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A próxima ferramenta de posicionamento não usa a <code>position</code> , mas define a propriedade <code>float</code> de um elemento. Os elementos flutuantes são removidos do fluxo normal de um documento e enviados para a <code>left</code> ou para a <code>right</code> do elemento pai que o contém. É comumente usado com a propriedade <code>width</code> para especificar quanto espaço horizontal o elemento flutuante requer. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> O dado marcação iria funcionar bem como um layout de duas colunas, com as <code>section</code> e <code>aside</code> elementos próximos uns dos outros. Dê ao item <code>#left</code> um <code>float</code> da <code>left</code> e o item <code>#right</code> um <code>float</code> da <code>right</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O elemento com id <code>left</code> deve ter um valor <code>float</code> da <code>left</code> .
|
||||
testString: 'assert($("#left").css("float") == "left", "The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.");'
|
||||
- text: O elemento com o <code>right</code> id deve ter um valor <code>float</code> de <code>right</code> .
|
||||
testString: 'assert($("#right").css("float") == "right", "The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
#left {
|
||||
|
||||
width: 50%;
|
||||
}
|
||||
#right {
|
||||
|
||||
width: 40%;
|
||||
}
|
||||
aside, section {
|
||||
padding: 2px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
</header>
|
||||
<section id="left">
|
||||
<h2>Content</h2>
|
||||
<p>Good stuff</p>
|
||||
</section>
|
||||
<aside id="right">
|
||||
<h2>Sidebar</h2>
|
||||
<p>Links</p>
|
||||
</aside>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,72 +0,0 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac2
|
||||
title: Set the font-size for Multiple Heading Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Definir o tamanho da fonte para vários elementos de cabeçalho
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A propriedade <code>font-size</code> é usada para especificar o tamanho do texto em um determinado elemento. Essa regra pode ser usada para vários elementos para criar consistência visual de texto em uma página. Nesse desafio, você definirá os valores de todas as tags <code>h1</code> a <code>h6</code> para equilibrar os tamanhos dos títulos. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"><ul><li> Defina o <code>font-size</code> da <code>font-size</code> da tag <code>h1</code> para 68 px. </li><li> Defina o <code>font-size</code> da <code>font-size</code> da tag <code>h2</code> para 52px. </li><li> Defina o <code>font-size</code> da <code>font-size</code> da tag <code>h3</code> para 40px. </li><li> Defina o <code>font-size</code> da <code>font-size</code> da tag <code>h4</code> para 32px. </li><li> Defina o <code>font-size</code> da <code>font-size</code> da tag <code>h5</code> para 21px. </li><li> Defina o <code>font-size</code> da <code>font-size</code> da tag <code>h6</code> para 14px. </li></ul></section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve definir a propriedade de <code>font-size</code> da <code>font-size</code> da tag <code>h1</code> como 68 pixels.
|
||||
testString: 'assert($("h1").css("font-size") == "68px", "Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.");'
|
||||
- text: Seu código deve definir a propriedade <code>font-size</code> da tag <code>h2</code> como 52 pixels.
|
||||
testString: 'assert($("h2").css("font-size") == "52px", "Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.");'
|
||||
- text: Seu código deve definir a propriedade <code>font-size</code> para a tag <code>h3</code> em 40 pixels.
|
||||
testString: 'assert($("h3").css("font-size") == "40px", "Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.");'
|
||||
- text: Seu código deve definir a propriedade <code>font-size</code> da tag <code>h4</code> como 32 pixels.
|
||||
testString: 'assert($("h4").css("font-size") == "32px", "Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.");'
|
||||
- text: Seu código deve definir a propriedade de <code>font-size</code> da <code>font-size</code> para a tag <code>h5</code> como 21 pixels.
|
||||
testString: 'assert($("h5").css("font-size") == "21px", "Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.");'
|
||||
- text: Seu código deve definir a propriedade <code>font-size</code> para a tag <code>h6</code> como 14 pixels.
|
||||
testString: 'assert($("h6").css("font-size") == "14px", "Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,56 +0,0 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac4
|
||||
title: Set the font-size of Paragraph Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Definir o tamanho da fonte do texto de parágrafo
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A propriedade <code>font-size</code> em CSS não está limitada a cabeçalhos, ela pode ser aplicada a qualquer elemento que contenha texto. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Altere o valor da propriedade de <code>font-size</code> da <code>font-size</code> para o parágrafo para 16px para torná-lo mais visível. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Sua tag <code>p</code> deve ter um <code>font-size</code> de <code>font-size</code> de 16 pixels.
|
||||
testString: 'assert($("p").css("font-size") == "16px", "Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,90 +0,0 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac3
|
||||
title: Set the font-weight for Multiple Heading Elements
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Definir o peso da fonte para vários elementos de título
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você define o <code>font-size</code> da <code>font-size</code> de cada tag de cabeçalho no último desafio, aqui você ajusta o <code>font-weight</code> da <code>font-weight</code> . A propriedade <code>font-weight</code> define a espessura ou a espessura dos caracteres em uma seção do texto. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"><ul><li> Defina o <code>font-weight</code> da <code>font-weight</code> da tag <code>h1</code> para 800. </li><li> Defina o <code>font-weight</code> da <code>font-weight</code> da tag <code>h2</code> para 600. </li><li> Defina o <code>font-weight</code> da <code>font-weight</code> da tag <code>h3</code> para 500. </li><li> Defina o <code>font-weight</code> da <code>font-weight</code> da tag <code>h4</code> para 400. </li><li> Defina o <code>font-weight</code> da <code>font-weight</code> da tag <code>h5</code> para 300. </li><li> Defina o <code>font-weight</code> da <code>font-weight</code> da tag <code>h6</code> para 200. </li></ul></section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve definir a propriedade de <code>font-weight</code> da <code>font-weight</code> para a tag <code>h1</code> como 800.
|
||||
testString: 'assert($("h1").css("font-weight") == "800", "Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.");'
|
||||
- text: Seu código deve definir a propriedade de <code>font-weight</code> da <code>font-weight</code> para a tag <code>h2</code> como 600.
|
||||
testString: 'assert($("h2").css("font-weight") == "600", "Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.");'
|
||||
- text: Seu código deve definir a propriedade de <code>font-weight</code> da <code>font-weight</code> para a tag <code>h3</code> como 500.
|
||||
testString: 'assert($("h3").css("font-weight") == "500", "Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.");'
|
||||
- text: Seu código deve definir a propriedade de <code>font-weight</code> da <code>font-weight</code> para a tag <code>h4</code> como 400.
|
||||
testString: 'assert($("h4").css("font-weight") == "400", "Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.");'
|
||||
- text: Seu código deve definir a propriedade de <code>font-weight</code> da <code>font-weight</code> para a tag <code>h5</code> como 300.
|
||||
testString: 'assert($("h5").css("font-weight") == "300", "Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.");'
|
||||
- text: Seu código deve definir a propriedade de <code>font-weight</code> da <code>font-weight</code> para a tag <code>h6</code> como 200.
|
||||
testString: 'assert($("h6").css("font-weight") == "200", "Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,57 +0,0 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac5
|
||||
title: Set the line-height of Paragraphs
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Definir a altura da linha de parágrafos
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> O CSS oferece a propriedade <code>line-height</code> para alterar a altura de cada linha em um bloco de texto. Como o nome sugere, ele altera a quantidade de espaço vertical que cada linha de texto recebe. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione uma propriedade de <code>line-height</code> à tag <code>p</code> e defina-a para 25px. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve definir a <code>line-height</code> da <code>line-height</code> da tag <code>p</code> para 25 pixels.
|
||||
testString: 'assert($("p").css("line-height") == "25px", "Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,84 +0,0 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae9
|
||||
title: Use a Bezier Curve to Move a Graphic
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use uma curva de Bezier para mover um gráfico
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Um desafio anterior discutiu a palavra <code>ease-out</code> chave <code>ease-out</code> que descreve uma alteração de animação que acelera primeiro e depois desacelera no final da animação. À direita, a diferença entre a palavra <code>ease-out</code> chave <code>ease-out</code> (para o elemento azul) e <code>linear</code> palavra-chave <code>linear</code> (para o elemento vermelho) é demonstrada. Progressões semelhantes de animação para a palavra <code>ease-out</code> chave <code>ease-out</code> podem ser obtidas usando uma função de curva Bezier cúbica personalizada. Em geral, a alteração dos pontos de ancoragem <code>p1</code> e <code>p2</code> impulsiona a criação de diferentes curvas de Bezier, que controlam como a animação progride no tempo. Aqui está um exemplo de uma curva de Bezier usando valores para imitar o estilo <code>animation-timing-function: cubic-bezier(0, 0, 0.58, 1);</code> Lembre-se de que todas as funções de <code>cubic-bezier</code> começam com <code>p0</code> em (0, 0) e terminam em <code>p3</code> em (1, 1). Neste exemplo, a curva se move mais rapidamente através do eixo Y (começa em 0, vai para <code>p1</code> y valor de 0, então vai para <code>p2</code> y valor de 1) do que se move pelo eixo X (0 para iniciar, então 0 para <code>p1</code> , até 0,58 para <code>p2</code> ). Como resultado, a alteração no elemento animado progride mais rapidamente que o tempo da animação para esse segmento. No final da curva, a relação entre a alteração nos valores x e y se inverte - o valor y se move de 1 para 1 (sem alteração), e os valores x se deslocam de 0,58 para 1, fazendo com que a animação mude mais lentamente em comparação com a duração da animação. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Para ver o efeito dessa curva de Bézier em ação, altere a <code>animation-timing-function</code> de <code>animation-timing-function</code> do elemento com ID de <code>red</code> para uma função de <code>cubic-bezier</code> com valores de x1, y1, x2, y2 definidos como 0, 0, 0,58, 1 Isso fará com que ambos os elementos progridam através da animação da mesma forma. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O valor da propriedade <code>animation-timing-function</code> do elemento com o id <code>red</code> deve ser uma função <code>cubic-bezier</code> com os valores x1, y1, x2, y2 definidos respectivamente para 0, 0, 0,58, 1.'
|
||||
testString: 'assert($("#red").css("animation-timing-function") == "cubic-bezier(0, 0, 0.58, 1)", "The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .");'
|
||||
- text: O elemento com o ID <code>red</code> não deve mais ter a propriedade de <code>animation-timing-function</code> de linear.
|
||||
testString: 'assert($("#red").css("animation-timing-function") !== "linear", "The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.");'
|
||||
- text: O valor da propriedade <code>animation-timing-function</code> para o elemento com o id <code>blue</code> não deve ser alterado.
|
||||
testString: 'assert($("#blue").css("animation-timing-function") == "ease-out", "The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id= "red"></div>
|
||||
<div class="balls" id= "blue"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,77 +0,0 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad7
|
||||
title: Use a CSS Linear Gradient to Create a Striped Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use um gradiente linear CSS para criar um elemento distribuído
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A função de <code>repeating-linear-gradient()</code> é muito semelhante ao <code>linear-gradient()</code> com a principal diferença que repete o padrão de gradiente especificado. <code>repeating-linear-gradient()</code> aceita uma variedade de valores, mas para simplificar, você trabalhará com um valor de ângulo e valores de parada de cor neste desafio. O valor do ângulo é a direção do gradiente. As paradas de cores são como valores de largura que marcam onde uma transição ocorre e são fornecidas com uma porcentagem ou um número de pixels. No exemplo demonstrado no editor de código, o gradiente começa com a cor <code>yellow</code> em 0 pixels, que se mistura com a segunda cor <code>blue</code> a 40 pixels de distância do início. Como a próxima parada de cor também é de 40 pixels, o gradiente muda imediatamente para a terceira cor <code>green</code> , que se mistura com o quarto valor de cor <code>red</code> , a 80 pixels do início do gradiente. Para este exemplo, é útil pensar nas paradas de cores como pares, onde cada duas cores se mesclam. <code>0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px</code> Se cada dois valores de parada de cor forem da mesma cor, a mesclagem não é perceptível porque está entre a mesma cor, seguida por uma transição difícil para a próxima cor, então você acaba com listras. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Faça listras alterando o <code>repeating-linear-gradient()</code> para usar um ângulo de gradiente de <code>45deg</code> , depois defina as duas primeiras cores para <code>yellow</code> e, finalmente, a segunda cor para <code>black</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O ângulo do <code>repeating-linear-gradient()</code> deve ser 45deg.
|
||||
testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should be 45deg.");'
|
||||
- text: O ângulo do <code>repeating-linear-gradient()</code> não deve mais ser 90 graus
|
||||
testString: 'assert(!code.match(/90deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg");'
|
||||
- text: A parada de cor em 0 pixels deve ser <code>yellow</code> .
|
||||
testString: 'assert(code.match(/yellow\s+?0(px)?/gi), "The color stop at 0 pixels should be <code>yellow</code>.");'
|
||||
- text: Uma parada de cor em 40 pixels deve ser <code>yellow</code> .
|
||||
testString: 'assert(code.match(/yellow\s+?40px/gi), "One color stop at 40 pixels should be <code>yellow</code>.");'
|
||||
- text: A segunda parada de cor em 40 pixels deve ser <code>black</code> .
|
||||
testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), "The second color stop at 40 pixels should be <code>black</code>.");'
|
||||
- text: A última parada de cor em 80 pixels deve ser <code>black</code> .
|
||||
testString: 'assert(code.match(/black\s+?80px/gi), "The last color stop at 80 pixels should be <code>black</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
div{
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50 auto;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
yellow 0px,
|
||||
blue 40px,
|
||||
green 40px,
|
||||
red 80px
|
||||
);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,67 +0,0 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae0
|
||||
title: Use CSS Animation to Change the Hover State of a Button
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use animação CSS para alterar o estado de foco de um botão
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode usar CSS <code>@keyframes</code> para alterar a cor de um botão em seu estado de foco. Veja um exemplo de como alterar a largura de uma imagem no hover: <blockquote><style><br> img:hover {<br> animation-name: width;<br> animation-duration: 500ms;<br> }<br><br> @keyframes width {<br> 100% {<br> width: 40px;<br> }<br> }<br></style><br><br><img src="https://bit.ly/smallgooglelogo" alt="Logotipo da Google" /></blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Observe que <code>ms</code> significa milissegundos, em que 1000ms é igual a 1s. Use CSS <code>@keyframes</code> para alterar a <code>background-color</code> de fundo do elemento <code>button</code> , de modo que ele se torne <code>#4791d0</code> quando um usuário passar por cima dele. A regra <code>@keyframes</code> deve ter apenas uma entrada para <code>100%</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: A regra @keyframes deve usar a cor de fundo do <code>animation-name</code> da <code>animation-name</code> .
|
||||
testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), "The @keyframes rule should use the <code>animation-name</code> background-color.");'
|
||||
- text: 'Deve haver uma regra em <code>@keyframes</code> que altere a <code>background-color</code> para <code>#4791d0</code> a 100%.'
|
||||
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), "There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<button>Register</button>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,65 +0,0 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adb
|
||||
title: Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a propriedade skewX da transformação de CSS para inclinar um elemento ao longo do eixo X
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A próxima função da propriedade <code>transform</code> é <code>skewX()</code> , que inclina o elemento selecionado ao longo de seu eixo X (horizontal) em um determinado grau. O código a seguir inclina o elemento de parágrafo em -32 graus ao longo do eixo X. <blockquote> p { <br> transformar: skewX (-32deg); <br> } </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Incline o elemento com o ID do <code>bottom</code> em 24 graus ao longo do eixo X usando a propriedade <code>transform</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O elemento com o <code>bottom</code> id deve ser inclinado em 24 graus ao longo do eixo X.
|
||||
testString: 'assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), "The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,66 +0,0 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adc
|
||||
title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a propriedade CSS Transform Property skewY para inclinar um elemento ao longo do eixo Y
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Dado que a função <code>skewX()</code> inclina o elemento selecionado ao longo do eixo X em um determinado grau, não é surpresa que a propriedade <code>skewY()</code> incline um elemento ao longo do eixo Y (vertical). </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Incline o elemento com o ID de <code>top</code> -10 graus ao longo do eixo Y usando a propriedade <code>transform</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O elemento com o <code>top</code> id deve ser inclinado em -10 graus ao longo do seu eixo Y.
|
||||
testString: 'assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), "The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,74 +0,0 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad9
|
||||
title: Use the CSS Transform scale Property to Change the Size of an Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a propriedade de escala de transformação de CSS para alterar o tamanho de um elemento
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Para alterar a escala de um elemento, o CSS possui a propriedade <code>transform</code> , junto com sua função <code>scale()</code> . O exemplo de código a seguir dobra o tamanho de todos os elementos de parágrafo na página: <blockquote>p {<br> transform:scale(2);<br>}</blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Aumente o tamanho do elemento com o id de <code>ball2</code> para 1,5 vezes o tamanho original. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Defina a propriedade de <code>transform</code> para <code>#ball2</code> para dimensioná-la 1,5 vezes seu tamanho.'
|
||||
testString: 'assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi), "Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.ball {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 50 auto;
|
||||
position: fixed;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#ball1 {
|
||||
left: 20%;
|
||||
}
|
||||
#ball2 {
|
||||
left: 65%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div class="ball" id= "ball1"></div>
|
||||
<div class="ball" id= "ball2"></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,65 +0,0 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ada
|
||||
title: Use the CSS Transform scale Property to Scale an Element on Hover
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a propriedade de escala Transform do CSS para dimensionar um elemento no Hover
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A propriedade <code>transform</code> possui uma variedade de funções que permite dimensionar, mover, girar, inclinar, etc., seus elementos. Quando usada com pseudo-classes, como <code>:hover</code> que especifica um determinado estado de um elemento, a propriedade <code>transform</code> pode facilmente adicionar interatividade aos seus elementos. Veja um exemplo para dimensionar os elementos de parágrafo para 2,1 vezes o tamanho original quando um usuário passa por cima deles: <blockquote>p:hover {<br> transform: scale(2.1);<br>}</blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione uma regra CSS para o estado de <code>hover</code> do <code>div</code> e use a propriedade <code>transform</code> para dimensionar o elemento <code>div</code> para 1,1 vezes seu tamanho original quando um usuário passar por cima dele. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'O tamanho do elemento <code>div</code> deve ser dimensionado 1,1 vezes quando o usuário passar por cima dele.'
|
||||
testString: 'assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), "The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(
|
||||
53deg,
|
||||
#ccfffc,
|
||||
#ffcccf
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,88 +0,0 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab9
|
||||
title: Use the em Tag to Italicize Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use o tag em para colocar em itálico
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Para enfatizar o texto, você pode usar a tag <code>em</code> . Isso exibe o texto em itálico, pois o navegador aplica o CSS de <code>font-style: italic;</code> de <code>font-style: italic;</code> para o elemento. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Enrole uma tag <code>em</code> torno do conteúdo da tag de parágrafo para dar ênfase. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve adicionar uma tag <code>em</code> para a marcação.
|
||||
testString: 'assert($("em").length == 1, "Your code should add an <code>em</code> tag to the markup.");'
|
||||
- text: A tag <code>em</code> deve envolver o conteúdo da tag <code>p</code> mas não a tag <code>p</code> si.
|
||||
testString: 'assert($("p").children().length == 1 && $("em").children().length == 2, "The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,90 +0,0 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512aba
|
||||
title: Use the s Tag to Strikethrough Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a tag s para rasurar texto
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Para raspar o texto, que é quando uma linha horizontal corta os caracteres, você pode usar a tag <code>s</code> . Isso mostra que uma seção do texto não é mais válida. Com a tag <code>s</code> , o navegador aplica o CSS da <code>text-decoration: line-through;</code> de <code>text-decoration: line-through;</code> para o elemento. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Envolva a tag <code>s</code> torno de "Google" dentro da tag <code>h4</code> e, em seguida, adicione a palavra Alphabet ao lado dela, que não deve ter a formatação strikethrough. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve adicionar uma tag <code>s</code> à marcação.
|
||||
testString: 'assert($("s").length == 1, "Your code should add one <code>s</code> tag to the markup.");'
|
||||
- text: A tag <code>s</code> deve envolver o texto do Google na tag <code>h4</code> . Não deve conter a palavra Alfabeto.
|
||||
testString: 'assert($("s").text().match(/Google/gi) && !$("s").text().match(/Alphabet/gi), "A <code>s</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.");'
|
||||
- text: 'Inclua a palavra Alfabeto na tag <code>h4</code> , sem formatação tachada.'
|
||||
testString: 'assert($("h4").html().match(/Alphabet/gi), "Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,90 +0,0 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab7
|
||||
title: Use the strong Tag to Make Text Bold
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a tag forte para tornar o texto em negrito
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Para tornar o texto em negrito, você pode usar a tag <code>strong</code> . Isso costuma ser usado para chamar a atenção para o texto e simbolizar que é importante. Com a tag <code>strong</code> , o navegador aplica o CSS de <code>font-weight: bold;</code> para o elemento. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Embrulhe uma tag <code>strong</code> torno da "Universidade de Stanford" dentro da tag <code>p</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve adicionar uma tag <code>strong</code> à marcação.
|
||||
testString: 'assert($("strong").length == 1, "Your code should add one <code>strong</code> tag to the markup.");'
|
||||
- text: A tag <code>strong</code> deve estar dentro da tag <code>p</code> .
|
||||
testString: 'assert($("p").children("strong").length == 1, "The <code>strong</code> tag should be inside the <code>p</code> tag.");'
|
||||
- text: A etiqueta <code>strong</code> deve envolver as palavras "Universidade de Stanford".
|
||||
testString: 'assert($("strong").text().match(/^Stanford University$/gi), "The <code>strong</code> tag should wrap around the words "Stanford University".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,96 +0,0 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac0
|
||||
title: Use the text-transform Property to Make Text Uppercase
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a propriedade text-transform para tornar o texto maiúsculo
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A propriedade <code>text-transform</code> em CSS é usada para alterar a aparência do texto. É uma maneira conveniente de garantir que o texto em uma página da Web seja exibido de forma consistente, sem a necessidade de alterar o conteúdo de texto dos elementos HTML reais. A tabela a seguir mostra como os diferentes valores de <code>text-transform</code> alteram o texto de exemplo "Transform me". <table class="table table-striped"><thead><tr><th> Valor </th><th> Resultado </th></tr></thead><tbody><tr><td> <code>lowercase</code> </td> <td> "me transformar" </td></tr><tr><td> <code>uppercase</code> </td> <td> "TRANSFORME-ME" </td></tr><tr><td> <code>capitalize</code> </td> <td> "Transforme-me" </td></tr><tr><td> <code>initial</code> </td> <td> Use o valor padrão </td></tr><tr><td> <code>inherit</code> </td> <td> Use o valor de <code>text-transform</code> do elemento pai </td></tr><tr><td> <code>none</code> </td> <td> <strong>Padrão:</strong> use o texto original </td></tr></tbody></table></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Transforme o texto do <code>h4</code> em maiúsculo usando a propriedade <code>text-transform</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: O texto <code>h4</code> deve estar em maiúsculas.
|
||||
testString: 'assert($("h4").css("text-transform") === "uppercase", "The <code>h4</code> text should be uppercase.");'
|
||||
- text: O texto original do h4 não deve ser alterado.
|
||||
testString: 'assert(($("h4").text() !== $("h4").text().toUpperCase()), "The original text of the h4 should not be changed.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -1,88 +0,0 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab8
|
||||
title: Use the u Tag to Underline Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a tag u para sublinhar o texto
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Para sublinhar o texto, você pode usar a tag <code>u</code> . Isso é freqüentemente usado para significar que uma seção de texto é importante, ou algo para lembrar. Com a tag <code>u</code> , o navegador aplica o CSS de <code>text-decoration: underline;</code> para o elemento. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Embrulhe a tag <code>u</code> apenas em torno do texto "Ph.D. students". <strong>Nota</strong> <br> Tente evitar usar a tag <code>u</code> quando puder ser confundida com um link. As tags de âncora também têm uma formatação sublinhada padrão. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve adicionar uma tag <code>u</code> na marcação.
|
||||
testString: 'assert($("u").length === 1, "Your code should add a <code>u</code> tag to the markup.");'
|
||||
- text: A tag <code>u</code> deve envolver o texto "Ph.D. students".
|
||||
testString: 'assert($("u").text() === "Ph.D. students", "The <code>u</code> tag should wrap around the text "Ph.D. students".");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user