Welcome to CSS Variables Skyline project with FreeCodeCamp

Step 1

<!DOCTYPE html></html>

Step 2

<html lang="en"></html>

Step 3

<html lang="en">

  <head></head>

  <body></body>

</html>

Step 4

<head>

    <meta charset="UTF-8"></meta>

    <title>City Skyline</title>

    <link rel="stylesheet" href="styles.css">

    

  </head>

Step 5

*{

  border:1px solid black;

}

Step 6

* {

  border: 1px solid black;

  box-sizing:border-box;

}

Step 7

body {

  height:100vh;

  margin:0;

  overflow:hidden;

}

Step 8

<body>

<div class="background-buildings"></div>

  </body>

Step 9

.background-buildings {

width:100%;

height:100%;

}

Step 10

<div class="background-buildings"></div>

    <div class="bb1">

      </div>

.bb1{

width:10%;

height:70%;

    }

Step 11

<div class="bb1">

      <div class="bb1a"></div>

      <div class="bb1b"></div>

      <div class="bb1c"></div>

      <div class="bb1d"></div>

      </div>

Step 12

FOR CSS

.bb1 {

  width: 10%;

  height: 70%;

}


.bb1a {  width: 70%;  height: 10%;}
.bb1b{  width: 80%;  height: 10%;}
.bb1c{width: 90%;height: 10%;  }
.bb1d{width: 100%;height: 70%;}

Step 13

.bb1 {

  width: 10%;

  height: 70%;

  display:flex;

  flex-direction:column;

  align-items:center;

}

Step 14

.bb1 {

  width: 10%;

  height: 70%;

  display: flex;

  flex-direction: column;

  align-items: center;

  --building-color1:#999;

}

Step 15

.bb1a {

  width: 70%;

  height: 10%;

  background-color:var(--building-color1);

}

Step 16

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

Step 17

--building-color1: #aa80ff

Step 18

<div class="bb2"></div>

<div class="bb3"></div>

<div class="bb4"></div>

Step 19

.bb2 {

  width:10%;

  height:50%;

}

.bb3 {

  width:10%;

  height:55%;

}

.bb4 {

  width:11%;

  height:58%;

}

Step 20

.background-buildings {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: flex-end;

  justify-content: space-evenly;

}

Step 21

<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>

Step 22

.bb1 {

  width: 10%;

  height: 70%;

  display: flex;

  flex-direction: column;

  align-items: center;

  --building-color1: #aa80ff;

  --building-color2:#66cc99;

}


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

Step 23

.bb2 {

  width: 10%;

  height: 50%;

  background-color: var(--building-color2, green);

}

Step 24

.bb1 {

  width: 10%;

  height: 70%;

  display: flex;

  flex-direction: column;

  align-items: center;

  --building-color1: #aa80ff;

  --building-color2: #66cc99;

  --building-color3:#cc6699;


}
.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, green);}
.bb3 {  width: 10%;  height: 55%;  background-color:var(--building-color3, pink);
}

Step 25

:root{

--building-color1: #aa80ff;

  --building-color2: #66cc99;

  --building-color3: #cc6699;

}

* {

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

Step 26

.bb2 {

  width: 10%;

  height: 50%;

  background-color: var(--building-color2);

}


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

Step 27

:root {

  --building-color1: #aa80ff;

  --building-color2: #66cc99;

  --building-color3: #cc6699;

  --building-color4:#538cc6;

}


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

Step 28

<div class="foreground-buildings"></div>

Step 29

.foreground-buildings{

width:100%;

height:100%;

position:absolute;

top:0;

}

Step 30

<div class="foreground-buildings">

    <div class="fb1"></div>

    <div class="fb2"></div>

    <div class="fb3"></div>

    <div class="fb4"></div>

    <div class="fb5"></div>

    <div class="fb6"></div>

    </div>

Step 31

.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%;

}

Step 32

.foreground-buildings {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  display: flex;

  align-items: flex-end;

  justify-content: space-evenly;

}

Step 33

.background-buildings, .foreground-buildings {

  position:absolute;

  top: 0;

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

Step 34

delete all of its properties

Step 35

.fb1 {

  width: 10%;

  height: 60%;

  background-color:var(--building-color4);

}


.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);}
.fb5 {  width: 10%;  height: 33%;  background-color:var(--building-color2);}
.fb6 {  width: 9%;  height: 38%;  background-color:var(--building-color3);}

Step 36

<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>

Step 37

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

Step 38

/ BACKGROUND BUILDINGS - "bb" stands for "background building" /


.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 - "fb" stands for "foreground building" /.fb1 {  width: 10%;  height: 60%;  background-color: var(--building-color4);}

Step 39

:root {

  --building-color1: #aa80ff;

  --building-color2: #66cc99;

  --building-color3: #cc6699;

  --building-color4: #538cc6;

  --window-color1:black;

}

Step 40

.bb1a {

  width: 70%;

  height: 10%;

  background-color: var(--building-color1);

  background: linear-gradient(var(--building-color1), var(--window-color1));

}

Step 41

.bb1a {

  width: 70%;

  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);}
.bb1-window{  height: 10%;  background: linear-gradient(      var(--building-color1),      var(--window-color1)    );}

Step 42

 <div class="bb1">

        <div class="bb1a bb1-window "></div>

        <div class="bb1b bb1-window"></div>

        <div class="bb1c bb1-window"></div>

        <div class="bb1d"></div>

      </div>

Step 43

.bb1a {

  width: 70%;

}


.bb1b {  width: 80%;}  
.bb1c {  width: 90%;}

Step 44

.bb1d {

  width: 100%;

  height: 70%;

  background-color: var(--building-color1);

  background:linear-gradient(orange, var(--building-color1), var(--window-color1));


}

Step 45

.bb1d {

  width: 100%;

  height: 70%;

  background: linear-gradient(

      orange,

      var(--building-color1),

      var(--window-color1)

    );

}

Step 46

.bb1d {

  width: 100%;

  height: 70%;

  background: linear-gradient(

      orange,

      var(--building-color1) 80%,

      var(--window-color1)

    );

}

Step 47

.bb1d {

  width: 100%;

  height: 70%;

  background: linear-gradient(

      var(--building-color1) 50%,

      var(--window-color1)

    );

}

Step 48

.<div class="bb2">

      <div class="bb2a"></div>

      <div class="bb2b"></div>

      </div>

Step 49

.bb2b {

  width:100%;

  height:100%;

}

Step 50

:root {

  --building-color1: #aa80ff;

  --building-color2: #66cc99;

  --building-color3: #cc6699;

  --building-color4: #538cc6;

  --window-color1: black;

   --window-color2:#8cd9b3;

}

Step 51

.bb2b {

  width: 100%;

  height: 100%;

  background: linear-gradient(var(--building-color2), var(--building-color2) 6%, var(--window-color2) 6%, var(--window-color2) 9%)

}

Step 52

.bb2b {

  width: 100%;

  height: 100%;

  background: repeating-linear-gradient(

      var(--building-color2),

      var(--building-color2) 6%,

      var(--window-color2) 6%,

      var(--window-color2) 9%

    );

}

Step 53

.bb2 {

  width: 10%;

  height: 50%;

}

Step 54

.bb2a {

  margin: auto;

width: 5vw;

height: 5vw;

border-top: 1vw solid #000;

border-bottom: 1vw solid #000;

border-left: 1vw solid #999;

border-right: 1vw solid #999;

}

Step 55

.bb2a {

  margin: auto;

  border-top: 1vw solid #000;

  border-bottom: 1vw solid #000;

  border-left: 5vw solid #999;

  border-right: 5vw solid #999;

}

Step 56

.bb2a {

  margin: auto;

  border-top: 1vw solid #000;

  border-bottom: 1vw solid #000;

  border-left: 5vw solid transparent;

  border-right: 5vw solid transparent;

}

Step 57

.bb2a {

  border-bottom: 1vw solid #000;

  border-left: 5vw solid transparent;

  border-right: 5vw solid transparent;

}

Step 58

.bb2a {

  border-bottom: 5vh solid var(--building-color2);

  border-left: 5vw solid transparent;

  border-right: 5vw solid transparent;

}

Step 59

:root {

  --building-color1: #aa80ff;

  --building-color2: #66cc99;

  --building-color3: #cc6699;

  --building-color4: #538cc6;

  --window-color1: black;

  --window-color2: #8cd9b3;

  --window-color3:#d98cb3;

}

Step 60

bb3 {

  width: 10%;

  height: 55%;

  background-color: var(--building-color3);

  background: repeating-linear-gradient(90 deg, var(--building-color3), var(--building-color3), var(--window-color3) 15%)

}

Step 61

.bb3 {

  width: 10%;

  height: 55%;

  background: repeating-linear-gradient(

      90deg,

      var(--building-color3),

      var(--building-color3),

      var(--window-color3) 15%

    );

}

Step 62

<div class="bb4">

      <div class="bb4a"></div>

      <div class="bb4b"></div>

      <div class="bb4c"></div>

      </div>

Step 63

.bb4b {

  width:80%;

  height:5%;

}


.bb4a {  width:3%;  height:10%; }
.bb4b{  width:80%;  height:5%;}
.bb4c{  width:100%;  height:85%; }

Step 64

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

Step 65

.building-wrap{}

Step 66

.building-wrap {

  display: flex;

  flex-direction: column;

  align-items: center;

}


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

Step 67

<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">

Step 68

: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;

}

Step 69

<div class="bb4c">

          <div class="bb4-window"></div>

           <div class="bb4-window"></div>

            <div class="bb4-window"></div>

             <div class="bb4-window"></div>

        </div>

Step 70

.bb4-window{

  width:18%;

  height:90%;

  background-color:var(--window-color4);

}

Step 71

.window-wrap {

  display: flex;

  align-items: center;

  justify-content: space-evenly;

}

Step 72

<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>

Step 73

 <div class="fb1">

        <div class="fb1a"></div>

        <div class="fb1b"></div>

        <div class="fb1c"></div>

      </div>

Step 74

.fb1b {

  width:60%;

  height:10%;

}


.fb1c {  width:100%;  height:80%;}

Step 75

<div class="fb1 building-wrap">

        <div class="fb1a"></div>

        <div class="fb1b"></div>

        <div class="fb1c"></div>

      </div>

Step 76

.fb1 {

  width: 10%;

  height: 60%;

}


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

Step 77

.fb1c {

  width: 100%;

  height: 80%;

  background:repeating-linear-gradient(90deg, var(--building-color4), var (--building-color4) 10%, transparent 10%, transparent 15%);

}

Step 78

.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%,

    )

}

Step 79

.fb1a {

  border-bottom:7vh solid var(--building-color4);

}

Step 80

.fb1a {

  border-bottom: 7vh solid var(--building-color4);

  border-left:2vw solid transparent;

  border-right:2vw solid transparent;

}

Step 81

<div class="fb2">

        <div class="fb2a"></div>

        <div class="fb2b"></div>

      </div>

Step 82

.fb2a {

  width:100%;

}


.fb2b {  width:100%;  height:75%;
}

Step 83

<div class="fb2b">

          <div class="fb2-window"></div>

          <div class="fb2-window"></div>

          <div class="fb2-window"></div>

        </div>

Step 84

 <div class="fb2b window-wrap">

          <div class="fb2-window"></div>

          <div class="fb2-window"></div>

          <div class="fb2-window"></div>

        </div>

Step 85

.fb2-window{

  width:22%;

  height:100%;

  background-color:var(--window-color3);

}

Step 86

.fb2 {

  width: 10%;

  height: 40%;

}


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

Step 87

.fb2a {

  width: 100%;

  border-bottom:10vh solid var(--building-color3);

  border-left:1vw solid transparent;

  border-right:1vw solid transparent;


}

Step 88

<div class="fb3">

        <div class="fb3a"></div>

        <div class="fb3b"></div>

        <div class="fb3a"></div>

        <div class="fb3b"></div>

      </div>

Step 89

.fb3a{

  width:80%;

  height:15%;

}


.fb3b{  width:100%;  height:35%;
}

Step 90

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

Step 91

  <div class="fb3 building-wrap">

        <div class="fb3a"></div>

        <div class="fb3b"></div>

        <div class="fb3a"></div>

        <div class="fb3b"></div>

      </div>

Step 92

<div class="fb3a">

        <div class="fb3-window"></div>

        <div class="fb3-window"></div>

        <div class="fb3-window"></div>

        </div>

Step 93

.fb3-window {

  width:25%;

  height:80%;

  background-color:var(--window-color1);

}

Step 94

<div class="fb3a window-wrap">

          <div class="fb3-window"></div>

          <div class="fb3-window"></div>

          <div class="fb3-window"></div>

        </div>

Step 95

: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;

}

Step 96

<div class="fb4">

      <div class="fb4a"></div>

      <div class="fb4b"></div>

      </div>

Step 97

.fb4b {

  width:100%;

  height:89%;

}

Step 98

.fb4 {

  width: 8%;

  height: 45%;

  position: relative;

  left: 10%;

}


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

Step 99

<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>

Step 100

.fb4-window {

  width:30%;

  height:10%;

  border-radius:50%;

}

Step 101

.fb4-window {

  width: 30%;

  height: 10%;

  border-radius: 50%;

  margin:10%;

  background-color:var(--window-color1);

}

Step 102

.fb4b {

  width: 100%;

  height: 89%;

  background-color: var(--building-color1);

  display: flex;

  flex-wrap: wrap;

}

Step 103

.fb4a {

border-top: 5vh solid transparent;

border-left: 8vw solid var(--building-color1);

}

Step 104

.fb5 {

  width: 10%;

  height: 33%;

  background-color: var(--building-color2);

  position: relative;

  right: 10%;

  background:repeating-linear-gradient (

    var(--building-color2),

    var(--building-color2) 5%,

    transparent 5%,

    transparent 10%

  

  )

}

Step 105

.fb5 {

  width: 10%;

  height: 33%;

  background-color: var(--building-color2);

  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%

   )

}

Step 106

.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%

    );

}

Step 107

.fb6 {

  width: 9%;

  height: 38%;

  background-color: var(--building-color3);

  background: repeating-linear-gradient(

    90deg,

      var(--building-color3),

      var(--building-color3) 10%,

      transparent 10%,

      transparent 30%

  )

}

Step 108

.fb6 {

  width: 9%;

  height: 38%;

  background-color: var(--building-color3);

  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%  )}

Step 109

.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%

    );

}

Step 110

* {

  box-sizing: border-box;

}

Step 111

<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>

        <d