Tell us what’s happening:
This is only the second challenge that even includes these variables and I cannot seem to figure out what I am doing wrong… The assignment tells me to place this var in .bb1a, yet my code does not pass.
Assignment is:
To use a variable, put the variable name in parentheses with var in front of them like this: var(--variable-name). Add your variable as the value of the background-color property of the .bb1a class. Whatever value you gave the variable will be applied to whatever property you use it on. In this case, your variable has the value of #999. So #999 will be used as the value for the background-color property.
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
<head>
<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>
/* file: styles.css */
* {
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;
--building-color1: #999;
}
.bb1a {
width: 70%;
height: 10%;
var(--building-color1): #999;
}
.bb1b {
width: 80%;
height: 10%;
}
.bb1c {
width: 90%;
height: 10%;
}
.bb1d {
width: 100%;
height: 70%;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:101.0) Gecko/20100101 Firefox/101.0
Challenge: Step 15
Link to the challenge: