diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md new file mode 100644 index 00000000000..43657a134ea --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md @@ -0,0 +1,61 @@ +--- +id: 5dc23f9bf86c76b9248c6eba +title: ステップ 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +`img` 要素を使うと、ウェブサイトに画像を追加することができます。 `img` 要素は開始タグを持ちますが、終了タグを持ちません。 終了タグを持たない要素のタグは自己終了タグ (self-cloding tag) として知られています。 + +`p` 要素の下に、`img` 要素を追加してください。 この時点では、ブラウザーに画像は表示されません。 + +# --hints-- + +`img` 要素には開始タグが必要です。 開始タグは `` のような形式の構文です。 + +```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 + + +

CatPhotoApp

+
+

Cat Photos

+ +--fcc-editable-region-- +

Click here to view more cat photos.

+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md index 60d8694b952..a1e0dc5899f 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md @@ -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. diff --git a/curriculum/challenges/portuguese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/portuguese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index 8e978253dd8..b973c567ca0 100644 --- a/curriculum/challenges/portuguese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/portuguese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -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) => { diff --git a/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md b/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md index cb627a36626..aa9c60f415f 100644 --- a/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md +++ b/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md @@ -13,7 +13,8 @@ Você Curso de Python em vídeo para todos (14 horas) -- Curso Aprenda Python em vídeo (10 horas) + +- Como analisar dados em Python com o Pandas (10 hours) # --instructions-- diff --git a/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md b/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md index d318de4f6ea..bfc9903132b 100644 --- a/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md +++ b/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md @@ -13,7 +13,8 @@ Você Curso de Python em vídeo para todos (14 horas) -- Curso por vídeo Aprenda Python + +- Como analisar dados em Python com o Pandas (10 hours) # --instructions-- diff --git a/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md b/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md index b4935a1542a..c4e4aeaf4e0 100644 --- a/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md +++ b/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md @@ -13,7 +13,8 @@ Você Curso de Python em vídeo para todos (14 horas) -- Curso por vídeo Aprenda Python + +- Como analisar dados em Python com o Pandas (10 hours) # --instructions-- diff --git a/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md b/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md index cdd0013a392..ef46b7a168c 100644 --- a/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md +++ b/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md @@ -13,7 +13,8 @@ Você Curso de Python em vídeo para todos (14 horas) -- Curso por vídeo Aprenda Python + +- Como analisar dados em Python com o Pandas (10 hours) # --instructions-- diff --git a/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md b/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md index 55cf63f4ad1..68eb5095a1f 100644 --- a/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md +++ b/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md @@ -13,7 +13,8 @@ Você Curso de Python em vídeo para todos (14 horas) -- Curso por vídeo Aprenda Python + +- Como analisar dados em Python com o Pandas (10 hours) # --instructions-- diff --git a/curriculum/challenges/portuguese/09-information-security/information-security-projects/port-scanner.md b/curriculum/challenges/portuguese/09-information-security/information-security-projects/port-scanner.md index e57cb4ad973..75a5f2ab230 100644 --- a/curriculum/challenges/portuguese/09-information-security/information-security-projects/port-scanner.md +++ b/curriculum/challenges/portuguese/09-information-security/information-security-projects/port-scanner.md @@ -15,7 +15,9 @@ Ainda estamos desenvolvendo a parte instrucional interativa do currículo Python - Curso de Python em vídeo para todos (14 horas) -- Curso Aprenda Python em vídeo (10 horas) +- Aprenda muito sobre o básico em Python (4 hours) + +- Curso de Python intermediário (6 hours) # --instructions-- diff --git a/curriculum/challenges/portuguese/09-information-security/information-security-projects/sha-1-password-cracker.md b/curriculum/challenges/portuguese/09-information-security/information-security-projects/sha-1-password-cracker.md index da1388a6efb..3a6432cd576 100644 --- a/curriculum/challenges/portuguese/09-information-security/information-security-projects/sha-1-password-cracker.md +++ b/curriculum/challenges/portuguese/09-information-security/information-security-projects/sha-1-password-cracker.md @@ -15,7 +15,9 @@ Ainda estamos desenvolvendo a parte instrucional interativa do currículo Python - Curso de Python em vídeo para todos (14 horas) -- Curso Aprenda Python em vídeo (10 horas) +- Aprenda muito sobre o básico em Python (4 hours) + +- Curso de Python intermediário (6 hours) # --instructions-- diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md index 07c0d0cfca4..f5cc6f163fb 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md @@ -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`. diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md index 6b7ca6a6c91..496826913c6 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md @@ -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(//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(//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(/\s*<\/head\s*>/i)); +``` + +O elemento `body` deve estar vazio. + +```js +assert(code.match(/\s*<\/body\s*>/i)); +``` + +O elemento `body` deve ser inserido depois do elemento `head`. + +```js +assert(code.match(/<\/head\s*>\s*/i)); ``` O elemento `head` deve ser filho do elemento `html`. diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md index c5959532855..e5e6d488803 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md @@ -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 aditivo RGB (vermelho, verde, azul), usado em dispositivos eletrônicos, e o modelo subtrativo 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 -
- ...content -
+
``` +Para começar, adicione a classe `one` ao primeiro elemento do marcador `div`. + + # --hints-- Adicione a class `one` ao primeiro elemento do marcador `div`. diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md index 01fe62cc259..dc2779a2e41 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md @@ -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 aditivo RGB (vermelho, verde, azul), usado em dispositivos eletrônicos, e o modelo subtrativo 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)`. diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md index 4d6b7994cfb..9e5edbac058 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md @@ -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`. diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md index a7de3b26d8b..138613bdaae 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md @@ -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 `` com o `charset` apropriado e uma tag `` para responsividade móvel dentro do elemento `head`. diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md index 53c34c7f5f3..c3ff2504f0b 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md @@ -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(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)); ``` O elemento `link` deve ter o atributo `rel` com o valor `stylesheet`. ```js -assert.match(code, /`. assert(code.match(//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); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md index 1b466c0e8b1..951c33def31 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md @@ -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(//)); ``` -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*/i)); ``` -Você deve ter uma tag de abertura para `head`. +Você deve acrescentar uma tag de abertura `head`. ```js assert(code.match(//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(//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)); diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md index d8ba3bebc26..1e6db8f896e 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md @@ -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 ``. assert(code.match(//i)); ``` -O código deve ter um elemento `html`. +Você deve ter uma tag de abertura `` com um atributo `lang` de `en`. ```js -assert(document.querySelectorAll('html').length === 1); +assert(code.match(//gi)); ``` O código deve ter um elemento `head` dentro do elemento `html`. diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md index 2c89094c44c..828ce2674cc 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md @@ -7,7 +7,7 @@ dashedName: step-1 # --description-- -Почніть зі стандартного шаблонного коду. Додайте свою декларацію `DOCTYPE`, свій елемент `html`, свої елементи `head` та `body`. +Почніть зі стандартного шаблонного коду. Додайте свою декларацію `DOCTYPE`, свій елемент `html` з мовою встановлену на англійську, свої елементи `head` та `body`. Додайте елемент `meta` для правильного `charset`, елемент `title` та елемент `link` для файлу `./styles.css`. diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md index 41eefbefe7d..0f6394c7522 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md @@ -35,10 +35,46 @@ assert(code.match(//i)); assert(code.match(/<\/body\s*>/i)); ``` -Ваші елементи `head` та `body` повинні бути братськими. +Має бути тільки один початковий теґ `head`. ```js -assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +assert(code.match(//ig).length === 1); +``` + +Має бути тільки один кінцевий теґ `head`. + +```js +assert(code.match(/<\/head\s*>/ig).length === 1); +``` + +Має бути тільки один початковий теґ `body`. + +```js +assert(code.match(//ig).length === 1); +``` + +Має бути тільки один кінцевий теґ `body`. + +```js +assert(code.match(/<\/body\s*>/ig).length === 1); +``` + +Ваш елемент `head` повинен бути порожнім. + +```js +assert(code.match(/\s*<\/head\s*>/i)); +``` + +Ваш елемент `body` повинен бути порожнім. + +```js +assert(code.match(/\s*<\/body\s*>/i)); +``` + +Ваш елемент `body` повинен бути розміщеним після елемента `head`. + +```js +assert(code.match(/<\/head\s*>\s*/i)); ``` Ваш елемент `head` повинен бути в межах елемента `html`. diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md index bf1ced9ad75..88fc0e8d702 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md @@ -7,7 +7,7 @@ dashedName: step-5 # --description-- -Під своїм `header` створіть новий елемент `div` та призначте йому клас `gallery`. +Під елементом `.header` створіть новий елемент `div` та призначте йому `class` зі значенням `"gallery"`. Цей `div` діятиме як контейнер для зображень галереї. В цьому елементі `.gallery` створіть дев'ять елементів `img`. diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md new file mode 100644 index 00000000000..bfaee978d4c --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md @@ -0,0 +1,135 @@ +--- +id: 61437d575fb98f57fa8f7f36 +title: Крок 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Розпочніть зі стандартного шаблонного коду HTML. Додайте декларацію `DOCTYPE`, елемент `html` зазначивши, що ця сторінка англійською мовою, елемент `head` та елемент `body`. + +Додайте теґ `` з відповідним `charset` та теґ `` для мобільного реагування в межах елемента `head`. + +# --hints-- + +Ваш код повинен містити посилання `DOCTYPE`. + +```js +assert(code.match(/` після типу. + +```js +assert(code.match(//gi)); +``` + +Ви повинні мати початковий теґ `` та він повинен мати `lang` зі значенням `en`. + +```js +assert(code.match(//gi)); +``` + +Ваш елемент `html` повинен мати кінцевий теґ. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Ваша декларація `DOCTYPE` повинна бути на початку HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +Ви повинні мати початковий теґ ``. + +```js +assert(code.match(//i)); +``` + +Ви повинні мати кінцевий теґ ``. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +Ви повинні мати початковий теґ ``. + +```js +assert(code.match(//i)); +``` + +Ви повинні мати кінцевий теґ ``. + +```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 + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md new file mode 100644 index 00000000000..9f6922d3f21 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md @@ -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*/i)); +``` + +Ваш елемент `html` повинен мати початковий теґ та атрибут `lang` зі значенням `en`. + +```js +assert(code.match(//gi)); +``` + +Ваш елемент `html` повинен мати кінцевий теґ. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Ваші теґи `html` повинні бути в правильному порядку. + +```js +assert(code.match(/\s*<\/html\s*>/)); +``` + +Ви повинні мати тільки один елемент `html`. + +```js +assert(document.querySelectorAll('html').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md new file mode 100644 index 00000000000..23a00654c5a --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md @@ -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 + + + + + City Skyline + + + + + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md new file mode 100644 index 00000000000..d2751f55eec --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md @@ -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 + + + + + City Skyline + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md new file mode 100644 index 00000000000..4858aa001eb --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md @@ -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 + + + + + City Skyline + + + + +
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md new file mode 100644 index 00000000000..dfdfb83e6f5 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md @@ -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 + + + + + City Skyline + + + + +--fcc-editable-region-- +
+--fcc-editable-region-- + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md new file mode 100644 index 00000000000..712716f01a2 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md @@ -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 + + + + + City Skyline + + + + +
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+ + +``` + +```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%; +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md new file mode 100644 index 00000000000..cb593930791 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```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%; +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md new file mode 100644 index 00000000000..098fe072cd7 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```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%; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md new file mode 100644 index 00000000000..17f47e18386 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md new file mode 100644 index 00000000000..3e0afaae388 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md new file mode 100644 index 00000000000..76c00c59933 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md new file mode 100644 index 00000000000..67bcd4c3ea5 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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%; +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md new file mode 100644 index 00000000000..f2bb4be3b59 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md @@ -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 + + + + + City Skyline + + + + +--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + + +``` + +```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%; +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md new file mode 100644 index 00000000000..96eafc04b62 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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%; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md new file mode 100644 index 00000000000..e738cf2d278 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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%; +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md new file mode 100644 index 00000000000..a05f683ab11 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md new file mode 100644 index 00000000000..02d22a0aef4 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```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-- + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md new file mode 100644 index 00000000000..fa94aacff53 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- + + +``` + +```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; +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md new file mode 100644 index 00000000000..1c4cf1b9553 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```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-- + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md new file mode 100644 index 00000000000..843e95d2a94 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```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%; +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md new file mode 100644 index 00000000000..3ec60765948 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```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%; +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md new file mode 100644 index 00000000000..db133c660c8 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```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%; +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md new file mode 100644 index 00000000000..620b41ecc39 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```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-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md new file mode 100644 index 00000000000..90312c3cebf --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+--fcc-editable-region-- + + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md new file mode 100644 index 00000000000..17fabb352bd --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md new file mode 100644 index 00000000000..33a71b7a55d --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md new file mode 100644 index 00000000000..3567a4188f7 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md new file mode 100644 index 00000000000..fef7738acee --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md new file mode 100644 index 00000000000..09ec37bd24e --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md new file mode 100644 index 00000000000..35b4bbe77a2 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md @@ -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 + + + + + City Skyline + + + + +
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md new file mode 100644 index 00000000000..7aa69c3bb09 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md new file mode 100644 index 00000000000..cfce651b18b --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md new file mode 100644 index 00000000000..72dee136181 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md new file mode 100644 index 00000000000..6687a965e69 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md new file mode 100644 index 00000000000..dc8611a3fe4 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md new file mode 100644 index 00000000000..479542e61d1 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md new file mode 100644 index 00000000000..88cab130d93 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md new file mode 100644 index 00000000000..6eeb9d38213 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md new file mode 100644 index 00000000000..21998605a83 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md new file mode 100644 index 00000000000..fee8c7ecec3 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md new file mode 100644 index 00000000000..5f4ae49966c --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md new file mode 100644 index 00000000000..68e17a8dab0 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md new file mode 100644 index 00000000000..ca8ed463223 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md new file mode 100644 index 00000000000..3051a2523cb --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md new file mode 100644 index 00000000000..9f90d764fad --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md new file mode 100644 index 00000000000..3867dc22199 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md new file mode 100644 index 00000000000..bedbc1f1de9 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md new file mode 100644 index 00000000000..de58cbd757b --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md new file mode 100644 index 00000000000..3d62c537d03 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md new file mode 100644 index 00000000000..4e3063a2236 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md new file mode 100644 index 00000000000..2caae69847f --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md new file mode 100644 index 00000000000..388c0b675a7 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md new file mode 100644 index 00000000000..e72c1f36055 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md new file mode 100644 index 00000000000..7ab23d328fe --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md @@ -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 + + + + + City Skyline + + + + +
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md new file mode 100644 index 00000000000..e7b4f1ab8b6 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md new file mode 100644 index 00000000000..9290b7fe42b --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md new file mode 100644 index 00000000000..39427c8fc04 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md new file mode 100644 index 00000000000..e145e0370d3 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md new file mode 100644 index 00000000000..fe101edf026 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md new file mode 100644 index 00000000000..11b3c1e260e --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md new file mode 100644 index 00000000000..699adbb0f5f --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md new file mode 100644 index 00000000000..b0204d04851 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md new file mode 100644 index 00000000000..7558e8bab7f --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md new file mode 100644 index 00000000000..1d747dccaac --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md new file mode 100644 index 00000000000..a14a57a8470 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md new file mode 100644 index 00000000000..e33c6dfe234 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md new file mode 100644 index 00000000000..bd438134766 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md new file mode 100644 index 00000000000..059490b3341 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md new file mode 100644 index 00000000000..440b8be57d1 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md new file mode 100644 index 00000000000..0d50240a24e --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md new file mode 100644 index 00000000000..4b3b1aa9312 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md new file mode 100644 index 00000000000..c59d0b905c8 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md new file mode 100644 index 00000000000..d93c45646a6 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md new file mode 100644 index 00000000000..ec01895ebe9 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md new file mode 100644 index 00000000000..3766337ac31 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md @@ -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 + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md new file mode 100644 index 00000000000..a40c98fa420 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md @@ -0,0 +1,402 @@ +--- +id: 5d822fd413a79914d39e9933 +title: Крок 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +Додайте ще один `repeating-linear-gradient` під тим, який ви щойно додали. Надайте йому напрямок `90deg`, використайте колір будівлі від `0%` до `12%` та колір вікна від `12%` до `44%`. Це створить декілька прямокутних вікон. + +# --hints-- + +Ви повинні надати `.fb5` другий `repeating-linear-gradient` в властивості `background`. + +```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%\),repeating-linear-gradient/); +``` + +Ви повинні надати другому `repeating-linear-gradient` напрямок `90deg`. + +```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%\),repeating-linear-gradient\(90deg/); +``` + +Ви повинні надати другому `repeating-linear-gradient` перший колір `--building-color2` від `0%` до `12%`. + +```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%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/); +``` + +Ви повинні надати другому `repeating-linear-gradient` другий колір `--window-color2` від `12%` до `44%`. + +```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%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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% + ) +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md new file mode 100644 index 00000000000..cfcce702ea3 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md @@ -0,0 +1,409 @@ +--- +id: 5d822fd413a79914d39e9934 +title: Крок 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Нарешті! Ви дійшли до останньої будівлі! Додайте до неї повторюваний градієнт з напрямком `90deg`. Використайте колір будівлі від `0%` до `10%` та `transparent` від `10%` до `30%`. + +# --hints-- + +Ви повинні додати `repeating-linear-gradient` до `.fb6` в властивості `background`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient"); +``` + +Ви повинні надати `repeating-linear-gradient` напрямок `90deg`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +Ви повинні надати `repeating-linear-gradient` перший колір `--building-color3` від `0%` до `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); +``` + +Ви повинні надати `repeating-linear-gradient` другий колір `transparent` від `10%` до `30%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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%; +} + +.fb5 { + width: 10%; + height: 33%; + 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); +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md new file mode 100644 index 00000000000..67d2b6973c6 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md @@ -0,0 +1,409 @@ +--- +id: 5d822fd413a79914d39e9935 +title: Крок 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Додайте ще один повторюваний градієнт до цієї будівлі; зробіть його таким самим, як той, який ви щойно додали, але не додавайте напрямок `90deg` та використайте свій колір вікна замість двох кольорів `transparent`. + +# --hints-- + +Ви повинні надати `.fb6` другий `repeating-linear-gradient` в властивості `background`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/); +``` + +Ви повинні надати другому `repeating-linear-gradient` перший колір `--building-color3` від `0%` до `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); +``` + +Ви повинні надати другому `repeating-linear-gradient` другий колір `--window-color3` від `10%` до `30%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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%; +} + +.fb5 { + width: 10%; + height: 33%; + 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); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ) +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md new file mode 100644 index 00000000000..84b0d300299 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md @@ -0,0 +1,402 @@ +--- +id: 5d822fd413a79914d39e9936 +title: Крок 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +Гаразд, будівлі готові. Поверніться до селектора `*` та видаліть `border`, який ви застосували до всього на початку, і будівлі об’єднаються. + +# --hints-- + +Ви повинні видалити `border` із селектора `*`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} +--fcc-editable-region-- +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%; +} + +.fb5 { + width: 10%; + height: 33%; + 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% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md new file mode 100644 index 00000000000..ad2902e6936 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md @@ -0,0 +1,403 @@ +--- +id: 5d822fd413a79914d39e9937 +title: Крок 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +Додайте `sky` як другий клас до елемента `.background-buildings`. Ви робитимете фон для горизонту. + +# --hints-- + +Ви повинні додати клас `sky` до `.background-buildings`. + +```js +assert.exists(document.querySelector("div.background-buildings.sky")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; +} + +* { + 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%; +} + +.fb5 { + width: 10%; + height: 33%; + 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% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md new file mode 100644 index 00000000000..67c6bfdbf4e --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md @@ -0,0 +1,421 @@ +--- +id: 5d822fd413a79914d39e9938 +title: Крок 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +Класу `sky` надайте `radial-gradient`. Використайте `#ffcf33` від `0%` до `20%`, `#ffff66` на `21%` та `#bbeeff` на `100%`. Це додасть круговий градієнт до фону, який буде вашим сонцем. + +# --hints-- + +Ви повинні надати `.sky` градієнт `radial-gradient` в властивості `background`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient"); +``` + +Ви повинні надати `radial-gradient` перший колір `#ffcf33`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/); +``` + +Ви повинні надати `radial-gradient` другий колір `#ffff66` на `21%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/); +``` + +Ви повинні надати `radial-gradient` третій колір `#bbeeff` на `100%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; +} + +* { + 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; +} +--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%; +} + +.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%; +} + +.fb5 { + width: 10%; + height: 33%; + 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% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md new file mode 100644 index 00000000000..6c0a67814bb --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md @@ -0,0 +1,410 @@ +--- +id: 5d822fd413a79914d39e9939 +title: Крок 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +У верхній частині списку кольорів градієнта неба, де потрібно вказати напрямок для градієнта, додайте `circle closest-corner at 15% 15%,`. Це перемістить початок градієнта на `15%` зверху та зліва. Він закінчуватиметься в `closest-corner` та зберігатиме форму `circle`. Це деякі ключові слова, вбудовані в градієнти, щоб описати, як він поводиться. + +# --hints-- + +Ви повинні надати `.sky` `radial-gradient` напрямок `circle closest-corner at 15% 15%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; +} + +* { + 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; +} +--fcc-editable-region-- +.sky { + background: radial-gradient( + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} +--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%; +} + +.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%; +} + +.fb5 { + width: 10%; + height: 33%; + 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% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md new file mode 100644 index 00000000000..514f64627cc --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md @@ -0,0 +1,422 @@ +--- +id: 5d822fd413a79914d39e993a +title: Крок 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +Медіазапит можна використовувати для зміни стилів на основі певних умов; вони виглядають ось так: + +```css +@media (condition) { + +} +``` + +Додайте порожній медіазапит внизу своєї таблиці стилів з умовою `max-width: 1000px`. Стилі, додані тут, почнуть діяти, якщо розмір документа становитиме 1000 пікселів завширшки або менше. + +# --hints-- + +Ви повинні додати порожній медіазапит з `max-width: 1000px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; +} + +* { + 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; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* 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%; +} + +.fb5 { + width: 10%; + height: 33%; + 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% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md new file mode 100644 index 00000000000..6bb7e6c3242 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md @@ -0,0 +1,424 @@ +--- +id: 5d822fd413a79914d39e993b +title: Крок 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +Скопіюйте та вставте весь клас `sky` разом з усіма його властивостями та значеннями в медіазапит. Ви збираєтеся створити іншу колірну схему для лінії горизонту, яка змінює день на ніч. + +Примітка: потрібно буде прокрутити повз область, яку можна редагувати, щоб скопіювати клас. + +# --hints-- + +Ви не повинні видаляти наявну декларацію `.sky`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/); +``` + +Ви повинні скопіювати наявне оголошення `.sky` в медіазапит. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; +} + +* { + 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; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* 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%; +} + +.fb5 { + width: 10%; + height: 33%; + 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% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- +@media (max-width: 1000px) { + +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md new file mode 100644 index 00000000000..2df8f71b650 --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md @@ -0,0 +1,437 @@ +--- +id: 5d822fd413a79914d39e993c +title: Крок 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +В класі `sky` медіазапиту змініть два значення кольору `#ffcf33` на `#ccc`, `#ffff66` на `#445` та `#bbeeff` на `#223`. Потім ви можете змінити розмір вікна, щоб побачити як змінюється фон. + +# --hints-- + +Ви повинні змінити значення першого кольору з `#ffcf33` на `#ccc`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/); +``` + +Ви повинні змінити значення другого кольору з `#ffff66` на `#445`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/); +``` + +Ви повинні змінити значення третього кольору з `#bbeeff` на `#223`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; +} + +* { + 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; +} + +.sky { + background: radial-gradient( +closest-corner circle at 15% 15%, +#ffcf33, +#ffcf33 20%, +#ffff66 21%, +#bbeeff 100% + ); +} + +/* 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%; +} + +.fb5 { + width: 10%; + height: 33%; + 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% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( +90deg, +var(--building-color3), +var(--building-color3) 10%, +transparent 10%, +transparent 30% + ), + repeating-linear-gradient( +var(--building-color3), +var(--building-color3) 10%, +var(--window-color3) 10%, +var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% +); + } +--fcc-editable-region-- +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md new file mode 100644 index 00000000000..6fbf522cf4c --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md @@ -0,0 +1,450 @@ +--- +id: 5d822fd413a79914d39e993d +title: Крок 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +Додайте селектор `:root` у верхню частину медіазапиту. Потім переозначте всі чотири змінні `--building-color`, щоб використати там значення `#000`. + +# --hints-- + +Ви повинні додати селектор `:root` до медіазапиту. + +```js +assert.notDeepEqual(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root"), undefined); +``` + +Ви повинні додати `--building-color1` зі значенням `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000"); +``` + +Ви повинні додати `--building-color2` зі значенням `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000"); +``` + +Ви повинні додати `--building-color3` зі значенням `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000"); +``` + +Ви повинні додати `--building-color4` зі значенням `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; +} + +* { + 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; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* 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%; +} + +.fb5 { + width: 10%; + height: 33%; + 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% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` + diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md new file mode 100644 index 00000000000..d0ac8193b4d --- /dev/null +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md @@ -0,0 +1,862 @@ +--- +id: 5d822fd413a79914d39e993e +title: Крок 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +Зрештою, в селекторі `:root` медіазапиту переозначте всі чотири змінні `--window-color` на `#777`. Коли ви закінчите, змініть розмір вікна та спостерігайте, як воно змінюється з дня на ніч. + +Змінні в основному використовуються з кольорами, і саме так ви їх використали тут. Але їм можна надати будь-яке значення і використовувати на будь-якій властивості. Ваш проєкт має чудовий вигляд! + +# --hints-- + +Ви повинні додати `--window-color1` зі значенням `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777"); +``` + +Ви повинні додати `--window-color2` зі значенням `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777"); +``` + +Ви повинні додати `--window-color3` зі значенням `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777"); +``` + +Ви повинні додати `--window-color4` зі значенням `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; +} + +* { + 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; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* 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%; +} + +.fb5 { + width: 10%; + height: 33%; + 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% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + :root { + --building-color1: #000; + --building-color2: #000; + --building-color3: #000; + --building-color4: #000; + } +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` + +# --solutions-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```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; +} + +* { + 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; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* 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%; +} + +.fb5 { + width: 10%; + height: 33%; + 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% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { + :root { + --building-color1: #000; + --building-color2: #000; + --building-color3: #000; + --building-color4: #000; + --window-color1: #777; + --window-color2: #777; + --window-color3: #777; + --window-color4: #777; + } + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md index b304d26b9c6..cdb04ab5688 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md @@ -7,7 +7,9 @@ dashedName: step-1 # --description-- -Налаштуйте свій HTML з допомогою елементів `DOCTYPE`, `html`, `head` та `body`. Надайте елементу `head` відповідні елементи `meta` для `charset` та `viewport`, елемент `title` з відповідною назвою та елемент `link` для своєї таблиці стилів. +Налаштуйте свій HTML з допомогою елементів `DOCTYPE`, `html` вказуючи, що цей документ англійською мовою, `head` та `body`. + +Надайте елементу `head` відповідні елементи `meta` для `charset` та `viewport`, елемент `title` з відповідною назвою та елемент `link` для своєї таблиці стилів. # --hints-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md index 50da37f74a8..66c6fc2e5cc 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md @@ -7,7 +7,9 @@ dashedName: step-1 # --description-- -Почніть із базової структури HTML. Додайте декларацію `DOCTYPE` та елементи `html`, `head`, `body` та `title`. Встановіть `title` на `Piano`. +Почніть із базової структури HTML. Додайте декларацію `DOCTYPE` та елементи `html`, `head`, `body` та `title`. + +Встановіть мову цієї сторінки на англійську. Встановіть `title` на `Piano`. # --hints-- diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md index 323fe6e3be8..fe3c9950164 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md @@ -9,7 +9,7 @@ dashedName: step-1 Ви вже повинні бути знайомими з основними елементами, які повинна мати сторінка HTML. -Налаштуйте свій код з допомогою декларації `DOCTYPE`, елемента `html`, елемента `head` та елемента `body`. +Налаштуйте свій код з допомогою декларації `DOCTYPE`, елемента `html` з мовою встановлену на англійську, елемента `head` та елемента `body`. # --hints-- @@ -19,10 +19,10 @@ dashedName: step-1 assert(code.match(//i)); ``` -Ваш код повинен мати елемент `html`. +Ви повинні мати початковий теґ `` з атрибутом `lang` зі значенням `en`. ```js -assert(document.querySelectorAll('html').length === 1); +assert(code.match(//gi)); ``` Ваш код повинен мати елемент `head` в межах елемента `html`. diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md index e842ba48100..68b98a6739b 100644 --- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md +++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md @@ -9,7 +9,7 @@ dashedName: step-8 Час для CSS. -Хоча ваш `
` не має тексту, він все одно розглядається як блок з вмістом. Напишіть CSS-правило, яке використовує селектор класу `.canvas` та встановіть його `width` на 500 пікселів. Ось CSS-правило, яке встановлює ширину класу `card` на 300 пікселів: +Хоча ваш `
` не має тексту, він однаково розглядається як блок з вмістом. Напишіть CSS-правило, яке використовує селектор класу `.canvas` та встановіть його `width` на 500 пікселів. Ось CSS-правило, яке встановлює ширину класу `card` на 300 пікселів: ```css .card {