mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-15 13:00:58 -04:00
chore(i18n,learn): processed translations (#47261)
This commit is contained in:
camperbot
@@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 5dc23f9bf86c76b9248c6eba
|
||||
title: ステップ 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`img` 要素を使うと、ウェブサイトに画像を追加することができます。 `img` 要素は開始タグを持ちますが、終了タグを持ちません。 終了タグを持たない要素のタグは<dfn>自己終了タグ (self-cloding tag)</dfn> として知られています。
|
||||
|
||||
`p` 要素の下に、`img` 要素を追加してください。 この時点では、ブラウザーに画像は表示されません。
|
||||
|
||||
# --hints--
|
||||
|
||||
`img` 要素には開始タグが必要です。 開始タグは `<elementName>` のような形式の構文です。
|
||||
|
||||
```js
|
||||
assert(document.querySelector('img'));
|
||||
```
|
||||
|
||||
`img` 要素は終了タグを持たないようにしてください。 終了タグは `<` の直後に `/` があるタグです。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<\/img\>/));
|
||||
```
|
||||
|
||||
`img` 要素は 1 つだけにしてください。 余分なものは削除してください。
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('img').length === 1);
|
||||
```
|
||||
|
||||
`img` 要素は `p` 要素の下に置く必要があります。 順番が誤っているようです。
|
||||
|
||||
```js
|
||||
const collection = [...document.querySelectorAll('p,img')].map(
|
||||
(node) => node.nodeName
|
||||
);
|
||||
assert(collection.indexOf('P') < collection.indexOf('IMG'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
--fcc-editable-region--
|
||||
<p>Click here to view more cat photos.</p>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -21,12 +21,12 @@ const arr = [
|
||||
[[10, 11, 12], 13, 14]
|
||||
];
|
||||
|
||||
arr[3];
|
||||
arr[3][0];
|
||||
arr[3][0][1];
|
||||
const subarray = arr[3];
|
||||
const nestedSubarray = arr[3][0];
|
||||
const element = arr[3][0][1];
|
||||
```
|
||||
|
||||
`arr[3]` é `[[10, 11, 12], 13, 14]`, `arr[3][0]` é `[10, 11, 12]`, e `arr[3][0][1]` é `11`.
|
||||
Neste exemplo, `subarray` tem o valor de `[[10, 11, 12], 13, 14]`, `nestedSubarray` tem o valor de `[10, 11, 12]` e `element` tem o valor de `11` .
|
||||
|
||||
**Observação:** não deve haver nenhum espaço entre o nome do array e os colchetes como `array [0][0]` e até mesmo `array [0] [0]` não é permitido. Embora JavaScript seja capaz de processar isso corretamente, isso pode confundir outros programadores lendo seu código.
|
||||
|
||||
|
||||
@@ -309,7 +309,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
Uma solicitação de `GET` a `/api/users/:id/logs` retornará o objeto do usuário com um array `log` de todos os exercícios adicionados.
|
||||
Uma solicitação de `GET` a `/api/users/:_id/logs` retornará o objeto do usuário com um array `log` de todos os exercícios adicionados.
|
||||
|
||||
```js
|
||||
async(getUserInput) => {
|
||||
@@ -353,7 +353,7 @@ async(getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
Cada item no array `log` que é retornado de `GET /api/users/:id/logs` é um objeto que deve ter as propriedades `description`, uma `duration` e uma `date`.
|
||||
Cada item no array `log` que é retornado de `GET /api/users/:_id/logs` é um objeto que deve ter as propriedades `description`, uma `duration` e uma `date`.
|
||||
|
||||
```js
|
||||
async(getUserInput) => {
|
||||
@@ -400,7 +400,7 @@ async(getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
A propriedade `description` de qualquer objeto no array `log` retornada de `GET /api/users/:id/logs` deve ser uma string.
|
||||
A propriedade `description` de qualquer objeto no array `log` retornada de `GET /api/users/:_id/logs` deve ser uma string.
|
||||
|
||||
```js
|
||||
async(getUserInput) => {
|
||||
@@ -447,7 +447,7 @@ async(getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
A propriedade `duration` de qualquer objeto no array `log` que é retornada de `GET /api/users/:id/logs` deve ser um número.
|
||||
A propriedade `duration` de qualquer objeto no array `log` que é retornada de `GET /api/users/:_id/logs` deve ser um número.
|
||||
|
||||
```js
|
||||
async(getUserInput) => {
|
||||
@@ -494,7 +494,7 @@ async(getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
A propriedade `date` de qualquer objeto no array `log` retornada de `GET /api/users/:id/logs` deve ser uma string. Use o formato `dateString` da API `Date`.
|
||||
A propriedade `date` de qualquer objeto no array `log` retornada de `GET /api/users/:_id/logs` deve ser uma string. Use o formato `dateString` da API `Date`.
|
||||
|
||||
```js
|
||||
async(getUserInput) => {
|
||||
|
||||
@@ -13,7 +13,8 @@ Você <a href="https://replit.com/github/freeCodeCamp/boilerplate-demographic-da
|
||||
Ainda estamos desenvolvendo a parte instrucional interativa do currículo Python. Por enquanto, aqui estão alguns vídeos no canal do freeCodeCamp.org do YouTube que ensinarão tudo o que você precisa saber para completar este projeto:
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Curso de Python em vídeo para todos</a> (14 horas)
|
||||
- <a href="https://www.freecodecamp.org/news/learn-python-video-course/" target="_blank" rel="noopener noreferrer nofollow">Curso Aprenda Python em vídeo</a> (10 horas)
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">Como analisar dados em Python com o Pandas</a> (10 hours)
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -13,7 +13,8 @@ Você <a href="https://replit.com/github/freeCodeCamp/boilerplate-mean-variance-
|
||||
Ainda estamos desenvolvendo a parte instrucional interativa do currículo Python. Por enquanto, aqui estão alguns vídeos no canal do freeCodeCamp.org do YouTube que ensinarão tudo o que você precisa saber para completar este projeto:
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Curso de Python em vídeo para todos</a> (14 horas)
|
||||
- <a href="https://www.freecodecamp.org/news/learn-python-video-course/" target="_blank" rel="noopener noreferrer nofollow">Curso por vídeo Aprenda Python</a>
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">Como analisar dados em Python com o Pandas</a> (10 hours)
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -13,7 +13,8 @@ Você <a href="https://replit.com/github/freeCodeCamp/boilerplate-medical-data-v
|
||||
Ainda estamos desenvolvendo a parte instrucional interativa do currículo Python. Por enquanto, aqui estão alguns vídeos no canal do freeCodeCamp.org do YouTube que ensinarão tudo o que você precisa saber para completar este projeto:
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Curso de Python em vídeo para todos</a> (14 horas)
|
||||
- <a href="https://www.freecodecamp.org/news/learn-python-video-course/" target="_blank" rel="noopener noreferrer nofollow">Curso por vídeo Aprenda Python</a>
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">Como analisar dados em Python com o Pandas</a> (10 hours)
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -13,7 +13,8 @@ Você <a href="https://replit.com/github/freeCodeCamp/boilerplate-page-view-time
|
||||
Ainda estamos desenvolvendo a parte instrucional interativa do currículo Python. Por enquanto, aqui estão alguns vídeos no canal do freeCodeCamp.org do YouTube que ensinarão tudo o que você precisa saber para completar este projeto:
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Curso de Python em vídeo para todos</a> (14 horas)
|
||||
- <a href="https://www.freecodecamp.org/news/learn-python-video-course/" target="_blank" rel="noopener noreferrer nofollow">Curso por vídeo Aprenda Python</a>
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">Como analisar dados em Python com o Pandas</a> (10 hours)
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -13,7 +13,8 @@ Você <a href="https://replit.com/github/freeCodeCamp/boilerplate-sea-level-pred
|
||||
Ainda estamos desenvolvendo a parte instrucional interativa do currículo Python. Por enquanto, aqui estão alguns vídeos no canal do freeCodeCamp.org do YouTube que ensinarão tudo o que você precisa saber para completar este projeto:
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Curso de Python em vídeo para todos</a> (14 horas)
|
||||
- <a href="https://www.freecodecamp.org/news/learn-python-video-course/" target="_blank" rel="noopener noreferrer nofollow">Curso por vídeo Aprenda Python</a>
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">Como analisar dados em Python com o Pandas</a> (10 hours)
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -15,7 +15,9 @@ Ainda estamos desenvolvendo a parte instrucional interativa do currículo Python
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Curso de Python em vídeo para todos</a> (14 horas)
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/learn-python-video-course/" target="_blank" rel="noopener noreferrer nofollow">Curso Aprenda Python em vídeo</a> (10 horas)
|
||||
- <a href="https://www.freecodecamp.org/news/learn-python-basics-in-depth-video-course/" target="_blank" rel="noopener noreferrer nofollow">Aprenda muito sobre o básico em Python</a> (4 hours)
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/intermediate-python-course/" target="_blank" rel="noopener noreferrer nofollow">Curso de Python intermediário</a> (6 hours)
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -15,7 +15,9 @@ Ainda estamos desenvolvendo a parte instrucional interativa do currículo Python
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Curso de Python em vídeo para todos</a> (14 horas)
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/learn-python-video-course/" target="_blank" rel="noopener noreferrer nofollow">Curso Aprenda Python em vídeo</a> (10 horas)
|
||||
- <a href="https://www.freecodecamp.org/news/learn-python-basics-in-depth-video-course/" target="_blank" rel="noopener noreferrer nofollow">Aprenda muito sobre o básico em Python</a> (4 hours)
|
||||
|
||||
- <a href="https://www.freecodecamp.org/news/intermediate-python-course/" target="_blank" rel="noopener noreferrer nofollow">Curso de Python intermediário</a> (6 hours)
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-1
|
||||
|
||||
# --description--
|
||||
|
||||
Comece com o boilerplate padrão. Adicione a declaração `DOCTYPE` e os elementos `html`, `head` e `body`.
|
||||
Comece com o boilerplate padrão. Adicione a declaração `DOCTYPE` e os elementos `html` (com o idioma definido para o inglês), `head` e `body`.
|
||||
|
||||
Adicione seu elemento `meta` com o `charset` correto, o elemento `title` e um elemento `link` que vincule o arquivo `./styles.css`.
|
||||
|
||||
|
||||
@@ -35,10 +35,46 @@ Você deve acrescentar uma tag de fechamento para o elemento `body`.
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
Os elementos `head` e `body` devem ser irmãos.
|
||||
Deve haver apenas uma tag de abertura do elemento `head`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
|
||||
assert(code.match(/<head\s*>/ig).length === 1);
|
||||
```
|
||||
|
||||
Deve haver apenas uma tag de fechamento do elemento `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/ig).length === 1);
|
||||
```
|
||||
|
||||
Deve haver apenas uma tag de abertura do elemento `body`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/ig).length === 1);
|
||||
```
|
||||
|
||||
Deve haver apenas uma tag de fechamento do elemento `body`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/ig).length === 1);
|
||||
```
|
||||
|
||||
O elemento `head` deve estar vazio.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>\s*<\/head\s*>/i));
|
||||
```
|
||||
|
||||
O elemento `body` deve estar vazio.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>\s*<\/body\s*>/i));
|
||||
```
|
||||
|
||||
O elemento `body` deve ser inserido depois do elemento `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>\s*<body\s*>/i));
|
||||
```
|
||||
|
||||
O elemento `head` deve ser filho do elemento `html`.
|
||||
|
||||
@@ -7,18 +7,15 @@ dashedName: step-16
|
||||
|
||||
# --description--
|
||||
|
||||
Na escola, você pode ter aprendido que vermelho, amarelo e azul são as cores primárias e aprendeu a criar novas cores misturando essas cores. No entanto, este é um modelo obsoleto.
|
||||
|
||||
Hoje em dia, existem dois modelos de cores: o modelo <dfn>aditivo</dfn> RGB (vermelho, verde, azul), usado em dispositivos eletrônicos, e o modelo <dfn>subtrativo</dfn> CMYK (ciano, magenta, amarelo, preto), usado em impressão. Neste projeto, você trabalhará com o modelo RGB.
|
||||
|
||||
Primeiro, adicione a `class` `one` ao primeiro elemento do marcador `div`.
|
||||
Para dar aos marcadores cores diferentes, você precisará adicionar uma classe única a cada um. Várias classes podem ser adicionadas a um elemento listando-as no atributo `class` e separando-as com um espaço. Por exemplo, aqui vemos como adicionar as classes `animal` e `dog` ao elemento `div`.
|
||||
|
||||
```html
|
||||
<div class="exampleClass1 exampleClass2">
|
||||
...content
|
||||
</div>
|
||||
<div class="animal dog">
|
||||
```
|
||||
|
||||
Para começar, adicione a classe `one` ao primeiro elemento do marcador `div`.
|
||||
|
||||
|
||||
# --hints--
|
||||
|
||||
Adicione a class `one` ao primeiro elemento do marcador `div`.
|
||||
|
||||
@@ -7,9 +7,9 @@ dashedName: step-21
|
||||
|
||||
# --description--
|
||||
|
||||
Mais cedo, você aprendeu que o modelo de cor RGB é aditivo. Isso significa que as cores começam como pretas e mudam quando são introduzidos diferentes níveis de vermelho, verde e azul.
|
||||
Existem dois modelos de cores: o modelo <dfn>aditivo</dfn> RGB (vermelho, verde, azul), usado em dispositivos eletrônicos, e o modelo <dfn>subtrativo</dfn> CMYK (ciano, magenta, amarelo, preto), usado em impressão.
|
||||
|
||||
Uma maneira fácil de ver isso é com a função do CSS `rgb`.
|
||||
Neste projeto, você trabalhará com o modelo RGB. Isso significa que as cores começam como pretas e mudam quando são introduzidos diferentes níveis de vermelho, verde e azul. Uma maneira fácil de ver isso é com a função do CSS `rgb`.
|
||||
|
||||
Crie uma nova regra do CSS vinculada à classe `container` e defina sua propriedade `background-color` para `rgb(0, 0, 0)`.
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-5
|
||||
|
||||
# --description--
|
||||
|
||||
Abaixo do `header`, crie um elemento `div` e atribua a ele uma classe `gallery`.
|
||||
Abaixo do elemento `.header`, crie outro elemento `div` e atribua a ele uma `class` de `"gallery"`. Essa `div` atuará como um contêiner para as imagens da galeria.
|
||||
|
||||
Dentro de `.gallery`, crie nove elementos `img`.
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-1
|
||||
|
||||
# --description--
|
||||
|
||||
Comece com o boilerplate padrão do HTML. Adicione a declaração `DOCTYPE` e os elementos `html`, `head` e `body`.
|
||||
Comece com o boilerplate padrão do HTML. Adicione a declaração `DOCTYPE` e os elementos `html` (especificando que esta página está em inglês), `head` e `body`.
|
||||
|
||||
Adicione a tag `<meta>` com o `charset` apropriado e uma tag `<meta>` para responsividade móvel dentro do elemento `head`.
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-1
|
||||
|
||||
Você criará um Flappy Penguin feliz e explorará ainda mais transformações e animações em CSS no processo.
|
||||
|
||||
Comece com o boilerplate padrão do HTML. Inclua a declaração `DOCTYPE`, o elemento `html`, as tags `meta` apropriadas, os elementos `head`, `body` e `title`. Além disso, vincule a folha de estilos à página.
|
||||
Comece com o boilerplate padrão do HTML. Inclua a declaração `DOCTYPE`, o elemento `html` (com o idioma definido para o inglês), as tags `meta` apropriadas, os elementos `head`, `body` e `title`. Além disso, vincule a folha de estilos à página.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -95,25 +95,28 @@ assert.isAtLeast(title?.textContent?.length, 1);
|
||||
O código deve ter um elemento `link`.
|
||||
|
||||
```js
|
||||
assert(/<link/.test(code))
|
||||
assert.exists(document.querySelector('link'));
|
||||
```
|
||||
|
||||
O elemento `link` deve estar dentro do elemento `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/>[\w\W\s]*<\/head>/i))
|
||||
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i));
|
||||
```
|
||||
|
||||
O elemento `link` deve ter o atributo `rel` com o valor `stylesheet`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
|
||||
const link_element = document.querySelector('link');
|
||||
const rel = link_element.getAttribute("rel");
|
||||
assert.equal(rel, "stylesheet");
|
||||
```
|
||||
|
||||
O elemento `link` deve ter o atributo `href` com o valor `styles.css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
|
||||
const link = document.querySelector('link');
|
||||
assert.equal(link.dataset.href, "styles.css");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-2
|
||||
|
||||
# --description--
|
||||
|
||||
Adicione as tags de abertura e fechamento de `html` abaixo do `DOCTYPE` para que você tenha um lugar para começar a colocar algum código. Não se esqueça de definir o idioma.
|
||||
Adicione as tags de abertura e fechamento de `html` abaixo do `DOCTYPE` para que você tenha um lugar para começar a colocar algum código. Não se esqueça de definir o idioma para o inglês.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -7,7 +7,9 @@ dashedName: step-1
|
||||
|
||||
# --description--
|
||||
|
||||
Defina o HTML com uma declaração `DOCTYPE` e com os elementos `html`, `head` e `body`. Dê ao elemento `head` os elementos `meta` apropriados para o `charset` e a `viewport`, um elemento `title` com o título apropriado e um elemento `link` para a sua folha de estilo.
|
||||
Defina o HTML com uma declaração `DOCTYPE` e com os elementos `html` (indicando aqui que o documento está em inglês), `head` e `body`.
|
||||
|
||||
Dê ao elemento `head` os elementos `meta` apropriados para o `charset` e a `viewport`, um elemento `title` com o título apropriado e um elemento `link` para a sua folha de estilo.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,7 +19,7 @@ O código deve ter uma declaração `<!DOCTYPE html>`.
|
||||
assert(code.match(/<!DOCTYPE html>/i));
|
||||
```
|
||||
|
||||
O código deve ter um elemento `html`.
|
||||
Seu código deve ter um elemento `html`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('html')?.length, 1);
|
||||
|
||||
@@ -7,7 +7,9 @@ dashedName: step-1
|
||||
|
||||
# --description--
|
||||
|
||||
Comece com a estrutura HTML básica. Adicione a declaração `DOCTYPE` e os elementos `html`, `head`, `body` e `title`. Defina o elemento `title` como `Piano`.
|
||||
Comece com a estrutura HTML básica. Adicione a declaração `DOCTYPE` e os elementos `html`, `head`, `body` e `title`.
|
||||
|
||||
Defina o idioma desta página para o inglês. Defina o elemento `title` como `Piano`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -23,7 +25,7 @@ Você deve incluir um espaço após a referência `DOCTYPE`.
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
Você deve definir o tipo de documento para `html`.
|
||||
Você deve definir o tipo de documento para ser `html`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html/gi));
|
||||
@@ -47,13 +49,13 @@ O elemento `html` deve ter uma tag de fechamento.
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
A declaração `DOCTYPE` deve estar no início do arquivo HTML.
|
||||
A declaração `DOCTYPE` deve estar no ínicio do HTML.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
```
|
||||
|
||||
Você deve ter uma tag de abertura para `head`.
|
||||
Você deve acrescentar uma tag de abertura `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
@@ -65,13 +67,13 @@ Você deve ter uma tag de fechamento para `head`.
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
Você deve ter uma tag de abertura para o elemento `body`.
|
||||
Você deve ter uma tag de abertura para `body`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
Você deve ter uma tag de fechamento para o elemento `body`.
|
||||
Você deve ter uma tag de fechamento para `body`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: step-1
|
||||
|
||||
Agora, você já deve estar familiarizado com os elementos básicos que uma página em HTML deve ter.
|
||||
|
||||
Defina seu código com uma declaração `DOCTYPE` e com os elementos `html`, `head` e `body`.
|
||||
Defina seu código com uma declaração `DOCTYPE` e com os elementos `html` (com o idioma definido para o inglês), `head` e `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -19,10 +19,10 @@ O código deve ter a declaração `<!DOCTYPE html>`.
|
||||
assert(code.match(/<!DOCTYPE html>/i));
|
||||
```
|
||||
|
||||
O código deve ter um elemento `html`.
|
||||
Você deve ter uma tag de abertura `<html>` com um atributo `lang` de `en`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('html').length === 1);
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
```
|
||||
|
||||
O código deve ter um elemento `head` dentro do elemento `html`.
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-1
|
||||
|
||||
# --description--
|
||||
|
||||
Почніть зі стандартного шаблонного коду. Додайте свою декларацію `DOCTYPE`, свій елемент `html`, свої елементи `head` та `body`.
|
||||
Почніть зі стандартного шаблонного коду. Додайте свою декларацію `DOCTYPE`, свій елемент `html` з мовою встановлену на англійську, свої елементи `head` та `body`.
|
||||
|
||||
Додайте елемент `meta` для правильного `charset`, елемент `title` та елемент `link` для файлу `./styles.css`.
|
||||
|
||||
|
||||
@@ -35,10 +35,46 @@ assert(code.match(/<body\s*>/i));
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
Ваші елементи `head` та `body` повинні бути братськими.
|
||||
Має бути тільки один початковий теґ `head`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
|
||||
assert(code.match(/<head\s*>/ig).length === 1);
|
||||
```
|
||||
|
||||
Має бути тільки один кінцевий теґ `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/ig).length === 1);
|
||||
```
|
||||
|
||||
Має бути тільки один початковий теґ `body`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/ig).length === 1);
|
||||
```
|
||||
|
||||
Має бути тільки один кінцевий теґ `body`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/ig).length === 1);
|
||||
```
|
||||
|
||||
Ваш елемент `head` повинен бути порожнім.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>\s*<\/head\s*>/i));
|
||||
```
|
||||
|
||||
Ваш елемент `body` повинен бути порожнім.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>\s*<\/body\s*>/i));
|
||||
```
|
||||
|
||||
Ваш елемент `body` повинен бути розміщеним після елемента `head`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>\s*<body\s*>/i));
|
||||
```
|
||||
|
||||
Ваш елемент `head` повинен бути в межах елемента `html`.
|
||||
|
||||
@@ -7,7 +7,7 @@ dashedName: step-5
|
||||
|
||||
# --description--
|
||||
|
||||
Під своїм `header` створіть новий елемент `div` та призначте йому клас `gallery`.
|
||||
Під елементом `.header` створіть новий елемент `div` та призначте йому `class` зі значенням `"gallery"`. Цей `div` діятиме як контейнер для зображень галереї.
|
||||
|
||||
В цьому елементі `.gallery` створіть дев'ять елементів `img`.
|
||||
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 61437d575fb98f57fa8f7f36
|
||||
title: Крок 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Розпочніть зі стандартного шаблонного коду HTML. Додайте декларацію `DOCTYPE`, елемент `html` зазначивши, що ця сторінка англійською мовою, елемент `head` та елемент `body`.
|
||||
|
||||
Додайте теґ `<meta>` з відповідним `charset` та теґ `<meta>` для мобільного реагування в межах елемента `head`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш код повинен містити посилання `DOCTYPE`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE/gi));
|
||||
```
|
||||
|
||||
Ви повинні додати пробіл після посилання `DOCTYPE`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
Ви повинні визначити тип документа як `html`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html/gi));
|
||||
```
|
||||
|
||||
Ви повинні закрити декларацію `DOCTYPE` з допомогою `>` після типу.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
Ви повинні мати початковий теґ `<html>` та він повинен мати `lang` зі значенням `en`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
```
|
||||
|
||||
Ваш елемент `html` повинен мати кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
Ваша декларація `DOCTYPE` повинна бути на початку HTML.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
```
|
||||
|
||||
Ви повинні мати початковий теґ `<head>`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
Ви повинні мати кінцевий теґ `</head>`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
Ви повинні мати початковий теґ `<body>`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
Ви повинні мати кінцевий теґ `</body>`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
Елементи `head` та `body` повинні бути братськими.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
|
||||
```
|
||||
|
||||
Елемент `head` повинен бути в межах елемента `html`.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
|
||||
```
|
||||
|
||||
Елемент `body` повинен бути в межах елемента `html`.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
```
|
||||
|
||||
Ви повинні мати два елементи `meta`.
|
||||
|
||||
```js
|
||||
const meta = document.querySelectorAll('meta');
|
||||
assert(meta?.length === 2);
|
||||
```
|
||||
|
||||
Один елемент `meta` повинен мати `name` зі значенням `viewport` та `content` зі значенням `width=device-width, initial-scale=1.0`.
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset'));
|
||||
assert.exists(target);
|
||||
```
|
||||
|
||||
Інший елемент `meta` повинен мати атрибут `charset` зі значенням `UTF-8`.
|
||||
|
||||
```js
|
||||
const meta = [...document.querySelectorAll('meta')];
|
||||
const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
|
||||
assert.exists(target);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98ca
|
||||
title: Крок 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Додайте початковий та кінцевий теґи `html` під `DOCTYPE`, щоб ви мали місце для початку розміщення коду. Переконайтесь, що встановили мову на англійську.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваша декларація `DOCTYPE` повинна бути на початку HTML.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
```
|
||||
|
||||
Ваш елемент `html` повинен мати початковий теґ та атрибут `lang` зі значенням `en`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
```
|
||||
|
||||
Ваш елемент `html` повинен мати кінцевий теґ.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
Ваші теґи `html` повинні бути в правильному порядку.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>\s*<\/html\s*>/));
|
||||
```
|
||||
|
||||
Ви повинні мати тільки один елемент `html`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('html').length === 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98cf
|
||||
title: Крок 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете побачити `body` (прихований блок вашої сторінки); блок навколо нього є елементом `html`. Зробіть так, щоб ваш `body` заповнював весь вюпорт, надавши йому `height` зі значенням `100vh`. Видаліть `margin` за замовчуванням із `body`, встановивши `margin` на `0`. Зрештою, встановіть властивість `overflow` на `hidden`, щоб приховати будь-які смуги прокрутки, які з’являються, коли щось виходить за вюпорт.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні використати селектор `body`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
```
|
||||
|
||||
Ваш `body` повинен мати `height` зі значенням `100vh`.
|
||||
|
||||
```js
|
||||
const bodyStyles = new __helpers.CSSHelp(document).getStyle('body');
|
||||
assert.equal(bodyStyles?.height, '100vh');
|
||||
```
|
||||
|
||||
Ваш `body` повинен мати `margin` зі значенням `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
|
||||
```
|
||||
|
||||
Ваш `body` повинен мати властивість `overflow` зі значенням `hidden`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98d0
|
||||
title: Крок 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Створіть елемент `div` в `body` з класом `background-buildings`. Це буде контейнер для групи будівель.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити елемент `div`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div'));
|
||||
```
|
||||
|
||||
Ваш `div` повинен бути в межах елемента `body`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('div')?.parentElement?.localName === 'body');
|
||||
```
|
||||
|
||||
Ваші елементи `div` повинні мати клас зі значенням `background-buildings`
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('div')?.classList]?.includes('background-buildings'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98d1
|
||||
title: Крок 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Надайте елементу фонових будівель `width` та `height` зі значенням `100%`, щоб зробити його на повну ширину та висоту його батьківського елемента, `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні використати клас `background-buildings`, щоб вибрати правильний елемент.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings'));
|
||||
```
|
||||
|
||||
Ваш елемент `.background-buildings` повинен мати `width` зі значенням `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%');
|
||||
```
|
||||
|
||||
Ваш елемент `.background-buildings` повинен мати `height` зі значенням `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98d2
|
||||
title: Крок 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вкладіть `div`, що має клас `bb1` в контейнер фонових будівель. Відкрийте свій файл `styles.css` та надайте `.bb1` властивості `width` зі значенням `10%` та `height` зі значенням `70%`. «bb» означає «background building» (фонова будівля); це буде ваша перша будівля.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити новий елемент `div`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div').length, 2);
|
||||
```
|
||||
|
||||
Ви повинні надати новому `div` клас `bb1`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1'));
|
||||
```
|
||||
|
||||
Ви повинні використати селектор класу `.bb1` для стилізації елемента.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1'));
|
||||
```
|
||||
|
||||
Ви повинні надати елементу `.bb1` властивість `width` зі значенням `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%');
|
||||
```
|
||||
|
||||
Ви повинні надати елементу `.bb1` властивість `height` зі значенням `70%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div class="background-buildings"></div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98d3
|
||||
title: Крок 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вкладіть чотири елементи `div` в контейнер `.bb1`. Надайте їм класи `bb1a`, `bb1b`, `bb1c` та `bb1d`, за таким порядком. Ця будівля складатиметься з чотирьох секцій.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити чотири нові елементи `div`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div')?.length, 6);
|
||||
```
|
||||
|
||||
Ви повинні надати одному з нових елементів `div` клас `bb1a`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1a'));
|
||||
```
|
||||
|
||||
Ви повинні надати одному з нових елементів `div` клас `bb1b`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1b'));
|
||||
```
|
||||
|
||||
Ви повинні надати одному з нових елементів `div` клас `bb1c`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1c'));
|
||||
```
|
||||
|
||||
Ви повинні надати одному з нових елементів `div` клас `bb1d`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1d'));
|
||||
```
|
||||
|
||||
Ви повинні розмістити нові елементи `div` в правильному порядку.
|
||||
|
||||
```js
|
||||
function __t(a, b) {
|
||||
return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
|
||||
}
|
||||
assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d'));
|
||||
```
|
||||
|
||||
Ви повинні розмістити нові елементи `div` в межах елемента `.bb1`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
--fcc-editable-region--
|
||||
<div class="bb1"></div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98d5
|
||||
title: Крок 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Надайте своєму елементу `.bb1` наступні властивості стилю: `display: flex;`, `flex-direction: column;` та `align-items: center;`. Це зцентрує частини будівлі з допомогою «flex» або «flexbox». Детальніше про це ви дізнаєтесь в іншому проєкті.
|
||||
|
||||
# --hints--
|
||||
|
||||
В `.bb1` не потрібно змінювати властивості `width` або `height`.
|
||||
|
||||
```js
|
||||
const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
|
||||
assert.equal(bb1Style?.width, '10%');
|
||||
assert.equal(bb1Style?.height, '70%');
|
||||
```
|
||||
|
||||
Ви повинні надати елементу `.bb1` властивість `display` зі значенням `flex`.
|
||||
|
||||
```js
|
||||
const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
|
||||
assert.equal(bb1Style?.display, 'flex');
|
||||
```
|
||||
|
||||
Ви повинні надати елементу `.bb1` властивість `flex-direction` зі значенням `column`.
|
||||
|
||||
```js
|
||||
const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
|
||||
assert.equal(bb1Style?.flexDirection, 'column');
|
||||
```
|
||||
|
||||
Ви повинні надати елементу `.bb1` властивість `align-items` зі значенням `center`.
|
||||
|
||||
```js
|
||||
const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
|
||||
assert.equal(bb1Style?.alignItems, 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98d7
|
||||
title: Крок 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Щоб використати змінну, обгорніть назву змінної в дужки з `var` перед ними, ось так: `var(--variable-name)`. Додайте свою змінну як значення властивості `background-color` класу `.bb1a`. Будь-яке надане значення змінної буде застосовано до будь-якої властивості, в якій її використано. В цьому разі ваша змінна має значення `#999`. Тому `#999` використовуватиметься як значення для властивості `background-color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Потрібно встановити `background-color` елемента `bb1a`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor)
|
||||
```
|
||||
|
||||
Ви повинні використати `var(--building-color1)`, щоб встановити `background-color` елемента `.bb1a`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background-color', true), 'var(--building-color1)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #999;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,124 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98d8
|
||||
title: Крок 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Використайте ту саму змінну як `background-color` класів `.bb1b`, `.bb1c` та `.bb1d`, щоб заповнити решту будівлі.
|
||||
|
||||
# --hints--
|
||||
|
||||
Потрібно встановити `background-color` елемента `bb1b`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor)
|
||||
```
|
||||
|
||||
Ви повинні використати `var(--building-color1)`, щоб встановити `background-color` елемента `.bb1b`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.getPropVal('background-color', true), 'var(--building-color1)');
|
||||
```
|
||||
|
||||
Потрібно встановити `background-color` елемента `bb1c`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor)
|
||||
```
|
||||
|
||||
Ви повинні використати `var(--building-color1)`, щоб встановити `background-color` елемента `.bb1c`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.getPropVal('background-color', true), 'var(--building-color1)');
|
||||
```
|
||||
|
||||
Потрібно встановити `background-color` елемента `bb1d`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor)
|
||||
```
|
||||
|
||||
Ви повинні використати `var(--building-color1)`, щоб встановити `background-color` елемента `.bb1d`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background-color', true), 'var(--building-color1)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #999;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98da
|
||||
title: Крок 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ваша перша будівля зараз має досить хороший вигляд. Вкладіть три нових елементи `div` в контейнер `background-buildings` та надайте їм класи `bb2`, `bb3` і `bb4`, за таким порядком. Це будуть ще три будівлі для заднього плану.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити `div` з класом `bb2`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb2'));
|
||||
```
|
||||
|
||||
Ви повинні створити `div` з класом `bb3`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb3'));
|
||||
```
|
||||
|
||||
Ви повинні створити `div` з класом `bb4`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb4'));
|
||||
```
|
||||
|
||||
Ви повинні створити три нові елементи `div`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div')?.length, 9);
|
||||
```
|
||||
|
||||
Ви повинні розмістити ці елементи `div` в межах елемента `.background-buildings`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4);
|
||||
```
|
||||
|
||||
Ви повинні розмістити елементи в правильному порядку.
|
||||
|
||||
```js
|
||||
function __t(a, b) {
|
||||
return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
|
||||
}
|
||||
assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98db
|
||||
title: Крок 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Надайте новим будівлям властивості `width` та `height`: `10%` та `50%` для `.bb2`, `10%` та `55%` для `.bb3`, `11%` та `58%` для `.bb4`. Для цього проєкту ви використовуватимете майже всі одиниці, засновані на відсотках, та трохи flexbox, тому все буде повністю адаптивним.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `.bb2` властивість `width` зі значенням `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%');
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb2` властивість `height` зі значенням `50%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%');
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb3` властивість `width` зі значенням `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%');
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb3` властивість `height` зі значенням `55%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%');
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb4` властивість `width` зі значенням `11%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%');
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb4` властивість `height` зі значенням `58%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div class="bb4"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98dc
|
||||
title: Крок 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Зараз будівлі стоять одна на одній. Додайте властивості `display: flex;`, `align-items: flex-end;` та `justify-content: space-evenly;` до класу `background-buildings`, щоб це виправити. Це знову використовуватиме flexbox для рівномірного розміщення будівель через нижню частину елемента.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати `display` зі значенням `flex` до класу `background-buildings`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex');
|
||||
```
|
||||
|
||||
Ви повинні додати `align-items` зі значенням `flex-end` до класу `background-buildings`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end');
|
||||
```
|
||||
|
||||
Ви повинні додати `justify-content` зі значенням `space-evenly` до класу `background-buildings`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div class="bb4"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98dd
|
||||
title: Крок 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Між будівлями забагато місця. Стисніть їх разом, додавши два порожні елементи `div` в верхній частині елемента `background-buildings`, ще два внизу та ще один між `.bb3` і `.bb4`. Вони будуть додані як рівномірно розташовані елементи по всьому контейнеру, переміщаючи будівлі ближче до центру.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати два нових елементи `div` перед елементом `.bb1`.
|
||||
|
||||
```js
|
||||
const bBuildings = document.querySelector('.background-buildings')?.children;
|
||||
assert(![...bBuildings?.[0]?.classList]?.includes('bb1'));
|
||||
assert(![...bBuildings?.[1]?.classList]?.includes('bb1'));
|
||||
```
|
||||
|
||||
Ви повинні додати один новий елемент `div` між елементами `.bb3` та `.bb4`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling);
|
||||
```
|
||||
|
||||
Ви повинні додати два нових елементи `div` після елемента `.bb4`.
|
||||
|
||||
```js
|
||||
const bb4 = document.querySelector('.bb4');
|
||||
assert.exists(bb4?.nextElementSibling);
|
||||
assert.exists(bb4?.nextElementSibling?.nextElementSibling);
|
||||
```
|
||||
|
||||
Ви повинні додати 5 нових елементів `div`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div')?.length, 14);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div class="background-buildings">
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div class="bb4"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98de
|
||||
title: Крок 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Створіть нову змінну під іншою та назвіть її `--building-color2` та надайте їй значення `#66cc99`. Потім встановіть її як `background-color` в `.bb2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні визначити нову змінну з назвою `--building-color2`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2'));
|
||||
```
|
||||
|
||||
Ви повинні надати `--building-color2` значення `#66cc99`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99');
|
||||
```
|
||||
|
||||
Ви повинні встановити властивість `background-color` на `.bb2`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor);
|
||||
```
|
||||
|
||||
Ви повинні встановити `background-color`, використовуючи змінну `--building-color2`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,124 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98df
|
||||
title: Крок 23
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Це не спрацювало. Ви повинні додати резервне значення до змінної, поставивши його як друге значення, де ви використовуєте змінну, ось так: `var(--variable-name, fallback-value)`. Властивість використовуватиме резервне значення, якщо виникне проблема зі змінною. Додайте резервне значення `green` до `background-color` елемента `.bb2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати резервне значення `green` до властивості `background-color`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2,green)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,147 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98e4
|
||||
title: Крок 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Фонові будівлі починають виглядати досить добре. Створіть новий `div` під елементом `background-buildings` та надайте йому клас `foreground-buildings`. Це буде ще один контейнер для більшої кількості будівель.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити новий елемент `div`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div')?.length, 15);
|
||||
```
|
||||
|
||||
Новий `div` повинен йти після елемента `div.background-buildings`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.background-buildings + div'));
|
||||
```
|
||||
|
||||
Ваш новий `div` повинен мати клас `foreground-buildings`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.foreground-buildings'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98e5
|
||||
title: Крок 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вам потрібно, щоб контейнер будівель на передньому плані знаходився безпосередньо поверх елемента фонових будівель. Надайте йому `width` та `height` на `100%`, встановіть `position` на `absolute` та `top` на `0`. Це зробить його таким самим розміром, як тіло, та перемістить його початок в верхній лівий кут.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні використати селектор `.foreground-buildings`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
|
||||
```
|
||||
|
||||
Ви повинні надати елементу `.foreground-buildings` властивість `width` зі значенням `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%');
|
||||
```
|
||||
|
||||
Ви повинні надати елементу `.foreground-buildings` властивість `height` зі значенням `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%');
|
||||
```
|
||||
|
||||
Ви повинні надати елементу `.foreground-buildings` властивість `position` зі значенням `absolute`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute');
|
||||
```
|
||||
|
||||
Ви повинні надати елементу `.foreground-buildings` властивість `top` зі значенням `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings"></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,192 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98e6
|
||||
title: Крок 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вкладіть шість елементів `div` в `.foreground-buildings` та надайте їм класи від `fb1` до `fb6`, за таким порядком. «fb» означає «foreground building». Це будуть ще шість будівель для переднього плану.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити новий `div` класу `fb1`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.fb1'));
|
||||
```
|
||||
|
||||
Ви повинні створити новий `div` класу `fb2`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.fb2'));
|
||||
```
|
||||
|
||||
Ви повинні створити новий `div` класу `fb3`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.fb3'));
|
||||
```
|
||||
|
||||
Ви повинні створити новий `div` класу `fb4`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.fb4'));
|
||||
```
|
||||
|
||||
Ви повинні створити новий `div` класу `fb5`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.fb5'));
|
||||
```
|
||||
|
||||
Ви повинні створити новий `div` класу `fb6`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.fb6'));
|
||||
```
|
||||
|
||||
Ви повинні розмістити ці нові елементи `div` в межах елемента `.foreground-buildings`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.foreground-buildings > div.fb1'));
|
||||
assert.exists(document.querySelector('div.foreground-buildings > div.fb2'));
|
||||
assert.exists(document.querySelector('div.foreground-buildings > div.fb3'));
|
||||
assert.exists(document.querySelector('div.foreground-buildings > div.fb4'));
|
||||
assert.exists(document.querySelector('div.foreground-buildings > div.fb5'));
|
||||
assert.exists(document.querySelector('div.foreground-buildings > div.fb6'));
|
||||
```
|
||||
|
||||
Ви повинні розмістити нові елементи `div` в правильному порядку.
|
||||
|
||||
```js
|
||||
function __t(a, b) {
|
||||
return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
|
||||
}
|
||||
assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="foreground-buildings"></div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,253 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98e7
|
||||
title: Крок 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Надайте шести новим елементам такі значення `width` та `height`: `10%` та `60%` для `.fb1`, `10%` та `40%` для `.fb2`, `10%` та `35%` для `.fb3`, `8%` та `45%` для `.fb4`, `10%` та `33%` для `.fb5`, `9%` та `38%` для `.fb6`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити селектор `.fb1`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1'));
|
||||
```
|
||||
|
||||
Ви повинні надати селектору `.fb1` властивість `width` зі значенням `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%');
|
||||
```
|
||||
|
||||
Ви повинні надати селектору `.fb1` властивість `height` зі значенням `60%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%');
|
||||
```
|
||||
|
||||
Ви повинні створити селектор `.fb2`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2'));
|
||||
```
|
||||
|
||||
Ви повинні надати селектору `.fb2` властивість `width` зі значенням `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%');
|
||||
```
|
||||
|
||||
Ви повинні надати селектору `.fb2` властивість `height` зі значенням `40%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%');
|
||||
```
|
||||
|
||||
Ви повинні створити селектор `.fb3`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3'));
|
||||
```
|
||||
|
||||
Ви повинні надати селектору `.fb3` властивість `width` зі значенням `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%');
|
||||
```
|
||||
|
||||
Ви повинні надати селектору `.fb3` властивість `height` зі значенням `35%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%');
|
||||
```
|
||||
|
||||
Ви повинні створити селектор `.fb4`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4'));
|
||||
```
|
||||
|
||||
Ви повинні надати селектору `.fb4` властивість `width` зі значенням `8%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%');
|
||||
```
|
||||
|
||||
Ви повинні надати селектору `.fb4` властивість `height` зі значенням `45%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%');
|
||||
```
|
||||
|
||||
Ви повинні створити селектор `.fb5`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5'));
|
||||
```
|
||||
|
||||
Ви повинні надати селектору `.fb5` властивість `width` зі значенням `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%');
|
||||
```
|
||||
|
||||
Ви повинні надати селектору `.fb5` властивість `height` зі значенням `33%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%');
|
||||
```
|
||||
|
||||
Ви повинні створити селектор `.fb6`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6'));
|
||||
```
|
||||
|
||||
Ви повинні надати селектору `.fb6` властивість `width` зі значенням `9%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%');
|
||||
```
|
||||
|
||||
Ви повинні надати селектору `.fb6` властивість `height` зі значенням `38%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,190 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98e8
|
||||
title: Крок 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Додайте ті самі властивості `display`, `align-items` та `justify-content` та їхні значення до `foreground-buildings`, які ви використовуєте для `background-buildings`. Знову ж таки, це використовуватиме Flexbox для рівномірного розміщення будівель через низ контейнера.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `.foreground-buildings` властивість `display` зі значенням `flex`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex');
|
||||
```
|
||||
|
||||
Ви повинні надати `.foreground-buildings` властивість `align-items` зі значенням `flex-end`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end');
|
||||
```
|
||||
|
||||
Ви повинні надати `.foreground-buildings` властивість `justify-content` зі значенням `space-evenly`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,223 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98e9
|
||||
title: Крок 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви повинні оптимізувати свій код. Перемістіть властивості `position` і `top` та їхні значення із `.foreground-buildings` до `.background-buildings`. Потім оберіть там обидва `.background-buildings` та `.foreground-buildings`, ефективно застосовуючи ці стилі до обох елементів. Ви можете використати кому (`,`) для розділення селекторів таким чином: `selector1, selector2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви не повинні видаляти декларацію `.foreground-buildings`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
|
||||
```
|
||||
|
||||
Ви повинні видалити властивість `position` із `.foreground-buildings`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position);
|
||||
```
|
||||
|
||||
Ви повинні видалити властивість `top` із `.foreground-buildings`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top);
|
||||
```
|
||||
|
||||
Ви повинні додати властивість `position` зі значенням `absolute` до `.background-buildings, foreground-buildings`.
|
||||
|
||||
```js
|
||||
function eitherOr() {
|
||||
const a = new __helpers.CSSHelp(document)
|
||||
return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
|
||||
}
|
||||
assert.equal(eitherOr()?.position, 'absolute');
|
||||
```
|
||||
|
||||
Ви повинні додати властивість `top` зі значенням `0` до `.background-buildings, foreground-buildings`.
|
||||
|
||||
```js
|
||||
function eitherOr() {
|
||||
const a = new __helpers.CSSHelp(document)
|
||||
return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
|
||||
}
|
||||
assert.equal(eitherOr()?.top, '0px');
|
||||
```
|
||||
|
||||
Ви повинні використати кому, щоб використати селектори `.foreground-buildings` та `.background-buildings` в одній декларації стилю.
|
||||
|
||||
```js
|
||||
function eitherOr() {
|
||||
const a = new __helpers.CSSHelp(document)
|
||||
return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
|
||||
}
|
||||
assert.exists(eitherOr());
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.background-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98ea
|
||||
title: Крок 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Тепер, коли ви це зробили, ви можете видалити стару декларацію `.foreground-buildings` та всі її властивості, оскільки вони більше непотрібні.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні видалити всю декларацію стилю `.foreground-buildings`.
|
||||
|
||||
```js
|
||||
assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,203 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98eb
|
||||
title: Крок 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вимальовується горизонт. Заповніть властивість `background-color` будівель переднього плану. Використайте свою змінну `--building-color1`, щоб заповнити `.fb3` та `.fb4`, `--building-color2` для `.fb5`, `--building-color3` для `.fb2` та `.fb6` та `--building-color4` для `.fb1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `.fb1` властивість `background-color`, використовуючи `--building-color4`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.getPropVal('background-color', true), 'var(--building-color4)');
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb2` властивість `background-color`, використовуючи `--building-color3`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.getPropVal('background-color', true), 'var(--building-color3)');
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb3` властивість `background-color`, використовуючи `--building-color1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.getPropVal('background-color', true), 'var(--building-color1)');
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb4` властивість `background-color`, використовуючи `--building-color1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.getPropVal('background-color', true), 'var(--building-color1)');
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb5` властивість `background-color`, використовуючи `--building-color2`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.getPropVal('background-color', true), 'var(--building-color2)');
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb6` властивість `background-color`, використовуючи `--building-color3`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.getPropVal('background-color', true), 'var(--building-color3)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@@ -0,0 +1,203 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98ec
|
||||
title: Крок 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Знову стисніть будівлі разом, додавши два порожні елементи `div` в верхній та нижній частині елемента `.foreground-buildings` і ще один між `.fb2` та `.fb3`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати два елементи `div` як перший дочірній елемент `.foreground-buildings`.
|
||||
|
||||
```js
|
||||
const bBuildings = document.querySelector('.background-buildings')?.children;
|
||||
assert(![...bBuildings?.[0]?.classList]?.includes('fb1'));
|
||||
assert(![...bBuildings?.[1]?.classList]?.includes('fb1'));
|
||||
```
|
||||
|
||||
Ви повинні додати один елемент `div` між `.fb2` та `.fb3`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling);
|
||||
```
|
||||
|
||||
|
||||
Ви повинні додати два елементи `div` як останні дочірні елементи `.foreground-buildings`.
|
||||
|
||||
```js
|
||||
const fb6 = document.querySelector('.fb6');
|
||||
assert.exists(fb6?.nextElementSibling);
|
||||
assert.exists(fb6?.nextElementSibling?.nextElementSibling);
|
||||
```
|
||||
|
||||
Ви повинні додати 5 нових елементів `div`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div')?.length, 26);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="foreground-buildings">
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,202 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98ed
|
||||
title: Крок 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Перемістіть `.fb4` відносно того місця, де воно знаходиться зараз, додавши `position` зі значенням `relative` та `left` зі значенням `10%` до нього. Зробіть те саме для `.fb5`, але використайте `right` замість `left`. Це прикриє решту білого простору між будівлями.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `.fb4` властивість `position` зі значенням `relative`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative');
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb4` властивість `left` зі значенням `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%');
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb5` властивість `position` зі значенням `relative`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative');
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb5` властивість `right` зі значенням `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,196 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98ee
|
||||
title: Крок 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ваш код вже починає бути досить довгим. Додайте коментар над класом `.fb1` з написом `FOREGROUND BUILDINGS - "fb" stands for "foreground building"`, щоб допомогти людям зрозуміти ваш код. Над класом `.bb1` додайте ще один коментар з написом `BACKGROUND BUILDINGS - "bb" stands for "background building"`. Якщо ви не пам’ятаєте, коментарі в CSS виглядають ось так: `/* Comment here */`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати коментар `BACKGROUND BUILDINGS - "bb" stands for "background building"` над селектором `.bb1`.
|
||||
|
||||
```js
|
||||
assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code));
|
||||
```
|
||||
|
||||
Ви повинні додати коментар `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` над селектором `.fb1`.
|
||||
|
||||
```js
|
||||
assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98ef
|
||||
title: Крок 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Створіть нову змінну в `:root` з назвою `--window-color1` та надайте їй значення `black`. Це буде вторинний колір для фіолетових будівель.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити нову змінну в `:root` з назвою `--window-color1`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1'));
|
||||
```
|
||||
|
||||
Ви повинні надати змінній `--window-color1` значення `black`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,218 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98f0
|
||||
title: Крок 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Градієнти в CSS – це спосіб переходу між кольорами на відстань елемента. Вони застосовуються до властивості `background`, а синтаксис виглядає ось так:
|
||||
|
||||
```css
|
||||
gradient-type(
|
||||
color1,
|
||||
color2
|
||||
);
|
||||
```
|
||||
|
||||
В прикладі `color1` – суцільний вгорі, `color2` — суцільний внизу, а посередині рівномірно переходить від одного до іншого. В `.bb1a` додайте градієнт типу `linear-gradient` до властивості `background` з `--building-color1` як перший колір та `--window-color1` як другий.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні застосувати `background` до `.bb1a`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
|
||||
```
|
||||
|
||||
Ви повинні надати `background` властивість `linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
|
||||
```
|
||||
|
||||
Ви повинні надати `background` властивість `linear-gradient`, починаючи з `--building-color1`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
|
||||
```
|
||||
|
||||
Ви повинні надати `background` властивість `linear-gradient`, закінчуючи на `--window-color1`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,223 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98f1
|
||||
title: Крок 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Було б добре додати той самий градієнт до двох наступних секцій. Замість цього створіть новий селектор класу з назвою `bb1-window` та перемістіть властивості `height` і `background` та їхні значення з `.bb1a` до нового селектора класу.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити новий селектор класу з назвою `bb1-window`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window'));
|
||||
```
|
||||
|
||||
Ви повинні перемістити властивість `height` та її значення із `.bb1a` до `.bb1-window`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%');
|
||||
```
|
||||
|
||||
Ви повинні перемістити властивість `background` та її значення із `.bb1a` до `.bb1-window`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
|
||||
```
|
||||
|
||||
Ви не повинні переміщувати властивість `background-color` із `.bb1a`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
|
||||
```
|
||||
|
||||
Ви не повинні переміщувати властивість `width` із `.bb1a`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,237 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98f2
|
||||
title: Крок 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Додайте новий клас `bb1-window` до елементів `.bb1a`, `.bb1b` та `.bb1c`. Це застосує до них градієнт.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви не повинні видаляти клас `bb1a`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1a'));
|
||||
```
|
||||
|
||||
Ви повинні додати клас `bb1-window` до елемента `.bb1a`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1a.bb1-window'));
|
||||
```
|
||||
|
||||
Ви не повинні видаляти клас `bb1b`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1b'));
|
||||
```
|
||||
|
||||
Ви повинні додати клас `bb1-window` до елемента `.bb1b`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1b.bb1-window'));
|
||||
```
|
||||
|
||||
Ви не повинні видаляти клас `bb1c`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1c'));
|
||||
```
|
||||
|
||||
Ви повинні додати клас `bb1-window` до елемента `.bb1c`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1c.bb1-window'));
|
||||
```
|
||||
|
||||
Ви не повинні змінювати елемент `.bb1d`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb1d'));
|
||||
assert.notExists(document.querySelector('div.bb1d.bb1-window'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb1">
|
||||
<div class="bb1a"></div>
|
||||
<div class="bb1b"></div>
|
||||
<div class="bb1c"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,222 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98f3
|
||||
title: Крок 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вам більше не потрібні властивості `height` або `background-color` в `.bb1a`, `.bb1b` або `.bb1c`, тож видаліть їх.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні видалити `background-color` із `.bb1a`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
|
||||
```
|
||||
|
||||
Ви повинні видалити властивість `height` із `.bb1b`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height);
|
||||
```
|
||||
|
||||
Ви повинні видалити властивість `background-color` із `.bb1b`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor);
|
||||
```
|
||||
|
||||
Ви повинні видалити властивість `height` із `.bb1c`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height);
|
||||
```
|
||||
|
||||
Ви повинні видалити властивість `background-color` із `.bb1c`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,227 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98f4
|
||||
title: Крок 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Градієнти можуть використовувати скільки завгодно кольорів, ось так:
|
||||
|
||||
```css
|
||||
gradient-type(
|
||||
color1,
|
||||
color2,
|
||||
color3
|
||||
);
|
||||
```
|
||||
|
||||
Додайте `linear-gradient` до `.bb1d` з `orange` як перший колір, `--building-color1` як другий та `--window-color1` як третій. Не забудьте використати градієнт на властивості `background`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні встановити властивість `background` на `.bb1d`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background);
|
||||
```
|
||||
|
||||
Ви повинні надати властивості `background` значення `linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient');
|
||||
```
|
||||
|
||||
Ви повинні використати `orange` як перший колір в `linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange');
|
||||
```
|
||||
|
||||
Ви повинні використати `--building-color1` як другий колір в `linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)');
|
||||
```
|
||||
|
||||
Ви повинні використати `--window-color1` як третій колір в `linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,198 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98f5
|
||||
title: Крок 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Він трохи прихований за будівлями на передньому плані, але ви можете побачити триколірний градієнт. Оскільки ви використовуєте його зараз, видаліть властивість `background-color` з `.bb1d`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні видалити властивість `background-color` та її значення із `.bb1d`
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background-color: var(--building-color1);
|
||||
background: linear-gradient(
|
||||
orange,
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,207 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98f6
|
||||
title: Крок 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете вказати, де бажаєте завершити градієнтний перехід, додавши його до кольору таким чином:
|
||||
|
||||
```css
|
||||
gradient-type(
|
||||
color1,
|
||||
color2 20%,
|
||||
color3
|
||||
);
|
||||
```
|
||||
|
||||
Тут він перейде від `color1` до `color2` між `0%` та `20%` елемента, а потім перейде до `color3` для решти. Додайте `80%` до кольору `--building-color1` градієнта `.bb1d`, щоб побачити його в дії.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати значення `80%` до кольору `--building-color1` в `linear-gradient` елемента `.bb1d`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
orange,
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,203 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98f7
|
||||
title: Крок 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Видаліть `orange` із градієнта `.bb1d` та змініть `80%` на `50%`. Це зробить `--building-color1` однотонним для верхньої половини, а потім перейде до `--window-color1` для нижньої половини.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні видалити `orange` із `linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange');
|
||||
```
|
||||
|
||||
Ви повинні змінити тепер перший колір `linear-gradient` на перехід на `50%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2"></div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
orange,
|
||||
var(--building-color1) 80%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,210 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98f8
|
||||
title: Крок 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вкладіть два нових елементи `div` в `.bb2` та надайте їм класи `bb2a` і `bb2b`, за таким порядком. Це будуть дві секції для цієї будівлі.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати два елементи `div` до `.bb2`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.bb2')?.children?.length, 2);
|
||||
```
|
||||
|
||||
Ви повинні надати першому `div` клас `bb2a`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb2a'));
|
||||
```
|
||||
|
||||
Ви повинні надати другому `div` клас `bb2b`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.bb2b'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb2"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,207 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98f9
|
||||
title: Крок 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Встановіть елементу `.bb2b` властивості `width` та `height` на `100%`, щоб він заповнював контейнер будівлі. Ви додасте щось зверху трохи пізніше.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `.bb2b` властивість `width` зі значенням `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%');
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb2b` властивість `height` зі значенням `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,211 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98fa
|
||||
title: Крок 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Створіть нову змінну в `:root` з назвою `window-color2` зі значенням `#8cd9b3`. Це буде використано як вторинний колір для цієї будівлі.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити нову змінну з назвою `window-color2` в `:root`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2'));
|
||||
```
|
||||
|
||||
Ви повинні надати `window-color2` значення `#8cd9b3`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,240 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98fb
|
||||
title: Крок 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Градієнтні переходи часто поступово змінюються з одного кольору на інший. Ви можете зробити суцільну лінію, ось так:
|
||||
|
||||
```css
|
||||
linear-gradient(
|
||||
var(--first-color) 0%,
|
||||
var(--first-color) 40%,
|
||||
var(--second-color) 40%,
|
||||
var(--second-color) 80%
|
||||
);
|
||||
```
|
||||
|
||||
Додайте `linear-gradient` до `.bb2b`, який використовує `--building-color2` від `0%` до `6%` та `--window-color2` від `6%` до `9%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати елементу `.bb2b` властивість `background`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background);
|
||||
```
|
||||
|
||||
Ви повинні використати `linear-gradient` на `background`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient");
|
||||
```
|
||||
|
||||
Ви повинні використати `--building-color2` від `0%` до `6%`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/);
|
||||
```
|
||||
|
||||
Ви повинні використати `--window-color2` від `6%` до `9%`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%");
|
||||
```
|
||||
|
||||
`.bb2b` повинен мати `linear-gradient`, що переходить від `--building-color2` від `0%` до `6%` та `--window-color2` від `6%` до `9%`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,211 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98fc
|
||||
title: Крок 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете побачити різку зміну кольору в верхній частині секції. Змініть тип градієнта з `linear-gradient` на `repeating-linear-gradient` для цієї секції. Це змусить чотири кольори вашого градієнта повторюватися, поки він не дійде до нижньої частини елемента, даючи вам декілька смуг та позбавляючи від необхідності додавати купу елементів для їх створення.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні змінити властивість `background` елемента `.bb2b` з `linear-gradient` на `repeating-linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,209 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98fd
|
||||
title: Крок 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Протягом декількох наступних кроків ви будете використовувати деякі трюки з CSS краями, щоб перетворити секцію `.bb2a` на трикутник в верхній частині будівлі. Спочатку видаліть `background-color` з `.bb2`, оскільки він вам більше не потрібен.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні видалити `background-color` із `.bb2`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
background-color: var(--building-color2);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,260 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98fe
|
||||
title: Крок 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Додайте ці властивості до `.bb2a`:
|
||||
|
||||
```css
|
||||
margin: auto;
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
border-top: 1vw solid #000;
|
||||
border-bottom: 1vw solid #000;
|
||||
border-left: 1vw solid #999;
|
||||
border-right: 1vw solid #999;
|
||||
```
|
||||
|
||||
Додавши їх, ви побачите, як товстий кордон на елементі дає вам деякі кути, де зустрічаються дві сторони. Ви будете використовувати цей нижній кордон як верхню частину будівлі.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `.bb2a` властивість `margin` зі значенням `auto`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto");
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb2a` властивість `width` зі значенням `auto`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw");
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb2a` властивість `height` зі значенням `5vw`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw");
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb2a` властивість `border-top` зі значенням `1vw solid #000`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)");
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb2a` властивість `border-bottom` зі значенням `1vw solid #000`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)");
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb2a` властивість `border-left` зі значенням `1vw solid #999`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)");
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb2a` властивість `border-right` зі значенням `1vw solid #999`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,238 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e98ff
|
||||
title: Крок 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Потім видаліть `width` і `height` з `.bb2a` та змініть `border-left` і `border-right` на `5vw` замість `1vw`. Тепер елемент матиме нульовий розмір, а кордони зійдуться посередині.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні видалити `width` із `.bb2a`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width);
|
||||
```
|
||||
|
||||
Ви повинні видалити `height` із `.bb2a`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height);
|
||||
```
|
||||
|
||||
Ви повинні змінити `border-left` на використання `5vw`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)");
|
||||
```
|
||||
|
||||
Ви повинні змінити `border-right` на використання `5vw`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2a {
|
||||
margin: auto;
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
border-top: 1vw solid #000;
|
||||
border-bottom: 1vw solid #000;
|
||||
border-left: 1vw solid #999;
|
||||
border-right: 1vw solid #999;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,224 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9900
|
||||
title: Крок 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Потім змініть два `#999` елемента `.bb2a` на `transparent`. Це зробить лівий та правий кордони невидимими.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні змінити `border-left` на використання `transparent`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent");
|
||||
```
|
||||
|
||||
Ви повинні змінити `border-right` на використання `transparent`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2a {
|
||||
margin: auto;
|
||||
border-top: 1vw solid #000;
|
||||
border-bottom: 1vw solid #000;
|
||||
border-left: 5vw solid #999;
|
||||
border-right: 5vw solid #999;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,224 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9901
|
||||
title: Крок 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Видаліть властивості `margin` та `border-top` та їхні значення із `.bb2a`, щоб перетворити його на трикутник для верхньої частини будівлі.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні видалити `margin` із `.bb2a`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin);
|
||||
```
|
||||
|
||||
Ви повинні видалити `border-top` із `.bb2a`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2a {
|
||||
margin: auto;
|
||||
border-top: 1vw solid #000;
|
||||
border-bottom: 1vw solid #000;
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,227 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9902
|
||||
title: Крок 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Зрештою, у властивості `border-bottom` елемента `.bb2a` змініть `1vw` на `5vh` та змініть колір `#000` на свою змінну `--building-color2`. Ось, тепер це має чудовий вигляд! В будь-який час протягом виконання проєкту ви можете коментувати або видалити властивість `border`, яку ви додали до всього на початку, щоб побачити як виглядатимуть будівлі, коли вона буде видалена.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні змінити `border-bottom` на використання `5vh`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh");
|
||||
```
|
||||
|
||||
Ви повинні змінити `border-bottom` на використання `--building-color2`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)");
|
||||
```
|
||||
|
||||
`border-bottom` повинен бути `5vh solid var(--building-color2)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2a {
|
||||
border-bottom: 1vw solid #000;
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,223 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9903
|
||||
title: Крок 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
До наступної будівлі! Створіть нову змінну з назвою `--window-color3` в `:root` та надайте їй значення `#d98cb3`. Це буде вторинний колір для рожевих будівель.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні визначити нову змінну `--window-color3`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3"));
|
||||
```
|
||||
|
||||
Ви повинні надати `--window-color3` значення `#d98cb3`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,245 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9904
|
||||
title: Крок 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Наразі всі градієнти, які ви створили, йшли зверху вниз – це напрямок за замовчуванням. Ви можете вказати інший напрямок, додавши його перед своїми кольорами, ось так:
|
||||
|
||||
```css
|
||||
gradient-type(
|
||||
direction,
|
||||
color1,
|
||||
color2
|
||||
);
|
||||
```
|
||||
|
||||
Заповніть `.bb3`, використовуючи `repeating-linear-gradient`. Використайте `90deg` для напрямку, свій `building-color3` для перших двох кольорів та `window-color3` на `15%` для третього. Якщо ви не вказуєте відстань для кольору, він використовуватиме розумні значення. В цьому разі першими двома кольорами за замовчуванням будуть `0%` та `7.5%`, оскільки вони починаються з `0%`, а `7.5%` становить половину `15%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `.bb3` властивість `background`, використовуючи `repeating-linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient");
|
||||
```
|
||||
|
||||
Ви повинні використати `90deg` для напрямку в першому аргументі `repeating-linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
|
||||
```
|
||||
|
||||
Ви повинні використати `--building-color3` для перших двох кольорів.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)");
|
||||
```
|
||||
|
||||
Ви повинні використати `--window-color3` на `15%` для третього кольору.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,249 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9906
|
||||
title: Крок 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Наступна будівля складатиметься з трьох секцій. Вкладіть три елементи `div` в межах `.bb4`. Надайте їм класи `bb4a`, `bb4b` та `bb4c`, за таким порядком.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати три елементи `div` в межах `.bb4`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector("div.bb4")?.children?.length, 3);
|
||||
```
|
||||
|
||||
Ви повинні надати першому новому `div` клас `bb4a`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.bb4 > div.bb4a"));
|
||||
```
|
||||
|
||||
Ви повинні надати другому новому `div` клас `bb4b`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.bb4 > div.bb4a"));
|
||||
```
|
||||
|
||||
Ви повинні надати третьому новому `div` клас `bb4c`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.bb4 > div.bb4a"));
|
||||
```
|
||||
|
||||
Ви повинні розмістити нові елементи `div` в такому порядку: `.bb4a + .bb4b + .bb4c`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.bb4a + div.bb4b"));
|
||||
assert.exists(document.querySelector("div.bb4b + div.bb4c"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb4"></div>
|
||||
--fcc-editable-region--
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,258 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9907
|
||||
title: Крок 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Надайте новим елементам `div` наступні значення `width` та `height`: `3%` та `10%` для `.bb4a`, `80%` та `5%` для `.bb4b`, `100%` та `85%` для `.bb4c`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `.bb4a` властивість `width` зі значенням `3%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%");
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb4a` властивість `height` зі значенням `10%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%");
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb4b` властивість `width` зі значенням `80%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%");
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb4b` властивість `height` зі значенням `5%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%");
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb4c` властивість `width` зі значенням `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%");
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb4c` властивість `height` зі значенням `85%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,258 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9908
|
||||
title: Крок 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Видаліть властивість `background-color` та її значення із `.bb4` та додайте їх до трьох нових секцій `.bb4a`, `.bb4b` та `.bb4c`, щоб заповнювалися лише секції.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні видалити `background-color` із `.bb4`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor);
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb4a` властивість `background-color` зі значенням `--building-color4`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)");
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb4b` властивість `background-color` зі значенням `--building-color4`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)");
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb4c` властивість `background-color` зі значенням `--building-color4`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,245 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9909
|
||||
title: Крок 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вам потрібно, щоб `.bb4` мав спільні властивості з `.bb1`, які центрують секції. Замість того, щоб дублювати цей код, створіть новий клас над коментарем фонової будівлі з назвою `building-wrap`. Наразі залиште його порожнім; цей клас буде використатися в кількох місцях, щоб заощадити вам трохи кодування.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити нову декларацію класу з назвою `building-wrap`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,277 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e990a
|
||||
title: Крок 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Перемістіть властивості `display`, `flex-direction` і `align-items` та їхні значення із `.bb1` до нового класу `building-wrap`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні видалити `display` із `.bb1`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display);
|
||||
```
|
||||
|
||||
Ви повинні перемістити `display` зі значенням `flex` до `.building-wrap`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex");
|
||||
```
|
||||
|
||||
Ви повинні видалити `flex-direction` із `.bb1`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection);
|
||||
```
|
||||
|
||||
Ви повинні перемістити `flex-direction` зі значенням `column` до `.building-wrap`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column");
|
||||
```
|
||||
|
||||
Ви повинні видалити `align-items` із `.bb1`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems);
|
||||
```
|
||||
|
||||
Ви повинні перемістити `align-items` зі значенням `center` до `.building-wrap`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.building-wrap {
|
||||
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,254 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e990b
|
||||
title: Крок 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Додайте новий клас `building-wrap` до елементів `.bb1` та `.bb4`. Це застосує властивості центрування до будівель, яким це потрібно.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати клас `building-wrap` до елемента `.bb1`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.bb1.building-wrap"));
|
||||
```
|
||||
|
||||
Ви повинні додати клас `building-wrap` до елемента `.bb4`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.bb4.building-wrap"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb1">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4">
|
||||
--fcc-editable-region--
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,253 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e990c
|
||||
title: Крок 68
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Створіть нову змінну з назвою `--window-color4` в `:root` та надайте їй значення `#8cb3d9`. Це буде вторинний колір для останньої фонової будівлі.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні визначити нову змінну `--window-color4`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4"));
|
||||
```
|
||||
|
||||
Ви повинні надати `--window-color4` значення `#8cb3d9`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c"></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,255 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e990d
|
||||
title: Крок 69
|
||||
challengeType: 0
|
||||
dashedName: step-69
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вкладіть чотири нових елементи `div` в `.bb4c`, надайте їм клас `bb4-window`. Це будуть вікна для цієї будівлі.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати чотири елементи `div` до `.bb4c`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector(".bb4c")?.children?.length, 4);
|
||||
```
|
||||
|
||||
Ви повинні надати кожному новому `div` клас `bb4-window`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="bb4c"></div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,265 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e990e
|
||||
title: Крок 70
|
||||
challengeType: 0
|
||||
dashedName: step-70
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Надайте класу `bb4-window` властивість `width` зі значенням `18%`, `height` зі значенням `90%` та додайте свою змінну `--window-color4` як `background-color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `.bb4-window` властивість `width` зі значенням `18%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%");
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb4-window` властивість `height` зі значенням `90%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%");
|
||||
```
|
||||
|
||||
Ви повинні надати `.bb4-window` властивість `background-color` зі значенням `--window-color4`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,286 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e990f
|
||||
title: Крок 71
|
||||
challengeType: 0
|
||||
dashedName: step-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вікна розташовані одне на одному в лівій частині секції, позаду фіолетової будівлі. Додайте новий клас нижче `.building-wrap` з назвою `.window-wrap` та додайте до нього наступні властивості:
|
||||
|
||||
```css
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
```
|
||||
|
||||
Це буде використано в декількох місцях, щоб зцентрувати елементи вікна по вертикалі та рівномірно розмістити їх в батьківських елементах.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні створити селектор `.window-wrap`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap"));
|
||||
```
|
||||
|
||||
Ви повинні надати `.window-wrap` властивість `display` зі значенням `flex`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex");
|
||||
```
|
||||
|
||||
Ви повинні надати `.window-wrap` властивість `align-items` зі значенням `center`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center");
|
||||
```
|
||||
|
||||
Ви повинні надати `.window-wrap` властивість `justify-content` зі значенням `space-evenly`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1"></div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,291 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9911
|
||||
title: Крок 73
|
||||
challengeType: 0
|
||||
dashedName: step-73
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Має чудовий вигляд! До будівель на передньому плані! Перетворіть будівлю `.fb1` на три секції, вклавши в неї три нові елементи `div`. Надайте їм класи `fb1a`, `fb1b` та `fb1c`, за таким порядком.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати три елементи `div` в межах `.fb1`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector("div.fb1")?.children?.length, 3);
|
||||
```
|
||||
|
||||
Ви повинні надати першому новому `div` клас `fb1a`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb1 > div.fb1a"));
|
||||
```
|
||||
|
||||
Ви повинні надати другому новому `div` клас `fb1b`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb1 > div.fb1b"));
|
||||
```
|
||||
|
||||
Ви повинні надати третьому новому `div` клас `fb1c`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb1 > div.fb1c"));
|
||||
```
|
||||
|
||||
Ви повинні розмістити нові елементи `div` в такому порядку: `.fb1a + .fb1b + .fb1c`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb1a + div.fb1b"));
|
||||
assert.exists(document.querySelector("div.fb1b + div.fb1c"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb1"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,391 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9915
|
||||
title: Крок 106
|
||||
challengeType: 0
|
||||
dashedName: step-106
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вам більше не потрібен `background-color` для цієї будівлі, тому ви можете видалити цю властивість.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні видалити `background-color` із `.fb5`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a window-wrap">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4">
|
||||
<div class="fb4a"></div>
|
||||
<div class="fb4b">
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: #bb99ff;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb4a {
|
||||
border-top: 5vh solid transparent;
|
||||
border-left: 8vw solid var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4b {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
background-color: var(--building-color1);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fb4-window {
|
||||
width: 30%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--window-color1);
|
||||
margin: 10%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 5%,
|
||||
transparent 5%,
|
||||
transparent 10%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color2),
|
||||
var(--building-color2) 12%,
|
||||
var(--window-color2) 12%,
|
||||
var(--window-color2) 44%
|
||||
);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,297 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9916
|
||||
title: Крок 77
|
||||
challengeType: 0
|
||||
dashedName: step-77
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Не турбуйтеся про простір внизу, все буде переміщено вниз пізніше, коли ви додасте якусь висоту елемента в верхній частині будівлі.
|
||||
|
||||
Додайте `repeating-linear-gradient` до `.fb1c` з кутом `90deg`, свій `--building-color4` від `0%` до `10%` та `transparent` від `10%` до `15%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Для `.fb1c` потрібно надати `background` з `repeating-linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient");
|
||||
```
|
||||
|
||||
Ви повинні використати напрямок `90deg`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
|
||||
```
|
||||
|
||||
Ви повинні використати перший колір `--building-color4` від `0%` до `10%`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
|
||||
```
|
||||
|
||||
Ви повинні використати другий колір `transparent` від `10%` до `15%`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(transparent10%,transparent15%\)|transparent10%15%\))$/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,307 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9917
|
||||
title: Крок 78
|
||||
challengeType: 0
|
||||
dashedName: step-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете додати декілька градієнтів до елемента, розділяючи їх комами (`,`), ось так:
|
||||
|
||||
```css
|
||||
gradient1(
|
||||
colors
|
||||
),
|
||||
gradient2(
|
||||
colors
|
||||
);
|
||||
```
|
||||
|
||||
Додайте `repeating-linear-gradient` до `.fb1c` нижче того, що є; використайте свій `--building-color4` від `0%` до `10%` та `--window-color4` від `10%` і `90%`. Це заповнить простір позаду градієнта, який ви додали останнім.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви не повинні змінювати перший `repeating-linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/);
|
||||
```
|
||||
|
||||
Ви повинні додати `repeating-linear-gradient` з першим кольором `--building-color4` від `0%` до `10%`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
|
||||
```
|
||||
|
||||
Ви повинні використати другий колір `--window-color4` від `10%` до `90%`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(var\(--window-color4\)10%,var\(--window-color4\)90%\)|var\(--window-color4\)10%90%\))$/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
)
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,298 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9918
|
||||
title: Крок 79
|
||||
challengeType: 0
|
||||
dashedName: step-79
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви повинні використати ще деякі трюки з краями для верхньої секції. Додайте `border-bottom` зі значенням `7vh solid var(--building-color4)` до `.fb1a`. Внизу з’явиться кордон висотою `7vh`. Але оскільки елемент має нульовий розмір, він відображається лише як лінія шириною 2px від краю 1px, який є на всіх елементах.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `.fb1a` властивість `border-bottom`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom);
|
||||
```
|
||||
|
||||
Ви повинні використати `border-bottom` зі значенням `7vh solid var(--building-color4)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,301 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9919
|
||||
title: Крок 80
|
||||
challengeType: 0
|
||||
dashedName: step-80
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Коли ви збільшуєте розмір лівого та правого кордону, кордон внизу розширюватиметься на ширину комбінованої ширини лівого та правого кордону. Додайте `2vw solid transparent` як значення властивостей `border-left` та `border-right` елемента `.fb1a`. Вони будуть невидимі, але це зробить кордон внизу шириною `4vw`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `.fb1a` властивість `border-left` зі значенням `2vw solid transparent`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent");
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb1a` властивість `border-right` зі значенням `2vw solid transparent`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2"></div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,312 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e991a
|
||||
title: Крок 81
|
||||
challengeType: 0
|
||||
dashedName: step-81
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
До наступної будівлі! Вкладіть два елементи `div` в `.fb2` та надайте їм класи `fb2a` і `fb2b`, за таким порядком.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати два елементи `div` в `.fb2`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2);
|
||||
```
|
||||
|
||||
Ви повинні надати першому новому `div` клас `fb2a`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb2 > div.fb2a"));
|
||||
assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild);
|
||||
```
|
||||
|
||||
Ви повинні надати другому новому `div` клас `fb2b`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb2 > div.fb2b"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb2"></div>
|
||||
--fcc-editable-region--
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,317 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e991c
|
||||
title: Крок 83
|
||||
challengeType: 0
|
||||
dashedName: step-83
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вкладіть три елементи `div` в `.fb2b` та надайте їм клас `fb2-window`. Це будуть вікна для цієї частини будівлі.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати три елементи `div` в межах `.fb2b`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3);
|
||||
```
|
||||
|
||||
Ви повинні надати кожному з трьох нових елементів `div` клас `fb2-window`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb2b"></div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,315 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e991d
|
||||
title: Крок 84
|
||||
challengeType: 0
|
||||
dashedName: step-84
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Додайте свій клас `window-wrap` до `.fb2b`, щоб розмістити елементи нового вікна.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати клас `window-wrap` до `.fb2b`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb2b.window-wrap"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb2b">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,330 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9920
|
||||
title: Крок 87
|
||||
challengeType: 0
|
||||
dashedName: step-87
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Для `.fb2a` додайте `border-bottom` зі значенням `10vh solid var(--building-color3)` та `border-left` і `border-right` зі значенням `1vw solid transparent`. Цього разу трюк з кордоном створить форму в вигляді трапеції.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `.fb2a` властивість `border-bottom` зі значенням `10vh solid var(--building-color3)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)");
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb2a` властивість `border-left` зі значенням `1vw solid transparent`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent");
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb2a` властивість `border-right` зі значенням `1vw solid transparent`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3"></div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,348 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9921
|
||||
title: Крок 88
|
||||
challengeType: 0
|
||||
dashedName: step-88
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
В наступній будівлі вставте чотири елементи `div` в `.fb3` з класами `fb3a`, `fb3b`, знову `fb3a` та знову `fb3b`, за таким порядком. В цій будівлі буде чотири секції, причому дві верхні будуть майже такими ж, як дві нижні.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати чотири елементи `div` в `.fb3`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4);
|
||||
```
|
||||
|
||||
Ви повинні надати першому новому `div` клас `fb3a`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a"));
|
||||
```
|
||||
|
||||
Ви повинні надати другому новому `div` клас `fb3b`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b"));
|
||||
```
|
||||
|
||||
Ви повинні надати третьому новому `div` клас `fb3a`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a"));
|
||||
```
|
||||
|
||||
Ви повинні надати четвертому новому `div` клас `fb3b`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb3"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,347 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9922
|
||||
title: Крок 89
|
||||
challengeType: 0
|
||||
dashedName: step-89
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Надайте елементу `.fb3a` властивість `width` зі значенням `80%` та `height` зі значенням `15%`. Потім надайте елементу `.fb3b` властивість `width` зі значенням `100%` та `height` зі значенням `35%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `.fb3a` властивість `width` зі значенням `80%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%");
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb3a` властивість `height` зі значенням `15%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%");
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb3b` властивість `width` зі значенням `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%");
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb3b` властивість `height` зі значенням `35%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3">
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,348 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9923
|
||||
title: Крок 90
|
||||
challengeType: 0
|
||||
dashedName: step-90
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Видаліть властивість `background-color` та її значення із `.fb3` та додайте їх до `.fb3a` та `.fb3b`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні видалити `background-color` із `.fb3`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor);
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb3a` властивість `background-color` зі значенням `--building-color1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)");
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb3b` властивість `background-color` зі значенням `--building-color1`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3">
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
@@ -0,0 +1,340 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9924
|
||||
title: Крок 91
|
||||
challengeType: 0
|
||||
dashedName: step-91
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Додайте клас `building-wrap` до елемента `.fb3`, щоб зцентрувати секції.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати клас `building-wrap` до `.fb3`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div.fb3.building-wrap"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb3">
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,346 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9925
|
||||
title: Крок 92
|
||||
challengeType: 0
|
||||
dashedName: step-92
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Вкладіть три нових елементи `div` в перший елемент `.fb3a`. Надайте кожному клас `fb3-window`. Це будуть вікна для цієї секції.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні додати три елементи `div` в межах першого елемента `.fb3a`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3);
|
||||
```
|
||||
|
||||
Ви повинні надати кожному новому `div` клас `fb3-window`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
--fcc-editable-region--
|
||||
<div class="fb3a"></div>
|
||||
--fcc-editable-region--
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4"></div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: black;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
background-color: var(--building-color1);
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,381 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9930
|
||||
title: Крок 103
|
||||
challengeType: 0
|
||||
dashedName: step-103
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ця будівля матиме ще один трикутник зверху. Надайте верхній секції `border-top` зі значенням `5vh solid transparent` та `border-left` зі значенням `8vw`, `solid` і який використовує вашу змінну кольору будівлі як колір.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `.fb4a` властивість `border-top` зі значенням `5vh solid transparent`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent")
|
||||
```
|
||||
|
||||
Ви повинні надати `.fb4a` властивість `border-left` зі значенням `8vw solid var(--building-color1)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)")
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a window-wrap">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4">
|
||||
<div class="fb4a"></div>
|
||||
<div class="fb4b">
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: #bb99ff;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
.fb4b {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
background-color: var(--building-color1);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fb4-window {
|
||||
width: 30%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--window-color1);
|
||||
margin: 10%;
|
||||
}
|
||||
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
@@ -0,0 +1,396 @@
|
||||
---
|
||||
id: 5d822fd413a79914d39e9932
|
||||
title: Крок 104
|
||||
challengeType: 0
|
||||
dashedName: step-104
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
До наступної будівлі! До зеленої на передньому плані. Надайте їй `repeating-linear-gradient` з кольором вашої будівлі від `0%` до `5%` та `transparent` від `5%` до `10%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ви повинні надати `.fb5` властивість `background`.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background);
|
||||
```
|
||||
|
||||
Ви повинні надати `background` властивість `repeating-linear-gradient`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient");
|
||||
```
|
||||
|
||||
Ви повинні надати `repeating-linear-gradient` перший колір `--building-color2` від `0%` до `5%`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/);
|
||||
```
|
||||
|
||||
Ви повинні надати `repeating-linear-gradient` другий колір `transparent` від `5%` до `10%`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>City Skyline</title>
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="background-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="bb1 building-wrap">
|
||||
<div class="bb1a bb1-window"></div>
|
||||
<div class="bb1b bb1-window"></div>
|
||||
<div class="bb1c bb1-window"></div>
|
||||
<div class="bb1d"></div>
|
||||
</div>
|
||||
<div class="bb2">
|
||||
<div class="bb2a"></div>
|
||||
<div class="bb2b"></div>
|
||||
</div>
|
||||
<div class="bb3"></div>
|
||||
<div></div>
|
||||
<div class="bb4 building-wrap">
|
||||
<div class="bb4a"></div>
|
||||
<div class="bb4b"></div>
|
||||
<div class="bb4c window-wrap">
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
<div class="bb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="foreground-buildings">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="fb1 building-wrap">
|
||||
<div class="fb1a"></div>
|
||||
<div class="fb1b"></div>
|
||||
<div class="fb1c"></div>
|
||||
</div>
|
||||
<div class="fb2">
|
||||
<div class="fb2a"></div>
|
||||
<div class="fb2b window-wrap">
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
<div class="fb2-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="fb3 building-wrap">
|
||||
<div class="fb3a window-wrap">
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
<div class="fb3-window"></div>
|
||||
</div>
|
||||
<div class="fb3b"></div>
|
||||
<div class="fb3a"></div>
|
||||
<div class="fb3b"></div>
|
||||
</div>
|
||||
<div class="fb4">
|
||||
<div class="fb4a"></div>
|
||||
<div class="fb4b">
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
<div class="fb4-window"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fb5"></div>
|
||||
<div class="fb6"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
:root {
|
||||
--building-color1: #aa80ff;
|
||||
--building-color2: #66cc99;
|
||||
--building-color3: #cc6699;
|
||||
--building-color4: #538cc6;
|
||||
--window-color1: #bb99ff;
|
||||
--window-color2: #8cd9b3;
|
||||
--window-color3: #d98cb3;
|
||||
--window-color4: #8cb3d9;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-buildings, .foreground-buildings {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.building-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.window-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
|
||||
.bb1 {
|
||||
width: 10%;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.bb1a {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.bb1b {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.bb1c {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.bb1d {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1) 50%,
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb1-window {
|
||||
height: 10%;
|
||||
background: linear-gradient(
|
||||
var(--building-color1),
|
||||
var(--window-color1)
|
||||
);
|
||||
}
|
||||
|
||||
.bb2 {
|
||||
width: 10%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.bb2a {
|
||||
border-bottom: 5vh solid var(--building-color2);
|
||||
border-left: 5vw solid transparent;
|
||||
border-right: 5vw solid transparent;
|
||||
}
|
||||
|
||||
.bb2b {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
var(--building-color2),
|
||||
var(--building-color2) 6%,
|
||||
var(--window-color2) 6%,
|
||||
var(--window-color2) 9%
|
||||
);
|
||||
}
|
||||
|
||||
.bb3 {
|
||||
width: 10%;
|
||||
height: 55%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color3),
|
||||
var(--building-color3),
|
||||
var(--window-color3) 15%
|
||||
);
|
||||
}
|
||||
|
||||
.bb4 {
|
||||
width: 11%;
|
||||
height: 58%;
|
||||
}
|
||||
|
||||
.bb4a {
|
||||
width: 3%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4b {
|
||||
width: 80%;
|
||||
height: 5%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4c {
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.bb4-window {
|
||||
width: 18%;
|
||||
height: 90%;
|
||||
background-color: var(--window-color4);
|
||||
}
|
||||
|
||||
/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
|
||||
.fb1 {
|
||||
width: 10%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.fb1a {
|
||||
border-bottom: 7vh solid var(--building-color4);
|
||||
border-left: 2vw solid transparent;
|
||||
border-right: 2vw solid transparent;
|
||||
}
|
||||
|
||||
.fb1b {
|
||||
width: 60%;
|
||||
height: 10%;
|
||||
background-color: var(--building-color4);
|
||||
}
|
||||
|
||||
.fb1c {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
transparent 10%,
|
||||
transparent 15%
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
var(--building-color4),
|
||||
var(--building-color4) 10%,
|
||||
var(--window-color4) 10%,
|
||||
var(--window-color4) 90%
|
||||
);
|
||||
}
|
||||
|
||||
.fb2 {
|
||||
width: 10%;
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.fb2a {
|
||||
width: 100%;
|
||||
border-bottom: 10vh solid var(--building-color3);
|
||||
border-left: 1vw solid transparent;
|
||||
border-right: 1vw solid transparent;
|
||||
}
|
||||
|
||||
.fb2b {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
.fb2-window {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
background-color: var(--window-color3);
|
||||
}
|
||||
|
||||
.fb3 {
|
||||
width: 10%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.fb3a {
|
||||
width: 80%;
|
||||
height: 15%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3b {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
background-color: var(--building-color1);
|
||||
}
|
||||
|
||||
.fb3-window {
|
||||
width: 25%;
|
||||
height: 80%;
|
||||
background-color: var(--window-color1);
|
||||
}
|
||||
|
||||
.fb4 {
|
||||
width: 8%;
|
||||
height: 45%;
|
||||
position: relative;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.fb4a {
|
||||
border-top: 5vh solid transparent;
|
||||
border-left: 8vw solid var(--building-color1);
|
||||
}
|
||||
|
||||
.fb4b {
|
||||
width: 100%;
|
||||
height: 89%;
|
||||
background-color: var(--building-color1);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fb4-window {
|
||||
width: 30%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--window-color1);
|
||||
margin: 10%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb5 {
|
||||
width: 10%;
|
||||
height: 33%;
|
||||
background-color: var(--building-color2);
|
||||
position: relative;
|
||||
right: 10%;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
.fb6 {
|
||||
width: 9%;
|
||||
height: 38%;
|
||||
background-color: var(--building-color3);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user