Tell us what’s happening:
.bb3 {
width: 10%;
height: 55%;
background-color: var(–building-color3);
background: repeating-linear-gradient(
90deg,
var(–building-color3),
var(–building-color3) 7.5%,
var(–window-color3) 7.5%,
var(-window-color3) 15%,
);
}
what is wrong in this can u explain me ???
Your code so far
<!-- file: index.html -->
<!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">
<div></div>
<div></div>
<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>
<div class="bb2">
<div class="bb2a"></div>
<div class="bb2b"></div>
</div>
<div class="bb3"></div>
<div></div>
<div class="bb4"></div>
<div></div>
<div></div>
</div>
<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>
</body>
</html>
/* file: styles.css */
: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%
);
}
/* User Editable Region */
.bb3 {
width: 10%;
height: 55%;
background-color: var(--building-color3);
background: repeating-linear-gradient(
90deg,
var(--building-color3),
var(--building-color3) 7.5%,
var(--window-color3) 7.5%,
var(-window-color3) 15%,
);
}
/* User Editable Region */
.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);
}
.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 browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 Edg/127.0.0.0
Challenge Information:
Learn CSS Variables by Building a City Skyline - Step 60
you have a couple of mistakes.
The instructions were:
Fill in .bb3
with a repeating-linear-gradient
.
Use 90deg
for the direction,
your building-color3
for the first two colors,
and window-color3
at 15%
for the third.
so far so good.
Where in there though, does it say there is a 4th color?
Also where does it say that the 2nd color should be set to 7.5%?
(it says window-color3 is the third and should be set to 15%)
2 Likes
if i do the same as per you say then also the error occur, You should give .bb3
a background
using repeating-linear-gradient
.
1 Like
Hello and welcome to the community!
This is a very good try by you.
sanketsuri2950:
background: repeating-linear-gradient(
90deg,
var(--building-color3),
var(--building-color3) 7.5%,
var(--window-color3) 7.5%,
var(-window-color3) 15%,
);
However,
there should not be a second
[quote="sanketsuri2950, post:1, topic:704341"]
var(–window-color3) 7.5%,
[/quote]
there should only be one
and the
[quote="sanketsuri2950, post:1, topic:704341"]
var(-window-color3) 15%,
[/quote]
is missing a dash at the beginning of the color, and should not have a , after the %
Hopefully this will help you.
Keep up the good progress!
Please post your new code if you still need help.
: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) 7.5%,
var(–window-color3)15%,
)
}
.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);
}
.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);
}
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>
) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
sanketsuri2950:
background: repeating-linear-gradient(
90deg,
var(–building-color3),
var(–building-color3) 7.5%,
var(–window-color3)15%,
)
please re-read the step. They do NOT want you to write 7.5%.
There is also an extra comma after the 15%
and a missing semi-colon at the end of the background’s repeating-linear-gradient function call.
Edit: also be careful how you write the var names. They need two dashes at the start
I am writing 2 dash but here it is reflecting single which is not my fault and after removing 7.5% and extra comma and adding semi-colon it showing the same error.
.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%,
);
}
sanketsuri2950:
var(-–window-color3)15%,
you still have an extra comma on this line
still having the same issue with it showing the same error
Try sharing the entire code with us in case there is something else to see. Also I would personally try to reset and redo the step in case something unexpected changed. Redoing the step may just allow you to pass.