+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-003.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-003.md
new file mode 100644
index 0000000000..07178fce55
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-003.md
@@ -0,0 +1,53 @@
+---
+id: 61968df2acd5550bf1616c34
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Normalise your page's sizing, by removing the `body` element's `margin` and `padding`.
+
+# --hints--
+
+You should give `body` a `margin` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+You should give `body` a `padding` of `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-004.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-004.md
new file mode 100644
index 0000000000..a82a5089c0
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-004.md
@@ -0,0 +1,55 @@
+---
+id: 61a8fe15a6a31306e60d1e89
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Normalise your page, by setting the `width` to `100%`, and `height` to `100vh`.
+
+# --hints--
+
+You should give `body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
+```
+
+You should give `body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-005.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-005.md
new file mode 100644
index 0000000000..11cb6bae3d
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-005.md
@@ -0,0 +1,51 @@
+---
+id: 61968e9243a4090cc805531c
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Remove both the horizontal and vertical scrollbars, and prevent programmatic scrolling, using only one property.
+
+# --hints--
+
+You should give `body` an `overflow` of `clip`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'clip');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-006.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-006.md
new file mode 100644
index 0000000000..88c94cf764
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-006.md
@@ -0,0 +1,64 @@
+---
+id: 61968f8877c6720d6d61aaf5
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Within the `body`, add a `div` with a `class` of `ground`.
+
+# --hints--
+
+You should add a new `div`.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+You should give the `div` a `class` of `ground`.
+
+```js
+assert.include(document.querySelector('div')?.className, 'ground');
+```
+
+You should place the `div` within the `body`.
+
+```js
+assert.exists(document.querySelector('body > div.ground'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+--fcc-editable-region--
+
+
+
+--fcc-editable-region--
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-007.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-007.md
new file mode 100644
index 0000000000..f0dc78ba0f
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-007.md
@@ -0,0 +1,66 @@
+---
+id: 619691693bc14b0e528f5a20
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Target the `.ground` element, and set its `width` to take up the full width of the viewport. Then, set the `height` to `400px`.
+
+# --hints--
+
+You should use the `.ground` selector.
+
+```js
+assert.match(code, /\.ground\s*\{/);
+```
+
+You should give the `.ground` element a `width` of `100vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw');
+```
+
+You should give the `.ground` element a `height` of `400px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-008.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-008.md
new file mode 100644
index 0000000000..2ac23d64b1
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-008.md
@@ -0,0 +1,58 @@
+---
+id: 6196928658b6010f28c39484
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Give the `.ground` element a `background` with a linear gradient angled 90 degrees clockwise, starting at `rgb(88, 175, 236)` and ending at `rgb(182, 255, 255)`.
+
+# --hints--
+
+You should give `.ground` a `background` of `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`.
+
+```js
+assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+--fcc-editable-region--
+.ground {
+ width: 100vw;
+ height: 400px;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-009.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-009.md
new file mode 100644
index 0000000000..83aa13bb7c
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-009.md
@@ -0,0 +1,65 @@
+---
+id: 6197f667297bb30a552ce017
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+As the `.ground` element will be third in the stacking context of the page layout, set its `z-index` to `3`, and `position` to `absolute`.
+
+# --hints--
+
+You should give `.ground` a `z-index` of `3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+You should give `.ground` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+--fcc-editable-region--
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-010.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-010.md
new file mode 100644
index 0000000000..e87317e07a
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-010.md
@@ -0,0 +1,73 @@
+---
+id: 619692ff79f5770fc6d8c0b4
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Above the `.ground` element, add a `div` with a `class` of `penguin`. This `div` will contain Flappy Penguin.
+
+# --hints--
+
+You should add a new `div` within the `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 2);
+```
+
+You should give the `div` a `class` of `penguin`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin');
+```
+
+You should place `div.penguin` before `div.ground`.
+
+```js
+assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+--fcc-editable-region--
+
+
+
+
+--fcc-editable-region--
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-011.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-011.md
new file mode 100644
index 0000000000..35de4159b5
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-011.md
@@ -0,0 +1,75 @@
+---
+id: 6196990f966e8f10a40094f6
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Target the `.penguin` element, and set its `width` and `height` to `300px`.
+
+# --hints--
+
+You should use the `.penguin` selector.
+
+```js
+assert.match(code, /\.penguin\s*\{/);
+```
+
+You should give `.penguin` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px');
+```
+
+You should give `.penguin` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-012.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-012.md
new file mode 100644
index 0000000000..f90de1fcf8
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-012.md
@@ -0,0 +1,75 @@
+---
+id: 619699c10a0f6e11591d73c4
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Use the `margin` property to horizontally center the `.penguin` element, and set the `margin-top` to `75px`.
+
+# --hints--
+
+You should give `.penguin` a `margin` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginBottom, 'auto');
+```
+
+You should give `.penguin` a `margin-top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+--fcc-editable-region--
+.penguin {
+ width: 300px;
+ height: 300px;
+
+}
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-013.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-013.md
new file mode 100644
index 0000000000..332d22d540
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-013.md
@@ -0,0 +1,83 @@
+---
+id: 61969aa6acef5b12200f672e
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To create some scenery in the background, you will add two mountains.
+
+Above the `.penguin` element, add a `div` with a `class` of `left-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`. Expected to see `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 3);
+```
+
+You should give the `div` a `class` of `left-mountain`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain');
+```
+
+You should place `.left-mountain` before `.penguin`.
+
+```js
+assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+--fcc-editable-region--
+
+
+
+
+
+--fcc-editable-region--
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-014.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-014.md
new file mode 100644
index 0000000000..52718531c5
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-014.md
@@ -0,0 +1,89 @@
+---
+id: 61969c487ced6f12db8fef94
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Target the `.left-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(80, 183, 255)`.
+
+# --hints--
+
+You should use the `.left-mountain` selector.
+
+```js
+assert.match(code, /\.left-mountain\s*\{/);
+```
+
+You should give `.left-mountain` a `width` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px');
+```
+
+You should give `.left-mountain` a `height` of `300px`. Expected `--fcc-actual--` to be `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px');
+```
+
+You should give `.left-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-015.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-015.md
new file mode 100644
index 0000000000..b0831823d0
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-015.md
@@ -0,0 +1,76 @@
+---
+id: 61969d66cfcdba137d021558
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+To prevent the mountain from pushing the `.ground` element, adjust its `position` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.left-mountain` a `position` of `absolute`. Found `--fcc-actual--` instead of `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+--fcc-editable-region--
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-016.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-016.md
new file mode 100644
index 0000000000..908a8eecf9
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-016.md
@@ -0,0 +1,91 @@
+---
+id: 61969e7451455614217e901b
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+To make the mountain look more like a mountain, you can use the `skew` transform function, which takes two arguments. The first being an angle to shear the x-axis by, and the second being an angle to shear the y-axis by.
+
+Use the `transform` property to skew the mountain by `0deg` in the x-axis and `44deg` in the y-axis.
+
+# --hints--
+
+You should give `.left-mountain` a `transform` property.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform);
+```
+
+You should use the `skew` function on `transform`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew');
+```
+
+You should give `.left-mountain` a `transform` of `skew(0deg, 44deg)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+--fcc-editable-region--
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-017.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-017.md
new file mode 100644
index 0000000000..d46fe205b4
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-017.md
@@ -0,0 +1,90 @@
+---
+id: 6196adc17f77a714d51485f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Set the stack level of the mountain element such that it remains directly behind the `.ground` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+You should not change the `z-index` of the `.ground` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+--fcc-editable-region--
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+
+}
+--fcc-editable-region--
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-018.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-018.md
new file mode 100644
index 0000000000..4d0adcb367
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-018.md
@@ -0,0 +1,86 @@
+---
+id: 6196aead7ac7bf1584b17a7f
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+To overlap the mountain and `.ground` elements better, give the mountain a `margin-top` of `100px`, and the `.ground` element a `margin-top` of `-58px`.
+
+# --hints--
+
+You should give `.left-mountain` a `margin-top` of `100px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px');
+```
+
+You should give `.ground` a `margin-top` of `-58px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+--fcc-editable-region--
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-019.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-019.md
new file mode 100644
index 0000000000..17db688a4c
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-019.md
@@ -0,0 +1,92 @@
+---
+id: 6196ce0415498d2463989e84
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+To give the effect of a mountain range, add another mountain, by creating a new `div` immediately after `.left-mountain`, and give the new `div` the `class` of `back-mountain`.
+
+# --hints--
+
+You should add a new `div` within `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 4);
+```
+
+You should give the `div` a `class` of `back-mountain`.
+
+```js
+assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain');
+```
+
+You should place `.back-mountain` after `.left-mountain`.
+
+```js
+assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+--fcc-editable-region--
+
+
+
+
+
+
+--fcc-editable-region--
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-020.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-020.md
new file mode 100644
index 0000000000..9e6a00fbdb
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-020.md
@@ -0,0 +1,100 @@
+---
+id: 6196cee94c6da1253809dff9
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Target the `.back-mountain` element, and set its `width` and `height` to `300px`. Then, set the `background` to a linear gradient starting at `rgb(203, 241, 228)` and ending at `rgb(47, 170, 255)`.
+
+# --hints--
+
+You should use the `.back-mountain` selector.
+
+```js
+assert.match(code, /\.back-mountain\s*\{/);
+```
+
+You should give `.back-mountain` a `width` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px');
+```
+
+You should give `.back-mountain` a `height` of `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px');
+```
+
+You should give `.back-mountain` a `background` of `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-021.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-021.md
new file mode 100644
index 0000000000..03857339e2
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-021.md
@@ -0,0 +1,87 @@
+---
+id: 6196d00a5d7292262bc02f4c
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Set the `position` property of the `.back-mountain` to prevent it from taking up space in the page layout.
+
+# --hints--
+
+You should give `.back-mountain` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-022.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-022.md
new file mode 100644
index 0000000000..d01d30c612
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-022.md
@@ -0,0 +1,100 @@
+---
+id: 6196d0cda039d026f7f78d1e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Change the stack level of the `.back-mountain` element such that it is directly behind the `.left-mountain` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex);
+```
+
+You should set the `z-index` property to `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1');
+```
+
+You should not change the `z-index` of the `.left-mountain` element.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-023.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-023.md
new file mode 100644
index 0000000000..72f404f993
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-023.md
@@ -0,0 +1,119 @@
+---
+id: 6196d1ac33c68d27dcda5796
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Rotate the `.back-mountain` element by `45deg` clockwise. Then, give it a `left` property of `110px`, and a `top` property of `225px`.
+
+# --hints--
+
+You should use the `transform` property to rotate the element.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform);
+```
+
+You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform, 'rotate(45deg)');
+```
+
+You should give `.back-mountain` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left);
+```
+
+You should give `.back-mountain` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px');
+```
+
+You should give `.back-mountain` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top);
+```
+
+You should give `.back-mountain` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+
+}
+--fcc-editable-region--
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-024.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-024.md
new file mode 100644
index 0000000000..659c089c7b
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-024.md
@@ -0,0 +1,104 @@
+---
+id: 6196d213d99f16287bff22ae
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+To finish the background, add a sun, by creating a new `div` element immediately after the `.back-mountain` element, and give it the class of `sun`.
+
+# --hints--
+
+You should add a new `div` element to `body`. Expected `--fcc-expected--` `div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 5);
+```
+
+You should give the new `div` element a `class` of `sun`.
+
+```js
+assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun');
+```
+
+You should place the new `div` element immediately after the `.back-mountain` element.
+
+```js
+assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+--fcc-editable-region--
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-025.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-025.md
new file mode 100644
index 0000000000..22b0a77f65
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-025.md
@@ -0,0 +1,112 @@
+---
+id: 6196d2c0f22ca0293107c048
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Give the `.sun` element a `width` and `height` of `200px`, and a `background-color` of `yellow`.
+
+# --hints--
+
+You should use the `.sun` selector.
+
+```js
+assert.match(code, /\.sun\s*\{/);
+```
+
+You should give `.sun` a `width` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px');
+```
+
+You should give `.sun` a `height` of `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px');
+```
+
+You should give `.sun` a `background-color` of `yellow`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-026.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-026.md
new file mode 100644
index 0000000000..bacca014ce
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-026.md
@@ -0,0 +1,105 @@
+---
+id: 6196d32d1340d829f0f6f57d
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Set the `position` property of the sun to prevent it from taking up space in the page layout, and set the `border-radius` such that the sun's shape is a circle.
+
+# --hints--
+
+You should give `.sun` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute');
+```
+
+You should give `.sun` a `border-radius` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+
+}
+--fcc-editable-region--
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-027.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-027.md
new file mode 100644
index 0000000000..0b04dc2fff
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-027.md
@@ -0,0 +1,107 @@
+---
+id: 6196d41d40bf9b2aaea5d520
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Position the sun in the top right corner of the screen such that `75px` of its top and right edges are off screen.
+
+# --hints--
+
+You should give `.sun` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px');
+```
+
+You should give `.sun` a `right` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-028.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-028.md
new file mode 100644
index 0000000000..c832a95fde
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-028.md
@@ -0,0 +1,118 @@
+---
+id: 6197cff995d03905b0cca8ad
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Your penguin will consist of two main sections: the head, and the body.
+
+Within `.penguin`, add two new `div` elements. The first with a `class` of `penguin-head`, and the second with a `class` of `penguin-body`.
+
+# --hints--
+
+You should add two new `div` elements to `.penguin`. Expected `--fcc-expected--` `.penguin > div` elements, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `penguin-head`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head');
+```
+
+You should give the second `div` a `class` of `penguin-body`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+
+
+--fcc-editable-region--
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-029.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-029.md
new file mode 100644
index 0000000000..0a08966c51
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-029.md
@@ -0,0 +1,125 @@
+---
+id: 6197f40a16afea068c7e60c8
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Change the stack level of the `.penguin` element such that it appears in front of the `.ground` element, and give it a `position` of `relative`.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex);
+```
+
+You should give the `.penguin` element a `z-index` of `4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4');
+```
+
+You should give `.penguin` a `position` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position);
+```
+
+You should give `.penguin` a `position` of `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+
+}
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-030.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-030.md
new file mode 100644
index 0000000000..087bd7f64c
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-030.md
@@ -0,0 +1,128 @@
+---
+id: 61993b72e874e709b8dfd666
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Target the `.penguin-head` element, and give it a `width` half of its parent's, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg` starting at `gray`, and ending at `rgb(239, 240, 228)`.
+
+# --hints--
+
+You should use the `.penguin-head` selector.
+
+```js
+assert.match(code, /\.penguin-head\s*\{/);
+```
+
+You should give `.penguin-head` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%');
+```
+
+You should give `.penguin-head` a `height` of `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%');
+```
+
+You should give `.penguin-head` a `background` of `linear-gradient(45deg, gray, rgb(239, 240, 228))`.
+
+```js
+assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-031.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-031.md
new file mode 100644
index 0000000000..35ed7efef9
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-031.md
@@ -0,0 +1,122 @@
+---
+id: 61993cf26a8e0f0a553db223
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+_Most_ penguins do not have a square head.
+
+Give the penguin a slightly oval head by setting the radius of the top corners to `70%` and the radius of the bottom corners to `65%`.
+
+# --hints--
+
+You should give `.penguin-head` a `border-radius` of `70% 70% 65% 65%`.
+
+```js
+// Maybe check for individual border-radius properties?
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+--fcc-editable-region--
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+
+}
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-032.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-032.md
new file mode 100644
index 0000000000..05967309b8
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-032.md
@@ -0,0 +1,139 @@
+---
+id: 61993dbb35adf30b10d49e38
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Target the `.penguin-body` element, and give it a `width` of `53%`, and a `height` of `45%`. Then, set the `background` to a linear gradient at `45deg`, `rgb(134, 133, 133)` from `0%`, `rgb(234, 231, 231)` from `25%`, and `white` from `67%`.
+
+# --hints--
+
+You should use the `.penguin-body` selector.
+
+```js
+assert.match(code, /\.penguin-body\s*\{/);
+```
+
+You should give `.penguin-body` a `width` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%');
+```
+
+You should give `.penguin-body` a `height` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%');
+```
+
+You should give `.penguin-body` a `background` of `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-033.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-033.md
new file mode 100644
index 0000000000..08b6dac389
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-033.md
@@ -0,0 +1,133 @@
+---
+id: 61993e9adc9e9a0bb4d28fff
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Another interesting fact about penguins is that they do not have square bodies.
+
+Use the `border-radius` property with a value of `80% 80% 100% 100%`, to give the penguin a slightly rounded body.
+
+# --hints--
+
+You should give `.penguin-body` a `border-radius` of `80% 80% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+
+}
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-034.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-034.md
new file mode 100644
index 0000000000..4ee352a97d
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-034.md
@@ -0,0 +1,139 @@
+---
+id: 6199409834ccaf0d10736596
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Target all descendent elements of the `.penguin` element, and give them a `position` of `absolute`.
+
+# --hints--
+
+You should use the `.penguin *` selector.
+
+```js
+assert.match(code, /\.penguin\s*\*\s*\{/);
+```
+
+You should give `.penguin *` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-035.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-035.md
new file mode 100644
index 0000000000..9bf45b5b6b
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-035.md
@@ -0,0 +1,154 @@
+---
+id: 6199429802b7c10dc79ff871
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Position the `.penguin-head` element `10%` from the top, and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-head` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top);
+```
+
+You should give `.penguin-head` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%');
+```
+
+You should give `.penguin-head` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left);
+```
+
+You should give `.penguin-head` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-036.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-036.md
new file mode 100644
index 0000000000..42e0e75f3e
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-036.md
@@ -0,0 +1,156 @@
+---
+id: 619943285a41720e6370d985
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Position the `.penguin-body` element `40%` from the top, and `23.5%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body` a `top` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top);
+```
+
+You should give `.penguin-body` a `top` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%');
+```
+
+You should give `.penguin-body` a `left` property.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left);
+```
+
+You should give `.penguin-body` a `left` property of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-037.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-037.md
new file mode 100644
index 0000000000..0a22c7385f
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-037.md
@@ -0,0 +1,146 @@
+---
+id: 619943876b706d0f35c01dbc
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Change the stack level of the `.penguin-head` element such that it appears in front of the `.penguin-body` element.
+
+# --hints--
+
+You should use the `z-index` property to change the stack level.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex);
+```
+
+You should give the `.penguin-head` element a `z-index` of `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-038.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-038.md
new file mode 100644
index 0000000000..5e3d14a36c
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-038.md
@@ -0,0 +1,148 @@
+---
+id: 6199442866286d0ff421a4fc
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+To give the penguin body a crest, create a pseudo-element that is the first child of the `.penguin-body` element. Set the `content` property of the pseudo-element to an empty string.
+
+# --hints--
+
+You should use the `.penguin-body::before` selector.
+
+```js
+assert.match(code, /\.penguin-body::before\s*\{/);
+```
+
+You should give `.penguin-body::before` a `content` of `""`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+ z-index: 1;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-039.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-039.md
new file mode 100644
index 0000000000..e9b3efa5fe
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-039.md
@@ -0,0 +1,145 @@
+---
+id: 619bcf239fc15905ecd66fce
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Position the pseudo-element relative to its closest positioned ancestor.
+
+# --hints--
+
+You should give `.penguin-body::before` a `position` of `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+ z-index: 1;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+ content: "";
+
+}
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-040.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-040.md
new file mode 100644
index 0000000000..c20cbd18f6
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-040.md
@@ -0,0 +1,158 @@
+---
+id: 619be73b3c806006ccc00bb0
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Give the pseudo-element a `width` half that of its parent, a `height` of `40%`, and a `background-color` of `gray`.
+
+# --hints--
+
+You should give `.penguin-body::before` a `width` of `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%');
+```
+
+You should give `.penguin-body::before` a `height` of `40%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '40%');
+```
+
+You should give `.penguin-body::before` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+ z-index: 1;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+ content: "";
+ position: absolute;
+
+}
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-041.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-041.md
new file mode 100644
index 0000000000..7649a16fce
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-041.md
@@ -0,0 +1,155 @@
+---
+id: 619be7af7b0bf60770f5d2a4
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Position the pseudo-element `10%` from the top and `25%` from the left of its parent.
+
+# --hints--
+
+You should give `.penguin-body::before` a `top` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%');
+```
+
+You should give `.penguin-body::before` a `left` of `--fcc-expected--`, but found `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+ z-index: 1;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+ content: "";
+ position: absolute;
+ width: 50%;
+ height: 45%;
+ background-color: gray;
+
+}
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-042.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-042.md
new file mode 100644
index 0000000000..f83d871279
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-042.md
@@ -0,0 +1,160 @@
+---
+id: 619be80062551a080e32c821
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Round off the crest, by giving the pseudo-element bottom corners a radius of `100%`, leaving the top corners at `0%`.
+
+# --hints--
+
+You should use the `border-radius` property to round off the crest.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
+```
+
+You should give `.penguin-body::before` a `border-radius` of `0% 0% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+ z-index: 1;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+ content: "";
+ position: absolute;
+ width: 50%;
+ height: 45%;
+ background-color: gray;
+ top: 10%;
+ left: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-043.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-043.md
new file mode 100644
index 0000000000..4ec7e2c0c6
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-043.md
@@ -0,0 +1,152 @@
+---
+id: 619be8ce4ea49008c5bfbc30
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Increase the psuedo-element's transparency by `30%`.
+
+# --hints--
+
+You should give `.penguin-body::before` an `opacity` of `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100vh;
+ overflow: clip;
+}
+
+.left-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+ position: absolute;
+ transform: skew(0deg, 44deg);
+ z-index: 2;
+ margin-top: 100px;
+}
+
+.back-mountain {
+ width: 300px;
+ height: 300px;
+ background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+ position: absolute;
+ z-index: 1;
+ transform: rotate(45deg);
+ left: 110px;
+ top: 225px;
+}
+
+.sun {
+ width: 200px;
+ height: 200px;
+ background-color: yellow;
+ position: absolute;
+ border-radius: 50%;
+ top: -75px;
+ right: -75px;
+}
+
+.penguin {
+ width: 300px;
+ height: 300px;
+ margin: auto;
+ margin-top: 75px;
+ z-index: 4;
+ position: relative;
+}
+
+.penguin * {
+ position: absolute;
+}
+
+.penguin-head {
+ width: 50%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ gray,
+ rgb(239, 240, 228)
+ );
+ border-radius: 70% 70% 65% 65%;
+ top: 10%;
+ left: 25%;
+ z-index: 1;
+}
+
+.penguin-body {
+ width: 53%;
+ height: 45%;
+ background: linear-gradient(
+ 45deg,
+ rgb(134, 133, 133) 0%,
+ rgb(234, 231, 231) 25%,
+ white 67%
+ );
+ border-radius: 80% 80% 100% 100%;
+ top: 40%;
+ left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+ content: "";
+ position: absolute;
+ width: 50%;
+ height: 45%;
+ background-color: gray;
+ top: 10%;
+ left: 25%;
+ border-radius: 0% 0% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+ width: 100vw;
+ height: 400px;
+ background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+ z-index: 3;
+ position: absolute;
+ margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-044.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-044.md
new file mode 100644
index 0000000000..7fe3dbf1ff
--- /dev/null
+++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-transforms-by-building-a-penguin/step-044.md
@@ -0,0 +1,166 @@
+---
+id: 619be946958c6009844f1dee
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start the penguin's face, by adding two `div` elements within `.penguin-head`, and giving them both a `class` of `face`.
+
+# --hints--
+
+You should add `--fcc-expected--` `div` elements to `.penguin-head`, but found `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
+```
+
+You should give the first `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face');
+```
+
+You should give the second `div` a `class` of `face`, but found `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CSS Penguin
+
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+--fcc-editable-region--
+
+
+
+--fcc-editable-region--
+
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+--fcc-editable-region--
+
+
+
+--fcc-editable-region--
+
+
+
+--fcc-editable-region--
+
+
+
+
+
+--fcc-editable-region--
+