diff --git a/curriculum/challenges/_meta/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/meta.json b/curriculum/challenges/_meta/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/meta.json index e24f0651e08..e7d579792c1 100644 --- a/curriculum/challenges/_meta/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/meta.json +++ b/curriculum/challenges/_meta/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/meta.json @@ -179,96 +179,100 @@ "Step 42" ], [ - "6201782cc420715562f36271", + "64076bbeba941114b0027b6a", "Step 43" ], [ - "620179bc0a6a2358c72b90ad", + "6201782cc420715562f36271", "Step 44" ], [ - "62017b6f47454059bf2d3bd1", + "620179bc0a6a2358c72b90ad", "Step 45" ], [ - "62017f47c87be96457c49f46", + "62017b6f47454059bf2d3bd1", "Step 46" ], [ - "62017fa5bbef406580ceb44f", + "62017f47c87be96457c49f46", "Step 47" ], [ - "62018243f046a368fab8ffb6", + "62017fa5bbef406580ceb44f", "Step 48" ], [ - "6201830cb0c74b69f1b41635", + "62018243f046a368fab8ffb6", "Step 49" ], [ - "620186f4b6b8356d2def576b", + "6201830cb0c74b69f1b41635", "Step 50" ], [ - "62018ba1aa263770c953be66", + "620186f4b6b8356d2def576b", "Step 51" ], [ - "62018c3e94434a71af1d5eaa", + "62018ba1aa263770c953be66", "Step 52" ], [ - "62018ec29b3ae674f40bef31", + "62018c3e94434a71af1d5eaa", "Step 53" ], [ - "62019093fe30e278e797d2f6", + "62018ec29b3ae674f40bef31", "Step 54" ], [ - "620191707bc65579ddd3ce15", + "62019093fe30e278e797d2f6", "Step 55" ], [ - "620192a767533a7ad19d96d7", + "620191707bc65579ddd3ce15", "Step 56" ], [ - "6201995d9ab88e80f1989dce", + "620192a767533a7ad19d96d7", "Step 57" ], [ - "620199c7a7a32c81d4db3410", + "6201995d9ab88e80f1989dce", "Step 58" ], [ - "6201a1a7af32c287bd6b8183", + "620199c7a7a32c81d4db3410", "Step 59" ], [ - "6201a1cc668a34888f5b2f52", + "6201a1a7af32c287bd6b8183", "Step 60" ], [ - "6201a20d742f5c89736c8cfb", + "6201a1cc668a34888f5b2f52", "Step 61" ], [ - "6201a42e39bf3b95b6a33bf3", + "6201a20d742f5c89736c8cfb", "Step 62" ], [ - "6201a4adcc6414968b391592", + "6201a42e39bf3b95b6a33bf3", "Step 63" ], [ - "6201a5258af7b398b030bfaf", + "6201a4adcc6414968b391592", "Step 64" ], [ - "6201a59be346d399c21d10b1", + "6201a5258af7b398b030bfaf", "Step 65" + ], + [ + "6201a59be346d399c21d10b1", + "Step 66" ] ] } \ No newline at end of file diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md index 092574d3811..6bcd10303d2 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md @@ -16,16 +16,10 @@ The `calc()` function is a CSS function that allows you to calculate a value bas } ``` -Ensure your years do not get hidden by setting a `z-index` of `999`. Then, give it a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`. +Give `#years` a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`. # --hints-- -Your `#years` selector should have a `z-index` property set to `999`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index') === '999'); -``` - Your `#years` selector should have a `margin` property set to `0 -2px`. ```js diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md index 7cdb25f9f96..07c2abed890 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md @@ -1,8 +1,8 @@ --- id: 6201782cc420715562f36271 -title: Step 43 +title: Step 44 challengeType: 0 -dashedName: step-43 +dashedName: step-44 --- # --description-- @@ -219,10 +219,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md index b6eeeb2c832..8a0e5fc55f3 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md @@ -1,8 +1,8 @@ --- id: 620179bc0a6a2358c72b90ad -title: Step 44 +title: Step 45 challengeType: 0 -dashedName: step-44 +dashedName: step-45 --- # --description-- @@ -205,10 +205,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md index 8fc45a1d985..f4d1f55cbe8 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md @@ -1,8 +1,8 @@ --- id: 62017b6f47454059bf2d3bd1 -title: Step 45 +title: Step 46 challengeType: 0 -dashedName: step-45 +dashedName: step-46 --- # --description-- @@ -207,10 +207,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md index 6f5186cf057..dbebfd30808 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md @@ -1,8 +1,8 @@ --- id: 62017f47c87be96457c49f46 -title: Step 46 +title: Step 47 challengeType: 0 -dashedName: step-46 +dashedName: step-47 --- # --description-- @@ -275,10 +275,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md index b5b1ae3a4a6..e9f5ba50046 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md @@ -1,8 +1,8 @@ --- id: 62017fa5bbef406580ceb44f -title: Step 47 +title: Step 48 challengeType: 0 -dashedName: step-47 +dashedName: step-48 --- # --description-- @@ -211,10 +211,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md index adf77e2a248..aedd519f261 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md @@ -1,8 +1,8 @@ --- id: 62018243f046a368fab8ffb6 -title: Step 48 +title: Step 49 challengeType: 0 -dashedName: step-48 +dashedName: step-49 --- # --description-- @@ -211,10 +211,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md index 297505ffffc..1dbc1b409ec 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md @@ -1,8 +1,8 @@ --- id: 6201830cb0c74b69f1b41635 -title: Step 49 +title: Step 50 challengeType: 0 -dashedName: step-49 +dashedName: step-50 --- # --description-- @@ -211,10 +211,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md index b96f42b5e6d..9212d58f12c 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md @@ -1,8 +1,8 @@ --- id: 620186f4b6b8356d2def576b -title: Step 50 +title: Step 51 challengeType: 0 -dashedName: step-50 +dashedName: step-51 --- # --description-- @@ -217,10 +217,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md index 97757703088..44efcda3e73 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md @@ -1,8 +1,8 @@ --- id: 62018ba1aa263770c953be66 -title: Step 51 +title: Step 52 challengeType: 0 -dashedName: step-51 +dashedName: step-52 --- # --description-- @@ -211,10 +211,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md index a19bfb0dc97..e61c7c7fc93 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md @@ -1,8 +1,8 @@ --- id: 62018c3e94434a71af1d5eaa -title: Step 52 +title: Step 53 challengeType: 0 -dashedName: step-52 +dashedName: step-53 --- # --description-- @@ -217,10 +217,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md index 121d60e1709..7f1f6fc9f55 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md @@ -1,8 +1,8 @@ --- id: 62018ec29b3ae674f40bef31 -title: Step 53 +title: Step 54 challengeType: 0 -dashedName: step-53 +dashedName: step-54 --- # --description-- @@ -205,10 +205,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md index fb120b271f6..d316a28b072 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md @@ -1,8 +1,8 @@ --- id: 62019093fe30e278e797d2f6 -title: Step 54 +title: Step 55 challengeType: 0 -dashedName: step-54 +dashedName: step-55 --- # --description-- @@ -211,10 +211,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md index 06e8d0a7344..963b61984d8 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md @@ -1,8 +1,8 @@ --- id: 620191707bc65579ddd3ce15 -title: Step 55 +title: Step 56 challengeType: 0 -dashedName: step-55 +dashedName: step-56 --- # --description-- @@ -211,10 +211,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md index 034ca0d46e4..78e03f45058 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md @@ -1,8 +1,8 @@ --- id: 620192a767533a7ad19d96d7 -title: Step 56 +title: Step 57 challengeType: 0 -dashedName: step-56 +dashedName: step-57 --- # --description-- @@ -213,10 +213,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md index ea652dd6178..75f2065e843 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md @@ -1,8 +1,8 @@ --- id: 6201995d9ab88e80f1989dce -title: Step 57 +title: Step 58 challengeType: 0 -dashedName: step-57 +dashedName: step-58 --- # --description-- @@ -205,10 +205,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md index 29b9ca506ee..4d2af4882d3 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md @@ -1,8 +1,8 @@ --- id: 620199c7a7a32c81d4db3410 -title: Step 58 +title: Step 59 challengeType: 0 -dashedName: step-58 +dashedName: step-59 --- # --description-- @@ -205,10 +205,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md index 0d447563352..e7df2ec24fa 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md @@ -1,8 +1,8 @@ --- id: 6201a1a7af32c287bd6b8183 -title: Step 59 +title: Step 60 challengeType: 0 -dashedName: step-59 +dashedName: step-60 --- # --description-- @@ -207,10 +207,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md index d7eeb874456..35941a62017 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md @@ -1,8 +1,8 @@ --- id: 6201a1cc668a34888f5b2f52 -title: Step 60 +title: Step 61 challengeType: 0 -dashedName: step-60 +dashedName: step-61 --- # --description-- @@ -207,10 +207,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md index 1ac04dc2bb7..4113f9ea3ce 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md @@ -1,8 +1,8 @@ --- id: 6201a20d742f5c89736c8cfb -title: Step 61 +title: Step 62 challengeType: 0 -dashedName: step-61 +dashedName: step-62 --- # --description-- @@ -217,10 +217,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md index 2980b62b73f..2bca04acda5 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md @@ -1,8 +1,8 @@ --- id: 6201a42e39bf3b95b6a33bf3 -title: Step 62 +title: Step 63 challengeType: 0 -dashedName: step-62 +dashedName: step-63 --- # --description-- @@ -229,10 +229,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md index a839b4563b9..2fd1132f090 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md @@ -1,8 +1,8 @@ --- id: 6201a4adcc6414968b391592 -title: Step 63 +title: Step 64 challengeType: 0 -dashedName: step-63 +dashedName: step-64 --- # --description-- @@ -199,10 +199,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md index 00222d828d5..35ef502b8a2 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md @@ -1,8 +1,8 @@ --- id: 6201a5258af7b398b030bfaf -title: Step 64 +title: Step 65 challengeType: 0 -dashedName: step-64 +dashedName: step-65 --- # --description-- @@ -217,10 +217,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md index 90f5ecf7b24..1cb2bea7ff3 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md @@ -1,8 +1,8 @@ --- id: 6201a59be346d399c21d10b1 -title: Step 65 +title: Step 66 challengeType: 0 -dashedName: step-65 +dashedName: step-66 --- # --description-- @@ -207,10 +207,10 @@ section { display: flex; justify-content: flex-end; position: sticky; + z-index: 999; top: 0; background: #0a0a23; color: #fff; - z-index: 999; padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; margin: 0 -2px; } diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/64076bbeba941114b0027b6a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/64076bbeba941114b0027b6a.md new file mode 100644 index 00000000000..cef5dffddc1 --- /dev/null +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/64076bbeba941114b0027b6a.md @@ -0,0 +1,210 @@ +--- +id: 64076bbeba941114b0027b6a +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Adding position `sticky` moved the element into its own stack. To ensure your `#years` element does not get hidden by different stacks, add a `z-index` property set to `999` in the `#years` rule. + +# --hints-- + +Your `#years` selector should have a `z-index` property set to `999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index'), '999'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + -webkit-clip-path: inset(50%); + height: 1px; + width: 1px; + position: absolute; + overflow: hidden; + white-space: nowrap; + padding: 0; + margin: -1px; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +--fcc-editable-region-- +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} +--fcc-editable-region-- +```