freeCodeCamp/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-variables-by-buil.../5d822fd413a79914d39e98d4.md

2.9 KiB

id title challengeType dashedName
5d822fd413a79914d39e98d4 Step 12 0 step-12

--description--

Dai alle parti dell'edificio delle proprietà width e height con i seguenti valori: 70% e 10% a .bb1a, 80% e 10% a .bb1b, 90% e 10% a .bb1c e 100% e 70% a .bb1d. Ricorda che queste percentuali sono relative all'elemento genitore e nota che le altezze si sommeranno fino al 100% - riempendo verticalmente il genitore.

--hints--

Dovresti usare un selettore di classe per lo stile di .bb1a.

assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a'));

Dovresti dare a .bb1a una proprietà width del 70%.

assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%');

Dovresti dare .bb1a una proprietà height del 10%.

assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%');

Dovresti usare un selettore di classe per lo stile di .bb1b.

assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b'));

Dovresti dare a .bb1b una proprietà width dell'80%.

assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%');

Dovresti dare .bb1b una proprietà height del 10%.

assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%');

Dovresti usare un selettore di classe per lo stile di .bb1c.

assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c'));

Dovresti dare a .bb1c una proprietà width del 90%.

assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%');

Dovresti dare .bb1c una proprietà height del 10%.

assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%');

Dovresti usare un selettore di classe per lo stile di .bb1d.

assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d'));

Dovresti dare a .bb1d una proprietà width del 100%.

assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%');

Dovresti dare .bb1d una proprietà height del 70%.

assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%');

--seed--

--seed-contents--

<!DOCTYPE html>
<html lang="en">    
  <head>
    <meta charset="UTF-8">
    <title>City Skyline</title>
    <link href="styles.css" rel="stylesheet" />   
  </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>
* {
  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--