ContextQMD
Back to Freecodecamp

Step 11

curriculum/challenges/english/blocks/workshop-cat-painting/6476fc5cf14b276e6d04e82a.md

latest2.0 KB
Original Source

--description--

Use a class selector to give your .box element a width of 200px, a height of 600px, and a background color of #000. Also, give it a position of absolute, a top of 800px and a left of 650px.

--hints--

You should have a .box selector.

js
assert.exists(new __helpers.CSSHelp(document)?.getStyle('.box'));

Your .box selector should have a width property set to 200px.

js
assert.equal(new __helpers.CSSHelp(document)?.getStyle('.box')?.width, '200px');

Your .box selector should have a height property set to 600px.

js
assert.equal(new __helpers.CSSHelp(document)?.getStyle('.box')?.height, '600px');

Your .box selector should have a background-color property set to #000.

js
assert.equal(new __helpers.CSSHelp(document)?.getStyle('.box')?.backgroundColor, 'rgb(0, 0, 0)');

Your .box selector should have a position property set to absolute.

js
assert.equal(new __helpers.CSSHelp(document)?.getStyle('.box')?.position, 'absolute');

Your .box selector should have a left property set to 650px.

js
assert.equal(new __helpers.CSSHelp(document)?.getStyle('.box')?.left, '650px');

Your .box selector should have a top property set to 800px.

js
assert.equal(new __helpers.CSSHelp(document)?.getStyle('.box')?.top, '800px');

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fCC Cat Painting</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <main>
      <div class="cat-head"></div>
      <div class="box"></div>
    </main>
</body>
</html>
css
* {
  box-sizing: border-box;
}

body {
  background-color: #c9d2fc;
}

.cat-head {
  position: relative;
  top: 100px;
  left: 100px;
  background: linear-gradient(#5e5e5e 85%, #45454f 100%);
  width: 205px;
  height: 180px;
  border: 1px solid #000;
  border-radius: 46%;
}

--fcc-editable-region--

--fcc-editable-region--