Step 33 Learn CSS Variables by Building a City Skyline

You should optimize your code. Move the position and top properties and values from .foreground-buildings to .background-buildings. Then select both .background-buildings and .foreground-buildings there, effectively applying those styles to both of the elements. You can use a comma (,) to separate selectors like this: selector1, selector2.

.background-buildings, foreground-buildings
{
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  position:absolute;

}

.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.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);
}

.bb2 {
  width: 10%;
  height: 50%;
  background-color: var(--building-color2);
}

.bb3 {
  width: 10%;
  height: 55%;
  background-color: var(--building-color3);
}

.bb4 {
  width: 11%;
  height: 58%;
  background-color: var(--building-color4);
}

 .foreground-buildings{ 
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  
 }
.fb1 {
  width: 10%;
  height: 60%;
}

.fb2 {
  width: 10%;
  height: 40%;
}

.fb3 {
  width: 10%;
  height: 35%;
}

.fb4 {
  width: 8%;
  height: 45%;
}

.fb5 {
  width: 10%;
  height: 33%;
}

.fb6 {
  width: 9%;
  height: 38%;
}
    

Good afternoon Y 'all,

I would like to know what am I doing wrong with the coding :thinking:?
because I get this feedback

Hint

You should add the position property of absolute to .background-buildings, foreground-buildings.

Thank you for your help.

Jackie

@Zjade you forget to add period(.) before the class name ā€œforeground-buildingsā€

1 Like

Thankā€™s so much for your feedback :+1: :+1:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.