Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@ -0,0 +1,149 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af1
|
||||
title: Add Flex Superpowers to the Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Добавить Flex Superpowers в Tweet Вставить
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Справа находится вставка твита, которая будет использоваться в качестве практического примера. Некоторые элементы будут выглядеть лучше с другой компоновкой. Последняя задача продемонстрировала <code>display: flex</code> . Здесь вы добавите его к нескольким компонентам в tweet embed, чтобы начать настройку их позиционирования. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте <code>display: flex</code> свойств CSS <code>display: flex</code> для всех следующих элементов: обратите внимание, что селектор уже настроен в <code>header</code> CSS: <code>header</code> <code>.profile-name</code> , заголовок <code>.follow-btn</code> , <code>h3</code> и <code>h4</code> заголовка, <code>footer</code> , и <code>.stats</code> колонтитула. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш <code>header</code> должен иметь свойство <code>display</code> установленное в flex.
|
||||
testString: 'assert($("header").css("display") == "flex", "Your <code>header</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Ваш <code>footer</code> должен иметь свойство <code>display</code> должно быть гибким.
|
||||
testString: 'assert($("footer").css("display") == "flex", "Your <code>footer</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Ваш <code>h3</code> должен иметь свойство <code>display</code> установленное в flex.
|
||||
testString: 'assert($("h3").css("display") == "flex", "Your <code>h3</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Ваш <code>h4</code> должен иметь свойство <code>display</code> установленное в flex.
|
||||
testString: 'assert($("h4").css("display") == "flex", "Your <code>h4</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Ваше <code>.profile-name</code> должно иметь свойство <code>display</code> установленное в flex.
|
||||
testString: 'assert($(".profile-name").css("display") == "flex", "Your <code>.profile-name</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Ваш <code>.follow-btn</code> должен иметь свойство <code>display</code> <code>.follow-btn</code> должно быть гибким.
|
||||
testString: 'assert($(".follow-btn").css("display") == "flex", "Your <code>.follow-btn</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: У вашего <code>.stats</code> должно быть свойство <code>display</code> установленное в flex.
|
||||
testString: 'assert($(".stats").css("display") == "flex", "Your <code>.stats</code> should have a <code>display</code> property set to flex.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header {
|
||||
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer {
|
||||
|
||||
}
|
||||
footer .stats {
|
||||
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af8
|
||||
title: Align Elements Using the align-items Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Выравнивание элементов Использование элементов выравнивания Свойство
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Свойство <code>align-items</code> похоже на <code>justify-content</code> . Напомним, что свойство <code>justify-content</code> выровняло элементы flex вдоль главной оси. Для строк основная ось - горизонтальная линия, а для столбцов - вертикальная. Контейнеры Flex также имеют <strong>поперечную ось,</strong> которая противоположна основной оси. Для рядов поперечная ось вертикальна, а для столбцов поперечная ось горизонтальна. CSS предлагает свойство <code>align-items</code> для выравнивания элементов гибкости вдоль поперечной оси. Для строки он указывает CSS, как перемещать элементы во всей строке вверх или вниз в контейнере. И для столбца, как нажать все элементы слева или справа в контейнере. Различные значения, доступные для <code>align-items</code> включают: <ul><li> <code>flex-start</code> : выравнивает элементы до начала контейнера flex. Для строк это выравнивает элементы в верхней части контейнера. Для столбцов это выравнивает элементы слева от контейнера. </li><li> <code>flex-end</code> : выравнивает элементы до конца гибкого контейнера. Для строк это выравнивает элементы в нижней части контейнера. Для столбцов это выравнивает элементы справа от контейнера. </li><li> <code>center</code> : выравнивание предметов по центру. Для строк это вертикально выравнивает элементы (равное пространство выше и ниже элементов). Для столбцов это горизонтально выравнивает их (равное пространство слева и справа от элементов). </li><li> <code>stretch</code> : растяните элементы, чтобы заполнить контейнер для гибких контейнеров. Например, элементы строк растягиваются, чтобы заполнить гибкий контейнер сверху вниз. </li><li> <code>baseline</code> : выровнять элементы по исходным линиям. Исходный текст - это текстовая концепция, думайте об этом как о линии, на которой сидят буквы. </li></ul></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Пример помогает показать это свойство в действии. Добавьте <code>align-items</code> свойств CSS в элемент <code>#box-container</code> и присвойте ему значение центра. <strong>бонус</strong> <br> Попробуйте другие параметры свойства <code>align-items</code> в редакторе кода, чтобы увидеть их различия. Но обратите внимание, что значение центра является единственным, которое пройдет эту задачу. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-container</code> должен иметь свойство <code>align-items</code> заданное значением центра.'
|
||||
testString: 'assert($("#box-container").css("align-items") == "center", "The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 200px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 200px;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"><p>Hello</p></div>
|
||||
<div id="box-2"><p>Goodbye</p></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af6
|
||||
title: Align Elements Using the justify-content Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Выравнивание элементов Использование свойства обоснования-содержимого
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Иногда элементы гибкости в контейнере flex не заполняют все пространство в контейнере. Обычно хочется сказать CSS, как выровнять и вытеснять элементы flex определенным образом. К счастью, свойство <code>justify-content</code> имеет несколько вариантов для этого. Но во-первых, перед тем, как рассмотреть эти варианты, необходимо понять какую-то важную терминологию. <a href="https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg" target="_blank">Вот полезное изображение, показывающее строку, иллюстрирующую приведенные ниже концепции.</a> Напомним, что установка гибкого контейнера в виде строки помещает элементы гибкости бок о бок слева направо. Гибкий контейнер, установленный как столбец, помещает элементы гибкости в вертикальный стек сверху вниз. Для каждого направление расположения элементов гибкости называется <strong>главной осью</strong> . Для строки это горизонтальная линия, проходящая через каждый элемент. А для столбца главная ось - вертикальная линия через элементы. Существует несколько вариантов того, как перемещать элементы гибкости вдоль линии, которая является главной осью. Одним из наиболее часто используемых является <code>justify-content: center;</code> , который выравнивает все элементы гибкости до центра внутри гибкого контейнера. Другие варианты включают: <ul><li> <code>flex-start</code> : выравнивает элементы до начала контейнера flex. Для строки это подталкивает элементы слева от контейнера. Для столбца это перемещает элементы вверху контейнера. </li><li> <code>flex-end</code> : выравнивает элементы до конца гибкого контейнера. Для строки это подталкивает элементы справа от контейнера. Для столбца это подталкивает элементы к нижней части контейнера. </li><li> <code>space-between</code> : выравнивает элементы к центру главной оси, добавив дополнительное пространство между элементами. Первый и последний элементы подталкиваются к самому краю гибкого контейнера. Например, в строке первый элемент находится напротив левой стороны контейнера, последний элемент находится напротив правой стороны контейнера, а остальные элементы между ними расположены равномерно. </li><li> <code>space-around</code> : аналогично <code>space-between</code> но первый и последний элементы не привязаны к краям контейнера, пространство распределяется по всем элементам </li></ul></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Пример помогает показать это свойство в действии. Добавьте свойство <code>justify-content</code> CSS в элемент <code>#box-container</code> и присвойте ему значение центра. <strong>бонус</strong> <br> Попробуйте другие параметры для свойства <code>justify-content</code> в редакторе кода, чтобы увидеть их различия. Но обратите внимание, что значение центра является единственным, которое пройдет эту задачу. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-container</code> должен иметь свойство <code>justify-content</code> заданное значением центра.'
|
||||
testString: 'assert($("#box-container").css("justify-content") == "center", "The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af5
|
||||
title: Apply the flex-direction Property to Create a Column in the Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Примените свойство flex-direction для создания столбца в вставке Tweet
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Твят вставлять <code>header</code> и <code>footer</code> использовали <code>flex-direction</code> свойство ранее со значением строки. Аналогично, элементы внутри элемента <code>.profile-name</code> будут хорошо сгруппированы в виде столбца. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте CSS свойство <code>flex-direction</code> к заголовку по <code>.profile-name</code> элемента и установите значение столбца. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент <code>.profile-name</code> должен иметь свойство <code>flex-direction</code> заданное в столбце.
|
||||
testString: 'assert($(".profile-name").css("flex-direction") == "column", "The <code>.profile-name</code> element should have a <code>flex-direction</code> property set to column.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header, footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,141 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af3
|
||||
title: Apply the flex-direction Property to Create Rows in the Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Примените свойство flex-direction для создания строк в вставке Tweet
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>header</code> и <code>footer</code> в чирикать встроить , например , иметь дочерние элементы , которые могут быть организованы в виде строк с использованием <code>flex-direction</code> свойства. Это говорит CSS, чтобы выровнять по горизонтали. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте CSS свойство <code>flex-direction</code> как для <code>header</code> и <code>footer</code> и установите значение грести. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>header</code> должен иметь свойство <code>flex-direction</code> заданное для строки.
|
||||
testString: 'assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g), "The <code>header</code> should have a <code>flex-direction</code> property set to row.");'
|
||||
- text: <code>footer</code> должен иметь свойство <code>flex-direction</code> заданное для строки.
|
||||
testString: 'assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g), "The <code>footer</code> should have a <code>flex-direction</code> property set to row.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af0
|
||||
title: 'Use display: flex to Position Two Boxes'
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Использовать дисплей: сгибать до положения двух ящиков'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В этом разделе используются чередующиеся стили вызовов, чтобы показать, как использовать CSS для гибкого позиционирования элементов. Во-первых, задача будет объяснять теорию, тогда практическая задача, использующая простой компонент твита, будет применять концепцию flexbox. Размещение <code>display: flex;</code> свойств CSS <code>display: flex;</code> на элементе позволяет использовать другие свойства flex для создания отзывчивой страницы. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте <code>display</code> свойства CSS в <code>#box-container</code> и установите его значение в flex. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>#box-container</code> должен иметь свойство <code>display</code> заданное значением flex.'
|
||||
testString: 'assert($("#box-container").css("display") == "flex", "<code>#box-container</code> should have the <code>display</code> property set to a value of flex.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
}
|
||||
</style>
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af9
|
||||
title: Use the align-items Property in the Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Использовать свойство align-items в Tweet Embed
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последняя задача привела свойство <code>align-items</code> и привела пример. Это свойство может быть применено к нескольким элементам вставки tweet для выравнивания элементов flex внутри них. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте <code>align-items</code> свойств CSS в элемент <code>.follow-btn</code> . Установите значение в центр. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент <code>.follow-btn</code> должен иметь свойство <code>align-items</code> заданное значением центра.
|
||||
testString: 'assert($(".follow-btn").css("align-items") == "center", "The <code>.follow-btn</code> element should have the <code>align-items</code> property set to a value of center.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header, footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b00
|
||||
title: Use the align-self Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Использовать свойство align-self
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Конечным свойством для элементов flex является <code>align-self</code> . Это свойство позволяет настраивать выравнивание каждого элемента отдельно, вместо того, чтобы устанавливать их все одновременно. Это полезно, так как другие общие методы настройки с использованием свойств CSS <code>float</code> , <code>clear</code> и <code>vertical-align</code> не работают на гибких элементах. <code>align-self</code> принимает те же значения, что и <code>align-items</code> и отменяет любое значение, заданное свойством <code>align-items</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство CSS <code>align-self</code> в <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значение центра и дайте <code>#box-2</code> значение flex-end. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-1</code> должен иметь свойство <code>align-self</code> равное значению центра.'
|
||||
testString: 'assert($("#box-1").css("align-self") == "center", "The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of center.");'
|
||||
- text: 'Элемент <code>#box-2</code> должен иметь свойство <code>align-self</code> равное значению flex-end.'
|
||||
testString: 'assert($("#box-2").css("align-self") == "flex-end", "The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of flex-end.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afd
|
||||
title: Use the flex-basis Property to Set the Initial Size of an Item
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте свойство flex-basis для установки начального размера элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Свойство <code>flex-basis</code> указывает начальный размер элемента до того, как CSS выполнит корректировки с <code>flex-shrink</code> или <code>flex-grow</code> . Единицы, используемые свойством <code>flex-basis</code> такие же, как и другие свойства размера ( <code>px</code> , <code>em</code> , <code>%</code> и т. Д.). Значение <code>auto</code> определяет размеры элементов на основе содержимого. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Установите начальный размер ящиков с использованием <code>flex-basis</code> . Добавьте свойство CSS <code>flex-basis</code> как в <code>#box-1</code> и в <code>#box-2</code> . Дайте <code>#box-1</code> значение <code>10em</code> и <code>#box-2</code> значение <code>20em</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-1</code> должен иметь свойство <code>flex-basis</code> .'
|
||||
testString: 'assert($("#box-1").css("flex-basis") != "auto", "The <code>#box-1</code> element should have a <code>flex-basis</code> property.");'
|
||||
- text: '<code>#box-1</code> элемент должен иметь <code>flex-basis</code> значение <code>10em</code> .'
|
||||
testString: 'assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g), "The <code>#box-1</code> element should have a <code>flex-basis</code> value of <code>10em</code>.");'
|
||||
- text: 'Элемент <code>#box-2</code> должен иметь свойство <code>flex-basis</code> .'
|
||||
testString: 'assert($("#box-2").css("flex-basis") != "auto", "The <code>#box-2</code> element should have the <code>flex-basis</code> property.");'
|
||||
- text: '<code>#box-2</code> элемент должен иметь <code>flex-basis</code> значение <code>20em</code> .'
|
||||
testString: 'assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g), "The <code>#box-2</code> element should have a <code>flex-basis</code> value of <code>20em</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af4
|
||||
title: Use the flex-direction Property to Make a Column
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте свойство flex-direction для создания столбца
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последние две проблемы использовали свойство <code>flex-direction</code> заданное для строки. Это свойство также может создавать столбец путем вертикальной укладки дочерних элементов гибкого контейнера. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство <code>flex-direction</code> свойства CSS в элемент <code>#box-container</code> и дайте ему значение столбца. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-container</code> должен иметь свойство <code>flex-direction</code> заданное в столбце.'
|
||||
testString: 'assert($("#box-container").css("flex-direction") == "column", "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to column.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af2
|
||||
title: Use the flex-direction Property to Make a Row
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте свойство flex-direction для создания строки
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Добавление <code>display: flex</code> к элементу превращает его в гибкий контейнер. Это позволяет выровнять любые дочерние элементы этого элемента в строки или столбцы. Вы делаете это, добавляя свойство <code>flex-direction</code> к родительскому элементу и устанавливая его в строку или столбец. Создание строки выравнивает дочерние элементы по горизонтали, а создание столбца выравнивает дочерние элементы по вертикали. Другие варианты для <code>flex-direction</code> - обратное и обратное. <strong>Заметка</strong> <br> Значением по умолчанию для свойства <code>flex-direction</code> является строка. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство <code>flex-direction</code> свойства CSS в элемент <code>#box-container</code> и присвойте ему значение reverse-reverse. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-container</code> должен иметь свойство <code>flex-direction</code> заданное для обратного преобразования строки.'
|
||||
testString: 'assert($("#box-container").css("flex-direction") == "row-reverse", "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row-reverse.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afc
|
||||
title: Use the flex-grow Property to Expand Items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте свойство flex-grow для расширения элементов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Противоположность <code>flex-shrink</code> - свойство <code>flex-grow</code> . Напомним, что <code>flex-shrink</code> контролирует размер предметов при сжатии контейнера. Свойство <code>flex-grow</code> управляет размером элементов, когда родительский контейнер расширяется. Используя аналогичный пример из последней задачи, если один элемент имеет значение <code>flex-grow</code> 1, а другое имеет значение <code>flex-grow</code> 3, то значение со значением 3 будет расти в три раза больше, чем другое. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство CSS <code>flex-grow</code> в <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значение 1 и <code>#box-2</code> значение 2. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
testString: 'assert($("#box-1").css("flex-grow") == "1", "The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of 1.");'
|
||||
- text: 'Элемент <code>#box-2</code> должен иметь свойство <code>flex-grow</code> равное 2.'
|
||||
testString: 'assert($("#box-2").css("flex-grow") == "2", "The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of 2.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afe
|
||||
title: Use the flex Shorthand Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте свойство flex Shorthand
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Существует возможность быстрого выбора нескольких свойств гибкости сразу. Свойства <code>flex-grow</code> , <code>flex-shrink</code> и <code>flex-basis</code> можно объединить, используя свойство <code>flex</code> . Например, <code>flex: 1 0 10px;</code> установит элемент для <code>flex-grow: 1;</code> , <code>flex-shrink: 0;</code> , и <code>flex-basis: 10px;</code> , Настройки свойств по умолчанию - <code>flex: 0 1 auto;</code> , </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство CSS <code>flex</code> и к <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значения, поэтому его <code>flex-grow</code> равен 2, его <code>flex-shrink</code> равен 2, а его <code>flex-basis</code> - 150 пикселей. Дайте <code>#box-2</code> значения, поэтому его <code>flex-grow</code> равен 1, его <code>flex-shrink</code> равен 1, а его <code>flex-basis</code> - 150 пикселей. Эти значения приведут к тому, что <code>#box-1</code> будет расти, чтобы заполнить дополнительное пространство с удвоенной скоростью <code>#box-2</code> когда контейнер больше 300 пикселей, и с удвоенной скоростью <code>#box-2</code> когда контейнер меньше 300 пикселей. 300px - это комбинированный размер значений <code>flex-basis</code> двух полей. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-1</code> должен иметь свойство <code>flex</code> равное 2 2 150px.'
|
||||
testString: 'assert($("#box-1").css("flex-grow") == "2" && $("#box-1").css("flex-shrink") == "2" && $("#box-1").css("flex-basis") == "150px", "The <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.");'
|
||||
- text: 'Элемент <code>#box-2</code> должен иметь свойство <code>flex</code> равное 1 1 150px.'
|
||||
testString: 'assert($("#box-2").css("flex-grow") == "1" && $("#box-2").css("flex-shrink") == "1" && $("#box-2").css("flex-basis") == "150px", "The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.");'
|
||||
- text: 'Ваш код должен использовать свойство <code>flex</code> для <code>#box-1</code> и <code>#box-2</code> .'
|
||||
testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, "Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afb
|
||||
title: Use the flex-shrink Property to Shrink Items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте свойство flex-shrink для сокращения предметов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> До сих пор все свойства в задачах применимы к контейнеру flex (родительский элемент гибких элементов). Однако для гибких элементов существует несколько полезных свойств. Первый - свойство <code>flex-shrink</code> . Когда он используется, он позволяет сжимать элемент, если контейнер гибкого контейнера слишком мал. Элементы сокращаются, когда ширина родительского контейнера меньше, чем объединенная ширина всех элементов гибкости внутри него. Свойство <code>flex-shrink</code> принимает числа как значения. Чем больше число, тем больше он будет уменьшаться по сравнению с другими элементами в контейнере. Например, если один элемент имеет значение <code>flex-shrink</code> 1, а другое имеет значение <code>flex-shrink</code> 3, то значение со значением 3 будет уменьшаться в три раза больше, чем другое. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство CSS <code>flex-shrink</code> в <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значение 1 и <code>#box-2</code> значение 2. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-1</code> должен иметь свойство <code>flex-shrink</code> установленное в значение 1.'
|
||||
testString: 'assert($("#box-1").css("flex-shrink") == "1", "The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.");'
|
||||
- text: 'Элемент <code>#box-2</code> должен иметь свойство <code>flex-shrink</code> равное 2.'
|
||||
testString: 'assert($("#box-2").css("flex-shrink") == "2", "The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,96 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afa
|
||||
title: Use the flex-wrap Property to Wrap a Row or Column
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте свойство flex-wrap для обертывания строки или столбца
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS flexbox имеет функцию разделения гибкого элемента на несколько строк (или столбцов). По умолчанию контейнер flex будет соответствовать всем гибким элементам вместе. Например, строка будет находиться в одной строке. Однако, используя свойство <code>flex-wrap</code> , он сообщает CSS об обертке элементов. Это означает, что дополнительные элементы перемещаются в новую строку или столбец. Точка прерывания, в которой происходит обертка, зависит от размера элементов и размера контейнера. CSS также имеет опции для направления переноса: <ul><li> <code>nowrap</code> : это значение по умолчанию и не переносит элементы. </li><li> <code>wrap</code> : обертывает элементы слева направо, если они находятся в строке или сверху вниз, если они находятся в столбце. </li><li> <code>wrap-reverse</code> : обертывает элементы снизу вверх, если они находятся в строке или справа налево, если они находятся в столбце. </li></ul></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> В текущем макете слишком много ящиков для одной строки. Добавьте свойство <code>flex-wrap</code> в элемент <code>#box-container</code> и придайте ему значение wrap. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-container</code> должен иметь свойство <code>flex-wrap</code> установленное на значение wrap.'
|
||||
testString: 'assert($("#box-container").css("flex-wrap") == "wrap", "The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-3 {
|
||||
background-color: violet;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-4 {
|
||||
background-color: yellow;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-5 {
|
||||
background-color: green;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-6 {
|
||||
background-color: black;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
<div id="box-3"></div>
|
||||
<div id="box-4"></div>
|
||||
<div id="box-5"></div>
|
||||
<div id="box-6"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,137 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af7
|
||||
title: Use the justify-content Property in the Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте свойство justify-content в Tweet Embed
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последняя задача показала пример свойства <code>justify-content</code> . Для вставки tweet это свойство может применяться для выравнивания элементов в элементе <code>.profile-name</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство <code>justify-content</code> CSS в элемент заголовка <code>.profile-name</code> и установите значение для любого из параметров из последнего вызова. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>.profile-name</code> должен иметь свойство <code>justify-content</code> установленное для любого из этих значений: center, flex-start, flex-end, space-between или space-around.'
|
||||
testString: 'assert(code.match(/header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around)\s*;/g), "The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header, footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512aff
|
||||
title: Use the order Property to Rearrange Items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте свойство Order для переупорядочения элементов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Свойство <code>order</code> используется для указания CSS порядка отображения элементов гибкости в контейнере flex. По умолчанию элементы будут отображаться в том же порядке, что и исходный HTML-код. Свойство принимает числа как значения, а отрицательные числа могут использоваться. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте <code>order</code> свойств CSS в <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значение 2 и дайте <code>#box-2</code> значение 1. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-1</code> должен иметь свойство <code>order</code> равное 2.'
|
||||
testString: 'assert($("#box-1").css("order") == "2", "The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.");'
|
||||
- text: 'Элемент <code>#box-2</code> должен иметь свойство <code>order</code> равное 1.'
|
||||
testString: 'assert($("#box-2").css("order") == "1", "The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user