gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
f9e35a0e6c64cb95c7c28d2801c1a40fe061d223
freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md
Shaun Hamilton ff20199e63 feat(curriculum): add tests to css variables skyline (#42067) 
* add(tests): parts 1-2

* refactor for multi-file editor, and add temp css tests

* re-re-rebasing

* add link to subsequent challenges

* add test strings to 007-015

* add final tests 001-016

* fix 005-007, add 017-022 tests and test strings

* add: tests 021-030, and formatting

* add: 031-034 tests

* tests: add 035-046

* fix: test in 021

* tests: add 047-050

* format: 009, 051-118 remove css whitespace

* tests: add 051-078

* tests: add 079-105

* tests: add 104-118

* fix: empty -> isEmpty, and include -> match

* fix: correct editable region

* fix: formatting and spelling

* fix: test logic, and add TODO for whitespace

* fix: add final part solution 🤦‍♂️

* fix typo in part-006

* remove whitespace in prep

* getStyleDeclaration -> getStyle

* remove editable region from solution 🤦‍♂️

* fix: correct tests to fail on initial

* fix: add missing regex

Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>

* fix: correct tests

* remove commas and stuff 🤷‍♂️

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* uppercaserise doctype

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* add "the"

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* remove half-colon

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* use more boring form of the word "shoudl"

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* add suggestions to tests

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-015.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-022.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-093.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-098.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-101.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-023.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-024.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-026.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-035.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-076.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-070.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-079.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-085.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-086.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-087.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-074.md

* Update curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-078.md

* fix: the few commits I couldn't add on github

* fix: lesson 41

Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
2021-07-15 22:46:40 -05:00

4.2 KiB
Raw Blame History

id, title, challengeType, dashedName
id title challengeType dashedName
5d822fd413a79914d39e9902 Part 58 0 part-58

--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.

assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh");

You should change border-bottom to use --building-color2.

assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)");

border-bottom should be 5vh solid var(--building-color2).

assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)");

--seed--

--seed-contents--

<!DOCTYPE html>
<html>    
  <head>
    <title>freeCodeCamp Skyline Project</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />   
  </head>

  <body>
    <div class="background-buildings">
      <div></div>
      <div></div>
      <div class="bb1">
        <div class="bb1a bb1-window"></div>
        <div class="bb1b bb1-window"></div>
        <div class="bb1c bb1-window"></div>
        <div class="bb1d"></div>
      </div>
      <div class="bb2">
        <div class="bb2a"></div>
        <div class="bb2b"></div>
      </div>
      <div class="bb3"></div>
      <div></div>
      <div class="bb4"></div>
      <div></div>
      <div></div>
    </div>

    <div class="foreground-buildings">
      <div></div>
      <div></div>
      <div class="fb1"></div>
      <div class="fb2"></div>
      <div></div>
      <div class="fb3"></div>
      <div class="fb4"></div>
      <div class="fb5"></div>
      <div class="fb6"></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

: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);
}