Learn CSS Variables by Building a City Skyline - Step 78

Tell us what’s happening:

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

  • {
    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;
}

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

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

/* 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%;
}

.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%
);
background: repeating-linear-gradient(
90deg,
var(–building-color4),
var(–building-color4)10%,
var(–window-color4)10%,
var(–window-color4)90%
);
}
.fb2 {
width: 10%;
height: 40%;
background-color: var(–building-color3);
}

.fb3 {
width: 10%;
height: 35%;
background-color: var(–building-color1);
}

.fb4 {
width: 8%;
height: 45%;
background-color: var(–building-color1);
position: relative;
left: 10%;
}

.fb5 {
width: 10%;
height: 33%;
background-color: var(–building-color2);
position: relative;
right: 10%;
}

.fb6 {
width: 9%;
height: 38%;
background-color: var(–building-color3);
}

Your code so far

Your browser information:

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

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 78

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!