chore(i18n,curriculum): processed translations - new ukrainian (#44447)
This commit is contained in:
camperbot
GitHub
@@ -0,0 +1,115 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08823
|
||||
title: Додавання негативного зовнішнього відступу до елемента
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpyGs3'
|
||||
forumTopicId: 16166
|
||||
dashedName: add-a-negative-margin-to-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Властивість `margin` елемента контролює відстань між межами елемента `border` та елементами, що його оточують.
|
||||
|
||||
Якщо ви встановите негативне значення для параметра `margin`, то об'єкт збільшиться в розмірі.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Спробуйте встановити властивість `margin` негативного значення, як це було зроблено для червоного прямокутника.
|
||||
|
||||
Змініть значення `margin` синього прямокутника на `-15px`, так щоб він повністю заповнив по горизонталі жовтий прямокутник, що його оточує.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш клас `blue-box` повинен надати елементам `-15px` для `margin`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '-15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,190 @@
|
||||
---
|
||||
id: bad87fee1348bd9bedf08813
|
||||
title: Додавання рамки довкола ваших елементів
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvnHZ'
|
||||
forumTopicId: 16630
|
||||
dashedName: add-borders-around-your-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Рамки в CSS мають такі значення `style`, `color` та `width`.
|
||||
|
||||
Наприклад, якщо ми хочемо створити червону рамку товщиною 5 пікселів довкола HTML елемента, ми можемо скористатися цим класом:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.thin-red-border {
|
||||
border-color: red;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть клас під назвою `thick-green-border`. Цей клас повинен додати суцільну зелену рамку шириною 10 пікселів довкола HTML елемента. Застосуйте цей клас до фотографії кота.
|
||||
|
||||
Пам'ятайте, що ви можете застосувати декілька класів до елемента, використовуючи його атрибут `class`, розділивши назви класів пробілами. Наприклад:
|
||||
|
||||
```html
|
||||
<img class="class1 class2">
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `img` повинен мати клас `smaller-image`.
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
Елемент `img` повинен мати клас `thick-green-border`.
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
Ваше зображення повинне мати рамку шириною `10px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').hasClass('thick-green-border') &&
|
||||
parseInt($('img').css('border-top-width'), 10) >= 8 &&
|
||||
parseInt($('img').css('border-top-width'), 10) <= 12
|
||||
);
|
||||
```
|
||||
|
||||
Ваше зображення повинне мати стиль рамки `solid`.
|
||||
|
||||
```js
|
||||
assert($('img').css('border-right-style') === 'solid');
|
||||
```
|
||||
|
||||
Рамка довкола елемента `img` повинна бути зеленою.
|
||||
|
||||
```js
|
||||
assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-width: 10px;
|
||||
border-color: green;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
id: bad87fee1248bd9aedf08824
|
||||
title: Додати різні межі для кожної сторони елементу
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4RWh4'
|
||||
forumTopicId: 16633
|
||||
dashedName: add-different-margins-to-each-side-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Інколи вам потрібно буде налаштувати елемент так, щоб його зовнішні відступи `margin` були різними для кожної з його сторін.
|
||||
|
||||
CSS дозволяє контролювати параметри поля `margin` для всіх чотирьох сторін елемента окремо, використовуючи властивості `margin-top`, `margin-right`, `margin-bottom`, та `margin-left`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Задайте зовнішньому відступу `margin` синього прямокутника товщину `40px` для верхньої та нижньої сторін елемента і товщину `20px` для нижньої і правої сторін.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `blue-box` повинен задати товщину `40px` для `margin` верхньої сторони елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
Клас `blue-box` повинен задати товщину `20px` для `margin`правої сторони елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
Клас `blue-box` повинен задати товщину `20px` для `margin` нижньої сторони елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
Клас `blue-box` повинен задати товщину `40px` для `margin` лівої сторони елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08824
|
||||
title: Додавання різних внутрішніх відступів до кожної сторони елемента
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mwUw'
|
||||
forumTopicId: 16634
|
||||
dashedName: add-different-padding-to-each-side-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Інколи вам потрібно буде налаштувати елемент так, щоб його внутрішні відступи `padding` були різними для кожної з його сторін.
|
||||
|
||||
CSS дозволяє контролювати параметри відступу `padding` для всіх чотирьох сторін елемента окремо, використовуючи властивості `padding-top`, `padding-right`, `padding-bottom`, та `padding-left`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Задайте внутрішньому відступу `padding` синього прямокутника товщину `40px` для верхньої та нижньої сторін елемента і товщину `20px` для нижньої і правої сторін.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `blue-box` повинен задати товщину `40px` для `padding` верхньої сторони елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
Клас `blue-box` повинен задати товщину `20px` для `padding` правої сторони елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
Клас `blue-box` повинен задати товщину `20px` для `padding` нижньої сторони елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
Клас `blue-box` повинен задати товщину `40px` для `padding` лівої сторони елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,164 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08814
|
||||
title: Додавання заокруглених кутів за допомогою властивості border-radius
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cbZm2hg'
|
||||
forumTopicId: 16649
|
||||
dashedName: add-rounded-corners-with-border-radius
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Зараз фото кішки має гострі кути. Ми можемо округлити ці кути за допомогою властивості CSS під назвою `border-radius`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Ви можете вказати `border-radius` в пікселях. Задайте фотографії кішки `border-radius` на `10px`.
|
||||
|
||||
**Примітка:** це завдання допускає декілька можливих розв'язань. Наприклад, ви можете додати `border-radius` до класу `.thick-green-border`, або класу `.smaller-image`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент зображення повинен мати клас `thick-green-border`.
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
Зображення повинне мати рамку з радіусом `10px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').css('border-top-left-radius') === '10px' &&
|
||||
$('img').css('border-top-right-radius') === '10px' &&
|
||||
$('img').css('border-bottom-left-radius') === '10px' &&
|
||||
$('img').css('border-bottom-right-radius') === '10px'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08822
|
||||
title: Налаштування зовнішнього відступу елемента
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJarHW'
|
||||
forumTopicId: 16654
|
||||
dashedName: adjust-the-margin-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Властивість елемента `margin` контролює відстань між межами елемента `border` й елементами, що його оточують.
|
||||
|
||||
Тут ми бачимо, що синій та червоний прямокутники вкладені у жовтий прямокутник. Зверніть увагу, що в червоного прямокутника поля `margin` більші, ніж у синього, тому він здається меншим.
|
||||
|
||||
Коли ви збільшуєте поле `margin` синього прямокутника, це збільшує відстань між його межею та елементами, що його оточують.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Змініть `margin` синього прямокутника так, щоб він співпадав з полем червоного прямокутника.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `blue-box` повинен задати елементам `margin` товщиною `20px`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08825
|
||||
title: Налаштування внутрішнього відступу елемента
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cED8ZC2'
|
||||
forumTopicId: 301083
|
||||
dashedName: adjust-the-padding-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Тепер давайте ненадовго відкладемо Cat Photo App і дізнаємося більше про стилізацію HTML.
|
||||
|
||||
Ви вже, напевно, помітили, що всі елементи HTML — це, в основному, маленькі прямокутники.
|
||||
|
||||
Є три важливі властивості, що керують простором навколо кожного елемента HTML: `padding`, `border`, і `margin`.
|
||||
|
||||
`padding` елемента керує простором між вмістом елемента і його `border`.
|
||||
|
||||
Тут ми бачимо, що синій та червоний прямокутники вкладені в жовтий прямокутник. Зверніть увагу, що червоний прямокутник має більший `padding`, ніж у синього.
|
||||
|
||||
Коли ви збільшуєте `padding` синього прямокутника, це збільшує відстань (`padding`) між текстом та рамкою довкола нього.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Змініть `padding` синього прямокутника так, щоб він співпадав з відступом у червоному прямокутнику.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `blue-box` повинен задати елементам `padding` товщиною `20px`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,272 @@
|
||||
---
|
||||
id: 5a9d7286424fe3d0e10cad13
|
||||
title: Прикріплення резервного значення до змінної CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDNfp'
|
||||
forumTopicId: 301084
|
||||
dashedName: attach-a-fallback-value-to-a-css-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
При використанні змінної як значення властивості CSS ви можете прикріпити резервне значення, до якого повернеться браузер, якщо дана змінна виявиться недійсною.
|
||||
|
||||
**Примітка:** цей резервний варіант не використовується для підвищення сумісності браузерів і не буде працювати в IE браузерах. Швидше за все, він використовується для того, щоб у браузера був колір для відображення, якщо він не зможе знайти вашу змінну.
|
||||
|
||||
Ось як це зробити:
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin, black);
|
||||
```
|
||||
|
||||
Це встановить фон в `black`, навіть якщо ваша змінна не була визначена. Зверніть увагу, що це може бути корисно для налагодження.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Схоже, виникла проблема зі змінними, що передаються класам `.penguin-top` та `.penguin-bottom`. Замість того, щоб виправляти цю опечатку, додайте резервне значення `black` до властивості `background` класів `.penguin-top` та `.penguin-bottom`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Резервне значення `black` потрібно використати у властивості `background` класу `penguin-top`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Резервне значення `black` потрібно використати у властивості `background` класу `penguin-bottom`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
--penguin-skin: black;
|
||||
--penguin-belly: gray;
|
||||
--penguin-beak: yellow;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: var(--pengiun-skin);
|
||||
/* Change code above this line */
|
||||
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: var(--pengiun-skin);
|
||||
/* Change code above this line */
|
||||
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin-top {
|
||||
background: var(--pengiun-skin, black);
|
||||
}
|
||||
.penguin-bottom {
|
||||
background: var(--pengiun-skin, black);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,254 @@
|
||||
---
|
||||
id: 5a9d72a1424fe3d0e10cad15
|
||||
title: Зміна змінної величини для певної області
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRwbuW'
|
||||
forumTopicId: 301085
|
||||
dashedName: change-a-variable-for-a-specific-area
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Коли ви створюєте ваші змінні в `:root`, вони установлять значення змінної величини для цілої сторінки.
|
||||
|
||||
Ви можете перезаписати ці змінні вставивши їх знову у спеціальний елемент.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Змініть значення `--penguin-belly` на `white` в класі `penguin`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `penguin` повинен перерозподілити змінну `--penguin-belly` і надати їй значення `white`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Клас `penguin` не повинен містити властивість `background-color`
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g)
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--penguin-skin: gray;
|
||||
--penguin-belly: pink;
|
||||
--penguin-beak: orange;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--penguin-belly, #c6faf1);
|
||||
}
|
||||
|
||||
.penguin {
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {--penguin-belly: white;}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08803
|
||||
title: Зміна кольору тексту
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkVmSm'
|
||||
forumTopicId: 16775
|
||||
dashedName: change-the-color-of-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Тепер змінимо колір частини нашого тексту.
|
||||
|
||||
Це можна зробити, змінивши `style` вашого елемента `h2`.
|
||||
|
||||
Властивість, яка відповідає за колір тексту елемента є властивістю стилю `color`.
|
||||
|
||||
Ось як ви могли б встановити текст вашого `h2` елемента синій:
|
||||
|
||||
```html
|
||||
<h2 style="color: blue;">CatPhotoApp</h2>
|
||||
```
|
||||
|
||||
Зауважте, що добре було б закінчувати вбудовані оголошення `style` символом `;`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Змініть стиль вашого елемента `h2`, щоб його колір був червоним.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `h2` повинен мати атрибут `style`.
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style'));
|
||||
```
|
||||
|
||||
Ваш елемент `h2` повинен мати встановленим `red` колір.
|
||||
|
||||
```js
|
||||
assert($('h2')[0].style.color === 'red');
|
||||
```
|
||||
|
||||
Атрибут вашого `style` повинен закінчуватись символом `;`.
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08806
|
||||
title: Зміна розміру шрифту для елемента
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bvDc8'
|
||||
forumTopicId: 16777
|
||||
dashedName: change-the-font-size-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Розмір шрифту контролюється властивістю CSS `font-size`, наприклад:
|
||||
|
||||
```css
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Всередині того ж тегу `<style>`, який містить клас `red-text`, створити запис для елементів `p` і встановити `font-size` 16 пікселів (`16px`).
|
||||
|
||||
# --hints--
|
||||
|
||||
Між тегами `style` встановіть елементам `p``font-size` рівним `16px`. Масштаб браузера та тексту повинні бути 100%.
|
||||
|
||||
```js
|
||||
assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,241 @@
|
||||
---
|
||||
id: 5a9d726c424fe3d0e10cad11
|
||||
title: Використання змінної користувача CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQd27Hr'
|
||||
forumTopicId: 301086
|
||||
dashedName: create-a-custom-css-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Щоб створити змінну CSS, вам просто потрібно назвати її з двома дефісами перед нею і надати їй ось таке значення:
|
||||
|
||||
```css
|
||||
--penguin-skin: gray;
|
||||
```
|
||||
|
||||
Це створить змінну з назвою `--penguin-skin` і надасть їй значення `gray`. Тепер ви можете використовувати цю змінну в іншому місці вашого CSS, щоб змінювати значення інших елементів на сірий.
|
||||
|
||||
# --instructions--
|
||||
|
||||
У класі `penguin` створіть назву змінної `--penguin-skin` і надайте їй значення `gray`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `penguin` повинен створити змінну `--penguin-skin` і присвоїти їй значення `gray`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: black;
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: black;
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: black;
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: white;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: orange;
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: orange;
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.penguin {--penguin-skin: gray;}</style>
|
||||
```
|
||||
@@ -0,0 +1,176 @@
|
||||
---
|
||||
id: bad87fed1348bd9aede07836
|
||||
title: Встановлення фонового кольору елементу div
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRKMCk'
|
||||
forumTopicId: 18190
|
||||
dashedName: give-a-background-color-to-a-div-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете встановити фоновий колір елемента за допомогою `background-color`.
|
||||
|
||||
Наприклад, якщо ви хочете, щоб фоновий колір елемента був `green`, то вам слід вставити це на `style` свого елемента:
|
||||
|
||||
```css
|
||||
.green-background {
|
||||
background-color: green;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть клас з назвою `silver-background` з `silver` `background-color`. Призначте цей клас вашому `div` елементу.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `div` повинен мати клас `silver-background`.
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('silver-background'));
|
||||
```
|
||||
|
||||
Елемент `div` повинен мати сірий фоновий колір.
|
||||
|
||||
```js
|
||||
assert($('div').css('background-color') === 'rgb(192, 192, 192)');
|
||||
```
|
||||
|
||||
Клас з назвою `silver-background` має бути визначений в елементі `style`, а значення `silver` має бути призначено властивості `background-color`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,175 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08807
|
||||
title: Імпорт шрифтів з Google Font
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MRsJ'
|
||||
forumTopicId: 18200
|
||||
dashedName: import-a-google-font
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
На доповнення до загальних шрифтів, які є в більшості операційних систем, ми також можемо встановити нестандартні, користувацькі веб-шрифти для використання на нашому сайті. У Інтернеті існує багато джерел веб-шрифтів. Але для прикладу ми використаємо бібліотеку Google Fonts.
|
||||
|
||||
[Google Fonts](https://fonts.google.com/) є безкоштовною бібліотекою веб-шрифтів, які можна використати у CSS, посилаючись на URL-адресу шрифту.
|
||||
|
||||
Що ж, давайте почнемо імпортувати і застосувати шрифт Google (зауважте, що якщо Google заблокований у вашій країні, то вам потрібно пропустити це завдання).
|
||||
|
||||
Щоб імпортувати шрифт Google, можна скопіювати URL-адресу шрифту з бібліотеки Google Fonts, а потім вставити її у свій HTML. У цьому завданні ми імпортуємо шрифт `Lobster`. Для цього скопіюйте наступний фрагмент коду і вставте його у верхній частині вашого редактора коду (перед відкриттям елемента `style`):
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
```
|
||||
|
||||
Тепер ви можете використовувати шрифт `Lobster` у вашому CSS, скориставшись `Lobster` як FAMILY_NAME як і у прикладі нижче:
|
||||
|
||||
```css
|
||||
font-family: FAMILY_NAME, GENERIC_NAME;
|
||||
```
|
||||
|
||||
GENERIC_NAME не є обов'язковим, і є резервним шрифтом, якщо інший вказаний шрифт недоступний. Це розглядається в наступному завданні.
|
||||
|
||||
Назви шрифтів чутливі до регістру і повинні бути поміщені в лапки, якщо у назві є пробіл. Наприклад, вам потрібні лапки для використання шрифту `"Open Sans"`, але для шрифту `Lobster` — ні.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Імпортуйте шрифт `Lobster` на вашу веб-сторінку. Потім скористайтеся селектором елементів для встановлення `Lobster` у якості `font-family` для вашого елемента `h2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Вам слід імпортувати шрифт `Lobster`.
|
||||
|
||||
```js
|
||||
assert($('link[href*="googleapis" i]').length);
|
||||
```
|
||||
|
||||
Елемент `h2` має використовувати шрифт `Lobster`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h2')
|
||||
.css('font-family')
|
||||
.match(/lobster/i)
|
||||
);
|
||||
```
|
||||
|
||||
Ви повинні використовувати селектор елементу `h2`, щоб змінити шрифт.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Елемент `p` все ще повинен використовувати шрифт `monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('p')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 5b7d72c338cd7e35b63f3e14
|
||||
title: Покращення сумісності із застосуванням резервних значень для браузера
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301087
|
||||
dashedName: improve-compatibility-with-browser-fallbacks
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Під час роботи з CSS ви, ймовірно, в якийсь момент стикнетеся з проблемами сумісності браузерів. Ось чому важливо забезпечувати резервні значення для браузера, щоб уникнути можливих проблем.
|
||||
|
||||
Коли браузер аналізує CSS веб-сторінки, він ігнорує всі властивості, які він не розпізнає чи не підтримує. Наприклад, якщо ви використовуєте змінну CSS, щоб призначити колір фону на сайті, Internet Explorer проігнорує цей колір, адже він не підтримує змінні CSS. В такому випадку, браузер буде використовувати будь-яке значення, яке він має для цієї властивості. Якщо він не може знайти іншого значення, встановленого для цієї властивості, то повернеться до стандартного значення, що часто є неідеальним.
|
||||
|
||||
Це означає, що, якщо ви хочете забезпечити "резерв" браузера, то достатньо вказати інше, більш широко підтримуване значення безпосередньо перед об'явою. Таким чином, старому браузерові буде на що спертися, а новіший просто інтерпретує ту об'яву, що йде далі в каскаді.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Схоже, що змінна використовується, щоб встановити колір фону в класі `.red-box` class. Давайте покращимо сумісність браузерів, додавши ще одну об'яву `background`, прямо перед вже існуючою і встановивши їй значення `red`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Правило `.red-box` повинне включати резервне значення `background` з параметром `red`, безпосередньо перед існуючою об'явою `background`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code
|
||||
.replace(/\s/g, '')
|
||||
.match(
|
||||
/\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--red-color: red;
|
||||
}
|
||||
.red-box {
|
||||
|
||||
background: var(--red-color);
|
||||
height: 200px;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
<div class="red-box"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--red-color: red;
|
||||
}
|
||||
.red-box {
|
||||
background: red;
|
||||
background: var(--red-color);
|
||||
height: 200px;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
<div class="red-box"></div>
|
||||
```
|
||||
@@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 5a9d7295424fe3d0e10cad14
|
||||
title: Успадкування змінних CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLZZhZ'
|
||||
forumTopicId: 301088
|
||||
dashedName: inherit-css-variables
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Коли ви створюєте змінну, то можете використовувати її всередині селектора, в якому її створили. Вона також доступна в будь-якому з нащадків цього селектора. Це відбувається, бо змінні CSS успадковуються, так само як і звичайні властивості.
|
||||
|
||||
Щоб скористатися успадкуванням, змінні CSS часто визначають в елементі <dfn>:root</dfn>.
|
||||
|
||||
`:root` це селектор псевдокласу <dfn>pseudo-class</dfn>, що відповідає кореневому елементу документа, зазвичай елементу `html`. Змінні, створені в `:root` будуть доступні глобально і до них можна буде звернутися з будь-якого іншого селектора в таблиці стилів.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Визначте змінну під назвою `--penguin-belly` в селекторі `:root` і задайте їй значення `pink`. Потім ви побачите, що ця змінна успадковується і всі дочірні елементи, що використовують її, отримають рожевий фон.
|
||||
|
||||
# --hints--
|
||||
|
||||
Змінну `--penguin-belly` потрібно об'явити в псевдокласі `:root` і присвоїти їй значення `pink`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--penguin-belly, #c6faf1);
|
||||
}
|
||||
|
||||
.penguin {
|
||||
--penguin-skin: gray;
|
||||
--penguin-beak: orange;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>:root {--penguin-belly: pink;}</style>
|
||||
```
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08746
|
||||
title: Успадкування стилів від елемента body
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bmdtR'
|
||||
forumTopicId: 18204
|
||||
dashedName: inherit-styles-from-the-body-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Тепер ми довели, що кожна HTML сторінка має елемент `body` і що він також може бути `body` оформлений за допомогою CSS.
|
||||
|
||||
Пам'ятайте, що ви можете оформляти елемент `body` як і будь-який інший елемент HTML і всі наступні елементи успадкують стилі `body`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Спершу створіть елемент `h1` з текстом `Hello World`
|
||||
|
||||
Тепер, давайте задамо всім елементам на сторінці колір `green`, додавши `color: green;` до об'яви стилю елемента `body`.
|
||||
|
||||
Нарешті, задайте елементу `body` шрифт `monospace`, додавши `font-family: monospace;` до об'яви стилю елемента `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити елемент `h1`.
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
Елемент `h1` повинен мати текст `Hello World`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h1').length > 0 &&
|
||||
$('h1')
|
||||
.text()
|
||||
.match(/hello world/i)
|
||||
);
|
||||
```
|
||||
|
||||
Елемент `h1` повинен мати кінцевий тег.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h1>/g) &&
|
||||
code.match(/<h1/g) &&
|
||||
code.match(/<\/h1>/g).length === code.match(/<h1/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Елемент `body` повинен мати властивість `color` встановленою з `green`.
|
||||
|
||||
```js
|
||||
assert($('body').css('color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
Елемент `body` повинен мати властивість `font-family` встановленою з `monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('body')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
Елемент `h1` повинен успадкувати шрифт `monospace` від елемента `body`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h1').length > 0 &&
|
||||
$('h1')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
Елемент `h1` повинен успадкувати зелений колір від елемента `body`.
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
<h1>Hello World!</h1>
|
||||
```
|
||||
@@ -0,0 +1,159 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08815
|
||||
title: Створіть круглі зображення з радіусом, що межує
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvrcB'
|
||||
forumTopicId: 18229
|
||||
dashedName: make-circular-images-with-a-border-radius
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
В додаток до пікселів, ви також можете вказати `border-radius`, використовуючи відсоткові відношення.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Задайте світлину з котом `border-radius` на `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваше зображення має радіус, що межує з `50%`, роблячи його при цьому ідеально круглим.
|
||||
|
||||
```js
|
||||
assert(parseInt($('img').css('border-top-left-radius')) > 48);
|
||||
```
|
||||
|
||||
Значення `border-radius` повинне використовувати відсоткове відношення значення `50%`.
|
||||
|
||||
```js
|
||||
assert(code.match(/50%/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,114 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf07756
|
||||
title: Заміна всіх інших стилів за допомогою Important
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cm24rcp'
|
||||
forumTopicId: 18249
|
||||
dashedName: override-all-other-styles-by-using-important
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ура! Ми щойно довели, що вбудовані стилі заміняють усі об'яви в елементі `style`.
|
||||
|
||||
Але зачекайте. Є ще один, останній спосіб замінити CSS. Це - найпотужніший зі всіх методів. Але перш ніж ми це зробимо, давайте поговоримо про те, чому вам коли-небудь треба буде замінити CSS.
|
||||
|
||||
У багатьох ситуаціях ви будете використовувати бібліотеки CSS. Вони можуть випадково замінити ваш власний CSS. Тому, коли вам потрібно бути цілком упевненим, що елемент повинен мати певний CSS, ви можете використати `!important`.
|
||||
|
||||
Давайте повернемося до нашої об'яви класу `pink-text`. Пам'ятайте, що клас `pink-text` був замінений наступними об'явами класів, об'явами id та вбудованими стилями.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Давайте додамо ключове слово `!important` в об'яву кольору елемента pink-text, аби впевнитися на 100%, що елемент `h1` буде рожевим.
|
||||
|
||||
Ось приклад того, як це зробити:
|
||||
|
||||
```css
|
||||
color: red !important;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `h1` повинен мати клас `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
Елемент `h1` повинен мати клас `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Елемент `h1` повинен мати `id` з `orange-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
Елемент `h1` повинен мати вбудований стиль `color: white`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
||||
```
|
||||
|
||||
Об'ява класу `pink-text` повинна мати ключове слово `!important`, щоб замінити усі інші об'яви.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g)
|
||||
);
|
||||
```
|
||||
|
||||
Елемент `h1` має бути рожевим.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink !important;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```
|
||||
@@ -0,0 +1,123 @@
|
||||
---
|
||||
id: bad87fee1348bd8aedf06756
|
||||
title: Заміна об'яв класів за стилем атрибутів ID
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkpDhB'
|
||||
forumTopicId: 18251
|
||||
dashedName: override-class-declarations-by-styling-id-attributes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ми щойно довели, що браузери читають CSS зверху вниз в порядку їх об'яв. Це означає, що, у випадку конфлікту, браузер використає ту об'яву CSS, що вказана останньою. Зверніть увагу, що навіть якби ми поставили `blue-text` перед `pink-text` у класах елемента `h1`, він все одно б орієнтувався на порядок об'яв, а не на порядок їх використання!
|
||||
|
||||
Але ми ще не закінчили. Є й інші способи замінити CSS. Пригадуєте атрибути id?
|
||||
|
||||
Давайте замінимо класи `pink-text` та `blue-text` і зробимо елемент `h1` оранжевим, надавши елементу the `h1` id, і згодом стилізуємо цей id.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Задайте елементу `h1` атрибут `id` `orange-text`. Пам'ятайте, що стилі id виглядають так:
|
||||
|
||||
```html
|
||||
<h1 id="orange-text">
|
||||
```
|
||||
|
||||
Залишіть класи `blue-text` та `pink-text` на елементі `h1`.
|
||||
|
||||
Створіть об'яву CSS для id `orange-text` в елементі `style`. Ось приклад того, як це виглядає:
|
||||
|
||||
```css
|
||||
#brown-text {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
**Примітка:** Не важливо чи ви об'явите цей CSS вище або нижче класу `pink-text`, оскільки атрибут `id` завжди матиме пріоритет.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `h1` повинен мати клас `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
Елемент `h1` повинен мати клас `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Елемент `h1` повинен мати id `orange-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
Має бути лише один елемент `h1`.
|
||||
|
||||
```js
|
||||
assert($('h1').length === 1);
|
||||
```
|
||||
|
||||
Id `orange-text` повинен мати об'яву CSS.
|
||||
|
||||
```js
|
||||
assert(code.match(/#orange-text\s*{/gi));
|
||||
```
|
||||
|
||||
Елемент `h1` не повинен мати жодних атрибутів `style`.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1.*style.*>/gi));
|
||||
```
|
||||
|
||||
Елемент `h1` повинен бути оранжевим.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf06756
|
||||
title: Заміна об'яв класів за допомогою вбудованих стилів
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDRha'
|
||||
forumTopicId: 18252
|
||||
dashedName: override-class-declarations-with-inline-styles
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Отож, ми довели, що об'яви id заміняють об'яви класів, незалежно від того, де вони об'явлені у вашому елементі CSS `style`.
|
||||
|
||||
Є й інші способи замінити CSS. Пригадуєте вбудовані стилі?
|
||||
|
||||
# --instructions--
|
||||
|
||||
Скористайтеся вбудованим стилем, щоб спробувати зробити елемент `h1` білим. Пам'ятайте, що вбудовані стилі виглядають отак:
|
||||
|
||||
```html
|
||||
<h1 style="color: green;">
|
||||
```
|
||||
|
||||
Залишіть класи `blue-text` та `pink-text` на елементі `h1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `h1` повинен мати клас `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
Елемент `h1` повинен мати клас `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Елемент `h1` повинен мати id `orange-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
Елемент `h1` повинен мати вбудований стиль.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1[style]'));
|
||||
```
|
||||
|
||||
Елемент `h1` повинен бути білим.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf04756
|
||||
title: Заміна стилів в послідовних CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDQug'
|
||||
forumTopicId: 18253
|
||||
dashedName: override-styles-in-subsequent-css
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Клас `pink-text` замінив об'яву елемента CSS `body`!
|
||||
|
||||
Ми щойно довели, що наші класи замінятимуть CSS елемента `body`. Тому, наступне логічне питання: що можна зробити, аби замінити клас `pink-text`?
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть додатковий клас CSS під назвою `blue-text`, який надасть елементу синього кольору. Упевніться, що він знаходиться нижче об'яви класу `pink-text`.
|
||||
|
||||
Застосуйте клас `blue-text` до елемента `h1` на додачу до класу `pink-text` і погляньмо хто ж з них переможе.
|
||||
|
||||
Застосувати декілька атрибутів класу до елемента HTML можна за допомогою пробілу між ними таким чином:
|
||||
|
||||
```html
|
||||
class="class1 class2"
|
||||
```
|
||||
|
||||
**Примітка:** Порядок, в якому перераховані класи в HTML елементі не має значення.
|
||||
|
||||
Натомість, порядок об'яв `class` у розділі `<style>` має велике значення. Друга об'ява завжди буде мати пріоритет над першою. Оскільки `.blue-text` об'явлений другим, він заміняє атрибути `.pink-text`
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `h1` повинен мати клас `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
Елемент `h1` повинен мати клас `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Обидва класи `blue-text` та `pink-text` повинні належати одному елементу `h1`.
|
||||
|
||||
```js
|
||||
assert($('.pink-text').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Елемент `h1` повинен бути синім.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08756
|
||||
title: Пріоритет використання стилів
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ8wnHv'
|
||||
forumTopicId: 18258
|
||||
dashedName: prioritize-one-style-over-another
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Іноді елементи HTML отримуватимуть декілька стилів, що суперечать один одному.
|
||||
|
||||
Наприклад, ваш елемент `h1` не може бути одночасно і зеленим, і рожевим.
|
||||
|
||||
Подивимось, що трапиться коли ми створимо клас, який робить текст рожевим, потім застосуємо його до елемента. Чи зможе наш клас *змінити* властивість CSS `color: green;` нашого `body` елемента?
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть клас CSS, який називається `pink-text` що надає елементу рожевого кольору.
|
||||
|
||||
Присвойте вашому елементу `h1` клас `pink-text`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `h1` повинен мати клас `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
Ваш `<style>` повинен мати CSS клас `pink-text`, що змінює `color`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
|
||||
```
|
||||
|
||||
Ваш елемент `h1` повинен бути рожевим.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<h1>Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text">Hello World!</h1>
|
||||
```
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08807
|
||||
title: Встановіть сімейство шрифтів елемента
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bvpCg'
|
||||
forumTopicId: 18278
|
||||
dashedName: set-the-font-family-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете налаштувати шрифт, який використовує елемент, за допомогою властивості `font-family`.
|
||||
|
||||
Наприклад, якби ви хотіли встановити шрифт `sans-serif` для елемента `h2`, ви б використали такі CSS:
|
||||
|
||||
```css
|
||||
h2 {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Встановіть шрифт `monospace` для всіх елементів `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елементи `p` повинні використовувати шрифт `monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('p')
|
||||
.not('.red-text')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,170 @@
|
||||
---
|
||||
id: bad87eee1348bd9aede07836
|
||||
title: Встановіть id елемента
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN6MEc2'
|
||||
forumTopicId: 18279
|
||||
dashedName: set-the-id-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Окрім класів, кожен елемент HTML може мати атрибут `id`.
|
||||
|
||||
Існує декілька переваг використання атрибутів `id`: можна використовувати `id` для стилізації окремого елемента, а пізніше ви навчитеся послуговуватися ними, щоб обирати та змінювати специфічні елементи за допомогою JavaScript.
|
||||
|
||||
Атрибути `id` повинні бути унікальними. Це не є обов'язковим у браузерах, але вважається найкращим варіантом. Тож намагайтеся не надавати атрибут `id` більше, ніж одному елементу.
|
||||
|
||||
Ось приклад того, як надати елементу `h2` id `cat-photo-app`:
|
||||
|
||||
```html
|
||||
<h2 id="cat-photo-app">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Надайте елементу `form` id `cat-photo-form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `form` повинен мати id `cat-photo-form`.
|
||||
|
||||
```js
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,155 @@
|
||||
---
|
||||
id: bad87fee1348bd9acdf08812
|
||||
title: Визначте розмір ваших зображень
|
||||
challengeType: 0
|
||||
forumTopicId: 18282
|
||||
dashedName: size-your-images
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS має властивість під назвою `width`, яка контролює ширину елемента. Так само, як і зі шрифтами, ми будемо використовувати `px` (пікселі), щоб вказати на ширину зображення.
|
||||
|
||||
Наприклад, якби ми хотіли створити CSS клас під назвою `larger-image`, що дав HTML елементи шириною 500 пікселів, ми б використали:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.larger-image {
|
||||
width: 500px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть клас під назвою `smaller-image` і використайте його, щоб змінити розмір зображення так, щоб воно було лише 100 пікселів в ширину.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `img` повинен мати клас `smaller-image`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$("img[src='https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg']").attr('class')
|
||||
.trim().split(/\s+/g).includes('smaller-image')
|
||||
);
|
||||
```
|
||||
|
||||
Ваше зображення повинне бути 100 пікселів в ширину.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').width() < 200 &&
|
||||
code.match(/\.smaller-image\s*{\s*width\s*:\s*100px\s*(;\s*}|})/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,172 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08808
|
||||
title: Вкажіть як правильно використовувати шрифти в порядку їх доступності
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cpVKBfQ'
|
||||
forumTopicId: 18304
|
||||
dashedName: specify-how-fonts-should-degrade
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
У всіх браузерах є декілька доступних шрифтів за замовчуванням. Ці основні групи шрифтів включають `monospace`, `serif` and `sans-serif`.
|
||||
|
||||
Якщо один шрифт недоступний, на браузері ви можете натиснути "degrade", щоб обрати інший шрифт.
|
||||
|
||||
Наприклад, ви б хотіли, щоб елемент використав шрифт `Helvetica`, але якщо шрифт`Helvetica` недоступний, тоді переходив на `sans-serif`, вам слід записати інструкцію таким чином:
|
||||
|
||||
```css
|
||||
p {
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
Звичайні назви типів шрифтів не є чутливими до регістру символів. Також, вони не потребують лапок, тому що є ключовими словами CSS.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Спершу, застосуйте шрифт `monospace` до елемента `h2`, так щоб тепер у ньому було два шрифти - `Lobster` і `monospace`.
|
||||
|
||||
В останньому завданні, ви завантажили шрифт `Lobster`, використовуючи тег `link`. Тепер прокоментуйте імпорт шрифту `Lobster` (з коментарями HTML, які ти вивчив раніше) в Google шрифтах так, щоб він більше не був доступним. Зверніть увагу на те, як ваш елемент `h2` перетворюється у шрифт `monospace`.
|
||||
|
||||
**Note:** Якщо ви маєте шрифт `Lobster`, встановлений на вашому комп'ютері, ви не побачите заміни шрифту, тому що ваш браузер може знайти цей шрифт.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш h2 елемент повинен використовувати шрифт `Lobster`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h2')
|
||||
.css('font-family')
|
||||
.match(/^"?lobster/i)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент h2 повинен знижуватися до шрифту `monospace`, коли `Lobster` недоступний.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Закоментуйте своє підключення в Google за шрифтом `Lobster`, помістивши перед тим `<!--`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('<!--[^fc]', 'gi').test(code));
|
||||
```
|
||||
|
||||
Вам потрібно закрити ваш коментар, додавши `-->`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('[^fc]-->', 'gi').test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!--<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">-->
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,133 @@
|
||||
---
|
||||
id: bad87fee1348bd9aefe08806
|
||||
title: Стилізуйте декілька елементів за допомогою класу CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkVbsQ'
|
||||
forumTopicId: 18311
|
||||
dashedName: style-multiple-elements-with-a-css-class
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Класи дозволяють вам використовувати однакові стилі CSS на різних елементах HTML. Це можна побачити, застосувавши клас `red-text` до першого елемента `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `h2` повинен бути червоним.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Елемент `h2` повинен мати клас `red-text`.
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
Перший елемент `p` повинен бути червоним.
|
||||
|
||||
```js
|
||||
assert($('p:eq(0)').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Другий і третій елементи `p` не повинні бути червоними.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!($('p:eq(1)').css('color') === 'rgb(255, 0, 0)') &&
|
||||
!($('p:eq(2)').css('color') === 'rgb(255, 0, 0)')
|
||||
);
|
||||
```
|
||||
|
||||
Перший елемент `p` повинен мати клас `red-text`.
|
||||
|
||||
```js
|
||||
assert($('p:eq(0)').hasClass('red-text'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08736
|
||||
title: Стилізуйте елемент HTML body
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB77PHW'
|
||||
forumTopicId: 18313
|
||||
dashedName: style-the-html-body-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Тепер давайте розпочнемо знову і поговоримо про наслідування CSS.
|
||||
|
||||
Кожна сторінка HTML містить елемент `body`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Можна довести існування елемента `body` тут, надавши йому чорний фоновий колір `background-color`.
|
||||
|
||||
Це можна зробити, додавши наступне до нашого елемента `style`:
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `body` повинен мати чорний фоновий колір `background-color`.
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Правило CSS має бути належним чином відформатовано; з фігурними дужками, що його відкривають і закривають.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
|
||||
);
|
||||
```
|
||||
|
||||
Правило CSS має закінчуватися крапкою з комою.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,123 @@
|
||||
---
|
||||
id: bad82fee1322bd9aedf08721
|
||||
title: Розуміння різниці між абсолютними і відносними одиницями
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN66JSL'
|
||||
forumTopicId: 301089
|
||||
dashedName: understand-absolute-versus-relative-units
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
В кількох останніх завданнях ви встановлювали зовнішній чи внутрішній відступи елемента в пікселях(`px`). Пікселі - це одиниця довжини, яка вказує браузерові розмір чи місце елемента. На додачу до `px`, CSS має набір різних варіантів одиниць довжини, які можна використовувати.
|
||||
|
||||
Є два основних типи одиниць довжини - абсолютні та відносні. Абсолютні одиниці пов'язані з фізичними одиницями довжини. Наприклад, `in` і `mm` означають дюйми і міліметри, відповідно. Абсолютні одиниці довжини приблизно відповідають реальним вимірам на екрані, але є деякі відмінності залежно від роздільної здатності екрана.
|
||||
|
||||
Відносні одиниці, такі як `em` чи `rem` відносяться до іншого значення довжини. Наприклад, `em` базується на розмірі шрифту елемента. Якщо ви використовуєте її для встановлення самої властивості `font-size`, вона буде відносною стосовно батьківської `font-size`.
|
||||
|
||||
**Примітка:** Існує кілька варіантів відносних одиниць, пов'язаних з розміром області огляду. Вони представлені в розділі "Принципи адаптивного веб-дизайну".
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте властивість `padding` до елемента з класом `red-box` і встановіть її в `1.5em`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `red-box` повинен мати властивість `padding`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.red-box').css('padding-top') != '0px' &&
|
||||
$('.red-box').css('padding-right') != '0px' &&
|
||||
$('.red-box').css('padding-bottom') != '0px' &&
|
||||
$('.red-box').css('padding-left') != '0px'
|
||||
);
|
||||
```
|
||||
|
||||
Клас `red-box` повинен задати елементам `padding` в 1.5em.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: red;
|
||||
margin: 20px 40px 20px 40px;
|
||||
|
||||
}
|
||||
|
||||
.green-box {
|
||||
background-color: green;
|
||||
margin: 20px 40px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box green-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: red;
|
||||
margin: 20px 40px 20px 40px;
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
.green-box {
|
||||
background-color: green;
|
||||
margin: 20px 40px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box green-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08806
|
||||
title: Використання класу CSS для стилізації елементів
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvDtV'
|
||||
forumTopicId: 18337
|
||||
dashedName: use-a-css-class-to-style-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Класи - це повторно використовувані стилі, котрі можуть бути доданими в елементи HTML.
|
||||
|
||||
Ось приклад об'яви класу CSS:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Ви можете побачити, що ми створили клас CSS під назвою `blue-text` в межах тегу `<style>`. Ви можете застосувати клас до елемента HTML ось так: `<h2 class="blue-text">CatPhotoApp</h2>`. Зверніть увагу, що в елементі CSS `style`, назви класів починаються з крапки. В атрибуті класу елемента HTML назва класу не містить крапки.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Всередині елемента `style`, змініть селектор `h2` на `.red-text` й оновіть значення кольору з `blue` на `red`.
|
||||
|
||||
Задайте елементу `h2` атрибут `class` зі значенням `red-text`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `h2` повинен бути червоним.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Елемент `h2` повинен мати клас `red-text`.
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
Таблиця стилів повинна об'явити клас `red-text` і встановити його колір на `red` (червоний).
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g));
|
||||
```
|
||||
|
||||
Ви не повинні використовувати вбудовані об'яви стилів, такі як `style="color: red"` в елементі `h2`.
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style') === undefined);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,287 @@
|
||||
---
|
||||
id: 5a9d727a424fe3d0e10cad12
|
||||
title: Використання змінної користувача CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM989ck'
|
||||
forumTopicId: 301090
|
||||
dashedName: use-a-custom-css-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Після того, як ви створите вашу змінну, ви можете задавати її значення для інших властивостей CSS, посилаючись на назву, яку ви вказали.
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin);
|
||||
```
|
||||
|
||||
Це змінить фон будь-якого елемента, який ви набираєте сірим кольором, тому що це і є значення змінної `--penguin-skin`. Зверніть увагу на те, що стилі не будуть застосовані, якщо назви змінних не мають точної відповідності.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Застосувати змінну `--penguin-skin` до властивості `background`, класів `penguin-top`, `penguin-bottom`, `right-hand` and `left-hand`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Змінна `--penguin-skin` повинна бути застосована до властивості `background` класу `penguin-top`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Змінна `--penguin-skin` повинна бути застосована до властивості `background` класу `penguin-bottom`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Змінна `--penguin-skin` повинна бути застосована до властивості `background` класу `right-hand`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Змінна `--penguin-skin` повинна бути застосована до властивості `background` класу `left-hand`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
--penguin-skin: gray;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: black;
|
||||
/* Change code above this line */
|
||||
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: black;
|
||||
/* Change code above this line */
|
||||
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: black;
|
||||
/* Change code above this line */
|
||||
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: black;
|
||||
/* Change code above this line */
|
||||
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: white;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: orange;
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: orange;
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.penguin-top {background: var(--penguin-skin);} .penguin-bottom {background: var(--penguin-skin);} .right-hand {background: var(--penguin-skin);} .left-hand {background: var(--penguin-skin);}</style>
|
||||
```
|
||||
@@ -0,0 +1,281 @@
|
||||
---
|
||||
id: 5a9d72ad424fe3d0e10cad16
|
||||
title: Використовуйте медіазапити для зміни змінної
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cWmL8UP'
|
||||
forumTopicId: 301091
|
||||
dashedName: use-a-media-query-to-change-a-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Змінні CSS можуть спростити спосіб використання медіа-запитів.
|
||||
|
||||
Для прикладу, коли ваш екран менший або більший, ніж точка зупинки вашого медіа-запиту, ви можете змінити значення змінної, і вона буде застосовувати свій стиль всюди, де він використовується.
|
||||
|
||||
# --instructions--
|
||||
|
||||
В `:root` селектор `media query`, змініть його так `--penguin-size`, щоб отримати значення `200px`. Крім того, перегляньте значення `--penguin-skin` та надайте йому значення `black`. Тоді змініть розмір попереднього перегляду, щоб побачити цю зміну в дії.
|
||||
|
||||
# --hints--
|
||||
|
||||
`:root` повинен перепризначити `--penguin-size` змінну на `200px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`:root` повинен перепризначити `--penguin-skin` змінну на `black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--penguin-size: 300px;
|
||||
--penguin-skin: gray;
|
||||
--penguin-belly: white;
|
||||
--penguin-beak: orange;
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
:root {
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
}
|
||||
|
||||
.penguin {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: var(--penguin-size, 300px);
|
||||
height: var(--penguin-size, 300px);
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 5%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(130deg);
|
||||
z-index: -1;
|
||||
animation-duration: 3s;
|
||||
animation-name: wave;
|
||||
animation-iteration-count: infinite;
|
||||
transform-origin:0% 0%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
10% {
|
||||
transform: rotate(110deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotate(110deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(130deg);
|
||||
}
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left:-23%;
|
||||
background: white;
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>@media (max-width: 350px) {:root {--penguin-size: 200px; --penguin-skin: black;}}</style>
|
||||
```
|
||||
@@ -0,0 +1,128 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08719
|
||||
title: Використання скороченого hex-коду
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkpKAm'
|
||||
forumTopicId: 18338
|
||||
dashedName: use-abbreviated-hex-code
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Багато людей відчувають себе перевантаженими можливостями маючи більш ніж 16 мільйонів кольорів. А запам'ятати шістнадцятковий код дуже складно. На щастя, його можна скоротити.
|
||||
|
||||
Наприклад, шістнадцятковий код червоного кольору `#FF0000` можна скоротити до `#F00`. Ця скорочена форма дає одну цифру для червоного, одну цифру для зеленого і одну цифру для синього кольору.
|
||||
|
||||
Це зменшує загальну кількість можливих кольорів приблизно до 4000. Але браузери будуть інтерпретувати `#FF0000` і `#F00` як один і той же колір.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Спробуйте використовувати скорочені шіснадцяткові коди, що зафарбувати потрібні елементи.
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>Колір</th><th>Короткий hex-код</th></tr><tr><td>Блакитний</td><td><code>#0FF</code></td></tr><tr><td>Зелений</td><td><code>#0F0</code></td></tr><tr><td>Червоний</td><td><code>#F00</code></td></tr><tr><td>Фуксія</td><td><code>#F0F</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш `h1` елемент з текстом `I am red!` має демонструватися `color` червоним кольором.
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Замість `hex code` для червоного кольору слід використовувати абревіатуру hex коду `#FF0000`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Ваш `h1` елемент з текстом `I am green!` має демонструватися `color` зеленим кольором.
|
||||
|
||||
```js
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
Замість `hex code` для зеленого кольору слід використовувати абревіатуру hex коду `#00FF00`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Ваш `h1` елемент з текстом `I am cyan!` має демонструватися `color` блакитним кольором.
|
||||
|
||||
```js
|
||||
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
Замість `hex code` для блакитного кольору слід використовувати абревіатуру hex коду `#00FFFF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Ваш `h1` елемент з текстом `I am fuchsia!` має демонструватися `color` кольором фуксія.
|
||||
|
||||
```js
|
||||
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
```
|
||||
|
||||
Замість `hex code` для кольору фуксії слід використовувати абревіатуру hex коду `#FF00FF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #000000;
|
||||
}
|
||||
.fuchsia-text {
|
||||
color: #000000;
|
||||
}
|
||||
.cyan-text {
|
||||
color: #000000;
|
||||
}
|
||||
.green-text {
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="fuchsia-text">I am fuchsia!</h1>
|
||||
|
||||
<h1 class="cyan-text">I am cyan!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #F00;
|
||||
}
|
||||
.fuchsia-text {
|
||||
color: #F0F;
|
||||
}
|
||||
.cyan-text {
|
||||
color: #0FF;
|
||||
}
|
||||
.green-text {
|
||||
color: #0F0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="fuchsia-text">I am fuchsia!</h1>
|
||||
|
||||
<h1 class="cyan-text">I am cyan!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
```
|
||||
@@ -0,0 +1,197 @@
|
||||
---
|
||||
id: bad87dee1348bd9aede07836
|
||||
title: Використання атрибуту id для стилізації елемента
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakyZfL'
|
||||
forumTopicId: 18339
|
||||
dashedName: use-an-id-attribute-to-style-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Однією з переваг атрибутів `id` є те, що як і класи, їх можна стилізувати за допомогою CSS.
|
||||
|
||||
Однак `id` не може використовуватися повторно і повинен застосовуватися тільки до одного елементу. Також `id` має більш високу специфічність (важливість), ніж клас, тому, якщо обидва застосовуються до одного і того ж елементу і мають конфліктуючі стилі, будуть застосовані стилі `id`.
|
||||
|
||||
Ось приклад того, як ви можете взяти елемент з атрибутом `id` з `cat-photo-element` і надати йому зелений колір фону. У вашому елементі `style`:
|
||||
|
||||
```css
|
||||
#cat-photo-element {
|
||||
background-color: green;
|
||||
}
|
||||
```
|
||||
|
||||
Зверніть увагу, що всередині елемента `style` ви завжди посилаєтеся на класи, ставлячи `.` перед їхніми назвами. Аналогічно, поміщаючи `#` перед назвами, ви посилаєтеся на ідентифікатори.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Спробуйте додати вашій формі, що має тепер атрибут `id` для `cat-photo-form`, зелений фон.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `form` повинен мати ідентифікатор `cat-photo-form`.
|
||||
|
||||
```js
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
```
|
||||
|
||||
Елемент `form` повинен мати зелений `background-color`.
|
||||
|
||||
```js
|
||||
assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
Елемент `form` повинен мати атрибут `id`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<form.*cat-photo-form.*>/gi) &&
|
||||
code.match(/<form.*cat-photo-form.*>/gi).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Ви не повинні вказувати в `form` будь-яких атрибутів `class` або `style`.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
|
||||
#cat-photo-form {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,210 @@
|
||||
---
|
||||
id: 58c383d33e2e3259241f3076
|
||||
title: Використовуйте селектори атрибутів для того, щоб стилізувати елементи
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpymfJ'
|
||||
forumTopicId: 301092
|
||||
dashedName: use-attribute-selectors-to-style-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви додали `id` або `class` атрибути до елементів, які бажаєте окремо стилізувати. Вони відомі як ID та класові селектори. Є також інші CSS-селектори, які можна використовувати, щоб обрати користувацькі групи елементів для стилізації.
|
||||
|
||||
Використаємо CatPhotoApp ще раз, щоб попрактикуватися у використанні CSS-селекторів.
|
||||
|
||||
Для цього завдання ви будете використовувати `[attr=value]` атрибут селектору для створення чекбоксів в CatPhotoApp. Даний селектор підходить елементам стилів з конкретним значенням атрибута. Наприклад, код нижче змінює поля всіх елементів з атрибутом `type` і відповідним значенням `radio`:
|
||||
|
||||
```css
|
||||
[type='radio'] {
|
||||
margin: 20px 0px 20px 0px;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Використовуючи атрибут селектора `type`, спробуйте дати чекбоксам в CatPhotoApp найбільший відступ 10px та нижній відступ 15px.
|
||||
|
||||
# --hints--
|
||||
|
||||
Селектор атрибуту `type` має використовуватися для того, щоб обрати чекбокси.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/<style>[\s\S]*?\[\s*?type\s*?=\s*?("|')checkbox\1\s*?\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Верхній відступ чекбоксів має бути 10px.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
var count = 0;
|
||||
$("[type='checkbox']").each(function () {
|
||||
if ($(this).css('marginTop') === '10px') {
|
||||
count++;
|
||||
}
|
||||
});
|
||||
return count === 3;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
Нижній відступ чекбоксів має бути 15px.
|
||||
|
||||
```js
|
||||
assert(
|
||||
(function () {
|
||||
var count = 0;
|
||||
$("[type='checkbox']").each(function () {
|
||||
if ($(this).css('marginBottom') === '15px') {
|
||||
count++;
|
||||
}
|
||||
});
|
||||
return count === 3;
|
||||
})()
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
[type='checkbox'] {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,143 @@
|
||||
---
|
||||
id: bad87fee1348bd9afdf08726
|
||||
title: Використовуйте запис за годинниковою стрілкою, щоб визначити поле елементу
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpybAd'
|
||||
forumTopicId: 18345
|
||||
dashedName: use-clockwise-notation-to-specify-the-margin-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Спробуйте ще раз, але з `margin` цього разу.
|
||||
|
||||
Замість того, щоб вказати властивості `margin-top`, `margin-right`, `margin-bottom`, і `margin-left` елемента, ви можете вказати їх всі в одному рядку, на зразок цього:
|
||||
|
||||
```css
|
||||
margin: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
Ці чотири значення працюють як годинник: зверху, праворуч, знизу, ліворуч, і дають той самий результат, як і використання окремих інструкцій для кожної сторони поля.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Використовуйте запис за годинниковою стрілкою, щоб надати елементу класу `blue-box` поле `40px` у верхній та лівій частині, але лише `20px` в нижній та правій частині.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `blue-box` повинен задати товщину `40px` `margin` для верхньої частини елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
Клас `blue-box` повинен задати товщину `20px` `margin` для правої частини елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
Клас `blue-box` повинен задати товщину `20px` `margin` для нижньої частини елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
Клас `blue-box` повинен задати товщину`40px` `margin` для лівої частини елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
```
|
||||
|
||||
Вам варто використовувати запис за годинниковою стрілкою, щоб визначити поле класу `blue-box`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
|
||||
__helpers.removeCssComments($('style').text())
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
margin: 40px 20px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,141 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08826
|
||||
title: Використовуйте Запис за Годинниковою Стрілкою для Визначення Відступу Елемента
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mBS9'
|
||||
forumTopicId: 18346
|
||||
dashedName: use-clockwise-notation-to-specify-the-padding-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Замість того, щоб вказати елемент `padding-top`, `padding-right`, `padding-bottom`, і `padding-left` властивості, ви можете вказати їх всі в одному рядку, як тут:
|
||||
|
||||
```css
|
||||
padding: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
Ці чотири значення зазначаються за годинниковою стрілкою: зверху, праворуч, знизу, ліворуч і дають точно такий результат як якщо використовувати інструкції з бічної панелі.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Використовуйте позначення за годинниковою стрілкою, щоб задати класу `.blue-box` відступ `padding` у `40px` у верхній та лівій частині, але тільки `20px` з нижньої та правої сторони.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `blue-box` має задати `40px` для `padding` найбільших елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
Клас `blue-box` повинен задати `20px` для `padding` правої частини елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
Клас `blue-box` повинен задати `20px` для `padding` нижньої сторони елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
Клас `blue-box` повинен задати `40px` для `padding` лівої сторони елементів.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
```
|
||||
|
||||
Вам варто скористатися позначенням за годинниковою стрілкою для встановлення класу `blue-box`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
|
||||
__helpers.removeCssComments($('style').text())
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 40px 20px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,158 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08805
|
||||
title: Використовуйте селектори CSS для стилізації елементів
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJKMBT2'
|
||||
forumTopicId: 18349
|
||||
dashedName: use-css-selectors-to-style-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
У CSS існує сотні функцій, які можна використовувати для редагування вигляду елемента на вашій сторінці.
|
||||
|
||||
Коли ви вводите `<h2 style="color: red;">CatPhotoApp</h2>`, ви стилізуєте окремий елемент `h2` за допомогою вбудованих CSS (Cascading Style Sheets, укр. Каскадні таблиці стилів).
|
||||
|
||||
Це один зі варіантів, як вказати стиль елемента, але є кращий спосіб застосування CSS.
|
||||
|
||||
У верхній частині коду створіть блок `style` на зразок цього:
|
||||
|
||||
```html
|
||||
<style>
|
||||
</style>
|
||||
```
|
||||
|
||||
Всередині цього стильового блоку можна створити <dfn>CSS selector</dfn> для всіх елементів `h2`. Наприклад, якщо ви хочете, щоб усі елементи `h2` були червоними, потрібно додати правило стилю, яке виглядатиме приблизно так:
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Зауважте, що правило стилю кожного елемента важливо взяти у фігурні дужки: (`{` і `}`). Також переконайтеся, що назва стилю вашого елемента знаходиться між початковим і кінцевим стильовими тегами. Не забудьте додати крапку з комою вкінці правила стилю кожного елемента.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Видаліть атрибут стилю елемента `h2` і замініть його на блок CSS `style`. Додайте необхідні CSS, щоб перетворити всі елементи `h2` на сині.
|
||||
|
||||
# --hints--
|
||||
|
||||
Атрибут `style` слід видалити з елементу `h2`.
|
||||
|
||||
```js
|
||||
assert(!$('h2').attr('style'));
|
||||
```
|
||||
|
||||
Створіть елемент `style`.
|
||||
|
||||
```js
|
||||
assert($('style') && $('style').length >= 1);
|
||||
```
|
||||
|
||||
Елемент `h2` має бути синім.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
Ваша таблиця стилів `h2` має бути завершена крапкою з комою і закритою дужкою.
|
||||
|
||||
```js
|
||||
assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
|
||||
```
|
||||
|
||||
Всі елементи `style` повинні бути завершеними й мати кінцеві теги.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/style>/g) &&
|
||||
code.match(/<\/style>/g).length ===
|
||||
(
|
||||
code.match(
|
||||
/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g
|
||||
) || []
|
||||
).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@@ -0,0 +1,257 @@
|
||||
---
|
||||
id: 5a9d725e424fe3d0e10cad10
|
||||
title: Використовуйте змінні CSS, щоб одночасно змінювати кілька елементів
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDECm'
|
||||
forumTopicId: 301093
|
||||
dashedName: use-css-variables-to-change-several-elements-at-once
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>CSS Variables</dfn> - це ефективний метод змінити багато стильових властивостей CSS одночасно, підставивши лише одне значення.
|
||||
|
||||
Дотримуйтесь наступних вказівок, щоб побачити як зміна лише трьох значень може трансформувати стилі багатьох елементів.
|
||||
|
||||
# --instructions--
|
||||
|
||||
У класі `penguin` замініть значення `black` на `gray`, значення `gray` на `white` і значення `yellow` на `orange`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `penguin` повинен задати змінну `--penguin-skin` і надати їй значення `gray`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Клас `penguin` повинен задати змінну `--penguin-belly` та надати їй значення `white`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Клас `penguin` повинен задати змінну `--penguin-beak` та надати їй значення `orange`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
|
||||
/* Only change code below this line */
|
||||
--penguin-skin: black;
|
||||
--penguin-belly: gray;
|
||||
--penguin-beak: yellow;
|
||||
/* Only change code above this line */
|
||||
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.penguin {--penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange;}</style>
|
||||
```
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08726
|
||||
title: Використовуйте шістнадцятковий код для конкретних кольорів
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c8W9mHM'
|
||||
forumTopicId: 18350
|
||||
dashedName: use-hex-code-for-specific-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Чи Ви знали, що існують інші способи для представлення кольорів у CSS? Один із цих способів називається шістнадцятковим кодом або hex кодом, якщо коротко.
|
||||
|
||||
Зазвичай ми використовуємо <dfn>десяткові знаки</dfn>, або основні 10 чисел, які використовують цифри від 0 до 9 для кожної цифри. <dfn>Шістнадцяткові схеми</dfn> (або <dfn>hex</dfn>) є основою 16 чисел. Це означає, що він використовує шістнадцять різних символів. Для прикладу, десяткові знаки 0-9 позначають значення від 0 до 9. Тоді A,B,C,D,E,F представляють значення від десяти до п'ятнадцяти. У цілому, від 0 до F може позначати цифру у шістнадцятковому виразі, надаючи нам 16 можливих значень. Ви можете знайти більше інформації про [ шістнадцяткові числа тут](https://www.freecodecamp.org/news/hexadecimal-number-system/).
|
||||
|
||||
В CSS ми можемо використати 6 шістнадцяткових цифр для відображення кольорів, по дві для червоного (R), зеленого (G) та синього (B) компонентів. Приміром, `#000000` є чорним і також є найменшим можливим значенням. Ви можете знайти більше інформації про [ систему кольорів RGB тут ](https://www.freecodecamp.org/news/rgb-color-html-and-css-guide/#whatisthergbcolormodel).
|
||||
|
||||
```css
|
||||
body {
|
||||
color: #000000;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Замініть слово `black` в нашому `body` фоновий колір елемента його шістнадцятковим кодом, `#000000`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш `body` елемент повинен мати чорний колір фону.
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Замість слова `hex code` для чорного кольору варто використовувати слово `black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08721
|
||||
title: Використовувати шістнадцятковий код для змішаних кольорів
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cK89PhP'
|
||||
forumTopicId: 18359
|
||||
dashedName: use-hex-code-to-mix-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Для перегляду, використовуйте 6 шістнадцяткових цифр для відображення кольорів, по дві для червоного (R), зеленого (G) та синього (B) компонентів.
|
||||
|
||||
З цих трьох чистих кольорів ( червоного, зеленого та синього), ми можемо варіювати кількість кожного з них, для того, щоб створити більше 16 мільйонів інших кольорів!
|
||||
|
||||
Наприклад, оранжевий - це чистий червоний, змішаний із невеликою кількістю зеленого та зовсім без синього. У шістнадцятковому коді це означатиме `#FFA500`.
|
||||
|
||||
Цифра `0` є найменшим числом в шістнадцятковому коді і являє собою повну відсутність кольору.
|
||||
|
||||
Цифра `F` є найбільшим числом в шістнадцятковому коді, що відображає максимально можливу яскравість.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Замініть слово колір в нашому `style` елементом на їх правильні шістнадцяткові коди.
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>Колір</th><th>Шістнадцятковий код кольору</th></tr><tr><td>Синьо-волошковий</td><td><code>#1E90FF</code></td></tr><tr><td>Зелений</td><td><code>#00FF00</code></td></tr><tr><td>Оранжевий</td><td><code>#FFA500</code></td></tr><tr><td>Червоний</td><td><code>#FF0000</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш `h1` елемент з текстом `I am red!` має демонструватися `color` червоним.
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Замість слова `hex code` для чорного кольору варто використовувати слово `red`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Ваш `h1` елемент з текстом `I am green!` має демонструватися `color` зеленим.
|
||||
|
||||
```js
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
Замість слова `hex code` для чорного кольору варто використовувати слово `green`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Вашому `h1` елементу з текстом `I am dodger blue!` варто надати `color` синьо-волошкового.
|
||||
|
||||
```js
|
||||
assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
```
|
||||
|
||||
Замість слова `hex code` для синьо-волошкового кольору варто використовувати слово `dodgerblue`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Вашому `h1` елементу з текстом `I am orange!` варто надати `color` оранжевого.
|
||||
|
||||
```js
|
||||
assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
Замість `hex code` для оранжевого кольору варто використовувати слово `orange`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: black;
|
||||
}
|
||||
.green-text {
|
||||
color: black;
|
||||
}
|
||||
.dodger-blue-text {
|
||||
color: black;
|
||||
}
|
||||
.orange-text {
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
|
||||
<h1 class="dodger-blue-text">I am dodger blue!</h1>
|
||||
|
||||
<h1 class="orange-text">I am orange!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #FF0000;
|
||||
}
|
||||
.green-text {
|
||||
color: #00FF00;
|
||||
}
|
||||
.dodger-blue-text {
|
||||
color: #1E90FF;
|
||||
}
|
||||
.orange-text {
|
||||
color: #FFA500;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
|
||||
<h1 class="dodger-blue-text">I am dodger blue!</h1>
|
||||
|
||||
<h1 class="orange-text">I am orange!</h1>
|
||||
```
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
id: bad82fee1348bd9aedf08721
|
||||
title: Використовуйте RGB модель для поєднання кольорів
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cm24JU6'
|
||||
forumTopicId: 18368
|
||||
dashedName: use-rgb-to-mix-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Так само, як і з шістнадцятковим кодом, ви можете поєднувати кольори за допомогою моделі RGB, використовуючи комбінації різних значень.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Замініть шістнадцяткові коди на наш елемент `style` з правильними значеннями моделі RGB.
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>Колір</th><th>RGB модель</th></tr><tr><td>Синій</td><td><code>rgb(0, 0, 255)</code></td></tr><tr><td>Червоний</td><td><code>rgb(255, 0, 0)</code></td></tr><tr><td>Рожевий</td><td><code>rgb(218, 112, 214)</code></td></tr><tr><td>Коричневий</td><td><code>rgb(160, 82, 45)</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `h1` з текстом `I am red!` повинен бути червоним кольором `color`.
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Вам потрібно використовувати `rgb` для червоного кольору.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `h1` з текстом `I am orchid!` повинен бути рожевого кольору `color`.
|
||||
|
||||
```js
|
||||
assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
|
||||
```
|
||||
|
||||
Вам потрібно використовувати `rgb` для рожевого кольору.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `h1` з текстом `I am blue!` повинен бути синім кольором `color`.
|
||||
|
||||
```js
|
||||
assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
Вам слід використовувати `rgb` для синього кольору.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Ваш елемент `h1` з текстом `I am sienna!` повинен бути коричневого кольору `color`.
|
||||
|
||||
```js
|
||||
assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
|
||||
```
|
||||
|
||||
Вам слід використовувати `rgb` для коричневого кольору.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #000000;
|
||||
}
|
||||
.orchid-text {
|
||||
color: #000000;
|
||||
}
|
||||
.sienna-text {
|
||||
color: #000000;
|
||||
}
|
||||
.blue-text {
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="orchid-text">I am orchid!</h1>
|
||||
|
||||
<h1 class="sienna-text">I am sienna!</h1>
|
||||
|
||||
<h1 class="blue-text">I am blue!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
.orchid-text {
|
||||
color: rgb(218, 112, 214);
|
||||
}
|
||||
.sienna-text {
|
||||
color: rgb(160, 82, 45);
|
||||
}
|
||||
.blue-text {
|
||||
color:rgb(0, 0, 255);
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="orchid-text">I am orchid!</h1>
|
||||
|
||||
<h1 class="sienna-text">I am sienna!</h1>
|
||||
|
||||
<h1 class="blue-text">I am blue!</h1>
|
||||
```
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08718
|
||||
title: Використовування властивостей RGB до Кольорових Елементів
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkp2fr'
|
||||
forumTopicId: 18369
|
||||
dashedName: use-rgb-values-to-color-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Інша можливість представлення кольорів у CSS - це використання конструкції `RGB`.
|
||||
|
||||
Наприклад, представлення `RGB` для чорного кольору виглядає наступним чином:
|
||||
|
||||
```css
|
||||
rgb(0, 0, 0)
|
||||
```
|
||||
|
||||
Представлення `RGB` для білого кольору виглядає так:
|
||||
|
||||
```css
|
||||
rgb(255, 255, 255)
|
||||
```
|
||||
|
||||
Замість використання шести шістнадцяткових цифр, як у випадку з шістнадцятковим кодом, у разі `RGB` яскравість кожного кольору задається числом від 0 до 255.
|
||||
|
||||
Якщо підрахувати, то два значення для одного кольору дорівнює 16 разів по 16, що приносить у підсумку 256 значень. Таким чином, `RGB` починаючи відлік з нуля, має таку ж саму кількість можливих значень, як і шістнадцятковий код.
|
||||
|
||||
Ось приклад того, як можна змінити `body` тла на помаранчевий, використовуючи його RGB код.
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: rgb(255, 165, 0);
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Давайте змінимо шістнадцятковий код у `body` властивості кольору тла на значення RGB для чорного кольору: `rgb(0, 0, 0)`
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш елемент `body` повинен мати чорне тло.
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Слід використовувати `rgb` для надання чорного кольору тлу елемента `body`.
|
||||
|
||||
```js
|
||||
assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #F00;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
Reference in New Issue
Block a user