From 5df8774eab17ae834ce09e8ce1832fa3d1dc74d6 Mon Sep 17 00:00:00 2001 From: Dario-DC <105294544+Dario-DC@users.noreply.github.com> Date: Mon, 21 Oct 2024 16:56:19 +0200 Subject: [PATCH] chore(curriculum): add penguin workshop (#56748) Co-authored-by: Zaira <33151350+zairahira@users.noreply.github.com> --- client/i18n/locales/english/intro.json | 8 +- .../workshop-flappy-penguin/index.md | 11 + .../_meta/workshop-flappy-penguin/meta.json | 429 +++++++++++ .../619665c9abd72906f3ad30f9.md | 65 ++ .../61967e74a8e3690ab6292daa.md | 56 ++ .../61968df2acd5550bf1616c34.md | 53 ++ .../61968e9243a4090cc805531c.md | 51 ++ .../61968f8877c6720d6d61aaf5.md | 64 ++ .../619691693bc14b0e528f5a20.md | 66 ++ .../6196928658b6010f28c39484.md | 58 ++ .../619692ff79f5770fc6d8c0b4.md | 73 ++ .../6196990f966e8f10a40094f6.md | 75 ++ .../619699c10a0f6e11591d73c4.md | 74 ++ .../61969aa6acef5b12200f672e.md | 83 +++ .../61969c487ced6f12db8fef94.md | 89 +++ .../61969d66cfcdba137d021558.md | 76 ++ .../61969e7451455614217e901b.md | 91 +++ .../6196adc17f77a714d51485f2.md | 90 +++ .../6196aead7ac7bf1584b17a7f.md | 86 +++ .../6196ce0415498d2463989e84.md | 92 +++ .../6196cee94c6da1253809dff9.md | 100 +++ .../6196d00a5d7292262bc02f4c.md | 87 +++ .../6196d0cda039d026f7f78d1e.md | 100 +++ .../6196d1ac33c68d27dcda5796.md | 131 ++++ .../6196d213d99f16287bff22ae.md | 104 +++ .../6196d2c0f22ca0293107c048.md | 112 +++ .../6196d32d1340d829f0f6f57d.md | 105 +++ .../6196d41d40bf9b2aaea5d520.md | 107 +++ .../6197cff995d03905b0cca8ad.md | 118 +++ .../6197f40a16afea068c7e60c8.md | 125 ++++ .../6197f667297bb30a552ce017.md | 65 ++ .../61993b72e874e709b8dfd666.md | 128 ++++ .../61993cf26a8e0f0a553db223.md | 122 ++++ .../61993dbb35adf30b10d49e38.md | 139 ++++ .../61993e9adc9e9a0bb4d28fff.md | 133 ++++ .../6199409834ccaf0d10736596.md | 139 ++++ .../6199429802b7c10dc79ff871.md | 154 ++++ .../619943285a41720e6370d985.md | 156 ++++ .../619943876b706d0f35c01dbc.md | 146 ++++ .../6199442866286d0ff421a4fc.md | 148 ++++ .../619bcf239fc15905ecd66fce.md | 145 ++++ .../619be73b3c806006ccc00bb0.md | 158 +++++ .../619be7af7b0bf60770f5d2a4.md | 155 ++++ .../619be80062551a080e32c821.md | 160 +++++ .../619be8ce4ea49008c5bfbc30.md | 152 ++++ .../619be946958c6009844f1dee.md | 166 +++++ .../619c155df0063a0a3fec0e32.md | 193 +++++ .../619c16debd0c270b01c5ce38.md | 165 +++++ .../619cfdf2e63ddf05feab86ad.md | 169 +++++ .../619d019488f98c06acbbb71a.md | 171 +++++ .../619d022dc8400c0763829a17.md | 177 +++++ .../619d02c7bc95bf0827a5d296.md | 181 +++++ .../619d033915012509031f309a.md | 184 +++++ .../619d03dadadb6509a16f4f5f.md | 210 ++++++ .../619d0503e03a790a4179d463.md | 206 ++++++ .../619d05c54dabca0b10058235.md | 197 +++++ .../619d0882f54bf40bdc4671ed.md | 197 +++++ .../619d090cd8d6db0c93dc5087.md | 222 ++++++ .../619d0b51ca42ed0d74582186.md | 207 ++++++ .../619d0bc9cb05360e1bf549c3.md | 200 ++++++ .../619d0c1594c38c0ebae75878.md | 215 ++++++ .../619d0d18ca99870f884a7bff.md | 225 ++++++ .../619d0daf214542102739b0da.md | 227 ++++++ .../619d0e56f9ca9710fcb974e3.md | 226 ++++++ .../619d0eec0ac40611b41e2ccc.md | 247 +++++++ .../619d0fc9825c271253df28d4.md | 238 +++++++ .../619d102d786c3d13124c37c6.md | 231 ++++++ .../619d107edf7ddf13cc77106a.md | 246 +++++++ .../619d10cc98145f14820399c5.md | 271 +++++++ .../619d115e2adcd71538e82ebb.md | 256 +++++++ .../619d11e6d5ef9515d2a16033.md | 262 +++++++ .../619d129a417d0716a94de913.md | 267 +++++++ .../619d1340361095175f4b5115.md | 267 +++++++ .../619d15797b580c1828b05426.md | 263 +++++++ .../619d15d955d9d418c4487bbc.md | 264 +++++++ .../619d1629a8adc61960ca8b40.md | 278 ++++++++ .../619d1c5fc9f8941a400955da.md | 272 +++++++ .../619d1dab9ff3421ae1976991.md | 273 +++++++ .../619d1deb8b04811b8839ffe4.md | 281 ++++++++ .../619d1e7a8e81a61c5a819dc4.md | 272 +++++++ .../619d1ed33c9a071cf657a0d6.md | 306 ++++++++ .../619d1fb5d244c31db8a7fdb7.md | 295 ++++++++ .../619d204bd73ae51e743b8e94.md | 288 ++++++++ .../619d20b12996101f430920fb.md | 304 ++++++++ .../619d21fe6a3f9b2016be9d9d.md | 304 ++++++++ .../619d229b0e542520cd91c685.md | 312 ++++++++ .../619d23089e787e216a7043d6.md | 295 ++++++++ .../619d237a107c10221ed743fa.md | 328 +++++++++ .../619d26b12e651022d80cd017.md | 317 +++++++++ .../619d2712853306238f41828e.md | 332 +++++++++ .../619d2b7a84e78b246f2d17a2.md | 340 +++++++++ .../619d2bd9c1d43c2526e96f1f.md | 325 +++++++++ .../619d2d4e80400325ff89664a.md | 326 +++++++++ .../619d2ebc81ba81271460850d.md | 326 +++++++++ .../619d2f0e9440bc27caee1cec.md | 327 +++++++++ .../619d2fd3ff4f772882e3d998.md | 323 +++++++++ .../619d30350883802921bfcccc.md | 333 +++++++++ .../619d324f5915c929f36ae91d.md | 351 +++++++++ .../619d32c7fa21f32aaa91d499.md | 347 +++++++++ .../619d333b738e3c2b5d58b095.md | 347 +++++++++ .../619d337765b9f02c10e93722.md | 362 ++++++++++ .../619d33c51140292cc5a21742.md | 357 ++++++++++ .../619d3482f505452d861d0f62.md | 347 +++++++++ .../619d3561a951bf2e41a24f10.md | 346 +++++++++ .../619d36103839c82efa95dd34.md | 357 ++++++++++ .../619d3711d04d623000013e9e.md | 670 ++++++++++++++++++ .../61a8fe15a6a31306e60d1e89.md | 55 ++ curriculum/test/utils/mongo-ids.js | 105 ++- 108 files changed, 21828 insertions(+), 2 deletions(-) create mode 100644 client/src/pages/learn/front-end-development/workshop-flappy-penguin/index.md create mode 100644 curriculum/challenges/_meta/workshop-flappy-penguin/meta.json create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index c4404eb1595..1fbbbda050b 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -2084,13 +2084,19 @@ "intro": ["Test what you've learned in this quiz of using grid in CSS."] }, "dorc": { "title": "120", "intro": [] }, - "adzu": { "title": "121", "intro": [] }, "lab-moon-orbit": { "title": "Build a Moon Orbit", "intro": [ "For this lab, you will create an animation of the moon orbiting the earth." ] }, + "workshop-flappy-penguin": { + "title": "Build a Flappy Penguin", + "intro": [ + "You can transform HTML elements to create appealing designs that draw your reader's eye. You can use transforms to rotate elements, scale them, and more.", + "In this workshop, you'll build a penguin. You'll use CSS transforms to position and resize the parts of your penguin, create a background, and animate your work." + ] + }, "lugl": { "title": "123", "intro": [] }, "lab-personal-portfolio": { "title": "Build a Personal Portfolio", diff --git a/client/src/pages/learn/front-end-development/workshop-flappy-penguin/index.md b/client/src/pages/learn/front-end-development/workshop-flappy-penguin/index.md new file mode 100644 index 00000000000..e7e5b1b8da2 --- /dev/null +++ b/client/src/pages/learn/front-end-development/workshop-flappy-penguin/index.md @@ -0,0 +1,11 @@ +--- +title: Introduction to the Build a Flappy Penguin +block: workshop-flappy-penguin +superBlock: front-end-development +--- + +## Introduction to the Build a Penguin + +You can transform HTML elements to create appealing designs that draw your reader's eye. You can use transforms to rotate elements, scale them, and more. + +In this workshop, you'll build a penguin. You'll use CSS transforms to position and resize the parts of your penguin, create a background, and animate your work. diff --git a/curriculum/challenges/_meta/workshop-flappy-penguin/meta.json b/curriculum/challenges/_meta/workshop-flappy-penguin/meta.json new file mode 100644 index 00000000000..50f5a26659a --- /dev/null +++ b/curriculum/challenges/_meta/workshop-flappy-penguin/meta.json @@ -0,0 +1,429 @@ +{ + "name": "Build a Flappy Penguin", + "blockType": "workshop", + "isUpcomingChange": true, + "usesMultifileEditor": true, + "hasEditableBoundaries": true, + "dashedName": "workshop-flappy-penguin", + "order": 122, + "superBlock": "front-end-development", + "challengeOrder": [ + { + "id": "619665c9abd72906f3ad30f9", + "title": "Step 1" + }, + { + "id": "61967e74a8e3690ab6292daa", + "title": "Step 2" + }, + { + "id": "61968df2acd5550bf1616c34", + "title": "Step 3" + }, + { + "id": "61a8fe15a6a31306e60d1e89", + "title": "Step 4" + }, + { + "id": "61968e9243a4090cc805531c", + "title": "Step 5" + }, + { + "id": "61968f8877c6720d6d61aaf5", + "title": "Step 6" + }, + { + "id": "619691693bc14b0e528f5a20", + "title": "Step 7" + }, + { + "id": "6196928658b6010f28c39484", + "title": "Step 8" + }, + { + "id": "6197f667297bb30a552ce017", + "title": "Step 9" + }, + { + "id": "619692ff79f5770fc6d8c0b4", + "title": "Step 10" + }, + { + "id": "6196990f966e8f10a40094f6", + "title": "Step 11" + }, + { + "id": "619699c10a0f6e11591d73c4", + "title": "Step 12" + }, + { + "id": "61969aa6acef5b12200f672e", + "title": "Step 13" + }, + { + "id": "61969c487ced6f12db8fef94", + "title": "Step 14" + }, + { + "id": "61969d66cfcdba137d021558", + "title": "Step 15" + }, + { + "id": "61969e7451455614217e901b", + "title": "Step 16" + }, + { + "id": "6196adc17f77a714d51485f2", + "title": "Step 17" + }, + { + "id": "6196aead7ac7bf1584b17a7f", + "title": "Step 18" + }, + { + "id": "6196ce0415498d2463989e84", + "title": "Step 19" + }, + { + "id": "6196cee94c6da1253809dff9", + "title": "Step 20" + }, + { + "id": "6196d00a5d7292262bc02f4c", + "title": "Step 21" + }, + { + "id": "6196d0cda039d026f7f78d1e", + "title": "Step 22" + }, + { + "id": "6196d1ac33c68d27dcda5796", + "title": "Step 23" + }, + { + "id": "6196d213d99f16287bff22ae", + "title": "Step 24" + }, + { + "id": "6196d2c0f22ca0293107c048", + "title": "Step 25" + }, + { + "id": "6196d32d1340d829f0f6f57d", + "title": "Step 26" + }, + { + "id": "6196d41d40bf9b2aaea5d520", + "title": "Step 27" + }, + { + "id": "6197cff995d03905b0cca8ad", + "title": "Step 28" + }, + { + "id": "6197f40a16afea068c7e60c8", + "title": "Step 29" + }, + { + "id": "61993b72e874e709b8dfd666", + "title": "Step 30" + }, + { + "id": "61993cf26a8e0f0a553db223", + "title": "Step 31" + }, + { + "id": "61993dbb35adf30b10d49e38", + "title": "Step 32" + }, + { + "id": "61993e9adc9e9a0bb4d28fff", + "title": "Step 33" + }, + { + "id": "6199409834ccaf0d10736596", + "title": "Step 34" + }, + { + "id": "6199429802b7c10dc79ff871", + "title": "Step 35" + }, + { + "id": "619943285a41720e6370d985", + "title": "Step 36" + }, + { + "id": "619943876b706d0f35c01dbc", + "title": "Step 37" + }, + { + "id": "6199442866286d0ff421a4fc", + "title": "Step 38" + }, + { + "id": "619bcf239fc15905ecd66fce", + "title": "Step 39" + }, + { + "id": "619be73b3c806006ccc00bb0", + "title": "Step 40" + }, + { + "id": "619be7af7b0bf60770f5d2a4", + "title": "Step 41" + }, + { + "id": "619be80062551a080e32c821", + "title": "Step 42" + }, + { + "id": "619be8ce4ea49008c5bfbc30", + "title": "Step 43" + }, + { + "id": "619be946958c6009844f1dee", + "title": "Step 44" + }, + { + "id": "619c155df0063a0a3fec0e32", + "title": "Step 45" + }, + { + "id": "619c16debd0c270b01c5ce38", + "title": "Step 46" + }, + { + "id": "619cfdf2e63ddf05feab86ad", + "title": "Step 47" + }, + { + "id": "619d019488f98c06acbbb71a", + "title": "Step 48" + }, + { + "id": "619d022dc8400c0763829a17", + "title": "Step 49" + }, + { + "id": "619d02c7bc95bf0827a5d296", + "title": "Step 50" + }, + { + "id": "619d033915012509031f309a", + "title": "Step 51" + }, + { + "id": "619d03dadadb6509a16f4f5f", + "title": "Step 52" + }, + { + "id": "619d0503e03a790a4179d463", + "title": "Step 53" + }, + { + "id": "619d05c54dabca0b10058235", + "title": "Step 54" + }, + { + "id": "619d0882f54bf40bdc4671ed", + "title": "Step 55" + }, + { + "id": "619d090cd8d6db0c93dc5087", + "title": "Step 56" + }, + { + "id": "619d0b51ca42ed0d74582186", + "title": "Step 57" + }, + { + "id": "619d0bc9cb05360e1bf549c3", + "title": "Step 58" + }, + { + "id": "619d0c1594c38c0ebae75878", + "title": "Step 59" + }, + { + "id": "619d0d18ca99870f884a7bff", + "title": "Step 60" + }, + { + "id": "619d0daf214542102739b0da", + "title": "Step 61" + }, + { + "id": "619d0e56f9ca9710fcb974e3", + "title": "Step 62" + }, + { + "id": "619d0eec0ac40611b41e2ccc", + "title": "Step 63" + }, + { + "id": "619d0fc9825c271253df28d4", + "title": "Step 64" + }, + { + "id": "619d102d786c3d13124c37c6", + "title": "Step 65" + }, + { + "id": "619d107edf7ddf13cc77106a", + "title": "Step 66" + }, + { + "id": "619d10cc98145f14820399c5", + "title": "Step 67" + }, + { + "id": "619d115e2adcd71538e82ebb", + "title": "Step 68" + }, + { + "id": "619d11e6d5ef9515d2a16033", + "title": "Step 69" + }, + { + "id": "619d129a417d0716a94de913", + "title": "Step 70" + }, + { + "id": "619d1340361095175f4b5115", + "title": "Step 71" + }, + { + "id": "619d15797b580c1828b05426", + "title": "Step 72" + }, + { + "id": "619d15d955d9d418c4487bbc", + "title": "Step 73" + }, + { + "id": "619d1629a8adc61960ca8b40", + "title": "Step 74" + }, + { + "id": "619d1c5fc9f8941a400955da", + "title": "Step 75" + }, + { + "id": "619d1dab9ff3421ae1976991", + "title": "Step 76" + }, + { + "id": "619d1deb8b04811b8839ffe4", + "title": "Step 77" + }, + { + "id": "619d1e7a8e81a61c5a819dc4", + "title": "Step 78" + }, + { + "id": "619d1ed33c9a071cf657a0d6", + "title": "Step 79" + }, + { + "id": "619d1fb5d244c31db8a7fdb7", + "title": "Step 80" + }, + { + "id": "619d204bd73ae51e743b8e94", + "title": "Step 81" + }, + { + "id": "619d20b12996101f430920fb", + "title": "Step 82" + }, + { + "id": "619d21fe6a3f9b2016be9d9d", + "title": "Step 83" + }, + { + "id": "619d229b0e542520cd91c685", + "title": "Step 84" + }, + { + "id": "619d23089e787e216a7043d6", + "title": "Step 85" + }, + { + "id": "619d237a107c10221ed743fa", + "title": "Step 86" + }, + { + "id": "619d26b12e651022d80cd017", + "title": "Step 87" + }, + { + "id": "619d2712853306238f41828e", + "title": "Step 88" + }, + { + "id": "619d2b7a84e78b246f2d17a2", + "title": "Step 89" + }, + { + "id": "619d2bd9c1d43c2526e96f1f", + "title": "Step 90" + }, + { + "id": "619d2d4e80400325ff89664a", + "title": "Step 91" + }, + { + "id": "619d2ebc81ba81271460850d", + "title": "Step 92" + }, + { + "id": "619d2f0e9440bc27caee1cec", + "title": "Step 93" + }, + { + "id": "619d2fd3ff4f772882e3d998", + "title": "Step 94" + }, + { + "id": "619d30350883802921bfcccc", + "title": "Step 95" + }, + { + "id": "619d324f5915c929f36ae91d", + "title": "Step 96" + }, + { + "id": "619d32c7fa21f32aaa91d499", + "title": "Step 97" + }, + { + "id": "619d333b738e3c2b5d58b095", + "title": "Step 98" + }, + { + "id": "619d337765b9f02c10e93722", + "title": "Step 99" + }, + { + "id": "619d33c51140292cc5a21742", + "title": "Step 100" + }, + { + "id": "619d3482f505452d861d0f62", + "title": "Step 101" + }, + { + "id": "619d3561a951bf2e41a24f10", + "title": "Step 102" + }, + { + "id": "619d36103839c82efa95dd34", + "title": "Step 103" + }, + { + "id": "619d3711d04d623000013e9e", + "title": "Step 104" + } + ], + "helpCategory": "HTML-CSS" +} diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md new file mode 100644 index 00000000000..6a1bfc5b2b1 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619665c9abd72906f3ad30f9.md @@ -0,0 +1,65 @@ +--- +id: 619665c9abd72906f3ad30f9 +title: Step 1 +challengeType: 0 +dashedName: step-1 +demoType: onLoad +--- + +# --description-- + +You will be building a happy Flappy Penguin, and further practicing CSS transforms and animations in the process. + +Begin with linking your stylesheet to the page. + +# --hints-- + +Your code should have a `link` element. + +```js +assert.exists(document.querySelector('link')); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)); +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +const link_element = document.querySelector('link'); +const rel = link_element.getAttribute("rel"); +assert.equal(rel, "stylesheet"); +``` + +Your `link` element should have an `href` attribute with the value `styles.css`. + +```js +const link = document.querySelector('link'); +assert.equal(link.dataset.href, "styles.css"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + Penguin + + +--fcc-editable-region-- + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md new file mode 100644 index 00000000000..11e1aa4022c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61967e74a8e3690ab6292daa.md @@ -0,0 +1,56 @@ +--- +id: 61967e74a8e3690ab6292daa +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Target the `body` element to set the `background` to a linear gradient angled 45 degrees clockwise, starting at `rgb(118, 201, 255)` and ending at `rgb(247, 255, 222)`. + +# --hints-- + +You should use the `body` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +``` + +You should use the `background` property in the `body` selector. + +```js +assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background')); +``` + +You should set `background` to `linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`. + +```js +assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md new file mode 100644 index 00000000000..9a14cd53351 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61968df2acd5550bf1616c34.md @@ -0,0 +1,53 @@ +--- +id: 61968df2acd5550bf1616c34 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Normalize 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 + + + + + + + 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/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md new file mode 100644 index 00000000000..69b77818e03 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61968e9243a4090cc805531c.md @@ -0,0 +1,51 @@ +--- +id: 61968e9243a4090cc805531c +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Remove both the horizontal and vertical scrollbars, using only one property. + +# --hints-- + +You should give `body` an `overflow` of `--fcc-expected--`. But found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + 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/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.md new file mode 100644 index 00000000000..5a62adc6dc4 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61968f8877c6720d6d61aaf5.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 + + + + + + + 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: hidden; +} +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.md new file mode 100644 index 00000000000..a7d08754c7f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619691693bc14b0e528f5a20.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 + + + + + + + Penguin + + + + +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.md new file mode 100644 index 00000000000..afa5d6f94b8 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196928658b6010f28c39484.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(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +--fcc-editable-region-- +.ground { + width: 100vw; + height: 400px; + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.md new file mode 100644 index 00000000000..453a865ebdd --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619692ff79f5770fc6d8c0b4.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 + + + + + + + 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: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.md new file mode 100644 index 00000000000..694c4ab9a4f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196990f966e8f10a40094f6.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 + + + + + + + Penguin + + + + +
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +--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/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md new file mode 100644 index 00000000000..f60b61666e3 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619699c10a0f6e11591d73c4.md @@ -0,0 +1,74 @@ +--- +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'); +``` + +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 + + + + + + + Penguin + + + + +
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +--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/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.md new file mode 100644 index 00000000000..22cb89b8a09 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61969aa6acef5b12200f672e.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 + + + + + + + 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: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.md new file mode 100644 index 00000000000..3568d09eebc --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61969c487ced6f12db8fef94.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(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +--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/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.md new file mode 100644 index 00000000000..af9425894d4 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61969d66cfcdba137d021558.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 + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +--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/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.md new file mode 100644 index 00000000000..f42588bfa22 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61969e7451455614217e901b.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 + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +--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/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.md new file mode 100644 index 00000000000..10f740f4b95 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196adc17f77a714d51485f2.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 + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +--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/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.md new file mode 100644 index 00000000000..39140afc8a7 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196aead7ac7bf1584b17a7f.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 + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +--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/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.md new file mode 100644 index 00000000000..b6ddd5cad78 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196ce0415498d2463989e84.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 + + + + + + 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: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.md new file mode 100644 index 00000000000..bcbe4d3e9df --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196cee94c6da1253809dff9.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 + + + + + + Penguin + + + + +
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.md new file mode 100644 index 00000000000..4bb9ea8634b --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d00a5d7292262bc02f4c.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 + + + + + + Penguin + + + + +
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.md new file mode 100644 index 00000000000..d3fd0045025 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d0cda039d026f7f78d1e.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 + + + + + + Penguin + + + + +
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md new file mode 100644 index 00000000000..cdd348db03a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d1ac33c68d27dcda5796.md @@ -0,0 +1,131 @@ +--- +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 +const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain'); + +if (backMountain?.transform) { + assert.notEmpty(backMountain?.transform); +} else { + assert.notEmpty(backMountain?.rotate); +} +``` + +You should give `.back-mountain` a `transform` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +const backMountain = new __helpers.CSSHelp(document).getStyle('.back-mountain'); + +if (backMountain?.transform) { + assert.equal(backMountain?.transform, 'rotate(45deg)'); +} else { + assert.equal(backMountain?.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 + + + + + + Penguin + + + + +
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.md new file mode 100644 index 00000000000..151831dbd7e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d213d99f16287bff22ae.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 + + + + + + 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: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.md new file mode 100644 index 00000000000..1ea98d88787 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d2c0f22ca0293107c048.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 + + + + + + Penguin + + + + +
+
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.md new file mode 100644 index 00000000000..f924e1d525c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d32d1340d829f0f6f57d.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 + + + + + + Penguin + + + + +
+
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.md new file mode 100644 index 00000000000..969618185d4 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6196d41d40bf9b2aaea5d520.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 + + + + + + Penguin + + + + +
+
+
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.md new file mode 100644 index 00000000000..1253455f06c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6197cff995d03905b0cca8ad.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 + + + + + + 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: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.md new file mode 100644 index 00000000000..5256d40e7df --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6197f40a16afea068c7e60c8.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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.md new file mode 100644 index 00000000000..7bde415f0d5 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6197f667297bb30a552ce017.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 + + + + + + + Penguin + + + + +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +--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/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.md new file mode 100644 index 00000000000..4f42960c106 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61993b72e874e709b8dfd666.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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.md new file mode 100644 index 00000000000..79822ed8830 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61993cf26a8e0f0a553db223.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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.md new file mode 100644 index 00000000000..42992c942da --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61993dbb35adf30b10d49e38.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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.md new file mode 100644 index 00000000000..1304f820e21 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61993e9adc9e9a0bb4d28fff.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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.md new file mode 100644 index 00000000000..177fa37ed73 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6199409834ccaf0d10736596.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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.md new file mode 100644 index 00000000000..39d2becaa76 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6199429802b7c10dc79ff871.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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.md new file mode 100644 index 00000000000..19e79ad76bc --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619943285a41720e6370d985.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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.md new file mode 100644 index 00000000000..841e0fac705 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619943876b706d0f35c01dbc.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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.md new file mode 100644 index 00000000000..71620d485d4 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/6199442866286d0ff421a4fc.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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.md new file mode 100644 index 00000000000..95939a0a797 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619bcf239fc15905ecd66fce.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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.md new file mode 100644 index 00000000000..144a2630433 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be73b3c806006ccc00bb0.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 `45%`, 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 `45%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%'); +``` + +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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.md new file mode 100644 index 00000000000..32e8d7967ed --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be7af7b0bf60770f5d2a4.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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.md new file mode 100644 index 00000000000..f22f0e39445 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be80062551a080e32c821.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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md new file mode 100644 index 00000000000..1c9a12db865 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be8ce4ea49008c5bfbc30.md @@ -0,0 +1,152 @@ +--- +id: 619be8ce4ea49008c5bfbc30 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Increase the pseudo-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 + + + + + + Penguin + + + + +
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.md new file mode 100644 index 00000000000..088e47ba55a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619be946958c6009844f1dee.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 + + + + + + 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: hidden; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md new file mode 100644 index 00000000000..e25cfd80ce6 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619c155df0063a0a3fec0e32.md @@ -0,0 +1,193 @@ +--- +id: 619c155df0063a0a3fec0e32 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Give the `.face` elements a `width` of `60%`, a `height` of `70%`, and a `background-color` of `white`. + +# --hints-- + +You should use the `.face` selector. + +```js +assert.match(code, /\.face\s*\{/); +``` + +You should give `.face` a `width` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width); +``` + +You should give `.face` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%'); +``` + +You should give `.face` a `height` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height); +``` + +You should give `.face` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%'); +``` + +You should give `.face` a `background-color` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor); +``` + +You should give `.face` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +--fcc-editable-region-- + +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md new file mode 100644 index 00000000000..999faf2cd74 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619c16debd0c270b01c5ce38.md @@ -0,0 +1,165 @@ +--- +id: 619c16debd0c270b01c5ce38 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Make the top corners of the `.face` elements have a radius of `70%`, and the bottom corners have a radius of `60%`. + +# --hints-- + +You should give `.face` a `border-radius` of `70% 70% 60% 60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +--fcc-editable-region-- +.face { + width: 60%; + height: 70%; + background-color: white; + +} +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md new file mode 100644 index 00000000000..1204286781b --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619cfdf2e63ddf05feab86ad.md @@ -0,0 +1,169 @@ +--- +id: 619cfdf2e63ddf05feab86ad +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Position the `.face` elements so that they are `15%` from the top. + +# --hints-- + +You should give `.face` a `top` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top); +``` + +You should give `.face` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +--fcc-editable-region-- +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + +} +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md new file mode 100644 index 00000000000..3529e082899 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d019488f98c06acbbb71a.md @@ -0,0 +1,171 @@ +--- +id: 619d019488f98c06acbbb71a +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Currently, the two `.face` elements are on top of each other. + +Fix this, by adding a `class` of `left` to the first `.face` element, and a `class` of `right` to the second `.face` element. + +# --hints-- + +You should give a `class` of `left` to the first `.face` element. + +```js +assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left'); +``` + +You should give a `class` of `right` to the second `.face` element. + +```js +assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + 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: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md new file mode 100644 index 00000000000..cdb0268e02e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d022dc8400c0763829a17.md @@ -0,0 +1,177 @@ +--- +id: 619d022dc8400c0763829a17 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Target the `.face` element with the `left` class, and position it `5%` left of its parent. + +# --hints-- + +You should use the `.face.left` selector. + +```js +assert.match(code, /\.face\.left\s*\{/); +``` + +You should give `.face.left` a `left` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left); +``` + +You should give `.face.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +--fcc-editable-region-- + +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md new file mode 100644 index 00000000000..c81e359b35a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d02c7bc95bf0827a5d296.md @@ -0,0 +1,181 @@ +--- +id: 619d02c7bc95bf0827a5d296 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Target the `.face` element with the `right` class, and position it `5%` right of its parent. + +# --hints-- + +You should use the `.face.right` selector. + +```js +assert.match(code, /\.face\.right\s*\{/); +``` + +You should give `.face.right` a `right` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right); +``` + +You should give `.face.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +--fcc-editable-region-- +.face.left { + left: 5%; +} + + +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md new file mode 100644 index 00000000000..7101cc6218f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d033915012509031f309a.md @@ -0,0 +1,184 @@ +--- +id: 619d033915012509031f309a +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Below the `.face.right` element, add a `div` element with a `class` of `chin`. + +# --hints-- + +You should add one `div` element within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3); +``` + +You should give the `div` a `class` of `chin`. + +```js +assert.exists(document.querySelector('.penguin-head > div.chin')); +``` + +You should place the `div` element below the `.face.right` element. + +```js +assert.exists(document.querySelector('.face.right + .chin')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + 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: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md new file mode 100644 index 00000000000..8ff74476150 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d03dadadb6509a16f4f5f.md @@ -0,0 +1,210 @@ +--- +id: 619d03dadadb6509a16f4f5f +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Target the `.chin` element, and give it a `width` of `90%`, `height` of `70%`, and `background-color` of `white`. + +# --hints-- + +You should use the `.chin` selector. + +```js +assert.match(code, /\.chin\s*\{/); +``` + +You should give `.chin` a `width` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width); +``` + +You should give `.chin` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%'); +``` + +You should give `.chin` a `height` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height); +``` + +You should give `.chin` a `height` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%'); +``` + +You should give `.chin` a `background-color` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor); +``` + +You should give `.chin` a `background-color` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +--fcc-editable-region-- + +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md new file mode 100644 index 00000000000..9177d13254c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0503e03a790a4179d463.md @@ -0,0 +1,206 @@ +--- +id: 619d0503e03a790a4179d463 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Position the `.chin` element such that it is `25%` from the top, and `5%` from the left of its parent. Then, give the top corners a radius of `70%`, and the bottom corners a radius of `100%`. + +# --hints-- + +You should give `.chin` a `top` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top); +``` + +You should give `.chin` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%'); +``` + +You should give `.chin` a `left` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left); +``` + +You should give `.chin` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%'); +``` + +You should give `.chin` a `border-radius` of `70% 70% 100% 100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +--fcc-editable-region-- +.chin { + width: 90%; + height: 70%; + background-color: white; + +} +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md new file mode 100644 index 00000000000..ca096090f15 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d05c54dabca0b10058235.md @@ -0,0 +1,197 @@ +--- +id: 619d05c54dabca0b10058235 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +So far, the `.face` and `.chin` elements have the same `background-color`. + +Create a custom CSS property called `--penguin-face`, and set it to `white`. + +# --hints-- + +You should use the `:root` selector. + +```js +assert.match(code, /:root\s*\{/); +``` + +You should give `:root` a `--penguin-face` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face')); +``` + +You should give `:root` a `--penguin-face` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: white; + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md new file mode 100644 index 00000000000..207c0664d1d --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0882f54bf40bdc4671ed.md @@ -0,0 +1,197 @@ +--- +id: 619d0882f54bf40bdc4671ed +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Where relevant, replace property values with your `--penguin-face` variable. + +# --hints-- + +You should give `.face` a `background-color` of `var(--penguin-face)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)'); +``` + +You should give `.chin` a `background-color` of `var(--penguin-face)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)'); +``` + +You should not use `var(--penguin-face)` in the `.penguin-body` selector. + +```js +assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +--fcc-editable-region-- +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: white; + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: white; + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md new file mode 100644 index 00000000000..a7caac10b52 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d090cd8d6db0c93dc5087.md @@ -0,0 +1,222 @@ +--- +id: 619d090cd8d6db0c93dc5087 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Below the `.chin` element, add two `div` elements each with a `class` of `eye`. Also, give the first `.eye` element a `class` of `left`, and the second `.eye` element a `class` of `right`. + +# --hints-- + +You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5); +``` + +You should give the first new `div` a `class` of `eye`. + +```js +assert.exists(document.querySelector('.penguin-head > div.eye')); +``` + +You should give the second new `div` a `class` of `eye`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2); +``` + +You should give the first new `div` a `class` of `left`. + +```js +assert.exists(document.querySelector('.penguin-head > div.eye.left')); +``` + +You should give the second new `div` a `class` of `right`. + +```js +assert.exists(document.querySelector('.penguin-head > div.eye.right')); +``` + +You should place `div.eye.left` after `div.chin`. + +```js +assert.exists(document.querySelector('.chin + .eye.left')); +``` + +You should place `div.eye.right` after `div.eye.left`. + +```js +assert.exists(document.querySelector('.eye.left + .eye.right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+--fcc-editable-region-- +
+
+
+
+ +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md new file mode 100644 index 00000000000..e2f3ce9e935 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0b51ca42ed0d74582186.md @@ -0,0 +1,207 @@ +--- +id: 619d0b51ca42ed0d74582186 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Target the `.eye` elements, and give them a `width` of `15%`, `height` of `17%`, and `background-color` of `black`. + +# --hints-- + +You should use the `.eye` selector. + +```js +assert.match(code, /\.eye\s*\{/); +``` + +You should give `.eye` a `width` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%'); +``` + +You should give `.eye` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%'); +``` + +You should give `.eye` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +--fcc-editable-region-- + +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md new file mode 100644 index 00000000000..a4e7d18c120 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0bc9cb05360e1bf549c3.md @@ -0,0 +1,200 @@ +--- +id: 619d0bc9cb05360e1bf549c3 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Position the `.eye` elements `45%` from the top of their parent, and give all corners a radius of `50%`. + +# --hints-- + +You should give `.eye` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%'); +``` + +You should give `.eye` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +--fcc-editable-region-- +.eye { + width: 15%; + height: 17%; + background-color: black; + +} +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md new file mode 100644 index 00000000000..b567a24805d --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0c1594c38c0ebae75878.md @@ -0,0 +1,215 @@ +--- +id: 619d0c1594c38c0ebae75878 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Target the `.eye` element with the `left` class, and position it `25%` from the left of its parent. Then, target the `.eye` element with the `right` class, and position it `25%` from the right of its parent. + +# --hints-- + +You should use the `.eye.left` selector. + +```js +assert.match(code, /\.eye\.left\s*\{/); +``` + +You should give `.eye.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%'); +``` + +You should use the `.eye.right` selector. + +```js +assert.match(code, /\.eye\.right\s*\{/); +``` + +You should give `.eye.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +--fcc-editable-region-- + +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md new file mode 100644 index 00000000000..14f31e0c18f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0d18ca99870f884a7bff.md @@ -0,0 +1,225 @@ +--- +id: 619d0d18ca99870f884a7bff +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Within each `.eye` element, add a `div` with a `class` of `eye-lid`. + +# --hints-- + +You should add one `div` element within `.eye.left`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1); +``` + +You should add one `div` element within `.eye.right`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1); +``` + +You should give the first new `div` a `class` of `eye-lid`. + +```js +assert.exists(document.querySelector('.eye.left > div.eye-lid')); +``` + +You should give the second new `div` a `class` of `eye-lid`. + +```js +assert.exists(document.querySelector('.eye.right > div.eye-lid')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+ +
+
+ +
+
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md new file mode 100644 index 00000000000..224cfce88b2 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0daf214542102739b0da.md @@ -0,0 +1,227 @@ +--- +id: 619d0daf214542102739b0da +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Target the `.eye-lid` elements, and give them a `width` of `150%`, `height` of `100%`, and `background-color` of `--penguin-face`. + +# --hints-- + +You should use the `.eye-lid` selector. + +```js +assert.match(code, /\.eye-lid\s*\{/); +``` + +You should give `.eye-lid` a `width` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%'); +``` + +You should give `.eye-lid` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%'); +``` + +You should give `.eye-lid` a `background-color` of `var(--penguin-face)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +--fcc-editable-region-- + +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md new file mode 100644 index 00000000000..e779df5c2d4 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0e56f9ca9710fcb974e3.md @@ -0,0 +1,226 @@ +--- +id: 619d0e56f9ca9710fcb974e3 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Position the `.eye-lid` elements `25%` from the top, and `-23%` from the left of their parents. Then, give all corners a radius of `50%`. + +# --hints-- + +You should give `.eye-lid` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%'); +``` + +You should give `.eye-lid` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%'); +``` + +You should give `.eye-lid` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +--fcc-editable-region-- +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + +} +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md new file mode 100644 index 00000000000..ed405abe92b --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0eec0ac40611b41e2ccc.md @@ -0,0 +1,247 @@ +--- +id: 619d0eec0ac40611b41e2ccc +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Below the `.eye.right` element, add two `div` elements each with a `class` of `blush`. Also, give the first `.blush` element a `class` of `left`, and the second `.blush` element a `class` of `right`. + +# --hints-- + +You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7); +``` + +You should give the first new `div` a `class` of `blush`. + +```js +assert.exists(document.querySelector('.penguin-head > div.blush')); +``` + +You should give the second new `div` a `class` of `blush`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2); +``` + +You should give the first new `div` a `class` of `left`. + +```js +assert.exists(document.querySelector('.penguin-head > div.blush.left')); +``` + +You should give the second new `div` a `class` of `right`. + +```js +assert.exists(document.querySelector('.penguin-head > div.blush.right')); +``` + +You should place `.blush.right` after `.blush.left`. + +```js +assert.exists(document.querySelector('.blush.left + .blush.right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md new file mode 100644 index 00000000000..a346767374a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d0fc9825c271253df28d4.md @@ -0,0 +1,238 @@ +--- +id: 619d0fc9825c271253df28d4 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Target the `.blush` elements, and give them a `width` of `15%`, `height` of `10%`, and `background-color` of `pink`. + +# --hints-- + +You should use the `.blush` selector. + +```js +assert.match(code, /\.blush\s*\{/); +``` + +You should give `.blush` a `width` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%'); +``` + +You should give `.blush` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%'); +``` + +You should give `.blush` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +--fcc-editable-region-- + +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md new file mode 100644 index 00000000000..78310b8e231 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d102d786c3d13124c37c6.md @@ -0,0 +1,231 @@ +--- +id: 619d102d786c3d13124c37c6 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Position the `.blush` elements `65%` from the top of their parent, and give all corners a radius of `50%`. + +# --hints-- + +You should give `.blush` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%'); +``` + +You should give `.blush` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +--fcc-editable-region-- +.blush { + width: 15%; + height: 10%; + background-color: pink; + +} +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md new file mode 100644 index 00000000000..9431c4764ea --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d107edf7ddf13cc77106a.md @@ -0,0 +1,246 @@ +--- +id: 619d107edf7ddf13cc77106a +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Target the `.blush` element with a `class` of `left`, and position it `15%` left of its parent. Then, target the `.blush` element with a `class` of `right`, and position it `15%` right of its parent. + +# --hints-- + +You should use the `.blush.left` selector. + +```js +assert.match(code, /\.blush\.left\s*\{/); +``` + +You should give `.blush.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%'); +``` + +You should use the `.blush.right` selector. + +```js +assert.match(code, /\.blush\.right\s*\{/); +``` + +You should give `.blush.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +--fcc-editable-region-- + +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md new file mode 100644 index 00000000000..39348186b51 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d10cc98145f14820399c5.md @@ -0,0 +1,271 @@ +--- +id: 619d10cc98145f14820399c5 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Below the `.blush.right` element, add two `div` elements each with a `class` of `beak`. Also, give the first `.beak` element a `class` of `top`, and the second `.beak` element a `class` of `bottom`. + +# --hints-- + +You should add two `div` elements within `.penguin-head`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9); +``` + +You should give the first new `div` a `class` of `beak`. + +```js +assert.exists(document.querySelector('.penguin-head > div.beak')); +``` + +You should give the second new `div` a `class` of `beak`. + +```js +assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2); +``` + +You should give the first new `div` a `class` of `top`. + +```js +assert.exists(document.querySelector('.penguin-head > div.beak.top')); +``` + +You should give the second new `div` a `class` of `bottom`. + +```js +assert.exists(document.querySelector('.penguin-head > div.beak.bottom')); +``` + +You should place `div.beak.top` after `div.blush.right`. + +```js +assert.exists(document.querySelector('.blush.right + .beak.top')); +``` + +You should place `div.beak.bottom` after `div.beak.top`. + +```js +assert.exists(document.querySelector('.beak.top + .beak.bottom')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md new file mode 100644 index 00000000000..ea381856af9 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d115e2adcd71538e82ebb.md @@ -0,0 +1,256 @@ +--- +id: 619d115e2adcd71538e82ebb +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Target the `.beak` elements, and give them a `height` of `10%`, `background-color` of `orange`, and give all corners a radius of `50%`. + +# --hints-- + +You should use the `.beak` selector. + +```js +assert.match(code, /\.beak\s*\{/); +``` + +You should give `.beak` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%'); +``` + +You should give `.beak` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange'); +``` + +You should give `.beak` a `border-radius` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +--fcc-editable-region-- + +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md new file mode 100644 index 00000000000..d1617d8dcea --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d11e6d5ef9515d2a16033.md @@ -0,0 +1,262 @@ +--- +id: 619d11e6d5ef9515d2a16033 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Target the `.beak` element with a `class` of `top`, give it a `width` of `20%`, and position it `60%` from the top, and `40%` from the left of its parent. + +# --hints-- + +You should use the `.beak.top` selector. + +```js +assert.match(code, /\.beak\.top\s*\{/); +``` + +You should give `.beak.top` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%'); +``` + +You should give `.beak.top` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%'); +``` + +You should give `.beak.top` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +--fcc-editable-region-- + +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md new file mode 100644 index 00000000000..e580633578c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d129a417d0716a94de913.md @@ -0,0 +1,267 @@ +--- +id: 619d129a417d0716a94de913 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Target the `.beak` element with a `class` of `bottom`, and give it a `width` `4%` smaller than `.beak.top`, `5%` further from the top, and `2%` further from the left of its parent than `.beak.top`. + +# --hints-- + +You should use the `.beak.bottom` selector. + +```js +assert.match(code, /\.beak\.bottom\s*\{/); +``` + +You should give `.beak.bottom` a `width` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%'); +``` + +You should give `.beak.bottom` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%'); +``` + +You should give `.beak.bottom` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +--fcc-editable-region-- +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md new file mode 100644 index 00000000000..4773a10cef8 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1340361095175f4b5115.md @@ -0,0 +1,267 @@ +--- +id: 619d1340361095175f4b5115 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +The penguin's body looks a bit plain. Spruce him up by adding a `div` element with a `class` of `shirt`, immediately before the `.penguin-body` element. + +# --hints-- + +You should add a `div` element within `.penguin`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin > div')?.length, 3); +``` + +You should give the new `div` a `class` of `shirt`. + +```js +assert.exists(document.querySelector('.penguin > div.shirt')); +``` + +You should place the new `div` before `.penguin-body`. + +```js +assert.exists(document.querySelector('.shirt + .penguin-body')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md new file mode 100644 index 00000000000..ff117fcdd8e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d15797b580c1828b05426.md @@ -0,0 +1,263 @@ +--- +id: 619d15797b580c1828b05426 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Within the `.shirt` element, add a `div` with the following emoji as content: 💜 + +# --hints-- + +You should add a `div` element within `div.shirt`. Expected `--fcc-expected--` `div` element, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.shirt > div')?.length, 1); +``` + +You should give the new `div` a content of `💜`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelector('.shirt > div')?.textContent, '💜'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md new file mode 100644 index 00000000000..b0330c317b5 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d15d955d9d418c4487bbc.md @@ -0,0 +1,264 @@ +--- +id: 619d15d955d9d418c4487bbc +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Within `.shirt`, after the `div` element, add a `p` element with the following content: `I CSS` + +# --hints-- + +You should add one `p` element within `.shirt`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.shirt > p')?.length, 1); +``` + +You should give the `p` element the content `I CSS`, but found `--fcc-actual--`. + +```js +assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
💜
+ +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md new file mode 100644 index 00000000000..2ca7d6a5d8e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1629a8adc61960ca8b40.md @@ -0,0 +1,278 @@ +--- +id: 619d1629a8adc61960ca8b40 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Target the `.shirt` element, and set its `font-size` to `25px`, `font-family` to `Helvetica` with a fallback of `sans-serif`, and `font-weight` to `bold`. + +# --hints-- + +You should use the `.shirt` selector. + +```js +assert.match(code, /\.shirt\s*\{/); +``` + +You should give `.shirt` a `font-size` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px'); +``` + +You should give `.shirt` a `font-family` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif'); +``` + +You should give `.shirt` a `font-weight` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +--fcc-editable-region-- + +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md new file mode 100644 index 00000000000..c21bb0f24d4 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1c5fc9f8941a400955da.md @@ -0,0 +1,272 @@ +--- +id: 619d1c5fc9f8941a400955da +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +In some browsers, the _heart_ emoji may look slightly different from the previous step. This is because some of the character's properties were overridden by the `font-weight` style of `bold`. + +Fix this, by targeting the `div` with the heart emoji, and setting its `font-weight` to its original value. + +# --hints-- + +You should use the `.shirt div` selector to target the `div` with the heart emoji. + +```js +assert.match(code, /\.shirt div\s*\{/); +``` + +You should give the `.shirt div` a `font-weight` of `initial` or `normal`. + +```js +assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +--fcc-editable-region-- +.shirt { + font: bold 25px Helvetica, sans-serif; +} + + +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md new file mode 100644 index 00000000000..79b1e394fb5 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1dab9ff3421ae1976991.md @@ -0,0 +1,273 @@ +--- +id: 619d1dab9ff3421ae1976991 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Position the `div` with the heart emoji `22.5px` from the top, and `12px` from the left of its parent. + +# --hints-- + +You should give `.shirt div` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px'); +``` + +You should give `.shirt div` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +--fcc-editable-region-- +.shirt { + font: bold 25px Helvetica, sans-serif; +} + +.shirt div { + font-weight: initial; + +} +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md new file mode 100644 index 00000000000..0c23ce14f17 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1deb8b04811b8839ffe4.md @@ -0,0 +1,281 @@ +--- +id: 619d1deb8b04811b8839ffe4 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Position the `.shirt` element `165px` from the top, and `127.5px` from the left of its parent. Then, increase its stacking order such that it appears above the `.penguin-body` element. + +# --hints-- + +You should give `.shirt` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px'); +``` + +You should give `.shirt` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px'); +``` + +You should give the `.shirt` element a `z-index` of `1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +--fcc-editable-region-- +.shirt { + font: bold 25px Helvetica, sans-serif; + +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md new file mode 100644 index 00000000000..e650139f7ec --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1e7a8e81a61c5a819dc4.md @@ -0,0 +1,272 @@ +--- +id: 619d1e7a8e81a61c5a819dc4 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +For the shirt's final touch, set the `color` to `#6a6969`. + +# --hints-- + +You should give `.shirt` a `color` of `#6a6969`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +--fcc-editable-region-- +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} +--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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md new file mode 100644 index 00000000000..a3dc1fdbf58 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1ed33c9a071cf657a0d6.md @@ -0,0 +1,306 @@ +--- +id: 619d1ed33c9a071cf657a0d6 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Fun fact: Penguins cannot stand without at least two feet. + +Within the `.penguin-body` element, add two `div` elements each with a `class` of `foot`. Give the first `.foot` a `class` of `left`, and the second `.foot` a `class` of `right`. + +# --hints-- + +You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2); +``` + +You should give the first new `div` a `class` of `foot`. + +```js +assert.exists(document.querySelector('.penguin-body > div.foot')); +``` + +You should give the second new `div` a `class` of `foot`. + +```js +assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2); +``` + +You should give one `div` a `class` of `left`. + +```js +assert.exists(document.querySelector('.penguin-body > div.foot.left')); +``` + +You should give the other `div` a `class` of `right`. + +```js +assert.exists(document.querySelector('.penguin-body > div.foot.right')); +``` + +You should place `.foot.right` after `.foot.left`. + +```js +assert.exists(document.querySelector('.foot.left + .foot.right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.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/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md new file mode 100644 index 00000000000..f685b84cb69 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d1fb5d244c31db8a7fdb7.md @@ -0,0 +1,295 @@ +--- +id: 619d1fb5d244c31db8a7fdb7 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Target the `.foot` elements, and give them a `width` of `15%`, `height` of `30%`, and `background-color` of `orange`. + +# --hints-- + +You should use the `.foot` selector. + +```js +assert.match(code, /\.foot\s*\{/); +``` + +You should give `.foot` a `width` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%'); +``` + +You should give `.foot` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%'); +``` + +You should give `.foot` a `background-color` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--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/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md new file mode 100644 index 00000000000..2d03eea5401 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d204bd73ae51e743b8e94.md @@ -0,0 +1,288 @@ +--- +id: 619d204bd73ae51e743b8e94 +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Position the `.foot` elements `85%` from the top of their parent, and give all corners a radius of `50%`. + +# --hints-- + +You should give `.foot` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%'); +``` + +You should give `.foot` a `border-radius` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- +.foot { + width: 15%; + height: 30%; + background-color: orange; + +} +--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/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md new file mode 100644 index 00000000000..702fecbe8ba --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d20b12996101f430920fb.md @@ -0,0 +1,304 @@ +--- +id: 619d20b12996101f430920fb +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +The penguin's beak and feet share the same `color`. + +Create a new custom CSS variable named `--penguin-picorna`, and replace all relevant property values with it. + +# --hints-- + +You should give `:root` a `--penguin-picorna` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna')); +``` + +You should give `--penguin-picorna` a value of `orange`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange'); +``` + +You should give `.beak` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)'); +``` + +You should give `.foot` a `background-color` of `var(--penguin-picorna)`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +--fcc-editable-region-- +:root { + --penguin-face: white; + +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: orange; + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.foot { + width: 15%; + height: 30%; + background-color: orange; + top: 85%; + border-radius: 50%; +} +--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/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md new file mode 100644 index 00000000000..d2083801b89 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d21fe6a3f9b2016be9d9d.md @@ -0,0 +1,304 @@ +--- +id: 619d21fe6a3f9b2016be9d9d +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Target the `.foot` element with a `class` of `left`, and position it `25%` left of its parent. Then, target the `.foot` element with a `class` of `right`, and position it `25%` right of its parent. + +# --hints-- + +You should use the `.foot.left` selector. + +```js +assert.match(code, /\.foot\.left\s*\{/); +``` + +You should give `.foot.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%'); +``` + +You should use the `.foot.right` selector. + +```js +assert.match(code, /\.foot\.right\s*\{/); +``` + +You should give `.foot.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; +} + + +--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/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md new file mode 100644 index 00000000000..003b9709c0e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d229b0e542520cd91c685.md @@ -0,0 +1,312 @@ +--- +id: 619d229b0e542520cd91c685 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +To make the penguin's feet look more _penguiny_, rotate the left foot by `80deg`, and the right by `-80deg`. + +# --hints-- + +You should give `.foot.left` a `transform` of `rotate(80deg)`. + +```js +const leftFoot = new __helpers.CSSHelp(document).getStyle('.foot.left'); + +if (leftFoot?.transform) { + assert.equal(leftFoot.getPropVal('transform', true), 'rotate(80deg)'); +} else { + assert.equal(leftFoot.getPropVal('rotate', true), '80deg'); +} +``` + +You should give `.foot.right` a `transform` of `rotate(-80deg)`. + +```js +const rightFoot = new __helpers.CSSHelp(document).getStyle('.foot.right'); + +if (rightFoot?.transform) { + assert.equal(rightFoot.getPropVal('transform', true), 'rotate(-80deg)'); +} else { + assert.equal(rightFoot.getPropVal('rotate', true), '-80deg'); +} +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; +} + +--fcc-editable-region-- +.foot.left { + left: 25%; + +} + +.foot.right { + right: 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/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md new file mode 100644 index 00000000000..ef45038dbcc --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d23089e787e216a7043d6.md @@ -0,0 +1,295 @@ +--- +id: 619d23089e787e216a7043d6 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Change the stacking order of the `.foot` elements such that they appear beneath the `.penguin-body` element. + +# --hints-- + +You should give `.foot` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + +} +--fcc-editable-region-- + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md new file mode 100644 index 00000000000..906076ce8b3 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d237a107c10221ed743fa.md @@ -0,0 +1,328 @@ +--- +id: 619d237a107c10221ed743fa +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Fun fact: Penguins cannot fly without wings. + +Within `.penguin-body`, before the `.foot` elements, add two `div` elements each with a `class` of `arm`. Give the first `.arm` a `class` of `left`, and the second `.arm` a `class` of `right`. + +# --hints-- + +You should add two `div` elements within `.penguin-body`. Expected `--fcc-expected--` `div` elements, found `--fcc-actual--`. + +```js +assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4); +``` + +You should give the first new `div` a `class` of `arm`. + +```js +assert.exists(document.querySelector('.penguin-body > div.arm')); +``` + +You should give the second new `div` a `class` of `arm`. + +```js +assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2); +``` + +You should give one `div` a `class` of `left`. + +```js +assert.exists(document.querySelector('.penguin-body > div.arm.left')); +``` + +You should give the other `div` a `class` of `right`. + +```js +assert.exists(document.querySelector('.penguin-body > div.arm.right')); +``` + +You should place `.arm.right` after `.arm.left`. + +```js +assert.exists(document.querySelector('.arm.left + .arm.right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+--fcc-editable-region-- +
+ +
+
+
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md new file mode 100644 index 00000000000..94dcb785215 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d26b12e651022d80cd017.md @@ -0,0 +1,317 @@ +--- +id: 619d26b12e651022d80cd017 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Target the `.arm` elements, and give them a `width` of `30%`, a `height` of `60%`, and a `background` of linear gradient at `90deg` from clockwise, starting at `gray`, and ending at `rgb(209, 210, 199)`. + +# --hints-- + +You should use the `.arm` selector. + +```js +assert.match(code, /\.arm\s*\{/); +``` + +You should give `.arm` a `width` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%'); +``` + +You should give `.arm` a `height` of `--fcc-expected--`, found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%'); +``` + +You should give `.arm` a `background` of `linear-gradient(90deg, gray, rgb(209, 210, 199))`. + +```js +assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md new file mode 100644 index 00000000000..a3333bcfbaf --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2712853306238f41828e.md @@ -0,0 +1,332 @@ +--- +id: 619d2712853306238f41828e +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +Create a custom CSS variable named `--penguin-skin`, and set it to `gray`. Then, replace all relevant property values with it. + +# --hints-- + +You should give `:root` a `--penguin-skin` property. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin')); +``` + +You should give `--penguin-skin` a value of `gray`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray'); +``` + +You should give `.penguin-head` a `background` of `linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))'); +``` + +You should give `.penguin-body::before` a `background-color` of `var(--penguin-skin)`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)'); +``` + +You should give `.arm` a `background` of `linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +--fcc-editable-region-- +:root { + --penguin-face: white; + --penguin-picorna: orange; + +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: gray; + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + gray, + rgb(209, 210, 199) + ); +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md new file mode 100644 index 00000000000..b897e4cc619 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2b7a84e78b246f2d17a2.md @@ -0,0 +1,340 @@ +--- +id: 619d2b7a84e78b246f2d17a2 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Target the `.arm` element with a `class` of `left`, and position it `35%` from the top, and `5%` from the left of its parent. Then, target the `.arm` element with a `class` of `right`, and position it `0%` from the top, and `-5%` from the right of its parent. + +# --hints-- + +You should use the `.arm.left` selector. + +```js +assert.match(code, /\.arm\.left\s*\{/); +``` + +You should give `.arm.left` a `top` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%'); +``` + +You should give `.arm.left` a `left` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%'); +``` + +You should use the `.arm.right` selector. + +```js +assert.match(code, /\.arm\.right\s*\{/); +``` + +You should give `.arm.right` a `top` of `0%`. + +```js +assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top); +``` + +You should give `.arm.right` a `right` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md new file mode 100644 index 00000000000..64e65c8aa5e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2bd9c1d43c2526e96f1f.md @@ -0,0 +1,325 @@ +--- +id: 619d2bd9c1d43c2526e96f1f +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Within the `.arm.left` selector, alter the origin of the `transform` function to be the top left corner of its parent. + +# --hints-- + +You should use the `transform-origin` property to do this. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin); +``` + +You should give `.arm.left` a `transform-origin` of `0% 0%` or `top left`. + +```js +assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); +} + +--fcc-editable-region-- +.arm.left { + top: 35%; + left: 5%; + +} + +.arm.right { + top: 0%; + right: -5%; +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md new file mode 100644 index 00000000000..ce148c7f626 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2d4e80400325ff89664a.md @@ -0,0 +1,326 @@ +--- +id: 619d2d4e80400325ff89664a +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +To keep the linear gradient on the correct side of the penguin's left arm, first rotate it by `130deg`, then invert the x-axis. + +# --hints-- + +You should give `.arm.left` a `transform` of `rotate(130deg) scaleX(-1)`. + +```js +const leftArm = new __helpers.CSSHelp(document).getStyle('.arm.left'); + +if (leftArm?.rotate && leftArm?.transform) { + assert.equal(leftArm.getPropVal('rotate', true), '130deg'); + assert.equal(leftArm.getPropVal('transform', true), 'scaleX(-1)'); +} else { + assert.equal(leftArm.getPropVal('transform', true), 'rotate(130deg)scaleX(-1)'); +} +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); +} + +--fcc-editable-region-- +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; +} +--fcc-editable-region-- + +.arm.right { + top: 0%; + right: -5%; +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md new file mode 100644 index 00000000000..7b8d308ed34 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2ebc81ba81271460850d.md @@ -0,0 +1,326 @@ +--- +id: 619d2ebc81ba81271460850d +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Rotate the right arm by `45deg` counterclockwise. + +# --hints-- + +You should give `.arm.right` a `transform` of `rotate(-45deg)`. + +```js +const rightArm = new __helpers.CSSHelp(document).getStyle('.arm.right'); + +if (rightArm?.transform) { + assert.equal(rightArm?.getPropVal('transform', true), 'rotate(-45deg)'); +} else { + assert.equal(rightArm?.getPropVal('rotate', true), '-45deg'); +} +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +--fcc-editable-region-- +.arm.right { + top: 0%; + right: -5%; +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md new file mode 100644 index 00000000000..cb6dc37d625 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2f0e9440bc27caee1cec.md @@ -0,0 +1,327 @@ +--- +id: 619d2f0e9440bc27caee1cec +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Fun fact: Most, if not all, flippers are not naturally rectangles. + +Give the `.arm` elements' top-left, top-right, and bottom-right corners a radius of `30%`, and the bottom-left corner a radius of `120%`. + +# --hints-- + +You should give `.arm` a `border-radius` of `30% 30% 30% 120%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + +} +--fcc-editable-region-- + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md new file mode 100644 index 00000000000..81854db2b79 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d2fd3ff4f772882e3d998.md @@ -0,0 +1,323 @@ +--- +id: 619d2fd3ff4f772882e3d998 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Change the `.arm` elements' stacking order such that they appear behind the `.penguin-body` element. + +# --hints-- + +You should give `.arm` a `z-index` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +--fcc-editable-region-- +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + +} +--fcc-editable-region-- + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md new file mode 100644 index 00000000000..f11d2a97f49 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d30350883802921bfcccc.md @@ -0,0 +1,333 @@ +--- +id: 619d30350883802921bfcccc +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +Now, you are going to use CSS animations to make the penguin wave. + +Define a new `@keyframes` named `wave`. + +# --hints-- + +You should define a new `@keyframes` rule. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes')); +``` + +You should give the `@keyframes` rule a name of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md new file mode 100644 index 00000000000..3294c315691 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d324f5915c929f36ae91d.md @@ -0,0 +1,351 @@ +--- +id: 619d324f5915c929f36ae91d +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Give `wave` four waypoints starting at `10%`, and incrementing by `10%`. + +# --hints-- + +You should add a `10%` waypoint for `@keyframes wave`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%')); +``` + +You should add a `20%` waypoint for `@keyframes wave`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%')); +``` + +You should add a `30%` waypoint for `@keyframes wave`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%')); +``` + +You should add a `40%` waypoint for `@keyframes wave`. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%')); +``` + +You should have 4 waypoints in your keyframe. + +```js +assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].length === 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +--fcc-editable-region-- +@keyframes wave { + +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md new file mode 100644 index 00000000000..74235426b56 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d32c7fa21f32aaa91d499.md @@ -0,0 +1,347 @@ +--- +id: 619d32c7fa21f32aaa91d499 +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +Within the first waypoint, rotate to `110deg`, and retain the scaling of the left arm. + +# --hints-- + +You should give the `10%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`. + +```js +const wave10Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%'); +const rotateProp = wave10Percent?.style?.rotate?.replace(/\s+/g, ''); +const transformProp = wave10Percent?.style?.transform?.replace(/\s+/g, ''); + +if (rotateProp && transformProp) { + assert(rotateProp === '110deg'); + assert(transformProp === 'scaleX(-1)'); +} else { + assert(transformProp === 'rotate(110deg)scaleX(-1)'); +} +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +--fcc-editable-region-- +@keyframes wave { + 10% { + + } + 20% { + + } + 30% { + + } + 40% { + + } +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md new file mode 100644 index 00000000000..ac97b33ea2a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d333b738e3c2b5d58b095.md @@ -0,0 +1,347 @@ +--- +id: 619d333b738e3c2b5d58b095 +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +Within the second waypoint, rotate to `130deg`, and retain the scaling of the left arm. + +# --hints-- + +You should give the `20%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`. + +```js +const wave20Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%'); +const transformProp = wave20Percent?.style?.transform?.replace(/\s+/g, ''); +const rotateProp = wave20Percent?.style?.rotate?.replace(/\s+/g, ''); + +if (rotateProp && transformProp) { + assert(rotateProp === '130deg'); + assert(transformProp === 'scaleX(-1)'); +} else { + assert(transformProp === 'rotate(130deg)scaleX(-1)'); +} +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +--fcc-editable-region-- +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + + } + 30% { + + } + 40% { + + } +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md new file mode 100644 index 00000000000..fd1c9193d00 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d337765b9f02c10e93722.md @@ -0,0 +1,362 @@ +--- +id: 619d337765b9f02c10e93722 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +For the third and fourth waypoints, repeat the `transform` pattern once more. + +# --hints-- + +You should give the `30%` waypoint a `transform` of `rotate(110deg) scaleX(-1)`. + +```js +const wave30Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%'); +const transformProp = wave30Percent?.style?.transform?.replace(/\s+/g, ''); +const rotateProp = wave30Percent?.style?.rotate?.replace(/\s+/g, ''); + +if (rotateProp && transformProp) { + assert(rotateProp === '110deg'); + assert(transformProp === 'scaleX(-1)'); +} else { + assert(transformProp === 'rotate(110deg)scaleX(-1)'); +} +``` + +You should give the `40%` waypoint a `transform` of `rotate(130deg) scaleX(-1)`. + +```js +const wave40Percent = [...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%'); +const transformProp = wave40Percent?.style?.transform?.replace(/\s+/g, ''); +const rotateProp = wave40Percent?.style?.rotate?.replace(/\s+/g, ''); + +if (rotateProp && transformProp) { + assert(rotateProp === '130deg'); + assert(transformProp === 'scaleX(-1)'); +} else { + assert(transformProp === 'rotate(130deg)scaleX(-1)'); +} +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +--fcc-editable-region-- +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + + } + 40% { + + } +} +--fcc-editable-region-- + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md new file mode 100644 index 00000000000..caa7a1fe0a8 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d33c51140292cc5a21742.md @@ -0,0 +1,357 @@ +--- +id: 619d33c51140292cc5a21742 +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +Use the `wave` animation on the left arm. Have the animation last `3s`, infinitely iterate, and have a linear timing function. + +# --hints-- + +You should give `.arm.left` an `animation-name` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave'); +``` + +You should give `.arm.left` an `animation-duration` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s'); +``` + +You should give `.arm.left` an `animation-iteration-count` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite'); +``` + +You should give `.arm.left` an `animation-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +--fcc-editable-region-- +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + +} +--fcc-editable-region-- + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md new file mode 100644 index 00000000000..e8ab0952d40 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d3482f505452d861d0f62.md @@ -0,0 +1,347 @@ +--- +id: 619d3482f505452d861d0f62 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Target the `.penguin` element when it is active, and increase its size by `50%` in both dimensions. + +# --hints-- + +You should use the `.penguin:active` selector. + +```js +assert.match(code, /\.penguin:active\s*\{/); +``` + +You should give `.penguin:active` a `transform` of `scale(1.5)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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-- + +--fcc-editable-region-- + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + animation: 3s linear infinite wave; +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md new file mode 100644 index 00000000000..35304542955 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d3561a951bf2e41a24f10.md @@ -0,0 +1,346 @@ +--- +id: 619d3561a951bf2e41a24f10 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +When you activate the `.penguin` element, it might look as though you can drag it around. This is not true. + +Indicate this to users, by giving the active element a `cursor` property of `not-allowed`. + +# --hints-- + +You should give `.penguin:active` a `cursor` property of `not-allowed`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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:active { + transform: scale(1.5); + +} +--fcc-editable-region-- + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + animation: 3s linear infinite wave; +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md new file mode 100644 index 00000000000..b2fd620c1ff --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d36103839c82efa95dd34.md @@ -0,0 +1,357 @@ +--- +id: 619d36103839c82efa95dd34 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +Change the `.penguin` element's `transition` behavior during transformation to have a duration of `1s`, a timing function of `ease-in-out`, and a delay of `0ms`. + +# --hints-- + +You should give `.penguin` a `transition-duration` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s'); +``` + +You should give `.penguin` a `transition-timing-function` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out'); +``` + +You should give `.penguin` a `transition-delay` of `--fcc-expected--`, but found `--fcc-actual--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; + z-index: 4; + position: relative; + +} +--fcc-editable-region-- + +.penguin * { + position: absolute; +} + +.penguin:active { + transform: scale(1.5); + cursor: not-allowed; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + animation: 3s linear infinite wave; +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.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/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md new file mode 100644 index 00000000000..18d3c26b52f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/619d3711d04d623000013e9e.md @@ -0,0 +1,670 @@ +--- +id: 619d3711d04d623000013e9e +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +Finally, calculate the `height` of the `.ground` element to be the height of the viewport minus the height of the `.penguin` element. + +Congratulations! You have completed the Flappy Penguin Workshop. + +# --hints-- + +You should give `.ground` a `height` of `calc(100vh - 300px)`. + +```js +assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; + transition: transform 1s ease-in-out 0ms; +} + +.penguin * { + position: absolute; +} + +.penguin:active { + transform: scale(1.5); + cursor: not-allowed; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + animation: 3s linear infinite wave; +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +--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; +} +--fcc-editable-region-- +``` + +# --solutions-- + +```html + + + + + + Penguin + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
💜
+

I CSS

+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --penguin-face: white; + --penguin-picorna: orange; + --penguin-skin: gray; +} + +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.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; + transition: transform 1s ease-in-out 0ms; +} + +.penguin * { + position: absolute; +} + +.penguin:active { + transform: scale(1.5); + cursor: not-allowed; +} + +.penguin-head { + width: 50%; + height: 45%; + background: linear-gradient( + 45deg, + var(--penguin-skin), + rgb(239, 240, 228) + ); + border-radius: 70% 70% 65% 65%; + top: 10%; + left: 25%; + z-index: 1; +} + +.face { + width: 60%; + height: 70%; + background-color: var(--penguin-face); + border-radius: 70% 70% 60% 60%; + top: 15%; +} + +.face.left { + left: 5%; +} + +.face.right { + right: 5%; +} + +.chin { + width: 90%; + height: 70%; + background-color: var(--penguin-face); + top: 25%; + left: 5%; + border-radius: 70% 70% 100% 100%; +} + +.eye { + width: 15%; + height: 17%; + background-color: black; + top: 45%; + border-radius: 50%; +} + +.eye.left { + left: 25%; +} + +.eye.right { + right: 25%; +} + +.eye-lid { + width: 150%; + height: 100%; + background-color: var(--penguin-face); + top: 25%; + left: -23%; + border-radius: 50%; +} + +.blush { + width: 15%; + height: 10%; + background-color: pink; + top: 65%; + border-radius: 50%; +} + +.blush.left { + left: 15%; +} + +.blush.right { + right: 15%; +} + +.beak { + height: 10%; + background-color: var(--penguin-picorna); + border-radius: 50%; +} + +.beak.top { + width: 20%; + top: 60%; + left: 40%; +} + +.beak.bottom { + width: 16%; + top: 65%; + left: 42%; +} + +.shirt { + font: bold 25px Helvetica, sans-serif; + top: 165px; + left: 127.5px; + z-index: 1; + color: #6a6969; +} + +.shirt div { + font-weight: initial; + top: 22.5px; + left: 12px; +} + +.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%; +} + +.penguin-body::before { + content: ""; + position: absolute; + width: 50%; + height: 45%; + background-color: var(--penguin-skin); + top: 10%; + left: 25%; + border-radius: 0% 0% 100% 100%; + opacity: 70%; +} + +.arm { + width: 30%; + height: 60%; + background: linear-gradient( + 90deg, + var(--penguin-skin), + rgb(209, 210, 199) + ); + border-radius: 30% 30% 30% 120%; + z-index: -1; +} + +.arm.left { + top: 35%; + left: 5%; + transform-origin: top left; + transform: rotate(130deg) scaleX(-1); + animation: 3s linear infinite wave; +} + +.arm.right { + top: 0%; + right: -5%; + transform: rotate(-45deg); +} + +@keyframes wave { + 10% { + transform: rotate(110deg) scaleX(-1); + } + 20% { + transform: rotate(130deg) scaleX(-1); + } + 30% { + transform: rotate(110deg) scaleX(-1); + } + 40% { + transform: rotate(130deg) scaleX(-1); + } +} + +.foot { + width: 15%; + height: 30%; + background-color: var(--penguin-picorna); + top: 85%; + border-radius: 50%; + z-index: -1; +} + +.foot.left { + left: 25%; + transform: rotate(80deg); +} + +.foot.right { + right: 25%; + transform: rotate(-80deg); +} + +.ground { + width: 100vw; + height: calc(100vh - 300px); + 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/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md new file mode 100644 index 00000000000..0de3068f1e5 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-flappy-penguin/61a8fe15a6a31306e60d1e89.md @@ -0,0 +1,55 @@ +--- +id: 61a8fe15a6a31306e60d1e89 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Normalize 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 + + + + + + + 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/test/utils/mongo-ids.js b/curriculum/test/utils/mongo-ids.js index 8e02df774e3..7abbb41c85c 100644 --- a/curriculum/test/utils/mongo-ids.js +++ b/curriculum/test/utils/mongo-ids.js @@ -483,7 +483,110 @@ const duplicatedProjectIds = [ // Ferris Wheel // Penguin - + '619665c9abd72906f3ad30f9', + '61967e74a8e3690ab6292daa', + '61968df2acd5550bf1616c34', + '61a8fe15a6a31306e60d1e89', + '61968e9243a4090cc805531c', + '61968f8877c6720d6d61aaf5', + '619691693bc14b0e528f5a20', + '6196928658b6010f28c39484', + '6197f667297bb30a552ce017', + '619692ff79f5770fc6d8c0b4', + '6196990f966e8f10a40094f6', + '619699c10a0f6e11591d73c4', + '61969aa6acef5b12200f672e', + '61969c487ced6f12db8fef94', + '61969d66cfcdba137d021558', + '61969e7451455614217e901b', + '6196adc17f77a714d51485f2', + '6196aead7ac7bf1584b17a7f', + '6196ce0415498d2463989e84', + '6196cee94c6da1253809dff9', + '6196d00a5d7292262bc02f4c', + '6196d0cda039d026f7f78d1e', + '6196d1ac33c68d27dcda5796', + '6196d213d99f16287bff22ae', + '6196d2c0f22ca0293107c048', + '6196d32d1340d829f0f6f57d', + '6196d41d40bf9b2aaea5d520', + '6197cff995d03905b0cca8ad', + '6197f40a16afea068c7e60c8', + '61993b72e874e709b8dfd666', + '61993cf26a8e0f0a553db223', + '61993dbb35adf30b10d49e38', + '61993e9adc9e9a0bb4d28fff', + '6199409834ccaf0d10736596', + '6199429802b7c10dc79ff871', + '619943285a41720e6370d985', + '619943876b706d0f35c01dbc', + '6199442866286d0ff421a4fc', + '619bcf239fc15905ecd66fce', + '619be73b3c806006ccc00bb0', + '619be7af7b0bf60770f5d2a4', + '619be80062551a080e32c821', + '619be8ce4ea49008c5bfbc30', + '619be946958c6009844f1dee', + '619c155df0063a0a3fec0e32', + '619c16debd0c270b01c5ce38', + '619cfdf2e63ddf05feab86ad', + '619d019488f98c06acbbb71a', + '619d022dc8400c0763829a17', + '619d02c7bc95bf0827a5d296', + '619d033915012509031f309a', + '619d03dadadb6509a16f4f5f', + '619d0503e03a790a4179d463', + '619d05c54dabca0b10058235', + '619d0882f54bf40bdc4671ed', + '619d090cd8d6db0c93dc5087', + '619d0b51ca42ed0d74582186', + '619d0bc9cb05360e1bf549c3', + '619d0c1594c38c0ebae75878', + '619d0d18ca99870f884a7bff', + '619d0daf214542102739b0da', + '619d0e56f9ca9710fcb974e3', + '619d0eec0ac40611b41e2ccc', + '619d0fc9825c271253df28d4', + '619d102d786c3d13124c37c6', + '619d107edf7ddf13cc77106a', + '619d10cc98145f14820399c5', + '619d115e2adcd71538e82ebb', + '619d11e6d5ef9515d2a16033', + '619d129a417d0716a94de913', + '619d1340361095175f4b5115', + '619d15797b580c1828b05426', + '619d15d955d9d418c4487bbc', + '619d1629a8adc61960ca8b40', + '619d1c5fc9f8941a400955da', + '619d1dab9ff3421ae1976991', + '619d1deb8b04811b8839ffe4', + '619d1e7a8e81a61c5a819dc4', + '619d1ed33c9a071cf657a0d6', + '619d1fb5d244c31db8a7fdb7', + '619d204bd73ae51e743b8e94', + '619d20b12996101f430920fb', + '619d21fe6a3f9b2016be9d9d', + '619d229b0e542520cd91c685', + '619d23089e787e216a7043d6', + '619d237a107c10221ed743fa', + '619d26b12e651022d80cd017', + '619d2712853306238f41828e', + '619d2b7a84e78b246f2d17a2', + '619d2bd9c1d43c2526e96f1f', + '619d2d4e80400325ff89664a', + '619d2ebc81ba81271460850d', + '619d2f0e9440bc27caee1cec', + '619d2fd3ff4f772882e3d998', + '619d30350883802921bfcccc', + '619d324f5915c929f36ae91d', + '619d32c7fa21f32aaa91d499', + '619d333b738e3c2b5d58b095', + '619d337765b9f02c10e93722', + '619d33c51140292cc5a21742', + '619d3482f505452d861d0f62', + '619d3561a951bf2e41a24f10', + '619d36103839c82efa95dd34', + '619d3711d04d623000013e9e', // Personal Portfolio 'bd7158d8c242eddfaeb5bd13',