freeCodeCamp/part-011.md at 06da30e48acfdf57610152d1d95bd49837dee896

Files

Randell Dawson b9c9a95223 chore(learn): Renamed all project-based curriculum project step filenames to use 3-digit format of part-ddd.md (#39463 )

* fix: renamed basic html cat photo app steps

* fix: renamed css-variables project steps

* fix: renamed d3-dashboard filenames

* fix: renamed rpg-game filenames

* fix: renamed functional-progamming-spreadsheet filenames

* fix: renamed calorie-counter project filenames

2020-09-16 11:54:12 +05:30

2.0 KiB

Raw Blame History

id, title, challengeType, isHidden

id	title	challengeType	isHidden
5d822fd413a79914d39e98d3	Part 11	0	true

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.

Instructions

Tests

tests:
  - text: test-text
    testString: const bb1 = $(".bb1")[0]; assert(bb1.contains($("div.bb1a")[0]) && bb1.contains($("div.bb1b")[0]) && bb1.contains($("div.bb1c")[0]) && bb1.contains($("div.bb1d")[0]));

Challenge Seed

<!DOCTYPE html>
<html>    
  <head>
    <title>freeCodeCamp Skyline Project</title>
    <style>
      * {
        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%;
      }
    </style>
  </head>

  <body>
    <div class="background-buildings">
      <div class="bb1"></div>
    </div>
  </body>
</html>

Solution

<!DOCTYPE html>
<html>    
  <head>
    <title>freeCodeCamp Skyline Project</title>
    <style>
      * {
        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%;
      }
    </style>
  </head>

  <body>
    <div class="background-buildings">
      <div class="bb1">
        <div class="bb1a"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>
    </div>
  </body>
</html>

2.0 KiB Raw Blame History