curriculum/challenges/english/blocks/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md
To see the .cat-head element, give it a linear gradient background with #5e5e5e at 85% and #45454f at 100%.
You might not notice the difference between these two colors, but they are there.
Your .cat-head selector should have a background property.
assert.match(code, /background:/)
Your background property should use the linear-gradient function.
assert.match(code, /background:\s*linear-gradient\(/)
Your linear-gradient function should set the first color to be #5e5e5e at 85%.
const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true);
const firstGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[1];
assert.equal(firstGradient,'(94,94,94)85%,');
Your linear-gradient function should set the second color to be #45454f at 100%.
const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true);
const secondGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[2];
assert.equal(secondGradient,'(69,69,79)100%)');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fCC Cat Painting</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<main>
<div class="cat-head"></div>
</main>
</body>
</html>
* {
box-sizing: border-box;
}
body {
background-color: #c9d2fc;
}
--fcc-editable-region--
.cat-head {
width: 205px;
height: 180px;
border: 1px solid #000;
border-radius: 46%;
}
--fcc-editable-region--