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,60 @@
|
||||
---
|
||||
id: 587d78b0367417b2b2512b08
|
||||
title: Create a Media Query
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Создание медиа-запроса
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Медиа-запросы - это новый метод, введенный в CSS3, который изменяет представление контента на основе разных размеров видовых экранов. Окно просмотра - видимая область пользователя на веб-странице и отличается в зависимости от устройства, используемого для доступа к сайту. Медиа-запросы состоят из типа носителя, и если этот тип носителя соответствует типу устройства, на котором отображается документ, применяются стили. Вы можете иметь столько селекторов и стилей внутри вашего медиа-запроса, сколько хотите. Ниже приведен пример медиа-запроса, который возвращает содержимое, когда ширина устройства меньше или равна 100px: <code>@media (max-width: 100px) { /* CSS Rules */ }</code> и следующий медиа-запрос возвращает содержимое, когда Высота устройства больше или равна 350px: <code>@media (min-height: 350px) { /* CSS Rules */ }</code> Помните, что CSS внутри медиа-запроса применяется только в том случае, если тип материала соответствует типу используемого устройства. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте медиа-запрос, чтобы тэг <code>p</code> имел <code>font-size</code> 10px, когда высота устройства меньше или равна 800px. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Ваш элемент <code>p</code> должен иметь <code>font-size</code> 10px, когда <code>height</code> устройства меньше или равна 800px.'
|
||||
testString: 'assert($("p").css("font-size") == "10px", "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.");'
|
||||
- text: <code>@media</code> запрос <code>@media</code> для устройств с <code>height</code> меньшей или равной 800 пикселей.
|
||||
testString: 'assert(code.match(/@media\s*?\(\s*?max-height\s*?:\s*?800px\s*?\)/g), "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Add media query below */
|
||||
|
||||
</style>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b09
|
||||
title: Make an Image Responsive
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Сделать изображение отзывчивым
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Создание изображений с учетом CSS очень просто. Вместо применения абсолютной ширины к элементу: <code>img { width: 720px; }</code> Вы можете использовать: <blockquote> img { <br> max-width: 100%; <br> display: block; <br> высота: авто; <br> } </blockquote> Свойство <code>max-width</code> 100% масштабирует изображение в соответствии с шириной его контейнера, но изображение не будет растягиваться шире его первоначальной ширины. Установка свойства <code>display</code> для блокировки изменяет изображение с встроенного элемента (по умолчанию) на элемент блока в его собственной строке. Свойство <code>height</code> автоматически сохраняет исходное соотношение сторон изображения. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте правила стиля для тега <code>img</code> чтобы он реагировал на размер его контейнера. Он должен отображаться как элемент уровня блока, он должен соответствовать полной ширине его контейнера без растягивания, и он должен сохранять исходное соотношение сторон. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш тег <code>img</code> должен иметь <code>max-width</code> равную 100%.
|
||||
testString: 'assert(code.match(/max-width:\s*?100%;/g), "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.");'
|
||||
- text: Ваш тег <code>img</code> должен иметь установленный для <code>display</code> .
|
||||
testString: 'assert($("img").css("display") == "block", "Your <code>img</code> tag should have a <code>display</code> set to block.");'
|
||||
- text: Ваш тег <code>img</code> должен иметь <code>height</code> установленную в auto.
|
||||
testString: 'assert(code.match(/height:\s*?auto;/g), "Your <code>img</code> tag should have a <code>height</code> set to auto.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0c
|
||||
title: Make Typography Responsive
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Сделать отзывчивость типографии
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вместо использования текста <code>em</code> или <code>px</code> для размера вы можете использовать единицы просмотра для гибкой типографии. Единицы просмотра, такие как проценты, являются относительными единицами, но они основаны на разных позициях. Единицы Viewport относятся к размеру видового экрана (ширина или высота) устройства, а проценты относятся к размеру элемента родительского контейнера. Четыре различных видовых экрана: <ul><li> <code>vw: 10vw</code> будет составлять 10% от ширины <code>vw: 10vw</code> просмотра. </li><li> <code>vh: 3vh</code> будет 3% высоты просмотра. </li><li> <code>vmin: 70vmin</code> будет на 70% меньше размера <code>vmin: 70vmin</code> просмотра (высота и ширина). </li><li> <code>vmax: 100vmax</code> будет на 100% больше размера <code>vmax: 100vmax</code> просмотра (высота и ширина). </li></ul></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Установите <code>width</code> тега <code>h2</code> на 80% ширины окна просмотра и <code>width</code> абзаца как на 75% меньшего размера окна просмотра. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш тег <code>h2</code> должен иметь <code>width</code> 80vw.
|
||||
testString: 'assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g), "Your <code>h2</code> tag should have a <code>width</code> of 80vw.");'
|
||||
- text: Ваш тег <code>p</code> должен иметь <code>width</code> 75vmin.
|
||||
testString: 'assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g), "Your <code>p</code> tag should have a <code>width</code> of 75vmin.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<h2>Importantus Ipsum</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
id: 587d78b1367417b2b2512b0a
|
||||
title: Use a Retina Image for Higher Resolution Displays
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте изображение Retina для дисплеев с более высоким разрешением
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Самый простой способ сделать ваши изображения «сетчаткой» (и оптимизировать их для дисплеев сетчатки) - это определить их значения <code>width</code> и <code>height</code> как только половину исходного файла. Вот пример изображения, использующего только половину исходной высоты и ширины: <blockquote> <Стиль> <br> img {height: 250px; ширина: 250 пикселей; } <br> </ Стиль> <br> <img src = "coolPic500x500" alt = "Самая прекрасная картина"> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Установите <code>width</code> и <code>height</code> тега <code>img</code> на половину их исходных значений. В этом случае как исходная <code>height</code> и исходная <code>width</code> составляют 200 пикселей. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш тег <code>img</code> должен иметь <code>width</code> 100 пикселей.
|
||||
testString: 'assert($("img").css("width") == "100px", "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.");'
|
||||
- text: Ваш тег <code>img</code> должен иметь <code>height</code> 100 пикселей.
|
||||
testString: 'assert($("img").css("height") == "100px", "Your <code>img</code> tag should have a <code>height</code> of 100 pixels.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user