Learn CSS Variables by Building a City Skyline - Step 23

Tell us what’s happening:
I am not understanding the request for a fall back color. I searched Google but can’t find any clear answers. How are we supposed to code a fallback- color?

Your code so far

<!-- file: index.html -->
<!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></div>
      <div></div>
      <div class="bb1">
        <div class="bb1a"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>
      <div class="bb2"></div>
      <div class="bb3"></div>
      <div></div>
      <div class="bb4"></div>
      <div></div>
      <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%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
}

.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  --building-color1: #aa80ff;
  --building-color2: #66cc99;
  --fallback-value: green;

}

.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);
  fallback-color: var(--fallback-value);

}
.bb3 {
  width: 10%;
  height: 55%;
}

.bb4 {
  width: 11%;
  height: 58%;
}
    

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Learn CSS Variables by Building a City Skyline - Step 23

Link to the challenge:

fallback-color is not a thing nor is --fallback-value. Remove fallback-color. Add a comma next to --building-color2 and write green because they are telling you that green is the fallback value.
It should look like this:

Mod edit: solution removed

Thanks for helping out and answering questions on the forum.
Please be aware of our policy to not post solutions in response to request for help with fCC challenges.
We appreciate your understanding.

Thank you for that, I was overthinking it again and didn’t think it would be that simple. Your the best.

1 Like

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