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