CSS Variables by Building a City Skyline Step 60

HTML-CSS
1
City Skyline 
<div class="foreground-buildings">
  <div></div>
  <div></div>
  <div class="fb1"></div>
  <div class="fb2"></div>
  <div></div>
  <div class="fb3"></div>
  <div class="fb4"></div>
  <div class="fb5"></div>
  <div class="fb6"></div>
  <div></div>
  <div></div>
</div>

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

  • {
    border: 1px solid black;
    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;
}

/* BACKGROUND BUILDINGS - “bb” stands for “background building” */
.bb1 {
width: 10%;
height: 70%;
display: flex;
flex-direction: column;
align-items: center;
}

.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-color: var(–building-color3);
background: repeating-linear-gradient(
90deg,
(var–building-color3),
(var–building-color3),
(var–window-color3)15%
);
}

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

Thanks for the attention, but I figured out that I had to switch to incognito mode for this code to go through.