1.8 KiB
1.8 KiB
id | title | challengeType | dashedName |
---|---|---|---|
5d822fd413a79914d39e98d9 | Part 17 | 0 | part-17 |
--description--
I don't really like that color. 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
.
assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff');
--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 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%;
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);
}