From 1f34170ea85cf5f7572a268447732b7bf03b6bfc Mon Sep 17 00:00:00 2001 From: Dario-DC <105294544+Dario-DC@users.noreply.github.com> Date: Fri, 18 Oct 2024 16:50:58 +0200 Subject: [PATCH] chore(curriculum): add city skyline workshop (#56740) --- client/i18n/locales/english/intro.json | 8 +- .../workshop-city-skyline/index.md | 11 + .../_meta/workshop-city-skyline/meta.json | 473 ++++++++++ .../5d822fd413a79914d39e98cc.md | 76 ++ .../5d822fd413a79914d39e98cd.md | 56 ++ .../5d822fd413a79914d39e98ce.md | 61 ++ .../5d822fd413a79914d39e98cf.md | 69 ++ .../5d822fd413a79914d39e98d0.md | 65 ++ .../5d822fd413a79914d39e98d1.md | 68 ++ .../5d822fd413a79914d39e98d2.md | 83 ++ .../5d822fd413a79914d39e98d3.md | 105 +++ .../5d822fd413a79914d39e98d4.md | 138 +++ .../5d822fd413a79914d39e98d5.md | 112 +++ .../5d822fd413a79914d39e98d6.md | 103 +++ .../5d822fd413a79914d39e98d7.md | 100 ++ .../5d822fd413a79914d39e98d8.md | 124 +++ .../5d822fd413a79914d39e98d9.md | 99 ++ .../5d822fd413a79914d39e98da.md | 133 +++ .../5d822fd413a79914d39e98db.md | 133 +++ .../5d822fd413a79914d39e98dc.md | 127 +++ .../5d822fd413a79914d39e98dd.md | 142 +++ .../5d822fd413a79914d39e98de.md | 140 +++ .../5d822fd413a79914d39e98df.md | 124 +++ .../5d822fd413a79914d39e98e0.md | 142 +++ .../5d822fd413a79914d39e98e1.md | 155 ++++ .../5d822fd413a79914d39e98e2.md | 135 +++ .../5d822fd413a79914d39e98e3.md | 144 +++ .../5d822fd413a79914d39e98e4.md | 147 +++ .../5d822fd413a79914d39e98e5.md | 161 ++++ .../5d822fd413a79914d39e98e6.md | 192 ++++ .../5d822fd413a79914d39e98e7.md | 253 +++++ .../5d822fd413a79914d39e98e8.md | 190 ++++ .../5d822fd413a79914d39e98e9.md | 223 +++++ .../5d822fd413a79914d39e98ea.md | 181 ++++ .../5d822fd413a79914d39e98eb.md | 203 +++++ .../5d822fd413a79914d39e98ec.md | 203 +++++ .../5d822fd413a79914d39e98ed.md | 202 ++++ .../5d822fd413a79914d39e98ee.md | 196 ++++ .../5d822fd413a79914d39e98ef.md | 197 ++++ .../5d822fd413a79914d39e98f0.md | 218 +++++ .../5d822fd413a79914d39e98f1.md | 223 +++++ .../5d822fd413a79914d39e98f2.md | 237 +++++ .../5d822fd413a79914d39e98f3.md | 222 +++++ .../5d822fd413a79914d39e98f4.md | 227 +++++ .../5d822fd413a79914d39e98f5.md | 198 ++++ .../5d822fd413a79914d39e98f6.md | 207 +++++ .../5d822fd413a79914d39e98f7.md | 203 +++++ .../5d822fd413a79914d39e98f8.md | 210 +++++ .../5d822fd413a79914d39e98f9.md | 207 +++++ .../5d822fd413a79914d39e98fa.md | 211 +++++ .../5d822fd413a79914d39e98fb.md | 240 +++++ .../5d822fd413a79914d39e98fc.md | 211 +++++ .../5d822fd413a79914d39e98fd.md | 209 +++++ .../5d822fd413a79914d39e98fe.md | 260 ++++++ .../5d822fd413a79914d39e98ff.md | 238 +++++ .../5d822fd413a79914d39e9900.md | 224 +++++ .../5d822fd413a79914d39e9901.md | 224 +++++ .../5d822fd413a79914d39e9902.md | 227 +++++ .../5d822fd413a79914d39e9903.md | 223 +++++ .../5d822fd413a79914d39e9904.md | 245 +++++ .../5d822fd413a79914d39e9905.md | 223 +++++ .../5d822fd413a79914d39e9906.md | 249 +++++ .../5d822fd413a79914d39e9907.md | 258 ++++++ .../5d822fd413a79914d39e9908.md | 258 ++++++ .../5d822fd413a79914d39e9909.md | 245 +++++ .../5d822fd413a79914d39e990a.md | 277 ++++++ .../5d822fd413a79914d39e990b.md | 254 ++++++ .../5d822fd413a79914d39e990c.md | 253 +++++ .../5d822fd413a79914d39e990d.md | 255 ++++++ .../5d822fd413a79914d39e990e.md | 265 ++++++ .../5d822fd413a79914d39e990f.md | 279 ++++++ .../5d822fd413a79914d39e9910.md | 266 ++++++ .../5d822fd413a79914d39e9911.md | 291 ++++++ .../5d822fd413a79914d39e9912.md | 287 ++++++ .../5d822fd413a79914d39e9913.md | 280 ++++++ .../5d822fd413a79914d39e9914.md | 284 ++++++ .../5d822fd413a79914d39e9915.md | 391 ++++++++ .../5d822fd413a79914d39e9916.md | 297 ++++++ .../5d822fd413a79914d39e9917.md | 307 +++++++ .../5d822fd413a79914d39e9918.md | 298 ++++++ .../5d822fd413a79914d39e9919.md | 301 ++++++ .../5d822fd413a79914d39e991a.md | 312 +++++++ .../5d822fd413a79914d39e991b.md | 314 +++++++ .../5d822fd413a79914d39e991c.md | 317 +++++++ .../5d822fd413a79914d39e991d.md | 315 +++++++ .../5d822fd413a79914d39e991e.md | 326 +++++++ .../5d822fd413a79914d39e991f.md | 324 +++++++ .../5d822fd413a79914d39e9920.md | 330 +++++++ .../5d822fd413a79914d39e9921.md | 348 +++++++ .../5d822fd413a79914d39e9922.md | 347 +++++++ .../5d822fd413a79914d39e9923.md | 348 +++++++ .../5d822fd413a79914d39e9924.md | 340 +++++++ .../5d822fd413a79914d39e9925.md | 346 +++++++ .../5d822fd413a79914d39e9926.md | 355 ++++++++ .../5d822fd413a79914d39e9927.md | 350 +++++++ .../5d822fd413a79914d39e9928.md | 349 +++++++ .../5d822fd413a79914d39e9929.md | 362 ++++++++ .../5d822fd413a79914d39e992a.md | 359 ++++++++ .../5d822fd413a79914d39e992b.md | 361 ++++++++ .../5d822fd413a79914d39e992c.md | 364 ++++++++ .../5d822fd413a79914d39e992d.md | 377 ++++++++ .../5d822fd413a79914d39e992e.md | 374 ++++++++ .../5d822fd413a79914d39e992f.md | 377 ++++++++ .../5d822fd413a79914d39e9930.md | 381 ++++++++ .../5d822fd413a79914d39e9931.md | 404 ++++++++ .../5d822fd413a79914d39e9932.md | 396 ++++++++ .../5d822fd413a79914d39e9933.md | 402 ++++++++ .../5d822fd413a79914d39e9934.md | 409 +++++++++ .../5d822fd413a79914d39e9935.md | 409 +++++++++ .../5d822fd413a79914d39e9936.md | 402 ++++++++ .../5d822fd413a79914d39e9937.md | 403 ++++++++ .../5d822fd413a79914d39e9938.md | 421 +++++++++ .../5d822fd413a79914d39e9939.md | 410 +++++++++ .../5d822fd413a79914d39e993a.md | 422 +++++++++ .../5d822fd413a79914d39e993b.md | 424 +++++++++ .../5d822fd413a79914d39e993c.md | 437 +++++++++ .../5d822fd413a79914d39e993d.md | 450 +++++++++ .../5d822fd413a79914d39e993e.md | 862 ++++++++++++++++++ curriculum/test/utils/mongo-ids.js | 116 ++- 119 files changed, 30297 insertions(+), 2 deletions(-) create mode 100644 client/src/pages/learn/front-end-development/workshop-city-skyline/index.md create mode 100644 curriculum/challenges/_meta/workshop-city-skyline/meta.json create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 794cb283578..2108eab74a3 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -2016,7 +2016,13 @@ "Test what you've learned in this quiz of making your webpage responsive." ] }, - "mtbl": { "title": "108", "intro": [] }, + "workshop-city-skyline": { + "title": "Build a City Skyline", + "intro": [ + "CSS variables help you organize your styles and reuse them.", + "In this workshop, you'll build a city skyline. You'll practice how to configure CSS variables so you can reuse them whenever you want." + ] + }, "vlov": { "title": "109", "intro": [] }, "lab-availability-table": { "title": "Build an Availability Table", diff --git a/client/src/pages/learn/front-end-development/workshop-city-skyline/index.md b/client/src/pages/learn/front-end-development/workshop-city-skyline/index.md new file mode 100644 index 00000000000..dc1a15cf281 --- /dev/null +++ b/client/src/pages/learn/front-end-development/workshop-city-skyline/index.md @@ -0,0 +1,11 @@ +--- +title: Introduction to the Build a City Skyline +block: workshop-city-skyline +superBlock: front-end-development +--- + +## Introduction to the Build a City Skyline + +CSS variables help you organize your styles and reuse them. + +In this workshop, you'll build a city skyline. You'll learn how to configure CSS variables so you can reuse them whenever you want. diff --git a/curriculum/challenges/_meta/workshop-city-skyline/meta.json b/curriculum/challenges/_meta/workshop-city-skyline/meta.json new file mode 100644 index 00000000000..5c5f1c0a34e --- /dev/null +++ b/curriculum/challenges/_meta/workshop-city-skyline/meta.json @@ -0,0 +1,473 @@ +{ + "name": "Build a City Skyline", + "blockType": "workshop", + "isUpcomingChange": true, + "usesMultifileEditor": true, + "hasEditableBoundaries": true, + "dashedName": "workshop-city-skyline", + "order": 108, + "superBlock": "front-end-development", + "challengeOrder": [ + { + "id": "5d822fd413a79914d39e98cc", + "title": "Step 1" + }, + { + "id": "5d822fd413a79914d39e98cd", + "title": "Step 2" + }, + { + "id": "5d822fd413a79914d39e98ce", + "title": "Step 3" + }, + { + "id": "5d822fd413a79914d39e98cf", + "title": "Step 4" + }, + { + "id": "5d822fd413a79914d39e98d0", + "title": "Step 5" + }, + { + "id": "5d822fd413a79914d39e98d1", + "title": "Step 6" + }, + { + "id": "5d822fd413a79914d39e98d2", + "title": "Step 7" + }, + { + "id": "5d822fd413a79914d39e98d3", + "title": "Step 8" + }, + { + "id": "5d822fd413a79914d39e98d4", + "title": "Step 9" + }, + { + "id": "5d822fd413a79914d39e98d5", + "title": "Step 10" + }, + { + "id": "5d822fd413a79914d39e98d6", + "title": "Step 11" + }, + { + "id": "5d822fd413a79914d39e98d7", + "title": "Step 12" + }, + { + "id": "5d822fd413a79914d39e98d8", + "title": "Step 13" + }, + { + "id": "5d822fd413a79914d39e98d9", + "title": "Step 14" + }, + { + "id": "5d822fd413a79914d39e98da", + "title": "Step 15" + }, + { + "id": "5d822fd413a79914d39e98db", + "title": "Step 16" + }, + { + "id": "5d822fd413a79914d39e98dc", + "title": "Step 17" + }, + { + "id": "5d822fd413a79914d39e98dd", + "title": "Step 18" + }, + { + "id": "5d822fd413a79914d39e98de", + "title": "Step 19" + }, + { + "id": "5d822fd413a79914d39e98df", + "title": "Step 20" + }, + { + "id": "5d822fd413a79914d39e98e0", + "title": "Step 21" + }, + { + "id": "5d822fd413a79914d39e98e1", + "title": "Step 22" + }, + { + "id": "5d822fd413a79914d39e98e2", + "title": "Step 23" + }, + { + "id": "5d822fd413a79914d39e98e3", + "title": "Step 24" + }, + { + "id": "5d822fd413a79914d39e98e4", + "title": "Step 25" + }, + { + "id": "5d822fd413a79914d39e98e5", + "title": "Step 26" + }, + { + "id": "5d822fd413a79914d39e98e6", + "title": "Step 27" + }, + { + "id": "5d822fd413a79914d39e98e7", + "title": "Step 28" + }, + { + "id": "5d822fd413a79914d39e98e8", + "title": "Step 29" + }, + { + "id": "5d822fd413a79914d39e98e9", + "title": "Step 30" + }, + { + "id": "5d822fd413a79914d39e98ea", + "title": "Step 31" + }, + { + "id": "5d822fd413a79914d39e98eb", + "title": "Step 32" + }, + { + "id": "5d822fd413a79914d39e98ec", + "title": "Step 33" + }, + { + "id": "5d822fd413a79914d39e98ed", + "title": "Step 34" + }, + { + "id": "5d822fd413a79914d39e98ee", + "title": "Step 35" + }, + { + "id": "5d822fd413a79914d39e98ef", + "title": "Step 36" + }, + { + "id": "5d822fd413a79914d39e98f0", + "title": "Step 37" + }, + { + "id": "5d822fd413a79914d39e98f1", + "title": "Step 38" + }, + { + "id": "5d822fd413a79914d39e98f2", + "title": "Step 39" + }, + { + "id": "5d822fd413a79914d39e98f3", + "title": "Step 40" + }, + { + "id": "5d822fd413a79914d39e98f4", + "title": "Step 41" + }, + { + "id": "5d822fd413a79914d39e98f5", + "title": "Step 42" + }, + { + "id": "5d822fd413a79914d39e98f6", + "title": "Step 43" + }, + { + "id": "5d822fd413a79914d39e98f7", + "title": "Step 44" + }, + { + "id": "5d822fd413a79914d39e98f8", + "title": "Step 45" + }, + { + "id": "5d822fd413a79914d39e98f9", + "title": "Step 46" + }, + { + "id": "5d822fd413a79914d39e98fa", + "title": "Step 47" + }, + { + "id": "5d822fd413a79914d39e98fb", + "title": "Step 48" + }, + { + "id": "5d822fd413a79914d39e98fc", + "title": "Step 49" + }, + { + "id": "5d822fd413a79914d39e98fd", + "title": "Step 50" + }, + { + "id": "5d822fd413a79914d39e98fe", + "title": "Step 51" + }, + { + "id": "5d822fd413a79914d39e98ff", + "title": "Step 52" + }, + { + "id": "5d822fd413a79914d39e9900", + "title": "Step 53" + }, + { + "id": "5d822fd413a79914d39e9901", + "title": "Step 54" + }, + { + "id": "5d822fd413a79914d39e9902", + "title": "Step 55" + }, + { + "id": "5d822fd413a79914d39e9903", + "title": "Step 56" + }, + { + "id": "5d822fd413a79914d39e9904", + "title": "Step 57" + }, + { + "id": "5d822fd413a79914d39e9905", + "title": "Step 58" + }, + { + "id": "5d822fd413a79914d39e9906", + "title": "Step 59" + }, + { + "id": "5d822fd413a79914d39e9907", + "title": "Step 60" + }, + { + "id": "5d822fd413a79914d39e9908", + "title": "Step 61" + }, + { + "id": "5d822fd413a79914d39e9909", + "title": "Step 62" + }, + { + "id": "5d822fd413a79914d39e990a", + "title": "Step 63" + }, + { + "id": "5d822fd413a79914d39e990b", + "title": "Step 64" + }, + { + "id": "5d822fd413a79914d39e990c", + "title": "Step 65" + }, + { + "id": "5d822fd413a79914d39e990d", + "title": "Step 66" + }, + { + "id": "5d822fd413a79914d39e990e", + "title": "Step 67" + }, + { + "id": "5d822fd413a79914d39e990f", + "title": "Step 68" + }, + { + "id": "5d822fd413a79914d39e9910", + "title": "Step 69" + }, + { + "id": "5d822fd413a79914d39e9911", + "title": "Step 70" + }, + { + "id": "5d822fd413a79914d39e9912", + "title": "Step 71" + }, + { + "id": "5d822fd413a79914d39e9913", + "title": "Step 72" + }, + { + "id": "5d822fd413a79914d39e9914", + "title": "Step 73" + }, + { + "id": "5d822fd413a79914d39e9916", + "title": "Step 74" + }, + { + "id": "5d822fd413a79914d39e9917", + "title": "Step 75" + }, + { + "id": "5d822fd413a79914d39e9918", + "title": "Step 76" + }, + { + "id": "5d822fd413a79914d39e9919", + "title": "Step 77" + }, + { + "id": "5d822fd413a79914d39e991a", + "title": "Step 78" + }, + { + "id": "5d822fd413a79914d39e991b", + "title": "Step 79" + }, + { + "id": "5d822fd413a79914d39e991c", + "title": "Step 80" + }, + { + "id": "5d822fd413a79914d39e991d", + "title": "Step 81" + }, + { + "id": "5d822fd413a79914d39e991e", + "title": "Step 82" + }, + { + "id": "5d822fd413a79914d39e991f", + "title": "Step 83" + }, + { + "id": "5d822fd413a79914d39e9920", + "title": "Step 84" + }, + { + "id": "5d822fd413a79914d39e9921", + "title": "Step 85" + }, + { + "id": "5d822fd413a79914d39e9922", + "title": "Step 86" + }, + { + "id": "5d822fd413a79914d39e9923", + "title": "Step 87" + }, + { + "id": "5d822fd413a79914d39e9924", + "title": "Step 88" + }, + { + "id": "5d822fd413a79914d39e9925", + "title": "Step 89" + }, + { + "id": "5d822fd413a79914d39e9926", + "title": "Step 90" + }, + { + "id": "5d822fd413a79914d39e9927", + "title": "Step 91" + }, + { + "id": "5d822fd413a79914d39e9928", + "title": "Step 92" + }, + { + "id": "5d822fd413a79914d39e9929", + "title": "Step 93" + }, + { + "id": "5d822fd413a79914d39e992a", + "title": "Step 94" + }, + { + "id": "5d822fd413a79914d39e992b", + "title": "Step 95" + }, + { + "id": "5d822fd413a79914d39e992c", + "title": "Step 96" + }, + { + "id": "5d822fd413a79914d39e992d", + "title": "Step 97" + }, + { + "id": "5d822fd413a79914d39e992e", + "title": "Step 98" + }, + { + "id": "5d822fd413a79914d39e992f", + "title": "Step 99" + }, + { + "id": "5d822fd413a79914d39e9930", + "title": "Step 100" + }, + { + "id": "5d822fd413a79914d39e9932", + "title": "Step 101" + }, + { + "id": "5d822fd413a79914d39e9933", + "title": "Step 102" + }, + { + "id": "5d822fd413a79914d39e9915", + "title": "Step 103" + }, + { + "id": "5d822fd413a79914d39e9934", + "title": "Step 104" + }, + { + "id": "5d822fd413a79914d39e9935", + "title": "Step 105" + }, + { + "id": "5d822fd413a79914d39e9931", + "title": "Step 106" + }, + { + "id": "5d822fd413a79914d39e9936", + "title": "Step 107" + }, + { + "id": "5d822fd413a79914d39e9937", + "title": "Step 108" + }, + { + "id": "5d822fd413a79914d39e9938", + "title": "Step 109" + }, + { + "id": "5d822fd413a79914d39e9939", + "title": "Step 110" + }, + { + "id": "5d822fd413a79914d39e993a", + "title": "Step 111" + }, + { + "id": "5d822fd413a79914d39e993b", + "title": "Step 112" + }, + { + "id": "5d822fd413a79914d39e993c", + "title": "Step 113" + }, + { + "id": "5d822fd413a79914d39e993d", + "title": "Step 114" + }, + { + "id": "5d822fd413a79914d39e993e", + "title": "Step 115" + } + ], + "helpCategory": "HTML-CSS" +} \ No newline at end of file diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md new file mode 100644 index 00000000000..6295eb77a14 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cc.md @@ -0,0 +1,76 @@ +--- +id: 5d822fd413a79914d39e98cc +title: Step 1 +challengeType: 0 +dashedName: step-1 +demoType: onLoad +--- + +# --description-- + +Welcome to the CSS Variables Skyline project! Start by adding a `link` element that links your `styles.css` file within the `head` element. + +# --hints-- + +Your code should have a `link` element. + +```js +assert.isNotNull(document.querySelector('link')); +``` + +You should not change your existing `head` tags. Make sure you did not delete the closing tag. + +```js +const headElements = document.querySelectorAll('head'); +assert.strictEqual(headElements?.length, 1); +``` + +You should have one void `link` element. + +```js +assert.strictEqual(document.querySelectorAll('link')?.length, 1); +``` + +Your `link` element should be within your `head` element. + +```js +const headContentRegex = /(?<=)[\S|\s]*(?=<\/head\s*>)/; +const headElementContent = code.match(headContentRegex); + +const headElement = document.createElement("head"); +headElement.innerHTML = headElementContent; +assert.isNotNull(headElement.querySelector('link')); +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +const linkElement = document.querySelector('link'); +const rel = linkElement?.getAttribute("rel"); +assert.strictEqual(rel, "stylesheet"); +``` + +Your `link` element should have an `href` attribute with the value `styles.css`. + +```js +const linkElement = document.querySelector('link'); +assert.strictEqual(linkElement?.dataset.href, "styles.css"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + City Skyline + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md new file mode 100644 index 00000000000..866b58f80ce --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cd.md @@ -0,0 +1,56 @@ +--- +id: 5d822fd413a79914d39e98cd +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black`. This is a trick that helps visualize where elements are and their size. You will remove this later. + +# --hints-- + +You should use the `*` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +You should use the `border` property to style all the elements. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('border')); +``` + +All elements should have a `1px solid black` border. + +```js +const astStyles = new __helpers.CSSHelp(document).getStyle('*'); +assert.equal(astStyles?.border, '1px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md new file mode 100644 index 00000000000..1ea4cc4156d --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ce.md @@ -0,0 +1,61 @@ +--- +id: 5d822fd413a79914d39e98ce +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements. + +# --hints-- + +You should use the `box-sizing` property. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing')); +``` + +You should make use of the existing `*` selector. + +```js +// Two selectors create two CSSStyleRule objects +assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1); +``` + +All elements should have a `box-sizing` of `border-box`. + +```js +const astStyles = new __helpers.CSSHelp(document).getStyle('*'); +assert.equal(astStyles.boxSizing, 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + + + +``` + +```css +--fcc-editable-region-- +* { + border: 1px solid black; +} + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md new file mode 100644 index 00000000000..1bc055910ad --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98cf.md @@ -0,0 +1,69 @@ +--- +id: 5d822fd413a79914d39e98cf +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +You can see the `body` (it's the inner-most box on your page); the box around it is the `html` element. Make your `body` fill the whole viewport by giving it a `height` of `100vh`. Remove the default `margin` from the `body` by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport. + +# --hints-- + +You should use the `body` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` should have a `height` of `100vh`. + +```js +const bodyStyles = new __helpers.CSSHelp(document).getStyle('body'); +assert.equal(bodyStyles?.height, '100vh'); +``` + +Your `body` should have a `margin` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); +``` + +Your `body` should have the `overflow` property set to `hidden`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md new file mode 100644 index 00000000000..a49b3f5dff7 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d0.md @@ -0,0 +1,65 @@ +--- +id: 5d822fd413a79914d39e98d0 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings. + +# --hints-- + +You should create a `div` element. + +```js +assert.exists(document.querySelector('div')); +``` + +Your `div` element should be within the `body`. + +```js +assert(document.querySelector('div')?.parentElement?.localName === 'body'); +``` + +Your `div` element should have a class of `background-buildings` + +```js +assert([...document.querySelector('div')?.classList]?.includes('background-buildings')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md new file mode 100644 index 00000000000..de8dfd72a14 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d1.md @@ -0,0 +1,68 @@ +--- +id: 5d822fd413a79914d39e98d1 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Give your `.background-buildings` element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`. + +# --hints-- + +You should use the `background-buildings` class to select the correct element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings')); +``` + +Your `.background-buildings` element should have a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%'); +``` + +Your `.background-buildings` element should have a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md new file mode 100644 index 00000000000..48ecc2d74bf --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d2.md @@ -0,0 +1,83 @@ +--- +id: 5d822fd413a79914d39e98d2 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Nest a `div` with a class of `bb1` in the background buildings container. Open your `styles.css` file, and give `.bb1` a `width` of `10%` and `height` of `70%`. "bb" stands for "background building", this will be your first building. + +# --hints-- + +You should create a new `div` element. + +```js +assert.equal(document.querySelectorAll('div').length, 2); +``` + +You should give the new `div` a class of `bb1`. + +```js +assert.exists(document.querySelector('div.bb1')); +``` + +You should use a `.bb1` class selector to style the element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')); +``` + +You should give the `.bb1` element a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%'); +``` + +You should give the `.bb1` element a `height` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +--fcc-editable-region-- +
+--fcc-editable-region-- + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md new file mode 100644 index 00000000000..45826ef23c2 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d3.md @@ -0,0 +1,105 @@ +--- +id: 5d822fd413a79914d39e98d3 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Nest four `div` elements in the `.bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections. + +# --hints-- + +You should create four new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 6); +``` + +You should give one of the new `div` elements a class of `bb1a`. + +```js +assert.exists(document.querySelector('div.bb1a')); +``` + +You should give one of the new `div` elements a class of `bb1b`. + +```js +assert.exists(document.querySelector('div.bb1b')); +``` + +You should give one of the new `div` elements a class of `bb1c`. + +```js +assert.exists(document.querySelector('div.bb1c')); +``` + +You should give one of the new `div` elements a class of `bb1d`. + +```js +assert.exists(document.querySelector('div.bb1d')); +``` + +You should place the new `div` elements in the correct order. + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d')); +``` + +You should place the new `div` elements within the `.bb1` element. + +```js +assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md new file mode 100644 index 00000000000..cae117f39b6 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d4.md @@ -0,0 +1,138 @@ +--- +id: 5d822fd413a79914d39e98d4 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `.bb1a`, `80%` and `10%` to `.bb1b`, `90%` and `10%` to `.bb1c`, and `100%` and `70%` to `.bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% - vertically filling the container. + +# --hints-- + +You should use a class selector to style `.bb1a`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')); +``` + +You should give `.bb1a` a `width` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%'); +``` + +You should give `.bb1a` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%'); +``` + +You should use a class selector to style `.bb1b`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')); +``` + +You should give `.bb1b` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%'); +``` + +You should give `.bb1b` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%'); +``` + +You should use a class selector to style `.bb1c`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')); +``` + +You should give `.bb1c` a `width` of `90%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%'); +``` + +You should give `.bb1c` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%'); +``` + +You should use a class selector to style `.bb1d`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')); +``` + +You should give `.bb1d` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%'); +``` + +You should give `.bb1d` a `height` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md new file mode 100644 index 00000000000..f8112351cbb --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d5.md @@ -0,0 +1,112 @@ +--- +id: 5d822fd413a79914d39e98d5 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Center the parts of your building by turning the `.bb1` element into a flexbox parent. Use the `flex-direction` and `align-items` properties to center the children. + +# --hints-- + +You should not change the `.bb1` `width` or `height` properties. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.width, '10%'); +assert.equal(bb1Style?.height, '70%'); +``` + +You should give the `.bb1` element a `display` of `flex`. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.display, 'flex'); +``` + +You should give the `.bb1` element a `flex-direction` of `column`. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.flexDirection, 'column'); +``` + +You should give the `.bb1` element a `align-items` of `center`. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.alignItems, 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; +} + +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md new file mode 100644 index 00000000000..f0684b658c0 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d6.md @@ -0,0 +1,103 @@ +--- +id: 5d822fd413a79914d39e98d6 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Now you have something that is resembling a building. You are ready to create your first variable. In the previous lecture videos you learned that variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the rule for the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`. + +# --hints-- + +You should create a new variable named `--building-color1`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1')); +``` + +You should define the `--building-color1` variable within `.bb1`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); +``` + +You should give `--building-color1` a value of `#999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; +} + +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md new file mode 100644 index 00000000000..2f33df6581e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d7.md @@ -0,0 +1,100 @@ +--- +id: 5d822fd413a79914d39e98d7 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Whatever value you gave the variable will be applied to whatever property you use it on. + +Add the variable `--building-color1` you created in the previous step as the value of the `background-color` property of the `.bb1a` class. + +# --hints-- + +The `background-color` of the `.bb1a` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background-color', true), 'var(--building-color1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #999; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; +} +--fcc-editable-region-- +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md new file mode 100644 index 00000000000..01335d8d2d8 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d8.md @@ -0,0 +1,124 @@ +--- +id: 5d822fd413a79914d39e98d8 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.bb1d` classes to fill in the rest of the building. + +# --hints-- + +The `background-color` of the `.bb1b` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.getPropVal('background-color', true), 'var(--building-color1)'); +``` + +The `background-color` of the `.bb1c` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.getPropVal('background-color', true), 'var(--building-color1)'); +``` + +The `background-color` of the `.bb1d` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background-color', true), 'var(--building-color1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #999; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md new file mode 100644 index 00000000000..3690866c537 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98d9.md @@ -0,0 +1,99 @@ +--- +id: 5d822fd413a79914d39e98d9 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Change the value of your variable from `#999` to `#aa80ff` and you can see how it gets applied everywhere you used the variable. This is the main advantage of using variables, being able to quickly change many values in your stylesheet by just changing the value of a variable. + +# --hints-- + +You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +--fcc-editable-region-- + --building-color1: #999; +--fcc-editable-region-- +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md new file mode 100644 index 00000000000..9096cdb2f72 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98da.md @@ -0,0 +1,133 @@ +--- +id: 5d822fd413a79914d39e98da +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Your first building looks pretty good now. Nest three new `div` elements in the `.background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background. + +# --hints-- + +You should create a `div` with a class of `bb2`. + +```js +assert.exists(document.querySelector('div.bb2')); +``` + +You should create a `div` with a class of `bb3`. + +```js +assert.exists(document.querySelector('div.bb3')); +``` + +You should create a `div` with a class of `bb4`. + +```js +assert.exists(document.querySelector('div.bb4')); +``` + +You should create 3 new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 9); +``` + +You should place these `div` elements within the `.background-buildings` element. + +```js +assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4); +``` + +You should place the elements in the correct order. + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md new file mode 100644 index 00000000000..b90a51c1f52 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98db.md @@ -0,0 +1,133 @@ +--- +id: 5d822fd413a79914d39e98db +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Give the new buildings `width` and `height` properties of: `10%` and `50%` for `.bb2`, `10%` and `55%` for `.bb3`, and `11%` and `58%` for `.bb4`. You will be using almost all percent based units and some flexbox for this project, so everything will be completely responsive. + +# --hints-- + +You should give `.bb2` a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%'); +``` + +You should give `.bb2` a `height` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%'); +``` + +You should give `.bb3` a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%'); +``` + +You should give `.bb3` a `height` of `55%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%'); +``` + +You should give `.bb4` a `width` of `11%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%'); +``` + +You should give `.bb4` a `height` of `58%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md new file mode 100644 index 00000000000..3907941f8aa --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dc.md @@ -0,0 +1,127 @@ +--- +id: 5d822fd413a79914d39e98dc +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +The buildings are currently stacked on top of each other. Align the buildings by turning the `.background-buildings` element into a flexbox parent. Use the `align-items` and `justify-content` properties to evenly space the buildings across the bottom of the element. + +# --hints-- + +You should add a `display` of `flex` to the `background-buildings` class. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex'); +``` + +You should add an `align-items` of `flex-end` to the `background-buildings` class. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end'); +``` + +You should add a `justify-content` of `space-evenly` to the `background-buildings` class. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} +--fcc-editable-region-- +.background-buildings { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md new file mode 100644 index 00000000000..d9ac91dbc64 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98dd.md @@ -0,0 +1,142 @@ +--- +id: 5d822fd413a79914d39e98dd +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +The buildings are too spaced out. Squeeze them together by adding two empty `div` elements to the top of the `.background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center. + +# --hints-- + +You should add two new `div` elements before the `.bb1` element. + +```js +const bBuildings = document.querySelector('.background-buildings')?.children; +assert(![...bBuildings?.[0]?.classList]?.includes('bb1')); +assert(![...bBuildings?.[1]?.classList]?.includes('bb1')); +``` + +You should add one new `div` element between the `.bb3` and `.bb4` element. + +```js +assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling); +``` + +You should add two new `div` elements after the `.bb4` element. + +```js +const bb4 = document.querySelector('.bb4'); +assert.exists(bb4?.nextElementSibling); +assert.exists(bb4?.nextElementSibling?.nextElementSibling); +``` + +You should add 5 new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 14); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md new file mode 100644 index 00000000000..4a44acc996a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98de.md @@ -0,0 +1,140 @@ +--- +id: 5d822fd413a79914d39e98de +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Create a new variable below your `--building-color1` variable. Name your new variable `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `.bb2`. + +# --hints-- + +You should define a new property variable called `--building-color2`. + +```js +assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2')); +``` + +You should give `--building-color2` a value of `#66cc99` within the `.bb1` class. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99'); +``` + +You should set the `background-color` of `.bb2`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor); +``` + +You should set the `background-color` using the `--building-color2` variable. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md new file mode 100644 index 00000000000..b13af86606e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98df.md @@ -0,0 +1,124 @@ +--- +id: 5d822fd413a79914d39e98df +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +That didn't work. You should add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `.bb2`. + +# --hints-- + +You should add a fallback value of `green` to the `background-color` property. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2,green)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; + --building-color2: #66cc99; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md new file mode 100644 index 00000000000..cc38315c42c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e0.md @@ -0,0 +1,142 @@ +--- +id: 5d822fd413a79914d39e98e0 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Create a new variable below the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `.bb3` class and give it a fallback value of `pink`. + +# --hints-- + +You should define a new property variable called `--building-color3`. + +```js +assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3')); +``` + +You should give `--building-color3` a value of `#cc6699`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); +``` + +You should set the `background-color` of `.bb3`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor); +``` + +You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3,pink)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; + --building-color2: #66cc99; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2, green); +} + +.bb3 { + width: 10%; + height: 55%; +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md new file mode 100644 index 00000000000..223330db87a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e1.md @@ -0,0 +1,155 @@ +--- +id: 5d822fd413a79914d39e98e1 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +That didn't work, because the variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there. + +# --hints-- + +You should declare a `:root` selector at the top of the stylesheet. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(':root')); +``` + +You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff'); +``` + +You should define `--building-color2` with a value of `#66cc99` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99'); +``` + +You should define `--building-color3` with a value of `#cc6699` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); +``` + +You should remove the custom property variables from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2')); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2, green); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3, pink); +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md new file mode 100644 index 00000000000..b42e37d70fe --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e2.md @@ -0,0 +1,135 @@ +--- +id: 5d822fd413a79914d39e98e2 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now. + +# --hints-- + +You should remove the fallback in the `background-color` from `.bb2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)'); +``` + +You should remove the fallback in the `background-color` from `.bb3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2, green); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3, pink); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md new file mode 100644 index 00000000000..9434a0ce335 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e3.md @@ -0,0 +1,144 @@ +--- +id: 5d822fd413a79914d39e98e3 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building. + +# --hints-- + +You should define a new property variable called `--building-color4`. + +```js +assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4')); +``` + +You should give `--building-color4` a value of `#538cc6` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6'); +``` + +You should add `background-color: var(--building-color4)` in the `.bb4` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.getPropVal('background-color', true), 'var(--building-color4)') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md new file mode 100644 index 00000000000..7aeec907b27 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e4.md @@ -0,0 +1,147 @@ +--- +id: 5d822fd413a79914d39e98e4 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +The background buildings are starting to look pretty good. Create a new `div` below the `.background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings. + +# --hints-- + +You should create a new `div` element. + +```js +assert.equal(document.querySelectorAll('div')?.length, 15); +``` + +The new `div` should come after the `div.background-buildings` element. + +```js +assert.exists(document.querySelector('div.background-buildings + div')); +``` + +Your new `div` should have a class of `foreground-buildings`. + +```js +assert.exists(document.querySelector('div.foreground-buildings')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md new file mode 100644 index 00000000000..d1b7b833937 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e5.md @@ -0,0 +1,161 @@ +--- +id: 5d822fd413a79914d39e98e5 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +You want the `.foreground-buildings` container to sit directly on top of the `.background-buildings` element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner. + +# --hints-- + +You should use a `.foreground-buildings` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); +``` + +You should give the `.foreground-buildings` element a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%'); +``` + +You should give the `.foreground-buildings` element a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%'); +``` + +You should give the `.foreground-buildings` element a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute'); +``` + +You should give the `.foreground-buildings` element a `top` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md new file mode 100644 index 00000000000..dc1a0644b00 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e6.md @@ -0,0 +1,192 @@ +--- +id: 5d822fd413a79914d39e98e6 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Nest six `div` elements within `.foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground. + +# --hints-- + +You should create a new `div` with a class of `fb1`. + +```js +assert.exists(document.querySelector('div.fb1')); +``` + +You should create a new `div` with a class of `fb2`. + +```js +assert.exists(document.querySelector('div.fb2')); +``` + +You should create a new `div` with a class of `fb3`. + +```js +assert.exists(document.querySelector('div.fb3')); +``` + +You should create a new `div` with a class of `fb4`. + +```js +assert.exists(document.querySelector('div.fb4')); +``` + +You should create a new `div` with a class of `fb5`. + +```js +assert.exists(document.querySelector('div.fb5')); +``` + +You should create a new `div` with a class of `fb6`. + +```js +assert.exists(document.querySelector('div.fb6')); +``` + +You should place these new `div` elements within the `.foreground-buildings` element. + +```js +assert.exists(document.querySelector('div.foreground-buildings > div.fb1')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb2')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb3')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb4')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb5')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb6')); +``` + +You should place the new `div` elements in the correct order. + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- + + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md new file mode 100644 index 00000000000..e8f77e196df --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e7.md @@ -0,0 +1,253 @@ +--- +id: 5d822fd413a79914d39e98e7 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Give the six new elements these `width` and `height` values: `10%` and `60%` to `.fb1`, `10%` and `40%` to `.fb2`, `10%` and `35%` to `.fb3`, `8%` and `45%` to `.fb4`, `10%` and `33%` to `.fb5`, and `9%` and `38%` to `.fb6`. + +# --hints-- + +You should create a `.fb1` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1')); +``` + +You should give the `.fb1` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%'); +``` + +You should give the `.fb1` selector a `height` of `60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%'); +``` + +You should create a `.fb2` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2')); +``` + +You should give the `.fb2` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%'); +``` + +You should give the `.fb2` selector a `height` of `40%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%'); +``` + +You should create a `.fb3` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3')); +``` + +You should give the `.fb3` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%'); +``` + +You should give the `.fb3` selector a `height` of `35%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%'); +``` + +You should create a `.fb4` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4')); +``` + +You should give the `.fb4` selector a `width` of `8%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%'); +``` + +You should give the `.fb4` selector a `height` of `45%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%'); +``` + +You should create a `.fb5` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5')); +``` + +You should give the `.fb5` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%'); +``` + +You should give the `.fb5` selector a `height` of `33%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%'); +``` + +You should create a `.fb6` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6')); +``` + +You should give the `.fb6` selector a `width` of `9%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%'); +``` + +You should give the `.fb6` selector a `height` of `38%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md new file mode 100644 index 00000000000..dcfbd1726e3 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e8.md @@ -0,0 +1,190 @@ +--- +id: 5d822fd413a79914d39e98e8 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Add the same `display`, `align-items`, and `justify-content` properties and values to `.foreground-buildings` that you used on `.background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container. + +# --hints-- + +You should give `.foreground-buildings` a `display` property of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex'); +``` + +You should give `.foreground-buildings` an `align-items` property of `flex-end`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end'); +``` + +You should give `.foreground-buildings` a `justify-content` property of `space-evenly`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md new file mode 100644 index 00000000000..90536932190 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98e9.md @@ -0,0 +1,223 @@ +--- +id: 5d822fd413a79914d39e98e9 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +You should optimize your code. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`. + +# --hints-- + +You should not remove the `.foreground-buildings` declaration. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); +``` + +You should remove the `position` property from `.foreground-buildings`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position); +``` + +You should remove the `top` property from `.foreground-buildings`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top); +``` + +You should add the `position` property of `absolute` to `.background-buildings, .foreground-buildings`. + +```js +function eitherOr() { + const a = new __helpers.CSSHelp(document) + return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); +} +assert.equal(eitherOr()?.position, 'absolute'); +``` + +You should add the `top` property of `0` to `.background-buildings, .foreground-buildings`. + +```js +function eitherOr() { + const a = new __helpers.CSSHelp(document) + return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); +} +assert.equal(eitherOr()?.top, '0px'); +``` + +You should use a comma to use both `.foreground-buildings` and `.background-buildings` selectors in the same style declaration. + +```js +function eitherOr() { + const a = new __helpers.CSSHelp(document) + return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); +} +assert.exists(eitherOr()); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} +--fcc-editable-region-- +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md new file mode 100644 index 00000000000..73eefabba2f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ea.md @@ -0,0 +1,181 @@ +--- +id: 5d822fd413a79914d39e98ea +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Now that you did that, you can delete the old `.foreground-buildings` declaration and all of its properties since they aren't needed anymore. + +# --hints-- + +You should delete the whole `.foreground-buildings` style declaration. + +```js +assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md new file mode 100644 index 00000000000..79fd7a22461 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98eb.md @@ -0,0 +1,203 @@ +--- +id: 5d822fd413a79914d39e98eb +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `.fb3` and `.fb4`, `--building-color2` for `.fb5`, `--building-color3` for `.fb2` and `.fb6`, and `--building-color4` for `.fb1`. + +# --hints-- + +You should give `.fb1` a `background-color` using `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.getPropVal('background-color', true), 'var(--building-color4)'); +``` + +You should give `.fb2` a `background-color` using `--building-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.getPropVal('background-color', true), 'var(--building-color3)'); +``` + +You should give `.fb3` a `background-color` using `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.getPropVal('background-color', true), 'var(--building-color1)'); +``` + +You should give `.fb4` a `background-color` using `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.getPropVal('background-color', true), 'var(--building-color1)'); +``` + +You should give `.fb5` a `background-color` using `--building-color2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.getPropVal('background-color', true), 'var(--building-color2)'); +``` + +You should give `.fb6` a `background-color` using `--building-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.getPropVal('background-color', true), 'var(--building-color3)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md new file mode 100644 index 00000000000..e8127da9f38 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ec.md @@ -0,0 +1,203 @@ +--- +id: 5d822fd413a79914d39e98ec +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Squeeze the buildings together again by adding two empty `div` elements within both the top and bottom of the `.foreground-buildings` element, and one more in between `.fb2` and `.fb3`. + +# --hints-- + +You should add two `div` elements as the first children of `.foreground-buildings`. + +```js +const bBuildings = document.querySelector('.background-buildings')?.children; +assert(![...bBuildings?.[0]?.classList]?.includes('fb1')); +assert(![...bBuildings?.[1]?.classList]?.includes('fb1')); +``` + +You should add one `div` element between `.fb2` and `.fb3`. + +```js +assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling); +``` + + +You should add two `div` elements as the last children of `.foreground-buildings`. + +```js +const fb6 = document.querySelector('.fb6'); +assert.exists(fb6?.nextElementSibling); +assert.exists(fb6?.nextElementSibling?.nextElementSibling); +``` + +You should have added 5 new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 26); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+--fcc-editable-region-- + + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md new file mode 100644 index 00000000000..b0b61db2807 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ed.md @@ -0,0 +1,202 @@ +--- +id: 5d822fd413a79914d39e98ed +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Move the position of `.fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `.fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings. + +# --hints-- + +You should give `.fb4` a `position` of `relative`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative'); +``` + +You should give `.fb4` a `left` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%'); +``` + +You should give `.fb5` a `position` of `relative`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative'); +``` + +You should give `.fb5` a `right` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md new file mode 100644 index 00000000000..5f33304cd72 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ee.md @@ -0,0 +1,196 @@ +--- +id: 5d822fd413a79914d39e98ee +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`. + +# --hints-- + +You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector. + +```js +assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code)); +``` + +You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector. + +```js +assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} +--fcc-editable-region-- + + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md new file mode 100644 index 00000000000..77e1a4588ca --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ef.md @@ -0,0 +1,197 @@ +--- +id: 5d822fd413a79914d39e98ef +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Create a new variable in `:root` called `--window-color1` and give it a value of `black`. This will be a secondary color for the purple buildings. + +# --hints-- + +You should create a new variable in `:root` called `--window-color1`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1')); +``` + +You should give the property variable `--window-color1` a value of `black`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md new file mode 100644 index 00000000000..45e8ff6334f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f0.md @@ -0,0 +1,218 @@ +--- +id: 5d822fd413a79914d39e98f0 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +In a previous module you learned that gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this: + +```css +gradient-type( + color1, + color2 +); +``` + +In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a `background` property below the `background-color` property. Set it as a gradient of type `linear-gradient` that uses `--building-color1` as the first color and `--window-color1` as the second. + +# --hints-- + +You should apply a `background` to `.bb1a` right after the `background-color`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); +``` + +You should give the `background` a `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient'); +``` + +You should give the `background` a `linear-gradient` starting from `var(--building-color1)`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1'); +``` + +You should give the `background` a `linear-gradient` ending at `var(--window-color1)`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md new file mode 100644 index 00000000000..a6223df97f7 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f1.md @@ -0,0 +1,223 @@ +--- +id: 5d822fd413a79914d39e98f1 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +You want to add the same gradient to the next two sections. Instead of doing that, create a new class selector called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class selector. + +# --hints-- + +You should create a new class selector called `bb1-window`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window')); +``` + +You should move the `height` property and value from `.bb1a` to `.bb1-window`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%'); +``` + +You should move the `background` property and value from `.bb1a` to `.bb1-window`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); +``` + +You should not move the `background-color` property from `.bb1a`. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); +``` + +You should not move the `width` property from `.bb1a`. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + + +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md new file mode 100644 index 00000000000..d9744bf45f2 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f2.md @@ -0,0 +1,237 @@ +--- +id: 5d822fd413a79914d39e98f2 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them. + +# --hints-- + +You should not remove the `bb1a` class. + +```js +assert.exists(document.querySelector('div.bb1a')); +``` + +You should add the `bb1-window` class to the `.bb1a` element. + +```js +assert.exists(document.querySelector('div.bb1a.bb1-window')); +``` + +You should not remove the `bb1b` class. + +```js +assert.exists(document.querySelector('div.bb1b')); +``` + +You should add the `bb1-window` class to the `.bb1b` element. + +```js +assert.exists(document.querySelector('div.bb1b.bb1-window')); +``` + +You should not remove the `bb1c` class. + +```js +assert.exists(document.querySelector('div.bb1c')); +``` + +You should add the `bb1-window` class to the `.bb1c` element. + +```js +assert.exists(document.querySelector('div.bb1c.bb1-window')); +``` + +You should not change the `.bb1d` element. + +```js +assert.exists(document.querySelector('div.bb1d')); +assert.notExists(document.querySelector('div.bb1d.bb1-window')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md new file mode 100644 index 00000000000..f8c7302293f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f3.md @@ -0,0 +1,222 @@ +--- +id: 5d822fd413a79914d39e98f3 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them. + +# --hints-- + +You should remove the `background-color` from `.bb1a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); +``` + +You should remove the `height` property from `.bb1b`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height); +``` + +You should remove the `background-color` property from `.bb1b`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor); +``` + +You should remove the `height` property from `.bb1c`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height); +``` + +You should remove the `background-color` property from `.bb1c`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md new file mode 100644 index 00000000000..fef95c34db9 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f4.md @@ -0,0 +1,227 @@ +--- +id: 5d822fd413a79914d39e98f4 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Gradients can use as many colors as you want like this: + +```css +gradient-type( + color1, + color2, + color3 +); +``` + +Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property. + +# --hints-- + +You should use the `background` on `.bb1d`. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background); +``` + +You should give the `background` property a `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient'); +``` + +You should use `orange` as the first color in the `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange'); +``` + +You should use `--building-color1` as the second color in the `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)'); +``` + +You should use `--window-color1` as the third color in the `linear-gradient`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md new file mode 100644 index 00000000000..941dfd990e0 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f5.md @@ -0,0 +1,198 @@ +--- +id: 5d822fd413a79914d39e98f5 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `.bb1d`. + +# --hints-- + +You should remove the `background-color` property and value from `.bb1d` + +```js +assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); + background: linear-gradient( + orange, + var(--building-color1), + var(--window-color1) + ); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md new file mode 100644 index 00000000000..77c52c21a77 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f6.md @@ -0,0 +1,207 @@ +--- +id: 5d822fd413a79914d39e98f6 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +You can specify where you want a gradient transition to complete by adding it to the color like this: + +```css +gradient-type( + color1, + color2 20%, + color3 +); +``` + +Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action. + +# --hints-- + +You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + orange, + var(--building-color1), + var(--window-color1) + ); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md new file mode 100644 index 00000000000..2b2100cd622 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f7.md @@ -0,0 +1,203 @@ +--- +id: 5d822fd413a79914d39e98f7 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half. + +# --hints-- + +You should remove `orange` from the `linear-gradient`. + +```js +assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange'); +``` + +You should change the now first `linear-gradient` color to transition at `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + orange, + var(--building-color1) 80%, + var(--window-color1) + ); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md new file mode 100644 index 00000000000..1ed735b2301 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f8.md @@ -0,0 +1,210 @@ +--- +id: 5d822fd413a79914d39e98f8 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building. + +# --hints-- + +You should add two `div` elements to `.bb2`. + +```js +assert.equal(document.querySelector('div.bb2')?.children?.length, 2); +``` + +You should give the first `div` a class of `bb2a`. + +```js +assert.exists(document.querySelector('div.bb2a')); +``` + +You should give the second `div` a class of `bb2b`. + +```js +assert.exists(document.querySelector('div.bb2b')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md new file mode 100644 index 00000000000..a604dfc8224 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98f9.md @@ -0,0 +1,207 @@ +--- +id: 5d822fd413a79914d39e98f9 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later. + +# --hints-- + +You should give `.bb2b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%'); +``` + +You should give `.bb2b` a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md new file mode 100644 index 00000000000..d3baff12cbf --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fa.md @@ -0,0 +1,211 @@ +--- +id: 5d822fd413a79914d39e98fa +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building. + +# --hints-- + +You should create a new property variable called `window-color2` within `:root`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2')); +``` + +You should give `window-color2` a value of `#8cd9b3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb2b { + width: 100%; + height: 100%; +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md new file mode 100644 index 00000000000..19c96da2adf --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fb.md @@ -0,0 +1,240 @@ +--- +id: 5d822fd413a79914d39e98fb +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Gradient transitions often gradually change from one color to another. When a more abrupt change is required, the transition can be made with a hard stop like this: + +```css +linear-gradient( + var(--first-color) 0%, + var(--first-color) 40%, + var(--second-color) 40%, + var(--second-color) 80% +); +``` + +Add a `linear-gradient` to `.bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`. + +# --hints-- + +You should give `.bb2b` a `background` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background); +``` + +You should use a `linear-gradient` on the `background`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient"); +``` + +You should use `--building-color2` from `0%` to `6%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/); +``` + +You should use `--window-color2` from `6%` to `9%`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%"); +``` + +`.bb2b` should have a `linear-gradient` transitioning from `--building-color2` at `0%` to `6%`, and `--window-color2` at `6%` to `9%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md new file mode 100644 index 00000000000..3f03addb165 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fc.md @@ -0,0 +1,211 @@ +--- +id: 5d822fd413a79914d39e98fc +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them. + +# --hints-- + +You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md new file mode 100644 index 00000000000..ff29e839ca8 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fd.md @@ -0,0 +1,209 @@ +--- +id: 5d822fd413a79914d39e98fd +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +In the next few steps, you are going to use some tricks with CSS borders to turn the `.bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `.bb2` since you don't need it anymore. + +# --hints-- + +You should remove the `background-color` from `.bb2`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( +var(--building-color1) 50%, +var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( +var(--building-color1), +var(--window-color1) + ); +} +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( +var(--building-color2), +var(--building-color2) 6%, +var(--window-color2) 6%, +var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md new file mode 100644 index 00000000000..596566ea281 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98fe.md @@ -0,0 +1,260 @@ +--- +id: 5d822fd413a79914d39e98fe +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Create and add the following properties to `.bb2a`: + +```css +margin: auto; +width: 5vw; +height: 5vw; +border-top: 1vw solid #000; +border-bottom: 1vw solid #000; +border-left: 1vw solid #999; +border-right: 1vw solid #999; +``` + +After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building. + +# --hints-- + +You should give `.bb2a` a `margin` of `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto"); +``` + +You should give `.bb2a` a `width` of `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw"); +``` + +You should give `.bb2a` a `height` of `5vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw"); +``` + +You should give `.bb2a` a `border-top` of `1vw solid #000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)"); +``` + +You should give `.bb2a` a `border-bottom` of `1vw solid #000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)"); +``` + +You should give `.bb2a` a `border-left` of `1vw solid #999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)"); +``` + +You should give `.bb2a` a `border-right` of `1vw solid #999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md new file mode 100644 index 00000000000..52341ce5560 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e98ff.md @@ -0,0 +1,238 @@ +--- +id: 5d822fd413a79914d39e98ff +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle. + +# --hints-- + +You should remove the `width` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width); +``` + +You should remove the `height` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height); +``` + +You should change the `border-left` to use `5vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)"); +``` + +You should change the `border-right` to use `5vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + margin: auto; + width: 5vw; + height: 5vw; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 1vw solid #999; + border-right: 1vw solid #999; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md new file mode 100644 index 00000000000..f39ab14e539 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9900.md @@ -0,0 +1,224 @@ +--- +id: 5d822fd413a79914d39e9900 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Next, change the two `#999` of `.bb2a` to `transparent`. This will make the left and right borders invisible. + +# --hints-- + +You should change the `border-left` to use `transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent"); +``` + +You should change the `border-right` to use `transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + margin: auto; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 5vw solid #999; + border-right: 5vw solid #999; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md new file mode 100644 index 00000000000..590d20830e5 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9901.md @@ -0,0 +1,224 @@ +--- +id: 5d822fd413a79914d39e9901 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building. + +# --hints-- + +You should remove the `margin` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin); +``` + +You should remove the `border-top` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + margin: auto; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md new file mode 100644 index 00000000000..e54344ca78e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9902.md @@ -0,0 +1,227 @@ +--- +id: 5d822fd413a79914d39e9902 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end. + +# --hints-- + +You should change `border-bottom` to use `5vh`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh"); +``` + +You should change `border-bottom` to use `--building-color2`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)"); +``` + +`border-bottom` should be `5vh solid var(--building-color2)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + border-bottom: 1vw solid #000; + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md new file mode 100644 index 00000000000..9ad8785db13 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9903.md @@ -0,0 +1,223 @@ +--- +id: 5d822fd413a79914d39e9903 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings. + +# --hints-- + +You should define a new property variable `--window-color3`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3")); +``` + +You should give `--window-color3` a value of `#d98cb3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md new file mode 100644 index 00000000000..1b9d707de3b --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9904.md @@ -0,0 +1,245 @@ +--- +id: 5d822fd413a79914d39e9904 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +So far, all the gradients you created have gone from top to bottom, that's the default direction. You can specify another direction by adding it before your colors like this: + +```css +gradient-type( + direction, + color1, + color2 +); +``` + +Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`. + +# --hints-- + +You should give `.bb3` a `background` using `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient"); +``` + +You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +You should use `--building-color3` for the first two colors. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)"); +``` + +You should use `--window-color3` at `15%` for the third color. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md new file mode 100644 index 00000000000..4b8203a9f77 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9905.md @@ -0,0 +1,223 @@ +--- +id: 5d822fd413a79914d39e9905 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Remove the `background-color` property and value from `.bb3` since you are using the gradient as the background now. + +# --hints-- + +You should remove the `background-color` from `.bb3`. + +```js +assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md new file mode 100644 index 00000000000..1576092bcef --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9906.md @@ -0,0 +1,249 @@ +--- +id: 5d822fd413a79914d39e9906 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +The next building will have three sections. Nest three `div` elements within `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order. + +# --hints-- + +You should add three `div` elements within `.bb4`. + +```js +assert.equal(document.querySelector("div.bb4")?.children?.length, 3); +``` + +You should give the first new `div` a class of `bb4a`. + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +You should give the second new `div` a class of `bb4b`. + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +You should give the third new `div` a class of `bb4c`. + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +You should place the new `div` elements in this order `.bb4a + .bb4b + .bb4c`. + +```js +assert.exists(document.querySelector("div.bb4a + div.bb4b")); +assert.exists(document.querySelector("div.bb4b + div.bb4c")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md new file mode 100644 index 00000000000..e6aa36618d6 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9907.md @@ -0,0 +1,258 @@ +--- +id: 5d822fd413a79914d39e9907 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`. + +# --hints-- + +You should give `.bb4a` a `width` of `3%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%"); +``` + +You should give `.bb4a` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%"); +``` + +You should give `.bb4b` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%"); +``` + +You should give `.bb4b` a `height` of `5%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%"); +``` + +You should give `.bb4c` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%"); +``` + +You should give `.bb4c` a `height` of `85%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md new file mode 100644 index 00000000000..9dcc9fbc148 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9908.md @@ -0,0 +1,258 @@ +--- +id: 5d822fd413a79914d39e9908 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Remove the `background-color` property and value from `.bb4`, and add it to the three new sections `.bb4a`, `.bb4b`, and `.bb4c`, so only the sections are filled. + +# --hints-- + +You should remove the `background-color` from `.bb4`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor); +``` + +You should give `.bb4a` a `background-color` of `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +You should give `.bb4b` a `background-color` of `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +You should give `.bb4c` a `background-color` of `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.bb4a { + width: 3%; + height: 10%; +} + +.bb4b { + width: 80%; + height: 5%; +} + +.bb4c { + width: 100%; + height: 85%; +} +--fcc-editable-region-- +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md new file mode 100644 index 00000000000..4a40c2a4b9d --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9909.md @@ -0,0 +1,245 @@ +--- +id: 5d822fd413a79914d39e9909 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding. + +# --hints-- + +You should create a new class declaration called `building-wrap`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md new file mode 100644 index 00000000000..6c4e8841349 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990a.md @@ -0,0 +1,277 @@ +--- +id: 5d822fd413a79914d39e990a +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Move the `display`, `flex-direction`, and `align-items` properties and values from `.bb1` to the new `building-wrap` class. + +# --hints-- + +You should remove `display` from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display); +``` + +You should move `display` with a value of `flex` to `.building-wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex"); +``` + +You should remove `flex-direction` from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection); +``` + +You should move `flex-direction` with a value of `column` to `.building-wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column"); +``` + +You should remove `align-items` from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems); +``` + +You should move `align-items` with a value of `center` to `.building-wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} +--fcc-editable-region-- +.building-wrap { + +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md new file mode 100644 index 00000000000..5056530e801 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990b.md @@ -0,0 +1,254 @@ +--- +id: 5d822fd413a79914d39e990b +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it. + +# --hints-- + +You should add `building-wrap` to the `.bb1` element. + +```js +assert.exists(document.querySelector("div.bb1.building-wrap")); +``` + +You should add `building-wrap` to the `.bb4` element. + +```js +assert.exists(document.querySelector("div.bb4.building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md new file mode 100644 index 00000000000..b5f75a8842f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990c.md @@ -0,0 +1,253 @@ +--- +id: 5d822fd413a79914d39e990c +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building. + +# --hints-- + +You should define a new property variable `--window-color4`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4")); +``` + +You should give `--window-color4` a value of `#8cb3d9`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md new file mode 100644 index 00000000000..c01cf0cb027 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990d.md @@ -0,0 +1,255 @@ +--- +id: 5d822fd413a79914d39e990d +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building. + +# --hints-- + +You should add four `div` elements to `.bb4c`. + +```js +assert.equal(document.querySelector(".bb4c")?.children?.length, 4); +``` + +You should give each new `div` a class of `bb4-window`. + +```js +assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md new file mode 100644 index 00000000000..3f6e583240d --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990e.md @@ -0,0 +1,265 @@ +--- +id: 5d822fd413a79914d39e990e +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`. + +# --hints-- + +You should give `.bb4-window` a `width` of `18%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%"); +``` + +You should give `.bb4-window` a `height` of `90%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%"); +``` + +You should give `.bb4-window` a `background-color` of `--window-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md new file mode 100644 index 00000000000..b18f7aa0d72 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e990f.md @@ -0,0 +1,279 @@ +--- +id: 5d822fd413a79914d39e990f +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + + +The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `window-wrap`. Make `.window-wrap` a flexbox container, and use the `align-items` and `justify-content` properties to center its child elements vertically and evenly space them in their parent, respectively. + +# --hints-- + +You should create a `.window-wrap` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap")); +``` + +You should give `.window-wrap` a `display` of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex"); +``` + +You should give `.window-wrap` an `align-items` of `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center"); +``` + +You should give `.window-wrap` a `justify-content` of `space-evenly`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md new file mode 100644 index 00000000000..62ab98d835e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9910.md @@ -0,0 +1,266 @@ +--- +id: 5d822fd413a79914d39e9910 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Add the new `window-wrap` class to the `.bb4c` element. + +# --hints-- + +You should add a class of `window-wrap` to `.bb4c`. + +```js +assert.exists(document.querySelector("div.bb4c.window-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md new file mode 100644 index 00000000000..3be5bc18eb6 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9911.md @@ -0,0 +1,291 @@ +--- +id: 5d822fd413a79914d39e9911 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Looks good! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order. + +# --hints-- + +You should add three `div` elements within `.fb1`. + +```js +assert.equal(document.querySelector("div.fb1")?.children?.length, 3); +``` + +You should give the first new `div` a class of `fb1a`. + +```js +assert.exists(document.querySelector("div.fb1 > div.fb1a")); +``` + +You should give the second new `div` a class of `fb1b`. + +```js +assert.exists(document.querySelector("div.fb1 > div.fb1b")); +``` + +You should give the third new `div` a class of `fb1c`. + +```js +assert.exists(document.querySelector("div.fb1 > div.fb1c")); +``` + +You should place the new `div` elements in this order `.fb1a + .fb1b + .fb1c`. + +```js +assert.exists(document.querySelector("div.fb1a + div.fb1b")); +assert.exists(document.querySelector("div.fb1b + div.fb1c")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md new file mode 100644 index 00000000000..c0c1c218275 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9912.md @@ -0,0 +1,287 @@ +--- +id: 5d822fd413a79914d39e9912 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Give `.fb1b` a `width` of `60%` and `height` of `10%`, and `.fb1c` a `width` of `100%` and `height` of `80%`. + +# --hints-- + +You should give `.fb1b` a `width` of `60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%"); +``` + +You should give `.fb1b` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%"); +``` + +You should give `.fb1c` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%"); +``` + +You should give `.fb1c` a `height` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md new file mode 100644 index 00000000000..99c0f5bd556 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9913.md @@ -0,0 +1,280 @@ +--- +id: 5d822fd413a79914d39e9913 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Add the `building-wrap` class to the `.fb1` element to center the sections. + +# --hints-- + +You should add the class `building-wrap` to `.fb1`. + +```js +assert.exists(document.querySelector("div.fb1.building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb1b { + width: 60%; + height: 10%; +} + +.fb1c { + width: 100%; + height: 80%; +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md new file mode 100644 index 00000000000..ad2bfcc1c54 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9914.md @@ -0,0 +1,284 @@ +--- +id: 5d822fd413a79914d39e9914 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Move the `background-color` property and value from `.fb1` to `.fb1b`. + +# --hints-- + +You should remove `background-color` from `.fb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor); +``` + +You should add a `background-color` of `--building-color4` to `.fb1b`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb1b { + width: 60%; + height: 10%; +} +--fcc-editable-region-- +.fb1c { + width: 100%; + height: 80%; +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md new file mode 100644 index 00000000000..d14fa6de0bd --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9915.md @@ -0,0 +1,391 @@ +--- +id: 5d822fd413a79914d39e9915 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +You don't need the `background-color` for this building anymore so you can remove that property. + +# --hints-- + +You should remove the `background-color` of `.fb5`. + +```js +assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md new file mode 100644 index 00000000000..c3f7acb95f3 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9916.md @@ -0,0 +1,297 @@ +--- +id: 5d822fd413a79914d39e9916 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building. + +Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`. + +# --hints-- + +You should give `.fb1c` a `background` with a `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient"); +``` + +You should use a direction of `90deg`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +You should use a first color of `--building-color4` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/); +``` + +You should use a second color of `transparent` from `10%` to `15%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(transparent10%,transparent15%\)|transparent10%15%\))$/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb1c { + width: 100%; + height: 80%; +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md new file mode 100644 index 00000000000..7e1380ce60a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9917.md @@ -0,0 +1,307 @@ +--- +id: 5d822fd413a79914d39e9917 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +You can add multiple gradients to an element by separating them with a comma (`,`) like this: + +```css +gradient1( + colors +), +gradient2( + colors +); +``` + +Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last. + +# --hints-- + +You should not alter the first `repeating-linear-gradient`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/); +``` + +You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/); +``` + +You should use a second color of `--window-color4` from `10%` to `90%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(var\(--window-color4\)10%,var\(--window-color4\)90%\)|var\(--window-color4\)10%90%\))$/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ) +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md new file mode 100644 index 00000000000..6c1a1399eb0 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9918.md @@ -0,0 +1,298 @@ +--- +id: 5d822fd413a79914d39e9918 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +You're going to use some more border tricks for the top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `.fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements. + +# --hints-- + +You should give `.fb1a` a `border-bottom`. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom); +``` + +You should use a `border-bottom` of `7vh solid var(--building-color4)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md new file mode 100644 index 00000000000..c037b340627 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9919.md @@ -0,0 +1,301 @@ +--- +id: 5d822fd413a79914d39e9919 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +When you increase the size of the left and right borders, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide. + +# --hints-- + +You should give `.fb1a` a `border-left` of `2vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent"); +``` + +You should give `.fb1a` a `border-right` of `2vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} +--fcc-editable-region-- +.fb1a { + border-bottom: 7vh solid var(--building-color4); +} +--fcc-editable-region-- +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md new file mode 100644 index 00000000000..c1434615d38 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991a.md @@ -0,0 +1,312 @@ +--- +id: 5d822fd413a79914d39e991a +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +On to the next building! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order. + +# --hints-- + +You should add two `div` elements within `.fb2`. + +```js +assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2); +``` + +You should give the first new `div` a class of `fb2a`. + +```js +assert.exists(document.querySelector("div.fb2 > div.fb2a")); +assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild); +``` + +You should give the second new `div` a class of `fb2b`. + +```js +assert.exists(document.querySelector("div.fb2 > div.fb2b")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md new file mode 100644 index 00000000000..2c9b49a9270 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991b.md @@ -0,0 +1,314 @@ +--- +id: 5d822fd413a79914d39e991b +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`. + +# --hints-- + +You should give `.fb2a` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%"); +``` + +You should give `.fb2b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%"); +``` + +You should give `.fb2b` a `height` of `75%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md new file mode 100644 index 00000000000..428497c9409 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991c.md @@ -0,0 +1,317 @@ +--- +id: 5d822fd413a79914d39e991c +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building. + +# --hints-- + +You should add three `div` elements within `.fb2b`. + +```js +assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3); +``` + +You should give the three new `div` elements each a class of `fb2-window`. + +```js +assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md new file mode 100644 index 00000000000..d9433de6472 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991d.md @@ -0,0 +1,315 @@ +--- +id: 5d822fd413a79914d39e991d +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Add your `window-wrap` class to `.fb2b` to position the new window elements. + +# --hints-- + +You should add the class `window-wrap` to `.fb2b`. + +```js +assert.exists(document.querySelector("div.fb2b.window-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md new file mode 100644 index 00000000000..b32fbcfb37f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991e.md @@ -0,0 +1,326 @@ +--- +id: 5d822fd413a79914d39e991e +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable. + +# --hints-- + +You should give the `.fb2-window` elements a `width` of `22%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%"); +``` + +You should give the `.fb2-window` elements a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%"); +``` + +You should give the `.fb2-window` elements a `background-color` of `--window-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md new file mode 100644 index 00000000000..566da98c306 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e991f.md @@ -0,0 +1,324 @@ +--- +id: 5d822fd413a79914d39e991f +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container. + +# --hints-- + +You should remove the `background-color` property from `.fb2`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor); +``` + +You should give `.fb2b` a `background-color` of `--building-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} +--fcc-editable-region-- +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md new file mode 100644 index 00000000000..558480455e2 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9920.md @@ -0,0 +1,330 @@ +--- +id: 5d822fd413a79914d39e9920 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape. + +# --hints-- + +You should give `.fb2a` a `border-bottom` of `10vh solid var(--building-color3)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)"); +``` + +You should give `.fb2a` a `border-left` of `1vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent"); +``` + +You should give `.fb2a` a `border-right` of `1vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} +--fcc-editable-region-- +.fb2a { + width: 100%; +} +--fcc-editable-region-- +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md new file mode 100644 index 00000000000..4eccae5a1aa --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9921.md @@ -0,0 +1,348 @@ +--- +id: 5d822fd413a79914d39e9921 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +For the next building, nest four `div` elements within `.fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two. + +# --hints-- + +You should add four `div` elements within `.fb3`. + +```js +assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4); +``` + +You should give the first new `div` a class of `fb3a`. + +```js +assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a")); +``` + +You should give the second new `div` a class of `fb3b`. + +```js +assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b")); +``` + +You should give the third new `div` a class of `fb3a`. + +```js +assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a")); +``` + +You should give the fourth new `div` a class of `fb3b`. + +```js +assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md new file mode 100644 index 00000000000..962bc5e2c21 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9922.md @@ -0,0 +1,347 @@ +--- +id: 5d822fd413a79914d39e9922 +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Give the `.fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `.fb3b` element a `width` of `100%` and `height` of `35%`. + +# --hints-- + +You should give `.fb3a` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%"); +``` + +You should give `.fb3a` a `height` of `15%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%"); +``` + +You should give `.fb3b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%"); +``` + +You should give `.fb3b` a `height` of `35%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md new file mode 100644 index 00000000000..8c7cacee44c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9923.md @@ -0,0 +1,348 @@ +--- +id: 5d822fd413a79914d39e9923 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`. + +# --hints-- + +You should remove the `background-color` from `.fb3`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor); +``` + +You should give `.fb3a` a `background-color` of `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)"); +``` + +You should give `.fb3b` a `background-color` of `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} +--fcc-editable-region-- +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3a { + width: 80%; + height: 15%; +} + +.fb3b { + width: 100%; + height: 35%; +} +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md new file mode 100644 index 00000000000..2f30b75ed2f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9924.md @@ -0,0 +1,340 @@ +--- +id: 5d822fd413a79914d39e9924 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +Add your `building-wrap` class to the `.fb3` element to center the sections. + +# --hints-- + +You should add the class `building-wrap` to `.fb3`. + +```js +assert.exists(document.querySelector("div.fb3.building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md new file mode 100644 index 00000000000..a3a0d9b75dd --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9925.md @@ -0,0 +1,346 @@ +--- +id: 5d822fd413a79914d39e9925 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Nest three new `div` elements in the first `.fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section. + +# --hints-- + +You should add three `div` elements within the first `.fb3a` element. + +```js +assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3); +``` + +You should give each new `div` a class of `fb3-window`. + +```js +assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md new file mode 100644 index 00000000000..207f9a7cb45 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9926.md @@ -0,0 +1,355 @@ +--- +id: 5d822fd413a79914d39e9926 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Give the `.fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value. + +# --hints-- + +You should give `.fb3-window` a `width` of `25%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%"); +``` + +You should give `.fb3-window` a `height` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%"); +``` + +You should give `.fb3-window` a `background-color` of `--window-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md new file mode 100644 index 00000000000..d288134533a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9927.md @@ -0,0 +1,350 @@ +--- +id: 5d822fd413a79914d39e9927 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Add your `window-wrap` class to the `.fb3a` element to center and space the windows. + +# --hints-- + +You should give `.fb3a` a class of `window-wrap`. + +```js +assert.exists(document.querySelector("div.fb3a.window-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md new file mode 100644 index 00000000000..e4e85761648 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9928.md @@ -0,0 +1,349 @@ +--- +id: 5d822fd413a79914d39e9928 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +With CSS variables you can change values without searching everywhere in the stylesheet. Change the `--window-color1` value to `#bb99ff`. + +# --hints-- + +You should change the value of `--window-color1` to `#bb99ff`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md new file mode 100644 index 00000000000..049f74e8455 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9929.md @@ -0,0 +1,362 @@ +--- +id: 5d822fd413a79914d39e9929 +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Only three more buildings to go. Nest two new `div` elements within the `.fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `.fb4` and `.fb5`, so it's the rightmost purple building you are working on now. + +# --hints-- + +You should add two `div` elements within `.fb4`. + +```js +assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2); +``` + +You should give the first new `div` a class of `fb4a`. + +```js +assert.exists(document.querySelector("div.fb4a")); +``` + +You should give the second new `div` a class of `fb4b`. + +```js +assert.exists(document.querySelector("div.fb4b")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md new file mode 100644 index 00000000000..fa118d94cfd --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992a.md @@ -0,0 +1,359 @@ +--- +id: 5d822fd413a79914d39e992a +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Give `.fb4b` a `width` of `100%` and `height` of `89%`. + +# --hints-- + +You should give `.fb4b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%"); +``` + +You should give `.fb4b` a `height` of `89%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md new file mode 100644 index 00000000000..71f2741047d --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992b.md @@ -0,0 +1,361 @@ +--- +id: 5d822fd413a79914d39e992b +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`. + +# --hints-- + +You should remove the `background-color` from `.fb4`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor); +``` + +You should give `.fb4b` a `background-color` of `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md new file mode 100644 index 00000000000..e5b5c10e4da --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992c.md @@ -0,0 +1,364 @@ +--- +id: 5d822fd413a79914d39e992c +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`. + +# --hints-- + +You should add six `div` elements within `.fb4b`. + +```js +assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6); +``` + +You should give each new `div` a class of `fb4-window`. + +```js +assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md new file mode 100644 index 00000000000..8b62287fe98 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992d.md @@ -0,0 +1,377 @@ +--- +id: 5d822fd413a79914d39e992d +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building. + +# --hints-- + +You should give `.fb4-window` a `width` of `30%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%"); +``` + +You should give `.fb4-window` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%"); +``` + +You should give `.fb4-window` a `border-radius` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md new file mode 100644 index 00000000000..7967c972d8d --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992e.md @@ -0,0 +1,374 @@ +--- +id: 5d822fd413a79914d39e992e +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +Fill in the windows with your secondary color for this building. Also add a `margin` of `10%` to give the windows some space. + +# --hints-- + +You should give `.fb4-window` a `background-color` of `--window-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)"); +``` + +You should give `.fb4-window` a `margin` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md new file mode 100644 index 00000000000..669472439ec --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e992f.md @@ -0,0 +1,377 @@ +--- +id: 5d822fd413a79914d39e992f +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +The windows are stacked on top of each other on the rightmost purple building. Turn the building into a flexbox parent, and use the `flex-wrap` property to put the windows side by side, and push them down to a new row when they don't fit. + +# --hints-- + +You should give `.fb4b` a `display` of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex"); +``` + +You should give `.fb4b` a `flex-wrap` of `wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} +--fcc-editable-region-- +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md new file mode 100644 index 00000000000..b732bccc3d3 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9930.md @@ -0,0 +1,381 @@ +--- +id: 5d822fd413a79914d39e9930 +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent`, and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color. + +# --hints-- + +You should give `.fb4a` a `border-top` of `5vh solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent") +``` + +You should give `.fb4a` a `border-left` of `8vw solid var(--building-color1)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)") +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md new file mode 100644 index 00000000000..418f40963a2 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9931.md @@ -0,0 +1,404 @@ +--- +id: 5d822fd413a79914d39e9931 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +You can remove the `background-color` for this building now, since it isn't needed. + +# --hints-- + +You should remove the `background-color` of `.fb6`. + +```js +assert.notMatch(code, /\.fb6\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md new file mode 100644 index 00000000000..3445398e80f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9932.md @@ -0,0 +1,396 @@ +--- +id: 5d822fd413a79914d39e9932 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%`, and `transparent` from `5%` to `10%`. + +# --hints-- + +You should give `.fb5` a `background` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background); +``` + +You should give the `background` a `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient"); +``` + +You should give the `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `5%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/); +``` + +You should give the `repeating-linear-gradient` a second color of `transparent` from `5%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md new file mode 100644 index 00000000000..470083eff84 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9933.md @@ -0,0 +1,402 @@ +--- +id: 5d822fd413a79914d39e9933 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Add another `repeating-linear-gradient` below the one you just added. Give it a `90deg` direction, use your building color from `0%` to `12%` and window color `12%` to `44%`. This will make a bunch of rectangle windows. + +# --hints-- + +You should give `.fb5` a second `repeating-linear-gradient` in the `background` property. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient/); +``` + +You should give the second `repeating-linear-gradient` a direction of `90deg`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg/); +``` + +You should give the second `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `12%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/); +``` + +You should give the second `repeating-linear-gradient` a second color of `--window-color2` from `12%` to `44%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ) +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md new file mode 100644 index 00000000000..3353620a964 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9934.md @@ -0,0 +1,409 @@ +--- +id: 5d822fd413a79914d39e9934 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +Finally! You made it to the last building! Add a repeating gradient to it with a `90deg` direction. Use the building color from `0%` to `10%` and `transparent` from `10%` to `30%`. + +# --hints-- + +You should add a `repeating-linear-gradient` to `.fb6` in the `background` property. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient"); +``` + +You should give the `repeating-linear-gradient` a direction of `90deg`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +You should give the `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); +``` + +You should give the `repeating-linear-gradient` a second color of `transparent` from `10%` to `30%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md new file mode 100644 index 00000000000..803edd0f1b3 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9935.md @@ -0,0 +1,409 @@ +--- +id: 5d822fd413a79914d39e9935 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +Add another repeating gradient to this building; make it the same as the one you just added, except don't add the `90deg` direction and use your window color instead of the two `transparent` colors. + +# --hints-- + +You should give `.fb6` a second `repeating-linear-gradient` in the `background` property. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/); +``` + +You should give the second `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); +``` + +You should give the second `repeating-linear-gradient` a second color of `--window-color3` from `10%` to `30%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ) +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md new file mode 100644 index 00000000000..08b6c4bb23a --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9936.md @@ -0,0 +1,402 @@ +--- +id: 5d822fd413a79914d39e9936 +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Okay, the buildings are done. Go back to the `*` selector and remove the `border` you applied to everything at the beginning and the buildings will come together. + +# --hints-- + +You should remove the `border` from the `*` selector. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} +--fcc-editable-region-- +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md new file mode 100644 index 00000000000..45fc6266b8c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9937.md @@ -0,0 +1,403 @@ +--- +id: 5d822fd413a79914d39e9937 +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Add `sky` as a second class to the `.background-buildings` element. You are going to make a background for the skyline. + +# --hints-- + +You should add a class of `sky` to `.background-buildings`. + +```js +assert.exists(document.querySelector("div.background-buildings.sky")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md new file mode 100644 index 00000000000..b1904ae26a1 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9938.md @@ -0,0 +1,421 @@ +--- +id: 5d822fd413a79914d39e9938 +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ffff66` at `21%`, and `#bbeeff` at `100%`. This will add circular gradient to the background that will be your sun. + +# --hints-- + +You should give `.sky` a `radial-gradient` in the `background` property. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient"); +``` + +You should give the `radial-gradient` a first color of `#ffcf33`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/); +``` + +You should give the `radial-gradient` a second color of `#ffff66` at `21%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/); +``` + +You should give the `radial-gradient` a third color of `#bbeeff` at `100%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md new file mode 100644 index 00000000000..4b8eef84f77 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e9939.md @@ -0,0 +1,410 @@ +--- +id: 5d822fd413a79914d39e9939 +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +At the top of the sky gradient color list, where you would put a direction for the gradient; add `circle closest-corner at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves. + +# --hints-- + +You should give the `.sky` `radial-gradient` a direction of `circle closest-corner at 15% 15%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} +--fcc-editable-region-- +.sky { + background: radial-gradient( + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md new file mode 100644 index 00000000000..575b9b1cfb0 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993a.md @@ -0,0 +1,422 @@ +--- +id: 5d822fd413a79914d39e993a +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +In the previous module you learned that media queries can be used to change styles based on certain conditions, and they look like this: + +```css +@media (condition) { + +} +``` + +Add an empty media query at the bottom of your stylesheet with a condition of `max-width: 1000px`. Styles added in here will take effect when the document size is 1000px wide or less. + +# --hints-- + +You should add an empty media query with `max-width: 1000px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md new file mode 100644 index 00000000000..62f4131ad28 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993b.md @@ -0,0 +1,424 @@ +--- +id: 5d822fd413a79914d39e993b +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night. + +Note: You are going to need to scroll past the editable region to copy the class. + +# --hints-- + +You should not delete the existing `.sky` declaration. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/); +``` + +You should copy the existing `.sky` declaration into the media query. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- +@media (max-width: 1000px) { + +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md new file mode 100644 index 00000000000..5f6abc9450c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993c.md @@ -0,0 +1,437 @@ +--- +id: 5d822fd413a79914d39e993c +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +In the `sky` class of the media query, change the two `#ffcf33` color values to `#ccc`, the `#ffff66` to `#445`, and the `#bbeeff` to `#223`. Then you can resize your window to see the background change colors. + +# --hints-- + +You should change the first color values from `#ffcf33` to `#ccc`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/); +``` + +You should change the second color value from `#ffff66` to `#445`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/); +``` + +You should change the third color value from `#bbeeff` to `#223`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( +closest-corner circle at 15% 15%, +#ffcf33, +#ffcf33 20%, +#ffff66 21%, +#bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( +var(--building-color1) 50%, +var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( +var(--building-color1), +var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( +var(--building-color2), +var(--building-color2) 6%, +var(--window-color2) 6%, +var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( +90deg, +var(--building-color3), +var(--building-color3), +var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( +90deg, +var(--building-color4), +var(--building-color4) 10%, +transparent 10%, +transparent 15% + ), + repeating-linear-gradient( +var(--building-color4), +var(--building-color4) 10%, +var(--window-color4) 10%, +var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( +var(--building-color2), +var(--building-color2) 5%, +transparent 5%, +transparent 10% + ), + repeating-linear-gradient( +90deg, +var(--building-color2), +var(--building-color2) 12%, +var(--window-color2) 12%, +var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( +90deg, +var(--building-color3), +var(--building-color3) 10%, +transparent 10%, +transparent 30% + ), + repeating-linear-gradient( +var(--building-color3), +var(--building-color3) 10%, +var(--window-color3) 10%, +var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% +); + } +--fcc-editable-region-- +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md new file mode 100644 index 00000000000..cc9acd05605 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993d.md @@ -0,0 +1,450 @@ +--- +id: 5d822fd413a79914d39e993d +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +Add a `:root` selector to the top of your media query. Then redefine all four of the `--building-color` variables to use the value `#000` there. + +# --hints-- + +You should add a `:root` selector to the media query. + +```js +assert.notDeepEqual(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root"), undefined); +``` + +You should add `--building-color1` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000"); +``` + +You should add `--building-color2` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000"); +``` + +You should add `--building-color3` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000"); +``` + +You should add `--building-color4` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` + diff --git a/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md new file mode 100644 index 00000000000..534ab2c3a80 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-city-skyline/5d822fd413a79914d39e993e.md @@ -0,0 +1,862 @@ +--- +id: 5d822fd413a79914d39e993e +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night. + +Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great! + +# --hints-- + +You should add `--window-color1` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777"); +``` + +You should add `--window-color2` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777"); +``` + +You should add `--window-color3` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777"); +``` + +You should add `--window-color4` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + :root { + --building-color1: #000; + --building-color2: #000; + --building-color3: #000; + --building-color4: #000; + } +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` + +# --solutions-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { + :root { + --building-color1: #000; + --building-color2: #000; + --building-color3: #000; + --building-color4: #000; + --window-color1: #777; + --window-color2: #777; + --window-color3: #777; + --window-color4: #777; + } + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` diff --git a/curriculum/test/utils/mongo-ids.js b/curriculum/test/utils/mongo-ids.js index ddd008fcee9..2cc6a55aac7 100644 --- a/curriculum/test/utils/mongo-ids.js +++ b/curriculum/test/utils/mongo-ids.js @@ -132,7 +132,121 @@ const duplicatedProjectIds = [ '587d78b0367417b2b2512b05', // City Skyline - + '5d822fd413a79914d39e98cc', + '5d822fd413a79914d39e98cd', + '5d822fd413a79914d39e98ce', + '5d822fd413a79914d39e98cf', + '5d822fd413a79914d39e98d0', + '5d822fd413a79914d39e98d1', + '5d822fd413a79914d39e98d2', + '5d822fd413a79914d39e98d3', + '5d822fd413a79914d39e98d4', + '5d822fd413a79914d39e98d5', + '5d822fd413a79914d39e98d6', + '5d822fd413a79914d39e98d7', + '5d822fd413a79914d39e98d8', + '5d822fd413a79914d39e98d9', + '5d822fd413a79914d39e98da', + '5d822fd413a79914d39e98db', + '5d822fd413a79914d39e98dc', + '5d822fd413a79914d39e98dd', + '5d822fd413a79914d39e98de', + '5d822fd413a79914d39e98df', + '5d822fd413a79914d39e98e0', + '5d822fd413a79914d39e98e1', + '5d822fd413a79914d39e98e2', + '5d822fd413a79914d39e98e3', + '5d822fd413a79914d39e98e4', + '5d822fd413a79914d39e98e5', + '5d822fd413a79914d39e98e6', + '5d822fd413a79914d39e98e7', + '5d822fd413a79914d39e98e8', + '5d822fd413a79914d39e98e9', + '5d822fd413a79914d39e98ea', + '5d822fd413a79914d39e98eb', + '5d822fd413a79914d39e98ec', + '5d822fd413a79914d39e98ed', + '5d822fd413a79914d39e98ee', + '5d822fd413a79914d39e98ef', + '5d822fd413a79914d39e98f0', + '5d822fd413a79914d39e98f1', + '5d822fd413a79914d39e98f2', + '5d822fd413a79914d39e98f3', + '5d822fd413a79914d39e98f4', + '5d822fd413a79914d39e98f5', + '5d822fd413a79914d39e98f6', + '5d822fd413a79914d39e98f7', + '5d822fd413a79914d39e98f8', + '5d822fd413a79914d39e98f9', + '5d822fd413a79914d39e98fa', + '5d822fd413a79914d39e98fb', + '5d822fd413a79914d39e98fc', + '5d822fd413a79914d39e98fd', + '5d822fd413a79914d39e98fe', + '5d822fd413a79914d39e98ff', + '5d822fd413a79914d39e9900', + '5d822fd413a79914d39e9901', + '5d822fd413a79914d39e9902', + '5d822fd413a79914d39e9903', + '5d822fd413a79914d39e9904', + '5d822fd413a79914d39e9905', + '5d822fd413a79914d39e9906', + '5d822fd413a79914d39e9907', + '5d822fd413a79914d39e9908', + '5d822fd413a79914d39e9909', + '5d822fd413a79914d39e990a', + '5d822fd413a79914d39e990b', + '5d822fd413a79914d39e990c', + '5d822fd413a79914d39e990d', + '5d822fd413a79914d39e990e', + '5d822fd413a79914d39e990f', + '5d822fd413a79914d39e9910', + '5d822fd413a79914d39e9911', + '5d822fd413a79914d39e9912', + '5d822fd413a79914d39e9913', + '5d822fd413a79914d39e9914', + '5d822fd413a79914d39e9916', + '5d822fd413a79914d39e9917', + '5d822fd413a79914d39e9918', + '5d822fd413a79914d39e9919', + '5d822fd413a79914d39e991a', + '5d822fd413a79914d39e991b', + '5d822fd413a79914d39e991c', + '5d822fd413a79914d39e991d', + '5d822fd413a79914d39e991e', + '5d822fd413a79914d39e991f', + '5d822fd413a79914d39e9920', + '5d822fd413a79914d39e9921', + '5d822fd413a79914d39e9922', + '5d822fd413a79914d39e9923', + '5d822fd413a79914d39e9924', + '5d822fd413a79914d39e9925', + '5d822fd413a79914d39e9926', + '5d822fd413a79914d39e9927', + '5d822fd413a79914d39e9928', + '5d822fd413a79914d39e9929', + '5d822fd413a79914d39e992a', + '5d822fd413a79914d39e992b', + '5d822fd413a79914d39e992c', + '5d822fd413a79914d39e992d', + '5d822fd413a79914d39e992e', + '5d822fd413a79914d39e992f', + '5d822fd413a79914d39e9930', + '5d822fd413a79914d39e9932', + '5d822fd413a79914d39e9933', + '5d822fd413a79914d39e9915', + '5d822fd413a79914d39e9934', + '5d822fd413a79914d39e9935', + '5d822fd413a79914d39e9931', + '5d822fd413a79914d39e9936', + '5d822fd413a79914d39e9937', + '5d822fd413a79914d39e9938', + '5d822fd413a79914d39e9939', + '5d822fd413a79914d39e993a', + '5d822fd413a79914d39e993b', + '5d822fd413a79914d39e993c', + '5d822fd413a79914d39e993d', + '5d822fd413a79914d39e993e', // Magazine // Product Landing Page