Learn CSS Variables by Building a City Skyline - Step 112

HTML-CSS
1

css codecamp
css codecamp566Ă—609 26.5 KB

Hi guys, in the step 112, when i call the class sky, it isnt recognizing as a class.
Im literally putting .sky {
}
AND IT DOSNT CALL, it stays white like the class sky dosnt exist!!

**:root {
--building-color1: #aa80ff;
--building-color2: #66cc99;
--building-color3: #cc6699;
--building-color4: #538cc6;
--window-color1: #bb99ff;
--window-color2: #8cd9b3;
--window-color3: #d98cb3;
--window-color4: #8cb3d9;
}

* {
box-sizing: border-box;
}

body {
height: 100vh;
margin: 0;
overflow: hidden;
}

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

.building-wrap {
display: flex;
flex-direction: column;
align-items: center;
}

.window-wrap {
display: flex;
align-items: center;
justify-content: space-evenly;

.sky { **THIS**



}
/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
.bb1 {
width: 10%;
height: 70%;
}

.bb1a {
width: 70%;
}

.bb1b {
width: 80%;
}

.bb1c {
width: 90%;
}

.bb1d {
width: 100%;
height: 70%;
background: linear-gradient(
   var(--building-color1) 50%,
   var(--window-color1)
 );
}

.bb1-window {
height: 10%;
background: linear-gradient(
   var(--building-color1),
   var(--window-color1)
 );
}

.bb2 {
width: 10%;
height: 50%;
}

.bb2a {
border-bottom: 5vh solid var(--building-color2);
border-left: 5vw solid transparent;
border-right: 5vw solid transparent;
}

.bb2b {
width: 100%;
height: 100%;
background: repeating-linear-gradient(
   var(--building-color2),
   var(--building-color2) 6%,
   var(--window-color2) 6%,
   var(--window-color2) 9%
 );
}

.bb3 {
width: 10%;
height: 55%;
background: repeating-linear-gradient(
   90deg,
   var(--building-color3),
   var(--building-color3),
   var(--window-color3) 15%
 );
}

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

.bb4a {
width: 3%;
height: 10%;
background-color: var(--building-color4);
}

.bb4b {
width: 80%;
height: 5%;
background-color: var(--building-color4);
}

.bb4c {
width: 100%;
height: 85%;
background-color: var(--building-color4);
}

.bb4-window {
width: 18%;
height: 90%;
background-color: var(--window-color4);
}

/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
.fb1 {
width: 10%;
height: 60%;
}

.fb1a {
border-bottom: 7vh solid var(--building-color4);
border-left: 2vw solid transparent;
border-right: 2vw solid transparent;
}

.fb1b {
width: 60%;
height: 10%;
background-color: var(--building-color4);
}

.fb1c {
width: 100%;
height: 80%;
background: repeating-linear-gradient(
   90deg,
   var(--building-color4),
   var(--building-color4) 10%,
   transparent 10%,
   transparent 15%
 ),
 repeating-linear-gradient(
   var(--building-color4),
   var(--building-color4) 10%,
   var(--window-color4) 10%,
   var(--window-color4) 90%
 );
}

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

.fb2a {
width: 100%;
border-bottom: 10vh solid var(--building-color3);
border-left: 1vw solid transparent;
border-right: 1vw solid transparent;
}

.fb2b {
width: 100%;
height: 75%;
background-color: var(--building-color3);
}

.fb2-window {
width: 22%;
height: 100%;
background-color: var(--window-color3);
}

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

.fb3a {
width: 80%;
height: 15%;
background-color: var(--building-color1);
}

.fb3b {
width: 100%;
height: 35%;
background-color: var(--building-color1);
}

.fb3-window {
width: 25%;
height: 80%;
background-color: var(--window-color1);
}

.fb4 {
width: 8%;
height: 45%;
position: relative;
left: 10%;
}

.fb4a {
border-top: 5vh solid transparent;
border-left: 8vw solid var(--building-color1);
}

.fb4b {
width: 100%;
height: 89%;
background-color: var(--building-color1);
display: flex;
flex-wrap: wrap;
}

.fb4-window {
width: 30%;
height: 10%;
border-radius: 50%;
background-color: var(--window-color1);
margin: 10%;
}

.fb5 {
width: 10%;
height: 33%;
position: relative;
right: 10%;
background: repeating-linear-gradient(
   var(--building-color2),
   var(--building-color2) 5%,
   transparent 5%,
   transparent 10%
 ),
 repeating-linear-gradient(
   90deg,
   var(--building-color2),
   var(--building-color2) 12%,
   var(--window-color2) 12%,
   var(--window-color2) 44%
 );
}

.fb6 {
width: 9%;
height: 38%;
background: repeating-linear-gradient(
   90deg,
   var(--building-color3),
   var(--building-color3) 10%,
   transparent 10%,
   transparent 30%
 ),
 repeating-linear-gradient(
   var(--building-color3),
   var(--building-color3) 10%,
   var(--window-color3) 10%,
   var(--window-color3) 30%
 );
}```






```text
<!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 sky">
   <div></div>
   <div></div>
   <div class="bb1 building-wrap">
     <div class="bb1a bb1-window"></div>
     <div class="bb1b bb1-window"></div>
     <div class="bb1c bb1-window"></div>
     <div class="bb1d"></div>
   </div>
   <div class="bb2">
     <div class="bb2a"></div>
     <div class="bb2b"></div>
   </div>
   <div class="bb3"></div>
   <div></div>
   <div class="bb4 building-wrap">
     <div class="bb4a"></div>
     <div class="bb4b"></div>
     <div class="bb4c window-wrap">
       <div class="bb4-window"></div>
       <div class="bb4-window"></div>
       <div class="bb4-window"></div>
       <div class="bb4-window"></div>
     </div>
   </div>
   <div></div>
   <div></div>
 </div>

 <div class="foreground-buildings">
   <div></div>
   <div></div>
   <div class="fb1 building-wrap">
     <div class="fb1a"></div>
     <div class="fb1b"></div>
     <div class="fb1c"></div>
   </div>
   <div class="fb2">
     <div class="fb2a"></div>
     <div class="fb2b window-wrap">
       <div class="fb2-window"></div>
       <div class="fb2-window"></div>
       <div class="fb2-window"></div>
     </div>
   </div>
   <div></div>
   <div class="fb3 building-wrap">
     <div class="fb3a window-wrap">
       <div class="fb3-window"></div>
       <div class="fb3-window"></div>
       <div class="fb3-window"></div>
     </div>
     <div class="fb3b"></div>
     <div class="fb3a"></div>
     <div class="fb3b"></div>
   </div>
   <div class="fb4">
     <div class="fb4a"></div>
     <div class="fb4b">
       <div class="fb4-window"></div>
       <div class="fb4-window"></div>
       <div class="fb4-window"></div>
       <div class="fb4-window"></div>
       <div class="fb4-window"></div>
       <div class="fb4-window"></div>
     </div>
   </div>
   <div class="fb5"></div>
   <div class="fb6"></div>
   <div></div>
   <div></div>
 </div>
</body>
</html>

Im using brave.

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

Link to the challenge:

2 
.sky {

}

This is an empty ruleset, so it doesn’t do anything and doesn’t have any effect on your page. You’ll need to put some property/values inside of it, specifically the ones the instructions are asking you to add.

Also, it looks like you may have deleted the closing curly brace on the .window-wrap ruleset above.

1 Like
3

Hey! If you look closely here, the problem isn’t with the class itself. but it looks like you forgot to close the previous ruleset which is causing the .sky ruleset to not be recognised.

4

ongod, i love you!!!

1 Like
5

thanks for your time helping me!

6

this code will word

[Mod edit: Solution removed]

7

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.