Cascading CSS variables

HTML-CSS
1

Tell us what’s happening:

hello, I need help please, I do not understand where I am wrong in the shift of the variable

Your code so far


<style>
	:root {
    var (--penguin-belly: pink)

		/* add code below */
		/* add code above */
	}

	body {
		background: var(--penguin-belly, #c6faf1);
	}

	.penguin {
		--penguin-skin: gray;
		--penguin-beak: orange;
		position: relative;
		margin: auto;
		display: block;
		margin-top: 5%;
		width: 300px;
		height: 300px;
	}

	.right-cheek {
		top: 15%;
		left: 35%;
		background: var(--penguin-belly, white);
		width: 60%;
		height: 70%;
		border-radius: 70% 70% 60% 60%;
	}

	.left-cheek {
		top: 15%;
		left: 5%;
		background: var(--penguin-belly, white);
		width: 60%;
		height: 70%;
		border-radius: 70% 70% 60% 60%;
	}

	.belly {
		top: 60%;
		left: 2.5%;
		background: var(--penguin-belly, white);
		width: 95%;
		height: 100%;
		border-radius: 120% 120% 100% 100%;
	}

	.penguin-top {
		top: 10%;
		left: 25%;
		background: var(--penguin-skin, gray);
		width: 50%;
		height: 45%;
		border-radius: 70% 70% 60% 60%;
	}

	.penguin-bottom {
		top: 40%;
		left: 23.5%;
		background: var(--penguin-skin, gray);
		width: 53%;
		height: 45%;
		border-radius: 70% 70% 100% 100%;
	}

	.right-hand {
		top: 0%;
		left: -5%;
		background: var(--penguin-skin, gray);
		width: 30%;
		height: 60%;
		border-radius: 30% 30% 120% 30%;
		transform: rotate(45deg);
		z-index: -1;
	}

	.left-hand {
		top: 0%;
		left: 75%;
		background: var(--penguin-skin, gray);
		width: 30%;
		height: 60%;
		border-radius: 30% 30% 30% 120%;
		transform: rotate(-45deg);
		z-index: -1;
	}

	.right-feet {
		top: 85%;
		left: 60%;
		background: var(--penguin-beak, orange);
		width: 15%;
		height: 30%;
		border-radius: 50% 50% 50% 50%;
		transform: rotate(-80deg);
		z-index: -2222;
	}

	.left-feet {
		top: 85%;
		left: 25%;
		background: var(--penguin-beak, orange);
		width: 15%;
		height: 30%;
		border-radius: 50% 50% 50% 50%;
		transform: rotate(80deg);
		z-index: -2222;
	}

	.right-eye {
		top: 45%;
		left: 60%;
		background: black;
		width: 15%;
		height: 17%;
		border-radius: 50%;
	}

	.left-eye {
		top: 45%;
		left: 25%;
		background: black;
		width: 15%;
		height: 17%;
		border-radius: 50%;
	}

	.sparkle {
		top: 25%;
		left: 15%;
		background: white;
		width: 35%;
		height: 35%;
		border-radius: 50%;
	}

	.blush-right {
		top: 65%;
		left: 15%;
		background: pink;
		width: 15%;
		height: 10%;
		border-radius: 50%;
	}

	.blush-left {
		top: 65%;
		left: 70%;
		background: pink;
		width: 15%;
		height: 10%;
		border-radius: 50%;
	}

	.beak-top {
		top: 60%;
		left: 40%;
		background: var(--penguin-beak, orange);
		width: 20%;
		height: 10%;
		border-radius: 50%;
	}

	.beak-bottom {
		top: 65%;
		left: 42%;
		background: var(--penguin-beak, orange);
		width: 16%;
		height: 10%;
		border-radius: 50%;
	}

	.penguin * {
		position: absolute;
	}
</style>
<div class="penguin">
	<div class="penguin-bottom">
		<div class="right-hand"></div>
		<div class="left-hand"></div>
		<div class="right-feet"></div>
		<div class="left-feet"></div>
	</div>
	<div class="penguin-top">
		<div class="right-cheek"></div>
		<div class="left-cheek"></div>
		<div class="belly"></div>
		<div class="right-eye">
			<div class="sparkle"></div>
		</div>
		<div class="left-eye">
			<div class="sparkle"></div>
		</div>
		<div class="blush-right"></div>
		<div class="blush-left"></div>
		<div class="beak-top"></div>
		<div class="beak-bottom"></div>
	</div>
</div>

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/cascading-css-variables/

2

try moving the line of code you added to the expected location under the line
/* add code below /
and above
/ add code above */

3

Thank you, I may have found the error I had to write it like this:
–penguin-belly: pink;

1 Like